<template>
  <div>
    <div class="animate__animated animate__shakeX title">车镜油漆缺陷采集系统(抛光)</div>
    <el-row>
      <el-col :span="1">
        <div style="height: 225px">
          <div class="title_Line">打磨</div>
          <div class="title_Line">报废</div>
        </div>
        <div style="height: 250px">
          <div class="title_Line">打磨</div>
          <div class="title_Line">报废</div>
        </div>
      </el-col>
      <el-col :span="23">
        <div>
          <div class="grid">
            <div class="a">
              <div class="title_sub">{{ paint[0].inspectionModule }}</div>
              <div class="grid_sub">
                <div class="a_11" v-for="(item, index) of paint" :key="index" v-show="parseInt((item.id / 10) % 10) > 1">
                  <div @click="Accumulator(item, index)" class="button_" @mousedown="startimer(item.counter, 'paint', index)" @mouseup="clearTimer">
                    <div class="context">{{ item.inspectionName }}</div>
                    <div class="number">{{ item.counter }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="b">
              <div class="title_sub">{{ device[0].inspectionModule }}</div>
              <div class="grid_sub">
                <div class="a_11" v-for="(item, index) of device" :key="index" v-show="parseInt((item.id / 10) % 10) > 1">
                  <div
                    @click="Accumulator(item, index)"
                    class="button_"
                    @mousedown="startimer(item.counter, 'device', index)"
                    @mouseup="clearTimer"
                  >
                    <div class="context">{{ item.inspectionName }}</div>
                    <div class="number">{{ item.counter }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="c">
              <div class="title_sub">{{ blank[0].inspectionModule }}</div>
              <div class="grid_sub">
                <div class="a_11" v-for="(item, index) of blank" :key="index" v-show="parseInt((item.id / 10) % 10) > 1">
                  <div @click="Accumulator(item, index)" class="button_" @mousedown="startimer(item.counter, 'blank', index)" @mouseup="clearTimer">
                    <div class="context">{{ item.inspectionName }}</div>
                    <div class="number">{{ item.counter }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="d">
              <div class="title_sub">{{ program[0].inspectionModule }}</div>
              <div class="grid_sub">
                <div class="a_11" v-for="(item, index) of program" :key="index" v-show="parseInt((item.id / 10) % 10) > 1">
                  <div @click="Accumulator(item, index)" class="button_" @mousedown="startimer(item.counter, 'team', index)" @mouseup="clearTimer">
                    <div class="context">{{ item.inspectionName }}</div>
                    <div class="number">{{ item.counter }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="e">
              <div class="title_sub">{{ team[0].inspectionModule }}</div>
              <div class="grid_sub">
                <div class="a_11" v-for="(item, index) of team" :key="index" v-show="parseInt((item.id / 10) % 10) > 1">
                  <div @click="Accumulator(item, index)" class="button_" @mousedown="startimer(item.counter, 'team', index)" @mouseup="clearTimer">
                    <div class="context">{{ item.inspectionName }}</div>
                    <div class="number">{{ item.counter }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="f">
              <div class="f_item">
                <div class="f_name">工单id：{{ ProductSituationForm.workorderid }}</div>
              </div>
              <div class="f_item">
                <div class="f_name">产品名称：{{ ProductSituationForm.productName }}</div>
              </div>
              <div class="f_item">
                <div class="f_name">左右:{{ ProductSituationForm.direction }}</div>
              </div>
              <div class="f_item">
                <div class="f_name">颜色:{{ ProductSituationForm.color }}</div>
              </div>

              <div class="f_item">
                <div class="f_name">班组: {{ ProductSituationForm.team }}</div>
              </div>

              <div class="f_item">
                <div class="f_name">投入数:{{ ProductSituationForm.inputNum }}</div>
              </div>

              <div class="f_item">
                <div class="f_name">抛光合格数:{{ ProductSituationForm.inputNum }}</div>
              </div>
              <div class="f_item">
                <div class="f_name">抛光合格率:{{ ProductSituationForm.inputNum }}</div>
              </div>
              <div class="f_item">
                <div class="f_name">打磨数:{{ ProductSituationForm.inputNum }}</div>
              </div>
              <div class="f_item">
                <div class="f_name">报废数:{{ ProductSituationForm.inputNum }}</div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-dialog title="修改" :visible.sync="DMLdialog.visiable" width="600px" append-to-body>
      <el-input-number v-model="toUpdateNum" label="修改"></el-input-number>
      <div slot="footer" class="dialog-footer">
        <el-button @click="DMLdialog.visiable = false">取 消</el-button>
        <el-button @click="confirm">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { GetcheckItemTable } from '@/api/qualityManagement/firstFQC.js'
import { mapGetters } from 'vuex'
export default {
  name: 'againFQC',
  data() {
    return {
      paint: [{ inspectionModule: '' }],
      device: [{ inspectionModule: '' }],
      blank: [{ inspectionModule: '' }], // 毛坯
      program: [{ inspectionModule: '' }], // 程序
      team: [{ inspectionModule: '' }], //班组

      ProductSituationForm: {
        workorderid: 'VW123456',
        productName: 'VW12309',
        direction: '左',
        color: 'blue',
        team: 'A',
        inputNum: 7852,
      },
      signal: null,
      data: null,

      DMLdialog: {
        visiable: false,
      },
      toUpdateNum: 0, //弹窗更新值
      toname: '',
      toindex: 0, //索引
    }
  },
  watch: {
    '$store.getters.counterList_v2': {
      immediate: true,
      deep: true,
      handler(newValue, oldValue) {
        if (newValue.checkid && newValue.checkid.length > 0) {
          let checkid_ = newValue.checkid.substring(0, 3)
          switch (this.$store.getters.counterList_v2.Moudle) {
            case '油漆':
              this.paint.filter((it) => it.id == checkid_)[0].counter = this.$store.getters.counterList_v2.sum
              break
            case '设备':
              this.device.filter((it) => it.id == checkid_)[0].counter = this.$store.getters.counterList_v2.sum
              break
            case '毛坯':
              this.blank.filter((it) => it.id == checkid_)[0].counter = this.$store.getters.counterList_v2.sum
              break
            case '程序':
              this.program.filter((it) => it.id == checkid_)[0].counter = this.$store.getters.counterList_v2.sum
              break
            case '班组操作':
              this.team.filter((it) => it.id == checkid_)[0].counter = this.$store.getters.counterList_v2.sum
              break
          }
        }
      },
    },
  },
  computed: {
    ...mapGetters(['counterList']),
  },
  created() {
    this.getCheckItemList()
  },
  mounted() {},
  methods: {
    //todo  获取检测项
    getCheckItemList() {
      GetcheckItemTable()
        .then((result) => {
          if (result.code == 200) {
            this.paint = result.data.paint
            this.paint.forEach((item) => {
              if (item.counter == null) item.counter = 0
            })
            this.device = result.data.device
            this.device.forEach((item) => {
              if (item.counter == null) item.counter = 0
            })
            this.blank = result.data.blank
            this.blank.forEach((item) => {
              if (item.counter == null) item.counter = 0
            })
            this.program = result.data.program
            this.program.forEach((item) => {
              if (item.counter == null) item.counter = 0
            })
            this.team = result.data.team
            this.team.forEach((item) => {
              if (item.counter == null) item.counter = 0
            })
          }
        })
        .catch((err) => {})
    },
    //todo  累加器
    Accumulator(item, index) {
      switch (item.inspectionModule) {
        case '油漆':
          // 把数据传递到redis
          this.signalr.SR.invoke('SaveCacheInformation_v2', this.ProductSituationForm.workorderid, '油漆', item.id + '').catch((err) => {
            console.log(err)
          })
          // redis再将数据返回

          break
        case '设备':
          this.signalr.SR.invoke('SaveCacheInformation_v2', this.ProductSituationForm.workorderid, '设备', item.id + '').catch((err) => {
            console.log(err)
          })
          break
        case '毛坯':
          this.signalr.SR.invoke('SaveCacheInformation_v2', this.ProductSituationForm.workorderid, '毛坯', item.id + '').catch((err) => {
            console.log(err)
          })
          break
        case '程序':
          this.signalr.SR.invoke('SaveCacheInformation_v2', this.ProductSituationForm.workorderid, '程序', item.id + '').catch((err) => {
            console.log(err)
          })
          break
        case '班组操作':
          this.signalr.SR.invoke('SaveCacheInformation_v2', this.ProductSituationForm.workorderid, '班组操作', item.id + '').catch((err) => {
            console.log(err)
          })
          break
        default:
          this.$notify.warning('异常操作，警告')
          break
      }
    },

    //todo 长按事件
    startimer(value, name, index) {
      this.timer = setTimeout(() => {
        this.toUpdateNum = value
        this.DMLdialog.visiable = true
        this.toname = name
        this.toindex = index
      }, 1000)
    },
    clearTimer() {
      clearTimeout(this.timer)
    },
    //todo  弹窗确认事件
    confirm() {
      switch (this.toname) {
        case 'paint':
          this.paint[this.toindex].counter = this.toUpdateNum
          break
        case 'blank':
          this.device[this.toindex].counter = this.toUpdateNum
          break
        case 'team':
          this.team[this.toindex].counter = this.toUpdateNum
          break
        case 'device':
          this.device[this.toindex].counter = this.toUpdateNum
          break
        case 'program':
          this.program[this.toindex].counter = this.toUpdateNum
          break
      }

      this.DMLdialog.visiable = false
    },
    //todo  数据同步
    /*
     1.从后台获取数据
  
     */

    //todo 初始话 signalR
    /*initSignalR() {
        this.signal = new signalR.HubConnectionBuilder()
          //服务器地址
          //  .withUrl('http://192.168.0.110:8100/myHub', {})
          .withUrl('http://localhost:8888/myHub', {})
          .withAutomaticReconnect()
          .configureLogging(signalR.LogLevel.Information)
          .build()
        // 接受集线器的方法
        this.signal.on('receive_my', (res) => {
          this.data = res
        })
        this.signal
          .start()
          .then(() => {
            console.log('myhub连接成功')
            //vue 发送请求
            this.signal.invoke('SendPublicMessage', '1111').catch((err) => console.log('err', err))
          })
          .catch(() => {
            console.log('myhub连接失败')
          })
  
        // this.signalr.SR.invoke('SendMessage', 'All', 'root', '123456').catch((err) => console.log('err', err))
      },*/
  },
}
</script>

<style lang="scss" scoped>
.title {
  font-family: Arial, sans-serif;
  font-size: 30px;
  color: #303133;
  line-height: 1.5;
  text-align: center;
}
.grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-gap: 0.5em;
  .a {
    .title_sub {
      font-family: Arial, sans-serif;
      font-size: 1.5rem;
      color: #303133;
      text-align: center;
    }
    .grid_sub {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr 1fr;
      grid-gap: 0.5em;
    }
  }
  .b {
    .title_sub {
      font-family: Arial, sans-serif;
      font-size: 1.5rem;
      color: #303133;
      text-align: center;
    }
    .grid_sub {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr 1fr;
      grid-gap: 0.5em;
    }
  }
  .c {
    .title_sub {
      font-family: Arial, sans-serif;
      font-size: 1.5rem;
      color: #303133;
      text-align: center;
    }
    .grid_sub {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr 1fr;
      grid-gap: 0.5em;
    }
  }
  .d {
    .title_sub {
      font-family: Arial, sans-serif;
      font-size: 1.5rem;
      color: #303133;
      text-align: center;
    }
    .grid_sub {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr 1fr;
      grid-gap: 0.5em;
    }
  }
  .e {
    .title_sub {
      font-family: Arial, sans-serif;
      font-size: 1.5rem;
      color: #303133;
      text-align: center;
    }
    .grid_sub {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr 1fr;
      grid-gap: 0.5em;
    }
  }
  .f {
  }
}
.grid > * {
  height: 320px;
  background-color: #ebeef5;
  color: white;
  border-radius: 0.5em;
}

.grid_sub > * {
  height: 80px;
  background-color: #11a983;
  width: 60px;
  color: white;
  border-radius: 0.2em;
  transition: all 0.2s ease-in-out;
  &:hover {
    cursor: pointer;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 #c6e2ff, inset 18px 18px 30px rgba(0, 0, 0, 0.1), inset -18px -18px 30px #c6e2ff;
  }
}

.title_Line {
  color: #409eff;
  font-family: Arial, sans-serif;
  font-size: 1rem;
  text-align: center;
  margin-top: 40px;
}
.f_item {
  margin-top: 10px;
  margin-left: 20px;
}
.f_name {
  color: #409eff;
  font-family: Arial, sans-serif;
  font-size: 1.2rem;
}
.context {
  margin: 0.5em 1em;
  font-size: 0.8rem;
}
.button_ {
  width: 100%;
  height: 100%;
  text-align: center;
}
.number {
  font-size: 1.2rem;
  text-align: center;
  color: red;
  font-weight: bold;
}
</style>
