<template>
  <div style="width: 100%; height: 100%; padding: 10px;background-color: #d7dee6;">
    <el-row style="width: 98%; height: 32%; border: 1px solid black; margin: 5px">
      <el-col style="width: 8%; height: 90%;">
        <div class="div1">
          <div style="margin-left: 25px; margin-top: 10%">
            <span style="color: white; font-size: 42px">物料安灯</span>
          </div>
        </div>
      </el-col>
      <el-col style="width: 65%; height: 90%">
        <div style="width: 99%; height: 99%; border: 1px solid black;margin-top: 10px; margin-left: 10px; overflow-y: auto">
          <div v-for="(item) in cities1" :key="item.编号">
            <div v-if="item.颜色代码 === '1'" :id="item.编号" class="div2" @click="select1(item)">
              {{ item.编号描述2 }}
            </div>
            <div v-if="item.颜色代码 === '0'" :id="item.编号" class="div3" @click="select1(item)">
              {{ item.编号描述2 }}
            </div>
          </div>
        </div>
      </el-col>
      <el-col style="width: 25%">
        <div>
          <img src="../../assets/image/call.png" style="margin-top: 40px;margin-left: 40px; width: 118px;height: 100px;" @click="imgClick1()">
          <img src="../../assets/image/reset.png" style="margin-left: 100px;width: 118px;height: 100px;" @click="imgClick2()">
        </div>
        <span style="font-size: 50px; margin-left: 50px">呼叫</span>
        <span style="font-size: 50px; margin-left: 100px">复位</span>
      </el-col>
    </el-row>
    <el-row style="width: 98%; height: 32%; border: 1px solid black; margin: 5px">
      <el-col style="width: 8%; height: 90%;">
        <div class="div1">
          <div style="margin-left: 25px; margin-top: 10%">
            <span style="color: white; font-size: 42px">质量安灯</span>
          </div>
        </div>
      </el-col>
      <el-col style="width: 65%; height: 90%">
        <div style="width: 99%; height: 99%; border: 1px solid black;margin-top: 10px; margin-left: 10px; overflow-y: auto">
          <div v-for="(item) in cities" :key="item.编号">
            <div v-if="item.颜色代码 === '1'" :id="item.编号" class="div2" @click="select2(item)">
              {{ item.编号描述2 }}
            </div>
            <div v-if="item.颜色代码 === '0'" :id="item.编号" class="div3" @click="select2(item)">
              {{ item.编号描述2 }}
            </div>
          </div>
        </div>
      </el-col>
      <el-col style="width: 25%">
        <div>
          <img src="../../assets/image/call.png" style="margin-top: 40px;margin-left: 40px; width: 118px;height: 100px;" @click="imgClick3()">
          <img src="../../assets/image/reset.png" style="margin-left: 100px; width: 118px;height: 100px;" @click="imgClick4()">
          <span>{{ count }}</span>
        </div>
        <span style="font-size: 50px; margin-left: 50px">呼叫</span>
        <span style="font-size: 50px; margin-left: 100px">复位</span>
      </el-col>
    </el-row>
    <el-row style="width: 98%; height: 32%; border: 1px solid black; margin: 5px">
      <el-col style="width: 8%; height: 90%;">
        <div class="div1">
          <div style="margin-left: 25px; margin-top: 10%">
            <span style="color: white; font-size: 42px">故障安灯</span>
          </div>
        </div>
      </el-col>
      <el-col style="width: 65%; height: 90%">
        <div style="width: 99%; height: 99%; border: 1px solid black;margin-top: 10px; margin-left: 10px; overflow-y: auto">
          <div v-for="(item) in citie" :key="item.编号">
            <div v-if="item.颜色代码 === '1'" :id="item.编号" class="div2" @click="select3(item)">
              {{ item.编号描述2 }}
            </div>
            <div v-if="item.颜色代码 === '0'" :id="item.编号" class="div3" @click="select3(item)">
              {{ item.编号描述2 }}
            </div>
          </div>
        </div>
      </el-col>
      <el-col style="width: 25%;">
        <div>
          <img src="../../assets/image/call.png" style="margin-top: 40px;margin-left: 40px; width: 118px;height: 100px;" @click="imgClick5()">
          <img src="../../assets/image/reset.png" style="margin-left: 100px; width: 118px;height: 100px;" @click="imgClick6()">
        </div>
        <span style="font-size: 50px; margin-left: 50px">呼叫</span>
        <span style="font-size: 50px; margin-left: 100px">复位</span>
      </el-col>
    </el-row>
    <el-dialog :title="title" :append-to-body="true" :visible.sync="dialogFormVisible1" width="700px">
      <div style="text-align: center">
        <el-form ref="form1" label-position="left" class="demo-ruleForm" style="width: 600px; height: 150px; margin: auto">
          <el-form-item>
            <el-button v-for="(item) in andonType1" :id="item.安东明细代码" :key="item.安东明细代码" style="width: 150px; height: 90px;" type="info" @click="change3(item.安东类型代码,item.安东明细代码, checkboxGroup1, item.安东明细描述)">
              {{ item.安东明细描述 }}
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
    <el-dialog :title="title" :append-to-body="true" :visible.sync="dialogFormVisible2" width="700px">
      <div style="text-align: center">
        <el-form ref="form1" label-position="left" class="demo-ruleForm" style="width: 600px; height: 150px; margin: auto">
          <el-form-item>
            <el-button v-for="(item) in andonType2" :id="item.安东明细代码" :key="item.安东明细代码" style="width: 150px; height: 90px;" type="info" @click="change3(item.安东类型代码,item.安东明细代码, checkboxGroup2, item.安东明细描述)">
              {{ item.安东明细描述 }}
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
    <el-dialog :title="title" :append-to-body="true" :visible.sync="dialogFormVisible3" width="700px">
      <div style="text-align: center">
        <el-form ref="form1" label-position="left" class="demo-ruleForm" style="width: 600px; height: 150px; margin: auto">
          <el-form-item>
            <el-button v-for="(item) in andonType3" :id="item.安东明细代码" :key="item.安东明细代码" style="width: 150px; height: 90px;" type="info" @click="change3(item.安东类型代码,item.安东明细代码, checkboxGroup3, item.安东明细描述)">
              {{ item.安东明细描述 }}
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      andonType1: [],
      andonType2: [],
      andonType3: [],
      checkboxGroup1: [],
      checkboxGroup2: [],
      checkboxGroup3: [],
      citie: [],
      cities: [],
      cities1: [],
      dialogFormVisible1: false,
      dialogFormVisible2: false,
      dialogFormVisible3: false,
      title: '',
      index: '',
      count: '',
      publication: {
        topic: '',
        qos: 0,
        payload: ''
      },
      statediv1: false
    }
  },
  created() {
    this.getAndonarr1()
    this.getAndonarr2()
    this.getAndonarr3()
    this.AndonType()
  },
  methods: {
    select3(indexa) {
      if (indexa.states === '0') {
        if (!this.checkboxGroup3.find(item => item.编号 === indexa.编号)) {
          this.checkboxGroup3.push({
            编号: indexa.编号,
            编号描述: indexa.编号描述,
            编号描述2: indexa.编号描述2,
            颜色代码: indexa.颜色代码,
            states: indexa.states
          })
          indexa.states = '1'
        }
        indexa.color = document.getElementById(indexa.编号).style.backgroundColor
        document.getElementById(indexa.编号).style.backgroundColor = 'cornflowerblue'
      } else if (indexa.states === '1') {
        indexa.states = '0'
        document.getElementById(indexa.编号).style.backgroundColor = indexa.color
        var count = this.checkboxGroup3.findIndex(item => item.编号 === indexa.编号)
        this.checkboxGroup3.splice(count, 1)
      }
    },
    getAndonarr3() {
      this.citie = []
      const param = []
      param[0] = ['安东类型代码', '3']
      param[1] = ['工位号', this.$store.state.station.stationName]
      const Data = this.CreateData('11', 'ANDON_类型_编号_查询', param)
      this.ExecDatabase(Data).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.citie.push({
            编号: response.data[i].编号,
            编号描述: response.data[i].编号描述,
            编号描述2: response.data[i].编号描述2,
            颜色代码: response.data[i].颜色代码,
            color: '',
            states: '0'
          })
        }
      })
    },
    AndonType() {
      const param = []
      param[0] = ['安东类型代码', '1']
      const Data = this.CreateData('11', 'ANDON_类型_明细表_查询', param)
      this.ExecDatabase(Data).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.andonType1.push({
            安东明细代码: response.data[i].安东明细代码,
            安东类型代码: response.data[i].安东类型代码,
            安东明细简称: response.data[i].安东明细简称,
            安东明细描述: response.data[i].安东明细描述
          })
        }
      })
      const param1 = []
      param1[0] = ['安东类型代码', '2']
      const Data1 = this.CreateData('11', 'ANDON_类型_明细表_查询', param1)
      this.ExecDatabase(Data1).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.andonType2.push({
            安东明细代码: response.data[i].安东明细代码,
            安东明细简称: response.data[i].安东明细简称,
            安东类型代码: response.data[i].安东类型代码,
            安东明细描述: response.data[i].安东明细描述
          })
        }
      })
      const param2 = []
      param2[0] = ['安东类型代码', '3']
      const Data2 = this.CreateData('11', 'ANDON_类型_明细表_查询', param2)
      this.ExecDatabase(Data2).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.andonType3.push({
            安东明细代码: response.data[i].安东明细代码,
            安东明细简称: response.data[i].安东明细简称,
            安东类型代码: response.data[i].安东类型代码,
            安东明细描述: response.data[i].安东明细描述
          })
        }
      })
    },
    getAndonarr2() {
      this.cities = []
      const param = []
      param[0] = ['安东类型代码', '2']
      param[1] = ['工位号', this.$store.state.station.stationName]
      const Data = this.CreateData('11', 'ANDON_类型_编号_查询', param)
      this.ExecDatabase(Data).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.cities.push({
            编号: response.data[i].编号,
            编号描述: response.data[i].编号描述,
            编号描述2: response.data[i].编号描述2,
            颜色代码: response.data[i].颜色代码,
            color: '',
            states: '0'
          })
        }
      })
    },
    getAndonarr1() {
      this.cities1 = []
      const param = []
      param[0] = ['安东类型代码', '1']
      param[1] = ['工位号', this.$store.state.station.stationName]
      const Data = this.CreateData('11', 'ANDON_类型_编号_查询', param)
      this.ExecDatabase(Data).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.cities1.push({
            编号: response.data[i].编号,
            编号描述: response.data[i].编号描述,
            编号描述2: response.data[i].编号描述2,
            颜色代码: response.data[i].颜色代码,
            color: '',
            states: '0'
          })
        }
      })
    },
    select2(indexa) {
      if (indexa.states === '0') {
        if (!this.checkboxGroup2.find(item => item.编号 === indexa.编号)) {
          this.checkboxGroup2.push({
            编号: indexa.编号,
            编号描述: indexa.编号描述,
            编号描述2: indexa.编号描述2,
            颜色代码: indexa.颜色代码,
            states: indexa.states
          })
          indexa.states = '1'
        }
        indexa.color = document.getElementById(indexa.编号).style.backgroundColor
        document.getElementById(indexa.编号).style.backgroundColor = 'cornflowerblue'
      } else if (indexa.states === '1') {
        indexa.states = '0'
        document.getElementById(indexa.编号).style.backgroundColor = indexa.color
        var count = this.checkboxGroup2.findIndex(item => item.编号 === indexa.编号)
        this.checkboxGroup2.splice(count, 1)
      }
    },
    select1(indexa) {
      if (indexa.states === '0') {
        if (!this.checkboxGroup1.find(item => item.编号 === indexa.编号)) {
          this.checkboxGroup1.push({
            编号: indexa.编号,
            编号描述: indexa.编号描述,
            编号描述2: indexa.编号描述2,
            颜色代码: indexa.颜色代码,
            states: indexa.states
          })
          indexa.states = '1'
        }
        indexa.color = document.getElementById(indexa.编号).style.backgroundColor
        document.getElementById(indexa.编号).style.backgroundColor = 'cornflowerblue'
      } else if (indexa.states === '1') {
        indexa.states = '0'
        document.getElementById(indexa.编号).style.backgroundColor = indexa.color
        var count = this.checkboxGroup1.findIndex(item => item.编号 === indexa.编号)
        this.checkboxGroup1.splice(count, 1)
      }
    },
    imgClick1() {
      if (this.checkboxGroup1.length < 1) {
        this.$alert('没有选择物料', '提示', {
          confirmButtonText: '确定'
        })
      } else {
        this.title = 'ando系统呼叫界面'
        this.index = '1'
        this.dialogFormVisible1 = true
      }
    },
    imgClick2() {
      if (this.checkboxGroup1.length < 1) {
        this.$alert('没有选择物料', '提示', {
          confirmButtonText: '确定'
        })
      } else {
        this.title = 'ando系统呼叫界面'
        this.index = '2'
        this.dialogFormVisible1 = true
      }
    },
    imgClick3() {
      if (this.checkboxGroup2.length < 1) {
        this.$alert('没有选择质量故障', '提示', {
          confirmButtonText: '确定'
        })
      } else {
        this.title = 'ando系统呼叫界面'
        this.index = '1'
        this.dialogFormVisible2 = true
      }
    },
    imgClick4() {
      if (this.checkboxGroup2.length < 1) {
        this.$alert('没有选择质量故障', '提示', {
          confirmButtonText: '确定'
        })
      } else {
        this.title = 'ando系统呼叫界面'
        this.index = '2'
        this.dialogFormVisible2 = true
      }
    },
    imgClick5() {
      if (this.checkboxGroup3.length < 1) {
        this.$alert('没有选择设备故障原因', '提示', {
          confirmButtonText: '确定'
        })
      } else {
        this.title = 'ando系统呼叫界面'
        this.index = '1'
        this.dialogFormVisible3 = true
      }
    },
    imgClick6() {
      if (this.checkboxGroup3.length < 1) {
        this.$alert('没有选择设备故障原因', '提示', {
          confirmButtonText: '确定'
        })
      } else {
        this.title = 'ando系统呼叫界面'
        this.index = '2'
        this.dialogFormVisible3 = true
      }
    },
    change3(state1, state2, check, state) {
      if (this.index === '1') {
        for (let i = 0; i < check.length; i++) {
          console.log('xxxxxxxxxx', check[i].编号描述2, state)
          if (check[i].编号描述2.match(state)) {
            this.$message.error('报警问题存在')
          } else {
            const param = []
            param[0] = ['工位号', this.$store.state.station.stationName]
            param[1] = ['安东类型代码', state1]
            param[2] = ['安东明细代码', state2]
            param[3] = ['编号', check[i].编号]
            param[4] = ['呼叫内容', '0']
            param[5] = ['呼叫数量', 0]
            param[6] = ['卡片条码', '0']
            param[7] = ['不合格代码', '0']
            const Data = this.CreateData('12', 'ANDON_呼叫状态_呼叫', param)
            this.ExecDatabase(Data).then(response => {
              if (response.data[0].result === '1') {
                this.publication.topic = window.g.mqttPublishTopic
                this.publication.payload = 'WEB|Andon|' + this.$store.state.station.stationName + '|' + '1'
                const result = window.g.mqttClient.doPublish(this.publication)
                if (result === true) {
                  this.$notify.success({
                    title: '提示',
                    message: 'Andon呼叫成功！',
                    position: 'bottom-right',
                    duration: 2000,
                    offset: 170
                  })
                } else {
                  this.$notify.error({
                    title: '提示',
                    message: 'Andon呼叫失败！',
                    position: 'bottom-right',
                    duration: 2000,
                    offset: 170
                  })
                }
                this.$message({
                  message: '成功',
                  type: 'success'
                })
              } else {
                this.$message.error('失败')
              }
            })
          }
        }
      } else {
        for (let i = 0; i < check.length; i++) {
          if (check[i].编号描述2.match(state)) {
            const param = []
            param[0] = ['工位号', this.$store.state.station.stationName]
            param[1] = ['编号', check[i].编号]
            param[2] = ['安东类型代码', state1]
            param[3] = ['安东明细代码', state2]
            param[4] = ['解除内容', '复位信息']
            const Data = this.CreateData('12', 'ANDON_呼叫状态_解除', param)
            this.ExecDatabase(Data).then(response => {
              if (response.data[0].result === '1') {
                this.publication.topic = window.g.mqttPublishTopic
                this.publication.payload = 'WEB|Andon|' + this.$store.state.station.stationName + '|' + '0'
                const result = window.g.mqttClient.doPublish(this.publication)
                if (result === true) {
                  this.$notify.success({
                    title: '提示',
                    message: 'Andon复位成功！',
                    position: 'bottom-right',
                    duration: 2000,
                    offset: 170
                  })
                } else {
                  this.$notify.error({
                    title: '提示',
                    message: 'Andon复位失败！',
                    position: 'bottom-right',
                    duration: 2000,
                    offset: 170
                  })
                }
                this.$message({
                  message: '成功',
                  type: 'success'
                })
              } else {
                this.$message.error('失败')
              }
            })
          } else {
            this.$message.error('复位问题不存在')
          }
        }
      }
      setTimeout(() => {
        this.getAndonarr1()
        this.getAndonarr2()
        this.getAndonarr3()
      }, (500))
      this.checkboxGroup1 = []
      this.dialogFormVisible1 = false
      this.checkboxGroup2 = []
      this.dialogFormVisible2 = false
      this.checkboxGroup3 = []
      this.dialogFormVisible3 = false
    }
  }
}
</script>

