<template>
  <div>
    <el-card>
      <el-col :span="6">
        <div style="padding: 14px 0">
          <span>PLC2硬件数：</span>
          <span :style="{color: PlcStatusColor}" style="width: 190px;margin-right: 10px">{{ hardCount }}</span>
        </div>
        <div style="margin-top: 10px">
          <span>工位数量：</span>
          <span style="color: #00cb57">{{ currentPlcStatus.OpCount }}</span>
          <el-button :disabled="loading" icon="el-icon-refresh" type="primary" style="width: 100px" @click="searchOpNameList">更新</el-button>
        </div>
        <el-table
          v-loading="loading"
          :data="tableDataOpname"
          :header-row-style= "{fontSize: '18px',fontFamily:'MiSans Demibold',height: '64px',backgroundColor:'#fff'}"
          :row-style="isRed"
          element-loading-text="数据加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.2)"
          stripe
          tooltip-effect="dark"
          style="width: 100%;margin-top: 5px"
          height="705"
          border
          size="mini"
          @row-click="selectOpName">
          <el-table-column type="index" label=" " align="center" width="80"/>
          <el-table-column align="center" sortable label="工位号" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.opName }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="17" style="margin-left: 16px">
        <div>
          <span>地址：</span>
          <el-input v-model="currentTagInfo.adr" readonly style="width: 230px;margin-right: 10px"/>
          <span>TagId：</span>
          <el-input v-model="currentTagInfo.tagid" readonly style="width: 230px;margin-right: 10px"/>
          <el-button :disabled="currentTagInfo.tagid === ''" type="primary" style="width: 100px" @click="readTagId">读取</el-button>
        </div>
        <div style="margin-top: 10px">
          <span>名称：</span>
          <el-input v-model="currentTagInfo.item" readonly style="width: 230px;margin-right: 10px"/>
          <span>&nbsp;&nbsp;&nbsp;&nbsp;值：</span>
          <el-input v-model="currentTagInfo.tagvalue" style="width: 230px;margin-right: 10px"/>
          <el-button :disabled="currentTagInfo.tagid === ''" type="success" style="width: 100px" @click="writeTagId">写入</el-button>
        </div>
        <el-table
          v-loading="loading1"
          :data="tableDataAllTag"
          :header-row-style= "{fontSize: '18px',fontFamily:'MiSans Demibold',height: '64px',backgroundColor:'#fff'}"
          :row-style="isRed2"
          element-loading-text="数据加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.2)"
          stripe
          tooltip-effect="dark"
          style="width: 1130px;margin-top: 5px"
          height="705"
          border
          size="mini"
          @row-click="selectTagId">
          <el-table-column :label="allTagCount" type="index" align="center" width="80"/>
          <el-table-column align="left" sortable label="地址" width="200" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.adr }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" sortable label="测量项目" min-width="350" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.item }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="值" min-width="150" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.tagvalue }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" sortable label="TagId" min-width="300" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.tagid }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'PLC2',
  data() {
    return {
      currentPlcStatus: {
        TagCount: 0,
        TagMonitorCount: 0,
        OpCount: 0,
        PlcOnLineCount: 0,
        PlcCount: 0
      },
      hardCount: '共0个，在线0个',
      PlcStatusColor: 'red',
      currentTagInfo: {
        adr: '',
        item: '',
        tagvalue: '',
        tagid: ''
      },
      AlarmName: '', // 姓名
      loading: false,
      loading1: false,
      allTagCount: '0',
      selectedArrData: [],
      selectedArrData1: [],
      tableDataOpname: [],
      tableDataAllTag: []
    }
  },
  created() {
    this.readPLC_Status()
    this.searchOpNameList()
  },
  methods: {
    // 所有OPname
    searchOpNameList() {
      this.readPLC_Status()
      this.loading = true
      this.tableDataOpname = []
      const url = '/ReadOpNameList'
      const params = {}
      this.ExecPlc_2(url, params).then(res => {
        for (const info of res.data) {
          this.tableDataOpname.push({
            opName: info
          })
        }
        this.loading = false
      }).catch(res => {
        this.$message.error(res.message)
        this.loading = false
      })
    },
    // 选择OPname,查询当前工位所有Tag
    selectOpName(row) {
      this.allTagCount = '0'
      this.selectedArrData = [row]
      this.loading1 = true
      this.tableDataAllTag = []
      const url = '/ReadAllTagValue'
      const params = {
        opname: row.opName
      }
      this.ExecPlc_2(url, params).then(res => {
        this.tableDataAllTag = res.data
        this.allTagCount = `${this.tableDataAllTag.length}`
        this.loading1 = false
      }).catch(res => {
        this.$message.error(res.message)
        this.loading1 = false
      })
    },
    // 选择TagId,显示信息
    selectTagId(row) {
      this.selectedArrData1 = [row]
      this.currentTagInfo = {
        adr: '',
        item: '',
        tagvalue: '',
        tagid: ''
      }
      this.currentTagInfo = {
        adr: row.adr,
        item: row.item,
        tagvalue: row.tagvalue,
        tagid: row.tagid
      }
    },
    // tagid 读取PLC值
    readTagId() {
      this.currentTagInfo.tagvalue = ''
      this.readTagValue(this.currentTagInfo.tagid)
    },
    readTagValue(tagid) {
      setTimeout(() => {
        const url = '/ReadPLCList'
        const params = {
          tagID: `['${tagid}']`
        }
        this.ExecPlc_2(url, params).then(res => {
          this.currentTagInfo.tagvalue = res.data[0].TagValue
          for (const info of this.tableDataAllTag) {
            if (info.tagid === res.data[0].TagID) {
              info.tagvalue = res.data[0].TagValue
            }
          }
        }).catch(res => {
          this.$message.error(res.message)
        })
      }, 1000)
    },
    // tagid 写PLC
    writeTagId() {
      const url = '/WritePLC'
      const params = {
        tagID: this.currentTagInfo.tagid,
        tagValue: this.currentTagInfo.tagvalue
      }
      this.ExecPlc_2(url, params).then(res => {
        const result = res.data.TagValue.toLowerCase()
        switch (result) {
          case 'true':
          case '1':
          case 1:
            this.$message.success('写入成功！')
            break
          default:
            this.$message.error('写入失败！')
        }
        this.readTagValue(this.currentTagInfo.tagid)
      }).catch(res => {
        this.$message.error(res.message)
      })
    },
    readPLC_Status() {
      const url = '/ReadPLC_Status'
      const params = {}
      this.ExecPlc_2(url, params).then(res => {
        this.currentPlcStatus.TagMonitorCount = res.data.TagMonitorCount
        this.currentPlcStatus.TagCount = res.data.TagCount
        this.currentPlcStatus.OpCount = res.data.OpCount
        this.currentPlcStatus.PlcOnLineCount = res.data.PlcOnLineCount
        this.currentPlcStatus.PlcCount = res.data.PlcCount
        this.hardCount = `共${this.currentPlcStatus.PlcCount}个，在线${this.currentPlcStatus.PlcOnLineCount}个`
        if (this.currentPlcStatus.PlcCount === this.currentPlcStatus.PlcOnLineCount) {
          this.PlcStatusColor = 'green'
        }
      }).catch(res => {
        this.$message.error(res.message)
      })
    },
    // opname 选中行
    isRed({ row }) {
      const checkIdList = this.selectedArrData.map((item) => item.opName)
      if (checkIdList.includes(row.opName)) {
        return {
          color: '#4d77d6',
          fontSize: '16px',
          fontFamily: 'MiSans Regular',
          height: '64px'
        }
      } else {
        return {
          fontSize: '16px',
          fontFamily: 'MiSans Regular',
          height: '64px'
        }
      }
    },
    // tagid 选中行
    isRed2({ row }) {
      const checkIdList = this.selectedArrData1.map((item) => item.tagid)
      if (checkIdList.includes(row.tagid)) {
        return {
          color: '#4d77d6',
          fontSize: '16px',
          fontFamily: 'MiSans Regular',
          height: '64px'
        }
      } else {
        return {
          fontSize: '16px',
          fontFamily: 'MiSans Regular',
          height: '64px'
        }
      }
    }
  }
}
</script>

<style scoped>
  .send-person {
    font-size: 22px;
    font-family: "MiSans Demibold",serif;
    text-align: center;
    margin-bottom: 12px;
  }
</style>
