<template>
  <div style="width: 100%; height: 100%; background-color: #d7dee6">
    <div style="height: 94%;padding: 0px 3px 4px 3px">
      <el-table
          :data="orderCompletion_table1"
          :header-cell-style="{background:'#f9fbfe',padding: '3px 0', color: '#0b4db0'}"
          style="width: 100%; border-radius: 5px;"
          stripe
          height="100%"
          tooltip-effect="dark"
      >
        <el-table-column type="index" align="center" label="#" width="40px" />
        <el-table-column align="center" label="订单号" width="100">
          <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="型号" width="100px">
          <template slot-scope="scope">
            {{ scope.row.机型 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="进站时间" width="150px">
          <template slot-scope="scope">
            {{ scope.row.到达时间 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="离站时间" width="150px">
          <template slot-scope="scope">
            {{ scope.row.离开时间 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="班次" width="70px">
          <template slot-scope="scope">
            {{ scope.row.班次描述 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="节拍(s)" width="90px">
          <template slot-scope="scope">
            {{ scope.row.在线时间 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="结果"  width="60px">
          <template slot-scope="scope">
            <span v-if="parseInt(scope.row.是否合格) === 1" class="clickable-underline" style="color: #00893d" @click="choose(scope.row)">OK</span>
            <span v-else class="clickable-underline" style="color: #ff0000" @click="choose(scope.row)">NG</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="height: 5.4%;display: flex;align-items: center;justify-content: center;background-color: #fff;border-radius: 5px;margin: 0 5px">
      <el-col :span="6" class="totalInfo">
        <img :src="require('@/assets/image/passOn.png')" width="20px" />
        <span>今日过站：{{passCount}}</span>
      </el-col>
      <el-col :span="6" class="totalInfo">
        <img :src="require('@/assets/image/passOK.png')" width="20px" />
        <span>OK：{{ok}}</span>
      </el-col>
      <el-col :span="6" class="totalInfo">
        <img :src="require('@/assets/image/passNG.png')" width="20px" />
        <span>NG：{{ng}}</span>
      </el-col>
      <el-col :span="6" class="totalInfo">
        <img :src="require('@/assets/image/passRate.png')" width="20px" />
        <span>合格率：{{rate}}%</span>
      </el-col>
    </div>
    <el-dialog
      title="质量数据"
      :append-to-body="true"
      :visible.sync="dialogFormVisible1"
      center
      width="800px"
      class="qualityDataDialog"
      style="text-align: center"
    >
      <div style="text-align: center">
        <div style="background-color: #e4e4e4;width: 100%; height: 365px">
          <el-table
            :data="qualityData"
            :header-cell-style="{background:'#f9fbfe',padding: '3px 0', color: '#0b4db0'}"
            :row-class-name="tableRowClassName"
            style="width: 100%; height: 100%;border-radius: 5px"
            height="100%"
            size="mini"
            tooltip-effect="dark"
          >
            <el-table-column align="center" label="#" width="60px">
              <template #default="scope">
                {{ scope.$index+1 }}
              </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="测量值" width="100px">
              <template slot-scope="scope">
                {{ scope.row.测量值 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="单位" width="80px">
              <template slot-scope="scope">
                {{ scope.row.测量单位 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="上限" width="80px">
              <template slot-scope="scope">
                {{ scope.row.上限值 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="下限" width="80px">
              <template slot-scope="scope">
                {{ scope.row.下限值 }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="结果" width="80px">
              <template slot-scope="scope">
                <span v-if="parseInt(scope.row.合格标志) === 1" style="color: #00893d">OK</span>
                <span v-else-if="parseInt(scope.row.合格标志) === 2" style="color: #ff0000">NG</span>
                <span v-else style="color: #ffcc00">NO</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button class="el-icon-close" size="mini" type="info" @click="cancel()">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      orderCompletion_table1: [],
      passCount: 0,
      ng: 0,
      ok: 0,
      rate: 0,
      dialogFormVisible1: false,
      // 质量数据列表
      qualityData: []
    }
  },
  created() {
    this.getTable()
    this.getTableAll()
  },
  mounted() {
  },
  methods: {
    tableRowClassName({ row }) {
      if (row.合格标志 === '1') {
        return 'green'
      } else {
        return 'red'
      }
    },
    getQualityData(row) {
      const param = []
      param[0] = ['工位号', this.$store.state.station.stationNumber]
      param[1] = ['发动机号', row.发动机号]
      const Data = this.CreateData('11', '测量数据合格_查询', param)
      this.ExecDatabase(Data).then(response => {
        this.qualityData = response.data
        this.dialogFormVisible1 = true
      })
    },
    cancel() {
      this.dialogFormVisible1 = false
    },
    getTable() {
      const param = []
      param[0] = ['工位号', this.$store.state.station.stationNumber]
      const Data = this.CreateData('11', '测量数据发动机在线状态_工位数据_查询', param)
      this.ExecDatabase(Data).then(response => {
        this.orderCompletion_table1 = response.data
      })
    },
    getTableAll() {
      const param = []
      param[0] = ['工位号', this.$store.state.station.stationNumber]
      const Data = this.CreateData('11', '测量数据发动机在线状态_工位数据_综合_查询', param)
      this.ExecDatabase(Data).then(response => {
        console.log(response.data)
        if (response.data.length > 0) {
          this.passCount = response.data[0]['passCount']
          this.ng = response.data[0]['ng']
          this.ok = response.data[0]['ok']
          this.rate = response.data[0]['rate']
        }
      })
    },
    choose(row) {
      if (this.qualityData) {
        this.qualityData = []
      }
      this.getQualityData(row)
    }
  }
}
</script>

<style scoped>
::v-deep.el-table .el-table__cell {
  padding: 3px 0;
}
::v-deep.el-table .el-table__row .cell {
  font-size: 0.8rem !important;
}

::v-deep.el-table th.el-table__cell > .cell {
  font-size: 0.9rem;
}
.totalInfo {
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bolder;
  span {
    margin-left: 5px;
  }
}
.clickable-underline {
  display: inline-block;
  color: #1890ff;
  cursor: pointer;
  border-bottom: 1px solid currentColor; /* 使用文字颜色作为下划线 */
  padding-bottom: 0px; /* 下划线与文字间距 */
}

/* 悬停动画效果 */
.clickable-underline:hover {
  color: #40a9ff;
  font-weight: bolder;
  border-bottom-width: 2px; /* 悬停时加粗下划线 */
}
</style>
