<template>
  <div style="height: 100%; width: 99%; background-color: #d7dee6; border: 2px solid #9e9b9b; margin-left: 4px">
    <el-row style="height: 100%; width: 100%; padding: 10px">
      <el-col style="width: 49%; height: 98%; border: 1px solid black;">
        <div v-for="(item) in station" :id="item.工位号" :key="item.工位号" class="div2" @click="button1(item.工位号)">
          <span style="font-size: x-large;"> {{ item.工位号 }}</span>
        </div>
      </el-col>
      <el-col style="width: 51%; height: 98%;">
        <el-row style="width: 100%; height: 49%;margin-left: 10px">
          <el-table
            :data="Qualitylnquiry_table1"
            :header-cell-style="{ background: '#F5F5F5' }"
            style="width: 99%; border: 1px solid black; font-size: large"
            height="99%"
            border
            class="tables"
            tooltip-effect="dark"
            :row-class-name="tableRowClassName"
          >
            <el-table-column align="center" label="工位号" width="120px">
              <template #default="scope">
                {{ scope.row.工位号 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="测量位置">
              <template #default="scope">
                {{ scope.row.测量位置 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="测量数据" width="120px">
              <template #default="scope">
                {{ scope.row.测量值 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="测量名称">
              <template #default="scope">
                {{ scope.row.测量项目 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="是否合格" width="120px">
              <template #default="scope">
                {{ scope.row.合格标志 }}
              </template>
            </el-table-column>
          </el-table>
        </el-row>
        <el-row style="width: 100%; height: 49%; margin-left: 10px; margin-top: 15px">
          <el-table
            :data="Qualitylnquiry_table2"
            :header-cell-style="{ background: '#f5f5f5' }"
            style="margin-top: 5px; width: 99%; border: 1px solid black; font-size: large"
            height="99%"
            border
            class="tables"
            tooltip-effect="dark"
          >
            <el-table-column align="center" label="工位号" width="90px">
              <template #default="scope">
                {{ scope.row.工位号 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="零件图号" width="140">
              <template #default="scope">
                {{ scope.row.零件图号 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="零件名称" width="170">
              <template #default="scope">
                {{ scope.row.零件名称 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="数量" width="78px">
              <template #default="scope">
                {{ scope.row.零件数量 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="批次号" width="90">
              <template #default="scope">
                {{ scope.row.批次号 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="物料条码">
              <template #default="scope">
                {{ scope.row.物料条码 }}
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      Qualitylnquiry_table1: [],
      Qualitylnquiry_table2: [],
      station: [],
      station1: '',
      station2: '',
      OKif: ''
    }
  },
  created() {
    this.getstation()
  },
  methods: {
    tableRowClassName({ row }) {
      if (row.合格标志 === null) {
        return 'success-row'
      }
      return ''
    },
    show() {
      for (let i = 0; i < this.station.length; i++) {
        if (this.station[i].合格标志 === 'OK' && this.station[i].是否有物料 > 0) {
          document.getElementById(this.station[i].工位号).style.background = 'linear-gradient(to right, #67c23a,pink)'
          this.station[i].color = 1
        } else if (this.station[i].合格标志 !== 'OK' && this.station[i].是否有物料 > 0) {
          document.getElementById(this.station[i].工位号).style.background = 'pink'
          this.station[i].color = 'pink'
        } else if (this.station[i].合格标志 === 'OK' && this.station[i].是否有物料 <= 0) {
          document.getElementById(this.station[i].工位号).style.background = '#67c23a'
          this.station[i].color = '#67c23a'
        } else {
          document.getElementById(this.station[i].工位号).style.background = 'white'
          this.station[i].color = 'white'
        }
      }
    },
    button1(sta) {
      this.station2 = sta
      for (const fr of this.station) {
        if (fr.工位号 === this.station2) {
          document.getElementById(fr.工位号).style.background = 'cornflowerblue'
        } else {
          if (fr.color === 1) {
            document.getElementById(fr.工位号).style.background = 'linear-gradient(to right, #67c23a,pink)'
          } else {
            document.getElementById(fr.工位号).style.background = fr.color
          }
        }
      }
      const param = []
      param[0] = ['工位号', this.$store.state.station.stationName]
      param[1] = ['查询工位号', this.station2]
      const Data = this.CreateData('11', '显示物料数据_工位数据_查询', param)
      this.ExecDatabase(Data).then(response => {
        this.Qualitylnquiry_table2 = response.data
      })
      const Data1 = this.CreateData('11', '显示测量数据_工位数据_查询', param)
      this.ExecDatabase(Data1).then(response => {
        this.Qualitylnquiry_table1 = response.data
      })
    },
    getstation() {
      const param = []
      param[0] = ['工位号', this.$store.state.station.stationName]
      // console.log('m_Command ShowMoby_Resources', this.$store.state.station.engineValue.EngineID)
      const Data = this.CreateData('11', '显示测量数据_工位号_查询', param)
      this.ExecDatabase(Data).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.station.push({
            工位号: response.data[i].工位号,
            是否有物料: response.data[i].是否有物料,
            合格标志: response.data[i].合格标志,
            color: ''
          })
        }
        setTimeout(() => {
          this.show()
        }, (100))
      })
    }
  }
}
</script>
<style scoped>
.div2 {
  width: 23%;
  height: 80px;
  border: 1px solid black;
  margin-left: 10px;
  margin-top: 10px;
  float: left;
  text-align: center;
  line-height: 70px;
}

::v-deep.el-table .success-row {
  background: red;
  color: white;
}

::v-deep.cell {
  font-size: large;
}

::v-deep.tables tbody tr:hover>td {
  background-color: unset !important;
}

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