<template>
  <div
      style="width: 99.3%; height: 99.5%; background-color: white;position: relative;border: 2px solid #9e9b9b; margin-left: 2px">
    <el-row v-if="autoStation.indexOf(this.$store.state.station.stationName) !== -1"
            style=" width: 100%;height: 100%; background-color: #d7dee6">
      <el-col :span="24" style="padding: 10px; height: 100%">
        <div id="ww" style="width: 1570px; height: 834px;overflow-y: auto;">
          <el-image v-for="url in pic" :key="url" :preview-src-list="pic" :src="url" lazy style="width: 100%">
            <div slot="error">
              无工艺图片内容
            </div>
            <div slot="placeholder">
              未加载是显示的内容
            </div>
          </el-image>
          <!--          <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>
    <el-row v-else style=" width: 100%;height: 100%; background-color: #d7dee6">
      <el-col :span="10" style="height: 100%;">
        <el-row style="height: 100%;margin-left: 4px">
          <el-table
              :data="processList_table"
              :header-cell-style="{background:'#F5F5F5'}"
              height="99%"
              stripe
              style="margin-top: 10px; width: 100%; height: 100%; border: 1px solid #9e9b9b; font-weight: lighter"
              tooltip-effect="dark"
          >
            <el-table-column align="center" label="序号" type="index" width="75px"/>
            <el-table-column align="center" label="工序内容" min-width="120px">
              <template #default="scope">
                {{ scope.row.操作内容 }}
              </template>
            </el-table-column>
            <!--          <el-table-column align="center" width="145px"  label="工步属性">-->
            <!--            <template v-slot="scope">-->
            <!--              {{ scope.row.工步属性名称 }}-->
            <!--            </template>-->
            <!--          </el-table-column>-->
          </el-table>
        </el-row>
        <!--        <el-row style="margin-top: 5px;margin-left: 4px; height: 28%">-->
        <!--          <el-table-->
        <!--              :data="alarmList"-->
        <!--              :header-cell-style="{background:'#F5F5F5'}"-->
        <!--              :row-class-name="tableRowClassName"-->
        <!--              :index="tableIndexValue"-->
        <!--              style="margin-top: 10px; width: 100%; height: 95%; border: 1px solid #9e9b9b"-->
        <!--              stripe-->
        <!--              height="99%"-->
        <!--              tooltip-effect="dark"-->
        <!--          >-->
        <!--            <el-table-column align="center" label="#" type="index" width="50px" />-->
        <!--            <el-table-column align="center" show-overflow-tooltip label="报警内容">-->
        <!--              <template #default="scope">-->
        <!--                {{ scope.row.报警内容 }}-->
        <!--              </template>-->
        <!--            </el-table-column>-->
        <!--            <el-table-column align="center" width="150px" label="报警等级">-->
        <!--              <template #default="scope">-->
        <!--                {{ scope.row.报警等级 }}-->
        <!--              </template>-->
        <!--            </el-table-column>-->
        <!--            <el-table-column align="center" width="150px" label="报警时间">-->
        <!--              <template #default="scope">-->
        <!--                {{ scope.row.报警时间 }}-->
        <!--              </template>-->
        <!--            </el-table-column>-->
        <!--          </el-table>-->
        <!--          &lt;!&ndash;          <el-table&ndash;&gt;-->
        <!--          &lt;!&ndash;            :data="materialList_table"&ndash;&gt;-->
        <!--          &lt;!&ndash;            :header-cell-style="{background:'#F5F5F5'}"&ndash;&gt;-->
        <!--          &lt;!&ndash;            style="margin-top: 10px; width: 100%; height: 95%; border: 1px solid #9e9b9b"&ndash;&gt;-->
        <!--          &lt;!&ndash;            stripe&ndash;&gt;-->
        <!--          &lt;!&ndash;            height="99%"&ndash;&gt;-->
        <!--          &lt;!&ndash;            :cell-class-name="cellClassName"&ndash;&gt;-->
        <!--          &lt;!&ndash;            tooltip-effect="dark"&ndash;&gt;-->
        <!--          &lt;!&ndash;          >&ndash;&gt;-->
        <!--          &lt;!&ndash;            <el-table-column align="center" label=" " type="index" show-overflow-tooltip width="30px" />&ndash;&gt;-->
        <!--          &lt;!&ndash;            <el-table-column align="center" label="零件图号" width="150px">&ndash;&gt;-->
        <!--          &lt;!&ndash;              <template #default="scope">&ndash;&gt;-->
        <!--          &lt;!&ndash;                {{ scope.row.零件图号 }}&ndash;&gt;-->
        <!--          &lt;!&ndash;              </template>&ndash;&gt;-->
        <!--          &lt;!&ndash;            </el-table-column>&ndash;&gt;-->
        <!--          &lt;!&ndash;            <el-table-column align="center" label="零件名称">&ndash;&gt;-->
        <!--          &lt;!&ndash;              <template #default="scope">&ndash;&gt;-->
        <!--          &lt;!&ndash;                {{ scope.row.零件名称 }}&ndash;&gt;-->
        <!--          &lt;!&ndash;              </template>&ndash;&gt;-->
        <!--          &lt;!&ndash;            </el-table-column>&ndash;&gt;-->
        <!--          &lt;!&ndash;            <el-table-column align="center" label="用量" width="80px">&ndash;&gt;-->
        <!--          &lt;!&ndash;              <template #default="scope">&ndash;&gt;-->
        <!--          &lt;!&ndash;                {{ scope.row.零件数量 }}&ndash;&gt;-->
        <!--          &lt;!&ndash;              </template>&ndash;&gt;-->
        <!--          &lt;!&ndash;            </el-table-column>&ndash;&gt;-->
        <!--          &lt;!&ndash;            &lt;!&ndash;            <el-table-column align="center" label="批次号" width="120">&ndash;&gt;&ndash;&gt;-->
        <!--          &lt;!&ndash;            &lt;!&ndash;              <template #default="scope">&ndash;&gt;&ndash;&gt;-->
        <!--          &lt;!&ndash;            &lt;!&ndash;                {{ scope.row.零件批号 }}&ndash;&gt;&ndash;&gt;-->
        <!--          &lt;!&ndash;            &lt;!&ndash;              </template>&ndash;&gt;&ndash;&gt;-->
        <!--          &lt;!&ndash;            &lt;!&ndash;            </el-table-column>&ndash;&gt;&ndash;&gt;-->
        <!--          &lt;!&ndash;            <el-table-column align="center" label="物料条码" min-width="130px">&ndash;&gt;-->
        <!--          &lt;!&ndash;              <template #default="scope">&ndash;&gt;-->
        <!--          &lt;!&ndash;                {{ scope.row.物料条码 }}&ndash;&gt;-->
        <!--          &lt;!&ndash;              </template>&ndash;&gt;-->
        <!--          &lt;!&ndash;            </el-table-column>&ndash;&gt;-->
        <!--          &lt;!&ndash;          </el-table>&ndash;&gt;-->
        <!--        </el-row>-->
      </el-col>
      <el-col :span="14" style="padding: 10px; height: 100%">
        <div id="ww" style="width: 905px; height: 824px;overflow-y: auto;">
          <el-image v-for="url in pic" :key="url" :preview-src-list="pic" :src="url" lazy style="width: 100%"/>
          <div v-if="pic.length == 0" style="text-align: center;background-color:#fff;font-size: 20px">
            无工艺图片内容
          </div>
          <!--          <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>
    <el-row style=" width: 100%;height: 100%; background-color: #d7dee6">
      <el-col :span="10" style="height: 100%;">
        <el-row style="height: 100%;margin-left: 4px">
          <el-table
              :data="processList_table"
              :header-cell-style="{background:'#F5F5F5'}"
              height="99%"
              stripe
              style="margin-top: 10px; width: 100%; height: 100%; border: 1px solid #9e9b9b; font-weight: lighter"
              tooltip-effect="dark"
          >
            <el-table-column align="center" label="序号" type="index" width="75px"/>
            <el-table-column align="center" label="工序内容" min-width="120px">
              <template #default="scope">
                {{ scope.row.操作内容 }}
              </template>
            </el-table-column>
            <!--          <el-table-column align="center" width="145px"  label="工步属性">-->
            <!--            <template v-slot="scope">-->
            <!--              {{ scope.row.工步属性名称 }}-->
            <!--            </template>-->
            <!--          </el-table-column>-->
          </el-table>
        </el-row>
        <!--        <el-row style="margin-top: 5px;margin-left: 4px; height: 28%">-->
        <!--          <el-table-->
        <!--              :data="alarmList"-->
        <!--              :header-cell-style="{background:'#F5F5F5'}"-->
        <!--              :row-class-name="tableRowClassName"-->
        <!--              :index="tableIndexValue"-->
        <!--              style="margin-top: 10px; width: 100%; height: 95%; border: 1px solid #9e9b9b"-->
        <!--              stripe-->
        <!--              height="99%"-->
        <!--              tooltip-effect="dark"-->
        <!--          >-->
        <!--            <el-table-column align="center" label="#" type="index" width="50px" />-->
        <!--            <el-table-column align="center" show-overflow-tooltip label="报警内容">-->
        <!--              <template #default="scope">-->
        <!--                {{ scope.row.报警内容 }}-->
        <!--              </template>-->
        <!--            </el-table-column>-->
        <!--            <el-table-column align="center" width="150px" label="报警等级">-->
        <!--              <template #default="scope">-->
        <!--                {{ scope.row.报警等级 }}-->
        <!--              </template>-->
        <!--            </el-table-column>-->
        <!--            <el-table-column align="center" width="150px" label="报警时间">-->
        <!--              <template #default="scope">-->
        <!--                {{ scope.row.报警时间 }}-->
        <!--              </template>-->
        <!--            </el-table-column>-->
        <!--          </el-table>-->
        <!--          &lt;!&ndash;          <el-table&ndash;&gt;-->
        <!--          &lt;!&ndash;            :data="materialList_table"&ndash;&gt;-->
        <!--          &lt;!&ndash;            :header-cell-style="{background:'#F5F5F5'}"&ndash;&gt;-->
        <!--          &lt;!&ndash;            style="margin-top: 10px; width: 100%; height: 95%; border: 1px solid #9e9b9b"&ndash;&gt;-->
        <!--          &lt;!&ndash;            stripe&ndash;&gt;-->
        <!--          &lt;!&ndash;            height="99%"&ndash;&gt;-->
        <!--          &lt;!&ndash;            :cell-class-name="cellClassName"&ndash;&gt;-->
        <!--          &lt;!&ndash;            tooltip-effect="dark"&ndash;&gt;-->
        <!--          &lt;!&ndash;          >&ndash;&gt;-->
        <!--          &lt;!&ndash;            <el-table-column align="center" label=" " type="index" show-overflow-tooltip width="30px" />&ndash;&gt;-->
        <!--          &lt;!&ndash;            <el-table-column align="center" label="零件图号" width="150px">&ndash;&gt;-->
        <!--          &lt;!&ndash;              <template #default="scope">&ndash;&gt;-->
        <!--          &lt;!&ndash;                {{ scope.row.零件图号 }}&ndash;&gt;-->
        <!--          &lt;!&ndash;              </template>&ndash;&gt;-->
        <!--          &lt;!&ndash;            </el-table-column>&ndash;&gt;-->
        <!--          &lt;!&ndash;            <el-table-column align="center" label="零件名称">&ndash;&gt;-->
        <!--          &lt;!&ndash;              <template #default="scope">&ndash;&gt;-->
        <!--          &lt;!&ndash;                {{ scope.row.零件名称 }}&ndash;&gt;-->
        <!--          &lt;!&ndash;              </template>&ndash;&gt;-->
        <!--          &lt;!&ndash;            </el-table-column>&ndash;&gt;-->
        <!--          &lt;!&ndash;            <el-table-column align="center" label="用量" width="80px">&ndash;&gt;-->
        <!--          &lt;!&ndash;              <template #default="scope">&ndash;&gt;-->
        <!--          &lt;!&ndash;                {{ scope.row.零件数量 }}&ndash;&gt;-->
        <!--          &lt;!&ndash;              </template>&ndash;&gt;-->
        <!--          &lt;!&ndash;            </el-table-column>&ndash;&gt;-->
        <!--          &lt;!&ndash;            &lt;!&ndash;            <el-table-column align="center" label="批次号" width="120">&ndash;&gt;&ndash;&gt;-->
        <!--          &lt;!&ndash;            &lt;!&ndash;              <template #default="scope">&ndash;&gt;&ndash;&gt;-->
        <!--          &lt;!&ndash;            &lt;!&ndash;                {{ scope.row.零件批号 }}&ndash;&gt;&ndash;&gt;-->
        <!--          &lt;!&ndash;            &lt;!&ndash;              </template>&ndash;&gt;&ndash;&gt;-->
        <!--          &lt;!&ndash;            &lt;!&ndash;            </el-table-column>&ndash;&gt;&ndash;&gt;-->
        <!--          &lt;!&ndash;            <el-table-column align="center" label="物料条码" min-width="130px">&ndash;&gt;-->
        <!--          &lt;!&ndash;              <template #default="scope">&ndash;&gt;-->
        <!--          &lt;!&ndash;                {{ scope.row.物料条码 }}&ndash;&gt;-->
        <!--          &lt;!&ndash;              </template>&ndash;&gt;-->
        <!--          &lt;!&ndash;            </el-table-column>&ndash;&gt;-->
        <!--          &lt;!&ndash;          </el-table>&ndash;&gt;-->
        <!--        </el-row>-->
      </el-col>
      <el-col :span="14" style="padding: 10px; height: 100%">
        <div id="ww" style="width: 905px; height: 824px;overflow-y: auto;">
          <el-image v-for="url in pic" :key="url" :preview-src-list="pic" :src="url" lazy style="width: 100%"/>
          <!--          <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" src="../../assets/image/greenFace.png" style="width: 220px; height: 220px">
      <img v-else-if="smile === 2" src="../../assets/image/redFace.png" style="width: 220px; height: 220px">
      <img v-else-if="smile === 3" src="../../assets/image/MatchSuccess.png" style="width: 196px; height: 220px">
      <img v-else-if="smile === 4" src="../../assets/image/MatchFail.png" style="width: 196px; height: 220px">
      <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 {
      autoStation: ['OP20', 'OP40'],
      tableIndexValue: Math.random(),
      alarmListTagId: [''],
      TagIdList: new Map(),
      srcList: [],
      alarmList: [],
      alarmList_Alarm: [],
      alarmList_Error: [],
      alarmList_Warning: [],
      MesWebCode: Number(this.$store.state.station.MesWebCode),
      file_is_show: true,
      subscription: {
        topic: '',
        qos: 0
      }
    }
  },
  created() {
    this.getTagList()
    // console.log('this.$store.state.station.MesWebCode', this.$store.state.station.MesWebCode)
  },
  mounted() {
    const scope = this
    this.$root.$on('P_C_Message', paramsInfo => {
      switch (paramsInfo.type) {
        case 'C_B_PlcAlarm':
          scope.solveAlarm(paramsInfo.params)
          break
      }
    })
  },
  computed: {
    // ...mapState({
    //   processList_table: state => this.$store.state.operationGuide.processList_table
    // })
    ...mapGetters([
      'processList_table',
      'materialList_table',
      'pic',
      'tighteningPosition',
      'smile'
    ])
  },
  methods: {
    tableRowClassName({ row }) {
      if (row.报警等级 === '错误') {
        return 'alarm_Alarm'
      } else if (row.报警等级 === '报警') {
        return 'alarm_Alarm'
      } else if (row.报警等级 === '警告') {
        return 'warning_Alarm'
      } else {
        return 'alarm_Default'
      }
    },
    getTagList() {
      const param = []
      param[0] = ['工位号', this.$store.state.station.stationName]
      const Data = this.CreateData('11', 'MES_基本变量_原始数据_根据工位号查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          for (let i = 0; i < response.data.length; i++) {
            this.TagIdList.set(response.data[i].TagID, response.data[i])
          }
        }
      })
    },
    solveAlarm(m_Value) {
      const m_ValueList = m_Value.split('&')
      const tagId = m_ValueList[0]
      const tagValue = m_ValueList[1]
      const alarmContent = m_ValueList[2]
      const alarmType = m_ValueList[3]
      const alarmTime = m_ValueList[4]
      if (tagValue === '1') {
        if (this.alarmListTagId.indexOf(tagId) === -1) {
          const tagInfo = this.TagIdList.get(tagId)
          this.alarmListTagId.push(tagId)
          switch (alarmType) {
            case '报警':
              this.alarmList_Alarm.unshift({
                TagId: tagId,
                报警内容: tagInfo['DbName'] + '.' + tagInfo['变量类型'] + tagInfo['变量地址'] + tagInfo['变量其它'] + '【' + alarmContent + '】',
                报警等级: alarmType,
                报警时间: alarmTime
              })
              break
            case '错误':
              this.alarmList_Error.unshift({
                TagId: tagId,
                报警内容: tagInfo['DbName'] + '.' + tagInfo['变量类型'] + tagInfo['变量地址'] + tagInfo['变量其它'] + '【' + alarmContent + '】',
                报警等级: alarmType,
                报警时间: alarmTime
              })
              break
            case '警告':
              this.alarmList_Warning.unshift({
                TagId: tagId,
                报警内容: tagInfo['DbName'] + '.' + tagInfo['变量类型'] + tagInfo['变量地址'] + tagInfo['变量其它'] + '【' + alarmContent + '】',
                报警等级: alarmType,
                报警时间: alarmTime
              })
              break
          }
          this.alarmList = []
          this.alarmList = [...this.alarmList_Error, ...this.alarmList_Alarm, ...this.alarmList_Warning]
        }
      } else {
        this.alarmListTagId = this.alarmListTagId.filter(item => item !== tagId)
        this.alarmList_Alarm = this.alarmList_Alarm.filter(res => {
          return res.TagId !== tagId
        })
        this.alarmList_Error = this.alarmList_Error.filter(res => {
          return res.TagId !== tagId
        })
        this.alarmList_Warning = this.alarmList_Warning.filter(res => {
          return res.TagId !== tagId
        })
        this.alarmList = []
        this.alarmList = [...this.alarmList_Error, ...this.alarmList_Alarm, ...this.alarmList_Warning]
      }
      this.tableIndexValue = Math.random()
    },
    showAlarmList() {
      this.dialogFormVisible2 = true
      this.tableIndexValue = Math.random()
    },
    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'
      }
    },
    cellClassName({ row, column }) {
      //
      if (row.是否完成扫描物料条码 === '0' && column.label === '物料条码') {
        return 'materialList-row'
      } else {
        return ''
      }
    }
  }
}
</script>

<style scoped>
::v-deep.el-table .materialList-row {
  background: rgba(255, 255, 0, 0.5) !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;
}
</style>
