<template>
  <div>
    <div>
      <p-card title="盘点执行">
        <a-row>
          <a-col :span="12">
            <div>
              <p-grid-form ref="itemForm" :items="formItems"> </p-grid-form>
            </div>
            <a-row :gutter="[16, 16]" style="margin: 20px">
              <a-col :span="12">
                <p-button :size="size" @click="changeNum(-10)" class="group-btn-b"> -10 </p-button>
                <p-button :size="size" @click="changeNum(-1)" style="margin-left: 15px" class="group-btn-b">
                  -1
                </p-button>
                <p-button :size="size" @click="changeNum(10)" style="margin-left: 15px" class="group-btn-b">
                  +10
                </p-button>
                <p-button :size="size" @click="changeNum(1)" style="margin-left: 15px" class="group-btn-b">
                  +1
                </p-button>
              </a-col>
              <a-col :span="11">
                <!-- <div class="input-a" style="margin-top: 10px">
                  {{ selectLabel }}
                  <p-select
                    v-model="conserveFlag"
                    style="width: 120px"
                    :options="provinceData"
                    @change="handleProvinceChange"
                  />
                  <p class="testName">{{ message }}</p>
                </div> -->
                <p class="testName">{{ message }}</p>
              </a-col>
            </a-row>
          </a-col>
          <a-col :span="12">
            <img-list v-if="plans && layer" :list="imgList" :imgListData="imgListData"></img-list>

            <div>
              <img
                width="40%"
                height="80px"
                v-for="(item, i) in locationList"
                :style="item.isPower == 1 ? { background: '#f11010' } : {}"
                :key="i"
                alt=""
                class="border-btn-a"
              />
            </div>
          </a-col>
        </a-row>

        <div class="group-btn">
          <p-checkbox @change="onChange" v-model="checkValue" style="margin-left: 300px"> {{ checkName }}</p-checkbox>
          <p-button type="primary" class="group-btn-a" @click="gsReturn"> 货架归还 </p-button>
          <p-button type="primary" class="group-btn-a" @click="getTask"> 任务领取 </p-button>
          <p-button type="primary" :disabled="btnStatus" class="group-btn-a" @click="ok"> 盘点确认 </p-button>
        </div>
      </p-card>
    </div>
  </div>
</template>
<script>
import { formItems } from './js/config'
import {
  pdTaskConfirm,
  goodsShelvesReturn,
  getMaintainTasks,
  autoCallRcs,
  getMaintainMsgInfo,
  queryImages,
  pdStationCheck,
} from './api'
import imgList from './components/imagelist/index.vue'

