<template>
  <div style="width: 99%; height: 100%; background-color: #d7dee6; padding: 5px; border: 2px solid #9e9b9b">
    <el-row style="height: 87%; width: 99%; margin-top: 10px">
      <el-table
          :data="orderCompletion_table1"
          :header-cell-style="{ background: '#F5F5F5', fontSize: '24px' }"
          border
          height="810px"
          stripe
          style="width: 100%; border: 1px solid #9e9b9b"
          tooltip-effect="dark"
      >
        <el-table-column align="right" label="序号" type="index" width="80px"/>
        <!--
        [工位号]
      ,[工件编号]
      ,[工件图号]
      ,[产品名称]
      ,[操作者1]
      ,[操作者2]
      ,[到达时间]
      ,[离开时间]
      ,[在线时间]
      ,[是否合格] -->
        <el-table-column align="center" label="工件编号">
          <template slot-scope="scope">
            {{ scope.row.工件编号 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="工件图号">
          <template slot-scope="scope">
            {{ scope.row.工件图号 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="产品名称">
          <template slot-scope="scope">
            {{ scope.row.产品名称 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作者1" width="110px">
          <template slot-scope="scope">
            {{ scope.row.操作者1 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作者2" width="110px">
          <template slot-scope="scope">
            {{ scope.row.操作者2 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="到达时间" width="110px">
          <template slot-scope="scope">
            {{ getTimeStr(scope.row.到达时间) }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="离开时间" width="110px">
          <template slot-scope="scope">
            {{ getTimeStr(scope.row.离开时间) }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="在线时间(秒)" width="170px">
          <template slot-scope="scope">
            {{ scope.row.在线时间 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="是否合格" width="110px">
          <template slot-scope="scope">
            <i v-if="scope.row.是否合格"><span style="font-size: x-large;font-weight: 700;color: #67c23a">OK</span></i>
            <i v-else><span style="font-size: x-large;font-weight: 700;color: #ff0000">NG</span></i>
          </template>
        </el-table-column>
        <!-- <el-table-column align="center" label="查看" width="100px">
          <template slot-scope="scope">
            <el-button size="mini" style="font-size: large" type="text" @click="choose(scope.row)">
              质量数据
            </el-button>
          </template>
        </el-table-column> -->
      </el-table>
    </el-row>
    <el-dialog
        :append-to-body="true"
        :title="title"
        :visible.sync="dialogFormVisible1"
        center
        class="qualityDataDialog"
        style="text-align: center"
        width="650px"
    >
      <div style="text-align: center">
        <div style="background-color: #e4e4e4;width: 100%; height: 365px">
          <el-table
              :data="qualityData"
              :row-class-name="tableRowClassName"
              border
              max-height="365px"
              size="small"
              style="width: 100%; height: 100%; font-size: 20px; color: #000; border: 1px solid #9e9b9b"
          >
            <el-table-column align="center" label="名称" prop="名称" width="100"/>
            <el-table-column align="center" label="类型" prop="测量项目1"/>
            <el-table-column align="center" label="测量项目" prop="测量项目2"/>
          </el-table>
        </div>
        <div style="margin-top: 10px">
          <el-button
              class="el-icon-close"
              style="width: 100px;height: 40px;"
              type="success"
              @click="cancel()"
          >
            关闭
          </el-button>
        </div>
      </div>
    </el-dialog>
  </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: ''
      },
      // 质量数据列表
      qualityData: [],
      dialogFormVisible1: false,
      form1: {
        订单号: '',
        产品型号: '',
        零件号: '',
        计划数量: '',
        完成数量: '',
        计划时间: '',
        状态: ''
      },
      rules: {
        排序: [{ required: true, message: '序号为空', trigger: 'change' }],
        订单号: [{ required: true, message: '订单号为空', trigger: 'change' }],
        产品机型: [{ required: true, message: '产品机型为空', trigger: 'change' }],
        零件号: [{ required: true, message: '机型代码为空', trigger: 'change' }],
        计划数量: [{ required: true, message: '计划数量为空', trigger: 'change' }],
        完成数量: [{ required: true, message: '完成数量为空', trigger: 'change' }],
        计划时间: [{ required: true, message: '计划时间为空', trigger: 'change' }],
        状态: [{ required: true, message: '状态为空', trigger: 'change' }]
      }
    }
  },
  created() {
    this.getTable()
  },
  // watch: {
  //   orderCompletion_table: {
  //     handler(newValue, oldName) {
  //       this.orderCompletion_table1 = newValue
  //     },
  //     immediate: true,
  //     deep: true
  //   }

  // },
  // computed: {
  //   ...mapGetters([
  //     'orderCompletion_table'
  //   ])
  // },
  methods: {
    tableRowClassName({ row }) {
      if (row.合格标志 === '1') {
        return 'green'
      } else {
        return 'red'
      }
    },
    // 将年月日时分秒转为 时分秒 2025-04-25 11:02:55
    getTimeStr(dateStr) {
      const spDate = dateStr.split(' ')
      if (spDate.length > 1) {
        return spDate[1]
      } else {
        return dateStr
      }
    },
    getQualityData(row) {
      const param = []
      param[0] = ['工位号', this.$store.state.station.stationName]
      param[1] = ['发动机号', row.发动机号]
      const Data = this.CreateData('11', '测量数据合格_查询', param)
      this.ExecDatabase(Data).then(response => {
        this.qualityData = response.data
      })
    },
    changeRadio() {
      if (this.checked) {
        this.intdex = false
        if (this.xianshou === 1) {
          this.count = true
        }
      } else if (!this.checked) {
        this.intdex = true
        if (this.xianshou === 1) {
          this.count = false
        }
      }
    },
    cancel() {
      this.dialogFormVisible1 = false
    },
    confirm11(form) {
      const param = []
      param[0] = ['工位号', this.$store.state.station.stationName]
      param[1] = ['订单号', this.form1.订单号]
      const Data2 = this.CreateData('12', '测量数据工位_监控系统_订单号_增加', param)
      this.ExecDatabase(Data2).then(response => {
        if (response.data[0].result === '1') {
          this.$notify.success({
            title: '提示',
            message: '订单选择成功！',
            position: 'bottom-right',
            offset: 170
          })
        } else {
          this.$message.error('订单选择失败')
        }
        this.getTable()
      })
      // this.publication.topic = window.g.mqttPublishTopic
      // this.publication.payload  = 'WEB|SetMoby|' + this.$store.state.station.stationName + '|' + '1'
      // const result = window.g.mqttClient.doPublish(this.publication)
      // if (result === true) {
      //   this.$notify.success({
      //     title: '提示',
      //     message: '订单增加传递成功！',
      //     position: 'bottom-right',
      //     offset: 170
      //   })
      // } else {
      //   this.$notify.error({
      //     title: '提示',
      //     message: '订单增加传递失败！',
      //     position: 'bottom-right',
      //     offset: 170
      //   })
      // }
      this.dialogFormVisible1 = false
    },
    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
      })
    },
    choose(row) {
      if (this.qualityData) {
        this.qualityData = []
      }
      this.getQualityData(row)
      this.dialogFormVisible1 = true
    }
  }
}
</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--striped .el-table__body tr.el-table__row--striped td {
  background-color: #cedcf3;
}

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

::v-deep.qualityDataDialog .el-table th.el-table__cell > .cell {
  font-size: 16px;
  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>
