<template>
  <div style="width: 99%; height: 100%; background-color: #d7dee6; padding: 5px; border: 2px solid #9e9b9b">
    <el-row style="height: 97%; width: 100%;">
      <!--<div-->
      <!--class="top-now-barCode"-->
      <!--style="height: 50px;width: 100%;background-color:#f5f5f5;-->
      <!--margin-bottom: 5px;border: 1px solid #9e9b9b;font-size: 25px;color: #2f2f2f;font-weight: 700;line-height: 50px;display: flex">-->
      <!--  <div class="left" style="width: 30%;text-align: center;letter-spacing:2px">当前铭牌打印信息:</div>-->
      <!--  <div class="right" style="width: 69%;text-align: left;font-size: 25px;padding-left: 35px">{{nowBarCode}}</div>-->
      <!--</div>-->
      <el-table
          :data="orderCompletion_table1"
          :header-cell-style="{ background: '#F5F5F5', fontSize: '24px' }"
          border
          height="840px"
          stripe
          style="width: 100%; border: 1px solid #9e9b9b"
          tooltip-effect="dark"
      >
        <el-table-column align="right" label="序号" type="index" width="80px"/>
        <el-table-column align="center" label="订单号" width="190">
          <template slot-scope="scope">
            <span style="font-size: 25px;">{{ scope.row.订单号 }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="总成号" width="380">
          <template slot-scope="scope">
            {{ scope.row.主线总成号 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="物料号">
          <template slot-scope="scope">
            <span style="font-size: 25px;font-weight: 700">{{ scope.row.分线总成号 }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="记录时间" width="250">
          <template slot-scope="scope">
            {{ scope.row.操作时间 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="150">
          <template slot-scope="scope">
            <el-button type="text" @click="updateCode(scope.row.ID,scope.row.分线总成号)">修改</el-button>
            <el-button style="color: red" type="text" @click="deleteCode(scope.row.ID)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      checked: false,
      Type: [{ label: '', value: '' }],
      count: true,
      text1: '正常生产订单',
      text2: '无订单生产',
      intdex: true,
      xianshou: '',
      orderCompletion_table1: [],
      PersonaSex: [],
      jixingName: [],
      Sex: [],
      title: '',
      publication: {
        topic: '',
        qos: 0,
        payload: ''
      },
      nowBarCode: '',
      // 质量数据列表
      qualityData: [],
      dialogFormVisible1: false,
      form1: {
        订单号: '',
        产品型号: '',
        零件号: '',
        计划数量: '',
        完成数量: '',
        计划时间: '',
        状态: ''
      }
    }
  },
  created() {
    this.getTable()
    // 获取实时数据
    this.againGetNowData()
  },

  computed: {
    ...mapGetters([
      'tempDataObject'
    ])
  },
  watch: {
    // 监听变量数据的某个对象
    'tempDataObject.BindRecordRefresh': {
      handler(newV, oldV) {
        if (newV) {
          this.getTable()
        }
      },
      deep: true
    }
  },
  methods: {
    // cellClassName({ row, column }) {
    //   //
    //   console.log('cellClassName2', row)
    //   if (row.校验状态 === 2) {
    //     console.log(2222)
    //     return 'check-ok'
    //   } else if (row.校验状态 === 3) {
    //     console.log(3333)
    //     return 'check-nok'
    //   }
    //   return
    // },
    updateCode(ID, barCode) {
      this.$prompt('请输入新码值值', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValue: barCode
      }).then(({ value }) => {
        const param = []
        param[0] = ['ID', ID]
        param[1] = ['值', value]
        const Data = this.CreateData('11', '北汽福田_总分线对应表_修改', param)
        this.ExecDatabase(Data).then(response => {
          if (response.data[0].result == 1) {
            this.$message.success('修改成功！')
            this.getTable()
          } else {
            this.$message.error('修改失败！')
          }
        })
      })
    },
    deleteCode(ID) {
      // 二次确认是否删除
      this.$confirm('是否删除该条绑定记录？ 删除后无法恢复', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const param = []
        param[0] = ['ID', ID]
        const Data = this.CreateData('11', '北汽福田_总分线对应表_删除', param)
        this.ExecDatabase(Data).then(response => {
          if (response.data[0].result == 1) {
            this.$message.success('删除成功！')
            this.getTable()
          } else {
            this.$message.error('删除失败！')
          }
        })
      })
    },
    // 通知服务器获取实时显示数据
    againGetNowData() {
      this.publication.topic = window.g.mqttPublishTopic
      this.publication.payload = 'WEB|againGetNowData|' + this.$store.state.station.stationName + '|' + '1'
      window.g.mqttClient.doPublish(this.publication)
    },
    getTable() {
      const param = []
      param[0] = ['工位号', this.$store.state.station.stationName]
      const Data = this.CreateData('11', '北汽福田_总分线对应表_工位_查询', param)
      this.ExecDatabase(Data).then(response => {
        this.orderCompletion_table1 = response.data
      })
    }
  }
}
</script>

<style scoped>
/deep/ .el-dialog__header {
  background-color: #d7dee6;
}

/deep/ .el-dialog__body {
  background-color: #d7dee6;
}

/deep/ .el-dialog__title {
  font-size: x-large;
}

/deep/ .cell {
  font-size: large;
  color: black;
}

::v-deep.el-table .check-ok {
  background-color: #98ffa2 !important;
}

::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
  background-color: #cedcf3;
}

::v-deep.el-table th.el-table__cell > .cell {
  font-size: 22px;
  color: #2f2f2f;
}

::v-deep.qualityDataDialog .el-table th.el-table__cell > .cell {
  font-size: 18px;
  color: #2f2f2f;
}

::v-deep.el-table .green {
  background: rgba(0, 128, 0, 0.7) !important;
}

::v-deep.el-table .red {
  background: rgba(255, 0, 0, 0.7) !important;
}
</style>
