<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' }"
        style="width: 100%; border: 1px solid #9e9b9b"
        stripe
        border
        height="810px"
        tooltip-effect="dark"
      >
        <el-table-column type="index" align="right" label="序号" width="80px" />
        <!--
        工位号,
        订单号,
        机型代码,
        机型,
        发动机号,
        托盘编号,
        离开时间,
        IsOK -->
        <el-table-column align="center" label="订单号">
          <template slot-scope="scope">
            {{ scope.row.订单号 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="总成号" width="400">
          <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="完成时间" min-width="120px">
          <template slot-scope="scope">
            {{ scope.row.离开时间 }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="是否合格">
          <template slot-scope="scope">
            <i v-if="scope.row.是否合格 == 1"><span style="font-size: x-large;">√</span></i>
            <span v-else style="font-size: x-large;color: red;font-size: 30px;font-weight: 700">×</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="查看">
          <template slot-scope="scope">
            <el-button v-if="$store.state.station.stationName == 'J07MA115' || $store.state.station.stationName == 'J07ET055'" type="text" size="mini" style="font-size: large" @click="backWorkChoose(scope.row)">
              返修数据
            </el-button>
            <el-button v-else type="text" size="mini" style="font-size: large" @click="choose(scope.row)">
              质量数据
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-dialog
      :title="title"
      :append-to-body="true"
      :visible.sync="dialogFormVisible1"
      center
      width="650px"
      class="qualityDataDialog"
      style="text-align: center"
    >
      <div style="text-align: center">
        <div style="background-color: #e4e4e4;width: 100%; height: 365px">
          <el-table
            :data="qualityData"
            border
            size="small"
            :row-class-name="tableRowClassName"
            max-height="365px"
            style="width: 100%; height: 100%; font-size: 20px; color: #000; border: 1px solid #9e9b9b"
          >
            <el-table-column prop="名称" :label="qualityDataHeade2[7]" align="center" width="100" />
            <el-table-column prop="测量项目1" :label="qualityDataHeade2[8]" align="center" />
            <el-table-column prop="测量项目2" align="center" :label="qualityDataHeade2[9]" />
          </el-table>
        </div>
        <div style="margin-top: 10px">
          <el-button
            class="el-icon-close"
            type="success"
            style="width: 100px;height: 40px;"
            @click="cancel()"
          >
            关闭
          </el-button>
        </div>
      </div>
    </el-dialog>
    <!--返修信息弹窗-->
    <el-dialog
        title="返修数据"
        :append-to-body="true"
        :visible.sync="BackWorkDataVisible"
        center
        width="950px"
        class="qualityDataDialog"
        style="text-align: center"
    >
      <!--返工信息盒子-->
      <div style="height: 98%;margin-left: 4px;background-color:rgba(255,255,255,0.64);margin-top: 8px">
        <div style="width: 100%; height: 100%; position: relative">
          <div class="faultList" style="padding: 10px 0">
            <div class="item">
              <div class="name">故障信息：</div>
              <div class="value">{{backWorkform.故障文本}}</div>
            </div>
            <div class="item">
              <div class="name">故障工位号：</div>
              <div class="value">{{backWorkform.工位号}}</div>
            </div>
            <div class="item">
              <div class="name">故障工位名：</div>
              <div class="value">{{backWorkform.工位名称}}</div>
            </div>
            <div class="item">
              <div class="name">发现人：</div>
              <div class="value">{{backWorkform.发现人}}</div>
            </div>
            <div class="item">
              <div class="name">确认人：</div>
              <div class="value">{{backWorkform.确认人}}</div>
            </div>
            <div class="item">
              <div class="name">备注：</div>
              <div class="value">{{backWorkform.备注}}</div>
            </div>
            <div class="item">
              <div class="name">故障时间：</div>
              <div class="value">{{backWorkform.操作时间}}</div>
            </div>
            <div class="item">
              <div class="name">返工状态：</div>
              <div class="value">{{backWorkform.返工状态 == 0 ? '返回返工工位' : backWorkform.返工状态 == 1 ? '前往重工作工位' : '返修完成'}}</div>
            </div>
            <div class="item">
              <div class="name">返回工位号：</div>
              <div class="value">{{backWorkform.返回工位号}}</div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import { mapGetters } from 'vuex'
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,
      BackWorkDataVisible: false,
      form1: {
        订单号: '',
        产品型号: '',
        零件号: '',
        计划数量: '',
        完成数量: '',
        计划时间: '',
        状态: ''
      },
      backWorkform: {
        ID: '',
        故障文本: '',
        操作时间: '',
        故障原因: '',
        备注: '',
        发现人: '',
        确认人: '',
        工位号: '',
        工位名称: '',
        返工状态:'',
        返回工位号: ''
      },
      qualityDataHeade2:{
        '7':'名称',
        '8':'测量项目1',
        '9':'测量项目2'
      },
      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()
  },

  methods: {
    tableRowClassName({ row }) {
      if (row.合格标志 == '1') {
        return 'green'
      } else {
        return 'red'
      }
    },
    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
      })
    },
    // 查询返修数据
    getBackWorkQualityData(row) {
      const param = []
      param[0] = ['总成号', row.发动机号]
      const Data = this.CreateData('11', '北汽福田返工_记录_查询', param)
      this.ExecDatabase(Data).then(response => {
        this.backWorkform = response.data[0]
      })
    },
    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.qualityDataHeade2 = this.$store.state.station.qualityDataHeade
      this.getQualityData(row)
      this.dialogFormVisible1 = true
    },
    backWorkChoose(row) {
      if (this.qualityData) {
        this.qualityData = []
      }
      this.getBackWorkQualityData(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: 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;
}
.faultList .item{
  padding: 5px 0;
  display: flex;
}
.faultList .item .name{
  width: 25%;
  font-size: 30px;
  margin: 5px 0;
  text-align: right;
  font-weight: 700;
  color: rgb(147, 18, 141);
}
.faultList .item .value{
  width: 75%;
  font-size: 30px;
  margin: 5px 0;
  /*text-overflow:ellipsis;*/
  line-clamp:1;
  font-weight: 700;
  color: rgb(51, 23, 152);
}
</style>
