<template>
  <div style="border: 1px solid #938d8d;margin-left: 10px;margin-right: 10px;">
    <el-row :gutter="5" type="flex" justify="end" align="middle" style="min-height: 40px">
      <el-col :span="10">
        <el-button type="primary" @click="click">常规任务保存</el-button>
        <el-button type="primary" @click="saveTasks">特殊任务保存</el-button>
      </el-col>
    </el-row>
    <el-row
      style="border: 1px solid chartreuse;margin-left: 10px;margin-right: 10px;margin-bottom: 10px;margin-top: 20px;"
    >
      <form id="myForm" name="testForm">
        <el-row :gutter="5" type="flex" justify="center" align="middle">
          <el-col :span="12">
            <div v-for="(item,i) in deviceList">
              <div
                v-if="item.hasGood != 0"
                style="float: left;margin-right: 5px;width: 100px;height: 110px;background-color: rgb(0, 238, 153);border-radius: 10%;"
              >
                <!--                <div style="font-size: 15px; margin-left: 30px">{{ item.device_code }}</div>-->
                <el-button size="mini" round style="margin-left: 8px; margin-block-end: 10px">
                  <span style="font-size: 10px" @click="request(i)">{{ '设备:' + item.device_code }}</span>
                </el-button>
                <div style="font-size: 8px; margin-left: 10px; margin-block-end: 5px">{{ '物料类型:' + item.material_type }}</div>
                <div style="font-size: 8px; margin-left: 10px;">{{ '物料数量:' + item.quantity }}</div>
              </div>
              <div
                v-else-if="item.hasGood === 0"
                style="float: left;margin-right: 5px;width: 100px;height: 110px;background-color: beige;border-radius: 10%;"
              >
                <el-checkbox v-model="item.checked" style="margin-left: 20px;">{{ item.device_code }}</el-checkbox>
                <el-button size="mini" round style="margin-left: 8px;">
                  <span style="font-size: 10px">{{ '设备:' + item.device_code }}</span>
                </el-button>
              </div>
            </div>
          </el-col>
        </el-row>

        <el-row :gutter="20" type="flex" align="bottom" justify="space-between">
          <el-col :span="6" style="max-width: 250px">
            <div v-for="(item,i) in deviceList3">
              <div
                v-if="item.hasGood != 0"
                style="float: left;margin-right: 5px;width: 100px;height: 110px;background-color: rgb(0, 238, 153);border-radius: 10%;"
              >
                <el-button size="mini" round style="margin-left: 8px;margin-block-end: 10px">
                  <span style="font-size: 10px" @click="request3(i)">{{ '设备:' + item.device_code }}</span>
                </el-button>
                <div style="font-size: 8px; margin-left: 10px; margin-block-end: 5px">{{ '物料类型:' + item.material_type }}</div>
                <div style="font-size: 8px; margin-left: 10px;">{{ '物料数量:' + item.quantity }}</div>
              </div>
              <div
                v-else-if="item.hasGood === 0"
                style="float: left;margin-right: 5px;width: 100px;height: 110px;background-color: beige;border-radius: 10%;"
              >
                <el-checkbox v-model="item.checked" style="margin-left: 20px;">{{ item.device_code }}</el-checkbox>
                <el-button size="mini" round style="margin-left: 8px;">
                  <span style="font-size: 10px">{{ '设备:' + item.device_code }}</span>
                </el-button>
              </div>
            </div>
          </el-col>

          <el-col :span="18">
            <div v-for="(item,i) in deviceList2">
              <div
                v-if="item.hasGood != 0"
                style="float: left;margin-right: 5px;width: 91px;height: 110px;background-color: rgb(0, 238, 153);border-radius: 10%;"
              >
                <el-checkbox v-model="item.checked" style="margin-left: 20px;">{{ item.device_code }}</el-checkbox>
                <el-button size="mini" round style="margin-left: 8px;margin-block-end: 10px">
                  <span style="font-size: 10px" @click="request2(i)">{{ '设备:' + item.device_code }}</span>
                </el-button>
                <div style="font-size: 8px; margin-left: 10px; margin-block-end: 5px">{{ '物料类型:' + item.material_type }}</div>
                <div style="font-size: 8px; margin-left: 10px;">{{ '物料数量:' + item.quantity }}</div>
              </div>
              <div
                v-else-if="item.hasGood === 0"
                style="float: left;margin-right: 5px;width: 91px;height: 110px;background-color: beige;border-radius: 10%;"
              >
                <!--                <div style="font-size: 15px; margin-left: 30px">{{ item.device_code }}</div>-->
                <el-button size="mini" round style="margin-left: 8px;">
                  <span style="font-size: 10px">{{ '设备:' + item.device_code }}</span>
                </el-button>
              </div>
            </div>
          </el-col>
        </el-row>
      </form>
    </el-row>

    <!--弹窗设置设备与图标绑定与角度-->
    <el-dialog title="添加物料信息" :visible.sync="requestDialogVisible" width="500px">
      <el-form :model="form" size="small" label-width="80px">
        <el-form-item label="设备名字" prop="description">
          <el-input v-model="form.device_name" :disabled="true" style="width: 370px;" />
        </el-form-item>
        <el-form-item label="物料类型" prop="material_type">
          <el-select v-model="form.material_type" style="width: 370px" placeholder="请选择">
            <el-option
              v-for="item in material_types"
              :key="item.id"
              :label="item.label"
              :value="item.label"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="物料数量" prop="quantity">
          <el-input v-model="form.quantity" style="width: 370px;" />
        </el-form-item>
        <el-form-item label="描述信息" prop="description">
          <el-input v-model="form.remark" style="width: 380px;" rows="5" type="textarea" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="success" plain @click="cleanPoint">清 除</el-button>
        <el-button @click="requestDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveRequest">确 定</el-button>
      </div>
    </el-dialog>

    <!--弹窗设置设备与图标绑定与角度-->
    <el-dialog title="添加物料信息" :visible.sync="requestDialogVisible2" width="500px">
      <el-form :model="form2" size="small" label-width="80px">
        <el-form-item label="设备名字" prop="description">
          <el-input v-model="form2.device_name" :disabled="true" style="width: 370px;" />
        </el-form-item>
        <el-form-item label="物料类型" prop="material_type">
          <el-select v-model="form2.material_type" style="width: 370px" placeholder="请选择">
            <el-option
              v-for="item in material_types"
              :key="item.id"
              :label="item.label"
              :value="item.label"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="物料数量" prop="quantity">
          <el-input v-model="form2.quantity" style="width: 370px;" />
        </el-form-item>
        <el-form-item label="描述信息" prop="remark">
          <el-input v-model="form2.remark" style="width: 380px;" rows="5" type="textarea" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="success" plain @click="cleanPoint2">清 除</el-button>
        <el-button @click="requestDialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="saveRequest2">确 定</el-button>
      </div>
    </el-dialog>

    <!--弹窗设置设备与图标绑定与角度-->
    <el-dialog title="添加物料信息" :visible.sync="requestDialogVisible3" width="500px">
      <el-form :model="form3" size="small" label-width="80px">
        <el-form-item label="设备名字" prop="description">
          <el-input v-model="form3.device_name" :disabled="true" style="width: 370px;" />
        </el-form-item>
        <el-form-item label="物料类型" prop="material_type">
          <el-select v-model="form3.material_type" style="width: 370px" placeholder="请选择">
            <el-option
              v-for="item in material_types"
              :key="item.id"
              :label="item.label"
              :value="item.label"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="物料数量" prop="quantity">
          <el-input v-model="form3.quantity" style="width: 370px;" />
        </el-form-item>
        <el-form-item label="描述信息" prop="description">
          <el-input v-model="form3.remark" style="width: 380px;" rows="5" type="textarea" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="success" plain @click="cleanPoint3">清 除</el-button>
        <el-button @click="requestDialogVisible3 = false">取 消</el-button>
        <el-button type="primary" @click="saveRequest3">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import deviceCrud from '@/api/acs/device/device'
