<template>
  <div style="width: 99.3%; height: 99.5%; background-color: white;position: relative;border: 2px solid #9e9b9b; margin-left: 2px">
    <el-row style=" width: 100%;height: 100%; background-color: #d7dee6">
      <el-col :span="12" style="height: 100%;">
        <!--返工信息盒子-->
        <div style="height: 98%;margin-left: 4px;background-color:#fff;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-col>
      <el-col :span="12" style="padding: 10px; height: 100%">
        <div id="ww" style="width: 100%; height: 100%; position: relative">
          <img :src="pic" style="height: 640px; width: 770px">
          <div v-for="(item, index) in tighteningPosition" :key="index" :class="changBP(item)" :style="{left:item.测量位置X + 'px', top: item.测量位置Y + 'px', height: item.控件高度 + 'px', width: item.控件宽度 + 'px'}" />
          <mes-web-fun04 v-if="MesWebCode === 4" />
          <mes-web-fun08 v-if="MesWebCode === 8" />
          <mes-web-fun08 v-if="MesWebCode === 28" />
          <mes-web-fun08 v-if="MesWebCode === 29" />
          <mes-web-fun22 v-if="MesWebCode === 3" />
        </div>
      </el-col>
    </el-row>
    <div id="smile" style="width: 100px; height: 100px; top: 180px; left: 1080px;position: absolute">
      <img v-if="smile === 1" style="width: 220px; height: 220px" src="../../assets/image/greenFace.png">
      <img v-else-if="smile === 2" style="width: 220px; height: 220px" src="../../assets/image/redFace.png">
      <img v-else-if="smile === 3" style="width: 196px; height: 220px" src="../../assets/image/MatchSuccess.png">
      <img v-else-if="smile === 4" style="width: 196px; height: 220px" src="../../assets/image/MatchFail.png">
      <img v-else src="../../assets/image/nothing.png">
    </div>
  </div>
</template>

<script>

import { mapGetters } from 'vuex'
import MesWebFun04 from './LowerRight/MesWebFun04.vue'
import MesWebFun08 from './LowerRight/MesWebFun08.vue'
import MesWebFun22 from './LowerRight/MesWebFun22.vue'

export default {
  components: {
    MesWebFun04,
    MesWebFun08,
    MesWebFun22
  },
  data() {
    return {
      MesWebCode: Number(this.$store.state.station.MesWebCode),
      file_is_show: true,
      subscription: {
        topic: '',
        qos: 0
      },
      materialList_table2: [],
      backWorkform: {
        ID: '',
        故障文本: '',
        操作时间: '',
        故障原因: '',
        备注: '',
        发现人: '',
        确认人: '',
        工位号: '',
        工位名称: '',
        返工状态:'',
        返回工位号: ''
      }
    }
  },
  created() {
    // console.log('this.$store.state.station.MesWebCode', this.$store.state.station.MesWebCode)
    this.searchTable()
  },
  computed: {
    // ...mapState({
    //   processList_table: state => this.$store.state.operationGuide.processList_table
    // })
    ...mapGetters([
      'processList_table',
      'materialList_table',
      'pic',
      'tighteningPosition',
      'smile',
      'engineValue',
      'tempDataObject'
    ])
  },
  watch: {
    // 监视MOBY变化
    'engineValue': {
      handler(newV, oldV) {
        this.searchTable()
      },
      deep: true
    },
    materialList_table(newV, oldV) {
      console.log('materialList_table', newV)
      this.materialList_table2 = newV
    }
  },
  methods: {
    changBP(item) {
      if (item.nowStateCode === 1) {
        return 'green'
      } else if (item.nowStateCode === 2) {
        return 'blue'
      } else if (item.nowStateCode === 0) {
        return 'red'
      } else if (item.nowStateCode === 10) {
        return 'redRectangle'
      } else if (item.nowStateCode === 11) {
        return 'greenRectangle'
      } else if (item.nowStateCode === 12) {
        return 'blueRectangle'
      } else if (item.nowStateCode === 4) {
        return 'StartWorkCircle'
      } else if (item.nowStateCode === 14) {
        return 'blinkRectangle'
      }
    },
    searchTable(){
      const param = []
      param[0] = ['总成号', this.$store.state.station.engineValue.EngineID]
      const Data = this.CreateData('11', '北汽福田返工_记录_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          this.backWorkform = response.data[0]
        } else {
          this.$message.error('该工件不存在故障返修记录，请注意！')
        }
      })
    },
    cellClassName({ row, column }) {
      //
      // console.log(row)
      if (row.是否差异 === 1) return 'noSame-row'
      if (row.是否完成扫描物料条码 === '0' && column.label === '物料条码') {
        return 'materialList-row'
      } else {
        return ''
      }
    },
    // 从数据库查询返工数据
    getBackWorkform() {
      const param = []
      param[0] = ['总成号', this.$store.state.station.engineValue.EngineID]
      const Data = this.CreateData('11', '北汽福田返工_记录_查询', param)
      this.ExecDatabase(Data).then(response => {
        this.backWorkform = response.data[0]
      })
    }

  }
}
</script>

<style scoped>
::v-deep.el-table .materialList-row{
  background: rgba(255, 255, 0, 0.5) !important;
}

/deep/.el-table .el-table__body .noSame-row {
  color: #b97300 !important;
  font-family: 700 !important;
}

.blue{
  position: absolute;
  width: 45px;
  height: 45px;
  background-image: url("../../assets/image/bule.png");
  background-size: 100% 100%;
}
.blueRectangle{
  position: absolute;
  width: 45px;
  height: 45px;
  background-image: url("../../assets/image/bluerectangle.png");
  background-size: 100% 100%;
}
.red{
  position: absolute;
  width: 45px;
  height: 45px;
  background-image: url("../../assets/image/red.png");
  background-size: 100% 100%;
}
.redRectangle{
  position: absolute;
  width: 45px;
  height: 45px;
  background-image: url("../../assets/image/redrectangle.png");
  background-size: 100% 100%;
}
.green{
  position: absolute;
  width: 45px;
  height: 45px;
  background-image: url("../../assets/image/green.png");
  background-size: 100% 100%;
}
.greenRectangle{
  position: absolute;
  width: 45px;
  height: 45px;
  background-image: url("../../assets/image/greenrectangle.png");
  background-size: 100% 100%;
}
.StartWorkCircle{
  position: absolute;
  width: 45px;
  height: 45px;
  background-size: 100% 100%;
  background-image: url("../../assets/image/StartWorkCircle.gif");
}
.blinkRectangle{
  position: absolute;
  width: 45px;
  height: 45px;
  background-image: url("../../assets/image/blinkrectangle.gif");
  background-size: 100% 100%;
}
::v-deep.el-table th.el-table__cell>.cell{
  font-size: 22px;
  color: #2f2f2f;
}
.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>