<style scoped>
    ::v-deep.div1 {
        width: 100px;
        height: 100%;
        background-color: #0086b3;
        border-radius: 20px;
        border: 1px solid black;
        margin-top: 10px;
        margin-left: 10px;
    }
    ::v-deep.div2 {
        width: 160px;
        height: 85px;
        background-color: red;
        border-radius: 20px;
        border: 1px solid black;
        size: auto;
        word-wrap: break-word;
        word-break: normal;
        font-size: large;
        text-align: center;
        line-height: 40px;
        margin-left: 20px;
        margin-top: 10px;
        float: left;
    }
    ::v-deep.div3 {
        width: 160px;
        height: 85px;
        background-color: white;
        border-radius: 20px;
        border: 1px solid black;
        size: auto;
        word-wrap: break-word;
        word-break: normal;
        font-size: large;
        text-align: center;
        line-height: 40px;
        margin-left: 20px;
        margin-top: 10px;
        float: left;
    }
    ::v-deep.el-checkbox-button__inner {
        line-height: 1;
        cursor: pointer;
        background: #FFF;
        border: 0px solid #DCDFE6;
        border-left: 0;
        -webkit-appearance: none;
        text-align: center;
        box-sizing: border-box;
        outline: 0;
        height: 100%;
        width: 99%;
        text-align: center;
        line-height: 60px;
        margin: 0;
        -webkit-transition: all .3s cubic-bezier(.645,.045,.355,1);
        transition: all .3s cubic-bezier(.645,.045,.355,1);
        padding: 12px 20px;
        font-size: 14px;
        border-radius: 20px;
    }

</style>