import { get } from '@/api/system/dictDetail'
import crudTask, { ordinaryTaskCreate } from '@/api/acs/task/task'
import CRUD, { crud } from '@crud/crud'

export default {
  mixins: [crud()],
  data() {
    return {
      requestDialogVisible: false,
      requestDialogVisible2: false,
      requestDialogVisible3: false,
      responseDialogVisible: false,
      region: '',
      imgUrl: '站点',
      regions: [],
      currentRow: null,
      start_device_code: '',
      start_device_name: '',
      tableData1: [],
      form: {
        device_id: '',
        device_code: '',
        device_name: '',
        material_type: '',
        quantity: 0,
        remark: ''
      },
      form2: {
        device_id: '',
        device_code: '',
        device_name: '',
        material_type: '',
        quantity: 0,
        remark: ''
      },
      form3: {
        device_id: '',
        device_code: '',
        device_name: '',
        material_type: '',
        quantity: 0,
        remark: ''
      },
      testdata: {
        check: null,
        device_code: null
      },
      material_types: [],
      deviceList: [
      ],
      deviceList2: [],
      deviceList3: [],
      deviceListOne: [],
      deviceListTwo: [],
      deviceListThree: [],
      currentDate: new Date(),
      getTime: '',
      getDate: ''
    }
  },
  created() {
    this.webSocket()

    // 获取物料类型字典
    get('material_type').then(data => {
      this.material_types = data.content
    })
    // 获取区域类型
    get('region_type').then(data => {
      this.regions = data.content
      console.log(this.regions)
    })
    this.$nextTick(() => {
      deviceCrud.selectDeviceListOne().then(data => {
        this.deviceListOne = data
      })
    })

    this.$nextTick(() => {
      deviceCrud.selectDeviceListTwo().then(data => {
        this.deviceListTwo = data
      })
    })
    this.$nextTick(() => {
      deviceCrud.selectDeviceListThree().then(data => {
        this.deviceListThree = data
      })
    })
  },
  methods: {
    request(index) {
      this.$nextTick(() => {
        deviceCrud.selectDeviceListOne().then(data => {
          this.deviceListOne = data
          const clickObj = this.deviceListOne[index]
          this.requestDialogVisible = true
          this.form.remark = clickObj.remark
          this.form.material_type = clickObj.material_type
          this.form.quantity = clickObj.quantity
          this.form.device_id = clickObj.device_id
          this.form.device_code = clickObj.device_code
          this.form.device_name = clickObj.device_name
        })
      })
    },
    request2(index) {
      this.$nextTick(() => {
        deviceCrud.selectDeviceListTwo().then(data => {
          this.deviceListTwo = data
          const clickObj = this.deviceListTwo[index]
          this.requestDialogVisible2 = true
          this.form2.remark = clickObj.remark
          this.form2.material_type = clickObj.material_type
          this.form2.quantity = clickObj.quantity
          this.form2.device_id = clickObj.device_id
          this.form2.device_code = clickObj.device_code
          this.form2.device_name = clickObj.device_name
        })
      })
    },
    request3(index) {
      this.$nextTick(() => {
        deviceCrud.selectDeviceListThree().then(data => {
          this.deviceListThree = data
          const clickObj = this.deviceListThree[index]
          this.requestDialogVisible3 = true
          this.form3.remark = clickObj.remark
          this.form3.material_type = clickObj.material_type
          this.form3.quantity = clickObj.quantity
          this.form3.device_id = clickObj.device_id
          this.form3.device_code = clickObj.device_code
          this.form3.device_name = clickObj.device_name
        })
      })
    },
    cleanPoint() {
      deviceCrud.cleanMaterial(this.form).then(res => {
        this.$notify({
          title: '操作成功',
          type: 'success',
          duration: 3000
        })
        this.requestDialogVisible = false
      }).catch(err => {
        console.log(err.response.data.message)
        this.requestDialogVisible = false
      })
    },
    cleanPoint2() {
      deviceCrud.cleanMaterial(this.form2).then(res => {
        this.$notify({
          title: '操作成功',
          type: 'success',
          duration: 3000
        })
        this.requestDialogVisible2 = false
      }).catch(err => {
        console.log(err.response.data.message)
        this.requestDialogVisible = false
      })
    },
    cleanPoint3() {
      deviceCrud.cleanMaterial(this.form3).then(res => {
        this.$notify({
          title: '操作成功',
          type: 'success',
          duration: 3000
        })
        this.requestDialogVisible3 = false
      }).catch(err => {
        console.log(err.response.data.message)
        this.requestDialogVisible = false
      })
    },
    saveRequest() {
      deviceCrud.addMaterial(this.form).then(res => {
        this.$notify({
          title: '操作成功',
          type: 'success',
          duration: 3000
        })
        this.requestDialogVisible = false
      }).catch(err => {
        this.requestDialogVisible = false
        console.log(err.response.data.message)
      })
    },
    saveRequest2() {
      deviceCrud.addMaterial(this.form2).then(res => {
        this.$notify({
          title: '操作成功',
          type: 'success',
          duration: 3000
        })
        this.requestDialogVisible2 = false
      }).catch(err => {
        this.requestDialogVisible2 = false
        console.log(err.response.data.message)
      })
    },
    saveRequest3() {
      deviceCrud.addMaterial(this.form3).then(res => {
        this.$notify({
          title: '操作成功',
          type: 'success',
          duration: 3000
        })
        this.requestDialogVisible3 = false
      }).catch(err => {
        this.requestDialogVisible3 = false
        console.log(err.response.data.message)
      })
    },
    click() {
      var obj1 = this.deviceList2
      var arr1 = []
      let one = 0
      let two = 0
      let three = 0
      for (let i = 0; i < obj1.length; i++) {
        if (obj1[i].checked) {
          one = one + 1
          arr1.push(obj1[i])
        }
      }
      for (let i = 0; i < this.deviceList.length; i++) {
        if (this.deviceList[i].checked) {
          two = two + 1
        }
      }
      for (let i = 0; i < this.deviceList3.length; i++) {
        if (this.deviceList3[i].checked) {
          three = three + 1
        }
      }
      if ((one + two + three) > 1) {
        this.$notify.error({
          title: '只能选择一个起点!'
        })
        return
      }
      const data = {
        'data': arr1
      }
      crudTask.ordinaryTaskCreate(data).then(res => {
        this.$notify({
          title: '保存成功',
          type: 'success',
          duration: 3000
        })
        for (let i = 0; i < arr.length; i++) {
          arr[i].checked = false
        }
      })
    },
    saveTasks() {
      var obj1 = this.deviceList
      var obj2 = this.deviceList2
      var obj3 = this.deviceList3
      var arr1 = []
      var arr2 = []
      var arr3 = []
      let one = 0
      let two = 0
      let three = 0
      for (let i = 0; i < obj1.length; i++) {
        if (obj1[i].checked) {
          one = one + 1
          arr1.push(obj1[i])
        }
      }
      for (let i = 0; i < obj2.length; i++) {
        if (obj2[i].checked) {
          two = two + 1
          arr2.push(obj2[i])
        }
      }
      for (let i = 0; i < obj3.length; i++) {
        if (obj3[i].checked) {
          three = three + 1
          arr3.push(obj3[i])
        }
      }
      if (two === three || two === one) {
        if (two === 0) {
          this.$notify({
            title: '请选择起点设备',
            type: 'warning',
            duration: 3000
          })
        } else {
          const data = {
            'data1': arr1,
            'data2': arr2,
            'data3': arr3
          }
          crudTask.specialTaskCreate(data).then(res => {
            this.$notify({
              title: '保存成功',
              type: 'success',
              duration: 3000
            })
            for (let i = 0; i < arr1.length; i++) {
              arr1[i].checked = false
            }
            for (let i = 0; i < arr2.length; i++) {
              arr2[i].checked = false
            }
            for (let i = 0; i < arr3.length; i++) {
              arr3[i].checked = false
            }
          })
        }
      } else {
        // this.notify('两个区域数据量不一致,操作失败!', 'success')
        this.$notify.error({
          title: '区域数据量不一致,操作失败!'
        })
        this.responseDialogVisible = false
        return
      }
    },

    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true
    },
    webSocket() {
      const that = this
      if (typeof (WebSocket) === 'undefined') {
        this.$notify({
          title: '提示',
          message: '当前浏览器无法接收实时报警信息，请使用谷歌浏览器！',
          type: 'warning',
          duration: 0
        })
      } else {
        const id = 'ndxy_data'
        // 获取token保存到vuex中的用户信息，此处仅适用于本项目，注意删除或修改
        // 实例化socket，这里我把用户名传给了后台，使后台能判断要把消息发给哪个用户，其实也可以后台直接获取用户IP来判断并推送
        // const wsUri = process.env.VUE_APP_WS_API + '/webSocket/' + id
        const wsUri = window.g.prod.VUE_APP_BASE_API.replace('http', 'ws') + '/webSocket/' + id

        this.socket = new WebSocket(wsUri)
        // 监听socket打开
        this.socket.onopen = function() {
          that.socket.send('测试客户端发送消息')
        }
        // 监听socket消息接收
        this.socket.onmessage = function(msg) {
          const data = JSON.parse(msg.data)
          for (let i = 0; i < data.msg.device.length; i++) {
            const item = data.msg.device[i]
            const obj = {
              device_code: item.device_code,
              hasGood: item.hasGood,
              material_type: item.material_type,
              quantity: item.quantity,
              remark: item.remark
            }
            if (that.deviceList.length != data.msg.device.length) {
              that.deviceList.push(obj)
            } else {
              for (let j = 0; j < that.deviceList.length; j++) {
                if (that.deviceList[j].device_code == item.device_code) {
                  if (that.deviceList[j].hasGood != item.hasGood) {
                    that.deviceList[j].device_code = item.device_code
                    that.deviceList[j].hasGood = item.hasGood
                  }
                  if (that.deviceList[j].material_type != item.material_type) {
                    that.deviceList[j].material_type = item.material_type
                  }
                  if (that.deviceList[j].quantity != item.quantity) {
                    that.deviceList[j].quantity = item.quantity
                  }
                  if (that.deviceList[j].remark != item.remark) {
                    that.deviceList[j].remark = item.remark
                  }
                }
              }
            }
          }
          for (let i = 0; i < data.msg.device2.length; i++) {
            const item = data.msg.device2[i]
            const obj = {
              device_code: item.device_code,
              hasGood: item.hasGood,
              material_type: item.material_type,
              quantity: item.quantity,
              remark: item.remark
            }

            if (that.deviceList2.length != data.msg.device2.length) {
              that.deviceList2.push(obj)
            } else {
              for (let j = 0; j < that.deviceList2.length; j++) {
                if (that.deviceList2[j].device_code == item.device_code) {
                  if (that.deviceList2[j].hasGood != item.hasGood) {
                    that.deviceList2[j].device_code = item.device_code
                    that.deviceList2[j].hasGood = item.hasGood
                  }
                  if (that.deviceList2[j].material_type != item.material_type) {
                    that.deviceList2[j].material_type = item.material_type
                  }
                  if (that.deviceList2[j].quantity != item.quantity) {
                    that.deviceList2[j].quantity = item.quantity
                  }
                  if (that.deviceList2[j].remark != item.remark) {
                    that.deviceList2[j].remark = item.remark
                  }
                }
              }
            }
          }
          for (let i = 0; i < data.msg.device3.length; i++) {
            const item = data.msg.device3[i]
            const obj = {
              device_code: item.device_code,
              hasGood: item.hasGood,
              material_type: item.material_type,
              quantity: item.quantity,
              remark: item.remark
            }
            if (that.deviceList3.length != data.msg.device3.length) {
              that.deviceList3.push(obj)
            } else {
              for (let j = 0; j < that.deviceList3.length; j++) {
                if (that.deviceList3[j].device_code == item.device_code) {
                  if (that.deviceList3[j].hasGood != item.hasGood) {
                    that.deviceList3[j].device_code = item.device_code
                    that.deviceList3[j].hasGood = item.hasGood
                  }
                  if (that.deviceList3[j].material_type != item.material_type) {
                    that.deviceList3[j].material_type = item.material_type
                  }
                  if (that.deviceList3[j].quantity != item.quantity) {
                    that.deviceList3[j].quantity = item.quantity
                  }
                  if (that.deviceList3[j].remark != item.remark) {
                    that.deviceList3[j].remark = item.remark
                  }
                }
              }
            }
          }
        }
        // 监听socket错误
        this.socket.onerror = function() {
          that.$notify({
            title: '错误',
            message: '服务器错误，无法接收实时报警信息',
            type: 'error',
            duration: 0
          })
        }
        // 监听socket关闭
        this.socket.onclose = function() {
          console.log('WebSocket已关闭')
        }
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>