import 'viewerjs/dist/viewer.css'
import VueViewer from 'v-viewer'
import Vue from 'vue'
Vue.use(VueViewer)
const imgs = ['/img/盒子.png', '/img/盒子1.png', '/img/盒子2.png']
export default {
  components: {
    'img-list': imgList,
  },

  data() {
    return {
      formItems: formItems(this),
      size: 'large',
      selectLabel: '盘点结论',
      checkName: ' 自动领取',
      message: null,
      checkValue: false,
      Checkbox: '0',
      timer: null,
      photo: ['/img/盒子.png', '/img/盒子1.png', '/img/盒子2.png'], //预览图
      provinceData: [], //盘点结论
      conserveFlag: null,
      imgList: [],
      wareGoodsId: '',
      formData: {},
      value1: [],
      btnStatus: false,
      pdStationCheckType: false,

      locationList: [],
      plans: '',
      layer: '',
      imgListData: {},
    }
  },
  created() {
    // this.imgPhoto = this.photo[0]
    // this.conclude()
  },
  destroyed() {
    clearInterval(this.timer)
  },
  watch: {
    checkValue: {
      handler(val) {
        if (val) {
          console.log(val, 'val')
          const stationNo = this.$refs.itemForm.form.getFieldsValue().stationNo
          if (!stationNo) {
            this.$message.error('请输入站台号')
          }
          this.timer = setInterval(() => {
            this.getTask()
          }, 6000)
        } else {
          clearInterval(this.timer)
        }
      },
    },
    wareGoodsId: {
      handler(val) {
        const wareGoodsId = val
        queryImages({ wareGoodsId }).then((res) => {
          if (res.success) {
            if (res.data && res.data.length > 0) {
              this.photo = res.data
            } else {
              this.photo = imgs
            }
          }
        })
      },
    },
  },
  methods: {
    changeNum(num) {
      let Nownum = this.$refs.itemForm.form.getFieldsValue().qty || 0
      this.$refs.itemForm.form.setFieldsValue({ qty: Number(Nownum) + Number(num) })
    },
    async pdStationCheck(stationNo) {
      try {
        let res = await pdStationCheck({ stationNo })
        if (res.success) {
          this.$message.success(res.message)
          this.pdStationCheckType = true
        } else {
          this.$exception(res)
          this.pdStationCheckType = false
        }
      } catch (error) {
        this.$exception(error)
      }
    },
    //自动任务领取
    onChange(e) {
      console.log(e)
      console.log(this.checkValue)
      if (e.target.checked) {
        this.Checkbox = '1'
        this.getTask()
      } else {
        this.Checkbox = '0'
        // this.pdStationCheckType = true
      }
    },
    //货架归还
    gsReturn() {
      const params = this.$refs.itemForm.form.getFieldsValue()
      goodsShelvesReturn(params).then((res) => {
        if (!res.success) {
          this.$exception(res)
          return false
        }
        let stationNo = params.stationNo
        this.$refs.itemForm.form.resetFields()
        this.imgList = {}
        this.provinceData = []
        this.checkValue = false
        this.$message.success(this.$lang('货架归还成功'))
        this.reset()
        this.photo = imgs
        this.$refs.itemForm.form.setFieldsValue({ stationNo: stationNo })
      })
    },
    // 任务领取
    getTask() {
      if (!this.pdStationCheckType) {
        this.$message.warning('请先选择正确站台')
        return
      }
      console.log(this.value1, '1111')
      const stationNo = this.$refs.itemForm.form.getFieldsValue().stationNo
      getMaintainTasks({ stationNo: stationNo, taskType: 40 }).then((res) => {
        console.log(res)
        this.message = res.message
        // if (!res.success) {
        //   this.$exception(res)
        //   return false
        // }
        if (res.code == '202') {
          console.log('货架搬运11111')
          return
        }
        let data = {
          itemName: '测试名称',
          barCode: '测试',
          itemCode: '测试',
          manufacturerName: null,
          specification: '测试',
          cargoOwnerName: '感冒药',
          lotNo: '1',
          containerNo: '200000',
          containerSubNo: '200000A202',
          taskStatus: null,
          category: '感冒药',
          qty: 10,
          plans: 'A',
          layer: 2,
          station: 1,
          taskId: 145,
          isNextTask: 1,
        }
        // this.$refs.itemForm.form.setFieldsValue(data)
        let formData = this.$refs.itemForm.form.getFieldsValue()
        console.log(formData, 'formData')
        if (!formData.itemName) {
          this.$refs.itemForm.form.setFieldsValue(res.data)

          
        //   let { checkType } = res.data
        //   if (checkType == 1) {
        //     this.$refs.itemForm.form.unhiddenItem('qty')
        //   } else {
        //     this.$refs.itemForm.form.hiddenItem('qty')
        //   }
        }
        this.imgListData = res.data
        let { plans, layer } = data
        this.plans = plans
        this.layer = layer
        this.locationList = data.station == 1 ? [{ isPower: 1 }, { isPower: 0 }] : [{ isPower: 0 }, { isPower: 1 }]
        this.message = '请录入盘点结论'
        // clearInterval(this.timer)
      })
    },
    //
    reset() {
      const params = this.$refs.itemForm.form.getFieldsValue()
      this.$refs.itemForm.form.resetFields()
      this.imgList = {}
      // this.number = 0
      // this.sumCount = 0
      // this.conserveFlag = ''
      // this.completeDate  = []

      this.plans = null
      this.layer = null
      let { stationNo } = this.$refs.itemForm.form.getFieldsValue()

      this.locationList = []
      this.$refs.itemForm.form.setFieldsValue({ stationNo: params.stationNo })
      // this.getOption()
      this.photo = imgs
      this.wareGoodsId = ''
    },

    //盘点确认
    ok() {
      const maintainTaskId = this.formData.maintainTaskId
      let obj = {}
      this.value1.forEach((item) => {
        obj[item] = 1
      })
      const params = { ...this.$refs.itemForm.form.getFieldsValue(), maintainTaskId, ...obj }
      // params.conserveFlag = this.conserveFlag //盘点结论

      console.log(params, '===')
      params.taskType = 40
      //   return
      this.btnStatus = true

      pdTaskConfirm(params)
        .then((res) => {
          this.btnStatus = false
          if (!res.success) {
            this.$exception(res)
            return false
          }
          this.$message.success(this.$lang('确认成功'))
          if (!res.data.isNextTask && this.checkValue) {
            this.reset()
            this.getTask()
            return
          }
          if (!res.data.isNextTask && !this.checkValue) {
            this.reset()
            return
          }

          if (res.data.isNextTask) {
            this.imgListData = res.data
            this.$refs.itemForm.form.setFieldsValue(res.data)
            // let { checkType } = res.data
            // if (checkType == 1) {
            //   this.$refs.itemForm.form.unhiddenItem('qty')
            // } else {
            //   this.$refs.itemForm.form.hiddenItem('qty')
            // }
            let { plans, layer } = data
            this.plans = plans
            this.layer = layer
            this.locationList = data.station == 1 ? [{ isPower: 1 }, { isPower: 0 }] : [{ isPower: 0 }, { isPower: 1 }]
            this.message = '请录入盘点结论'
            return
          }

          this.reset()
        })
        .catch((error) => {
          this.btnStatus = false
        })
    },

    //初始化盘点结论下拉框
    conclude() {
      // getMaintainMsgInfo().then((res) => {
      //   if (!res.success) {
      //     this.$exception(res)
      //     return false
      //   }
      //   let opt = []
      //   res.data.forEach((t) => {
      //     opt.push({
      //       title: t.stateDescription,
      //       value: t.stateVlues,
      //     })
      //   })
      //   console.log(opt,'opt');
      //   this.provinceData = opt
      // })
    },

    handleProvinceChange() {},

    //货架排序
    //获取箱子顺序
    arraySort(list) {
      console.log(list)
      let data = {
        1: [],
        2: [],
        3: [],
        4: [],
      }
      if (!list) {
        return
      }
      list.forEach((i) => {
        data[i.layer].push(i)
      })
      console.log(data)
      // this.boxList = data
      return data
    },
  },
}
</script>
<style lang="less" scoped>
/deep/ .ant-input {
  font-weight: bold;
}
.oneclass {
  display: none;
}
.group-btn {
  // float: right;
  //  border: 1px solid #409eff;
  position: relative;
  top: -10px;
  margin: 15px;
  font-weight: bold;
  font-size: 15px;
  .group-btn-a {
    margin-left: 40px;
    height: 50px;
    width: 150px;
  }
}
.group-btn-b {
  width: 50px;
}
.border-btn-a {
  height: 50px;
  width: 200px;
  margin-top: 10px;
  margin-left: 80px;
  background-color: #e4e7ed;
}
.select-a {
  .select-b {
    margin-top: 15px;
    width: 180px;
  }
}
.testName {
  font-weight: bold;
  font-size: 30px;
  color: red;
}
.num {
  font-weight: bold;
  font-size: 35px;
}
.input-b {
  margin-left: 5px;
  width: 220px;
}
.imgPhoto {
  height: 138px;
  overflow: hidden;
}
</style>
