<template>
  <el-card>
    <div>
      <span class="show-text">设备:</span>
      <el-select v-model="clickOpName" clearable filterable placeholder="请选择工位号"
        style="width: 200px;margin-right: 10px">
        <el-option v-for="item in OpNameList" :key="item.value" :label="item.label" :value="item.value" size="mini" />
      </el-select>
      <el-button :disabled="loading" icon="el-icon-search" plain style="margin-left: 10px" type="primary"
        @click="getTable()">查询
      </el-button>
      <div class="table" style="margin-top: 10px">
        <el-table v-loading="loading" :data="tableData" border element-loading-background="rgba(0, 0, 0, 0.2)"
          element-loading-spinner="el-icon-loading" element-loading-text="数据加载中" height="75vh" size="mini" stripe
          tooltip-effect="dark">
          <el-table-column align="center" label="序号" type="index" width="80" />
          <el-table-column align="center" label="阀门名称">
            <template slot-scope="scope">
              {{ scope.row.TagName }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="读取地址">
            <template slot-scope="scope">
              {{ scope.row.DbName + ' ' + scope.row.变量地址 + scope.row.变量其它 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="写入地址">
            <template slot-scope="scope">
              {{ scope.row.写入DbName + ' ' + scope.row.写入变量地址 + scope.row.写入变量其它 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="写入状态" width="230">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.写入值" active-color="#87d068" active-text="开" active-value="1"
                inactive-color="#ec1212" inactive-text="关" inactive-value="0" />
              <el-tooltip class="item" effect="dark" content="写入定义状态" placement="top">
                <el-button plain type="primary" style="padding: 0;margin: 0 0 0 10px;width: 25px;height: 25px;" icon="el-icon-edit"
                circle @click="statusChange(scope.row)"></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column align="center" label="反馈状态" width="90">
            <template slot-scope="scope">
              <div :style="{ backgroundColor: scope.row.值 == 1 ? '#87d068' : '#ec1212' }" class="backStatus" />
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </el-card>
</template>

<script>

export default {
  data() {
    return {
      OpNameList: [],
      clickOpName: '',
      loading: false,
      tableData: [],
      value: 100
    }
  },
  created() {
    // this.getOpName()
    // 弹窗输入正确密码 才能进入该页面，否则跳转回首页
    this.$prompt('请输入登陆密码校验后访问此模块', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      inputType: 'password' // 将输入框类型设置为密码框
    }).then(({ value }) => {
      var param = []
      param.push(['personnel_Number', this.$store.state.user.id])
      param.push(['personnel_Password', value])
      var Data = this.CreateData('11', 'WEB_模块查询_人员验证', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length !== 0) {
          if (response.data[0].result === 1) {
            this.getOpName()
            this.$message.success(response.data[0].msg)
          } else {
            this.$message.error(response.data[0].msg)
            this.$router.push('/')
          }
        }
      })
    }).catch(() => {
      this.$message({
        type: 'info',
        message: '取消登入'
      })
      this.$router.push('/')
    })
  },
  methods: {
    // 查询工位号
    getOpName() {
      var param = []
      param.push(['Personnel_Number', this.$store.state.user.id])
      var Data = this.CreateData('11', '工位与名称_查询', param)
      this.ExecDatabase(Data).then(response => {
        this.OpNameList = []
        for (const item of response.data) {
          this.OpNameList.push({ label: item.公司 + item.工位号, value: item.工位号 })
        }
        if (this.OpNameList.length > 0) {
          this.clickOpName = this.OpNameList[0].value
          this.getTable()
        }
      })
    },
    statusChange(row) {
      this.WebApi_WriteDevice([{ TagId: row.写入TagID, TagValue: row.写入值 }]).then(isOk => {
        if (isOk === 'OK') {
          this.getTable()
          this.$message({
            type: 'success',
            message: '修改成功!'
          })
        } else {
          this.$message.error('修改失败！' + isOk)
        }
      })
    },
    getTable() {
      this.tableData = []
      this.loading = true
      var param = []
      param.push(['工位号', this.clickOpName])
      param.push(['信号类型', '测试执行'])
      var Data = this.CreateData('11', 'WEB_基础_参数画面_各模块_查询', param)
      this.ExecDatabase(Data).then(response => {
        this.loading = false
        if (response.data.length !== 0) {
          // 处理一下，分别得出写入状态 与 反馈状态 用TagID 与写入 TagID
          let ReqList = []
          for (let item of response.data) {
            ReqList.push({ TagID: item.TagID })
            ReqList.push({ TagID: item.写入TagID })
          }
          this.WebApi_ReadDevice(ReqList).then(tagIdList => {
            for (let item of tagIdList) {
              for (let item2 of response.data) {
                if (item.TagID === item2.TagID) {
                  item2.值 = item.值
                }
                if (item.TagID === item2.写入TagID) {
                  item2.写入值 = item.值
                }
              }
            }
            this.tableData = response.data
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.table {
  width: 50%;
  background-color: #fff;
}

.backStatus {
  width: 22px;
  height: 22px;
  border: 2px solid #9f9f9f;
  box-shadow: 0 0 3px #787878;
  border-radius: 50%;
  margin: 0 auto;
}
</style>
