<template>
  <el-config-provider :locale="zhCn">
    <el-container class="content">
      <div class="work-area">
        <fieldset class="search-area">
          <el-form ref="inventoryRequestFormRef" :model="inventoryRequestFormEntity" :label-position="labelPosition"
                   label-width="158px"
                   style="max-width: 100%" :rules="requestRules" status-icon>
            <div style="display: flex; justify-content: space-between;">
              <el-row>
                <el-form-item label="料号" prop="goodsId">
                  <el-input v-model="inventoryRequestFormEntity.goodsId" ref="goodsId" clearable/>
                </el-form-item>
                <el-form-item label="箱号" prop="vehicleId">
                  <el-input v-model="inventoryRequestFormEntity.vehicleId" ref="vehicleId" clearable/>
                </el-form-item>
              </el-row>
              <el-row>
                <el-button type="primary"
                           style="height: 50px; width: 100px; margin: auto 5px auto 5px; font-size: large; color: black;"
                           @click="sendInventoryRequest()">下发盘点
                </el-button>
                <el-button type="warning"
                           style="height: 50px; width: 100px; margin: auto 5px auto 5px; font-size: large; color: black;"
                           @click="clearInput()">清除输入
                </el-button>
              </el-row>
            </div>
          </el-form>
        </fieldset>
        <fieldset class="confirm-area">
          <el-form ref="confirmRef" :model="confirmEntity" :label-position="labelPosition" label-width="158px"
                   style="max-width: 100%" :rules="confirmRules" status-icon>
            <div style="display: flex; justify-content: space-between;">
              <el-row>
                <el-form-item label="盘点任务号" prop="inventoryId">
                  <el-input v-model="confirmEntity.inventoryId" disabled/>
                </el-form-item>
                <el-form-item label="物料号" prop="goodsId">
                  <el-input v-model="confirmEntity.goodsId" disabled/>
                </el-form-item>
                <el-form-item label="箱号" prop="vehicleId">
                  <el-input v-model="confirmEntity.vehicleId" disabled/>
                </el-form-item>
                <el-form-item label="系统数量" prop="stockNum">
                  <el-input v-model="confirmEntity.stockNum" disabled/>
                </el-form-item>
                <el-form-item label="确认数量" prop="confirmNum">
                  <el-input-number v-model.number="confirmEntity.confirmNum"
                                   controls-position="right" :min="0" clearable/>
                </el-form-item>
              </el-row>
              <el-row>
                <el-button type="success"
                           style="height: 50px; width: 100px; margin: auto 5px auto 5px; font-size: large; color: black;"
                           @click="confirmOrRelease()">确认/放行
                </el-button>
              </el-row>
            </div>
          </el-form>
        </fieldset>
      </div>
    </el-container>
  </el-config-provider>
</template>

<script setup>
import store from '@/store'
import {nextTick, onBeforeUnmount, onMounted, reactive, ref, watch} from 'vue'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import {useRoute} from "vue-router";
import {errorBox, warningBox} from "@/utils/myMessageBox";
import {ElMessage} from "element-plus";
import {confirmInventory, getInventoryConfirm, requestInventory} from "@/api/task";
import {labelPosition} from "@/constant/form";

const STAND_ID = store.getters.getStandId
const USER_NAME = store.getters.getUserName
let timer = ref()
const route = useRoute()// 路由
let inventoryRequestFormRef = ref()
let inventoryRequestFormEntity = reactive({
  goodsId: '',
  vehicleId: ''
})
const requestRules = reactive({})
let confirmRef = ref()
let confirmEntity = reactive({
  inventoryId: '',
  vehicleId: '',
  goodsId: '',
  stockNum: null,
  confirmNum: null
})
const confirmRules = reactive({})
let pauseGetPickFlag = ref(false)
// 系统
onMounted(() => {
  nextTick(() => {
    timer.value = setInterval(() => {
      timerTask_1()
    }, 1000)
  })
})
onBeforeUnmount(() => {
  clearInterval(timer.value)
})
// 监视路由
watch(() => route.path, (newVal, oldVal) => {
  if (newVal === '/inventory') {
    timer.value = setInterval(() => {
      timerTask_1()
    }, 1000)
  } else {
    clearInterval(timer.value)
  }
})
// 定时器任务1
const timerTask_1 = () => {
  // 查询盘点列表
  getInventory()
}
// 查询盘点信息
const getInventory = () => {
  if (pauseGetPickFlag.value) {
    return
  }
  const request = {
    standId: STAND_ID,
    userName: USER_NAME
  }
  // 获取当前拣选信息
  getInventoryConfirm(request).then(res => {
    const response = res.data
    if (response.code == 0) {
      const confirmVo = response.data
      // 设置form
      confirmEntity.inventoryId = confirmVo.inventoryId
      confirmEntity.goodsId = confirmVo.goodsId
      confirmEntity.vehicleId = confirmVo.vehicleId
      confirmEntity.stockNum = confirmVo.stockNum
      confirmEntity.confirmNum = confirmVo.confirmNum
      pauseGetPickFlag.value= true
    } else if (response.code == 400) {
      // 警告，弹框
      pauseGetPickFlag.value = true
      warningBox(response.message)
    }
  }).catch(err => {
    console.log(err)
    pauseGetPickFlag.value = true
    errorBox('请求错误，请检查完原因后刷新界面。')
  })
}
// 下发盘点任务
const sendInventoryRequest = () => {
  inventoryRequestFormEntity.goodsId = inventoryRequestFormEntity.goodsId.trim().toUpperCase()
  inventoryRequestFormEntity.vehicleId = inventoryRequestFormEntity.vehicleId.trim().toUpperCase()
  if (inventoryRequestFormEntity.goodsId == '') {
    ElMessage.error("料号为必须项。")
    return
  }
  const request = {
    goodsId: inventoryRequestFormEntity.goodsId,
    vehicleId: inventoryRequestFormEntity.vehicleId,
    standId: STAND_ID,
    userName: USER_NAME
  }
  requestInventory(request).then(res => {
    const response = res.data
    if (response.code == 0) {
      ElMessage.success(response.message)
      pauseGetPickFlag.value = false
    } else {
      errorBox(response.message)
    }
  }).catch(err => {
    console.log(err)
    ElMessage.error("发生异常。")
  })
}
// 确认/放行
const confirmOrRelease = () => {
  // 确认放行---与配料工作区分开来
  const request = {
    inventoryId: confirmEntity.inventoryId,
    goodsId: confirmEntity.goodsId,
    vehicleId: confirmEntity.vehicleId,
    confirmNum: confirmEntity.confirmNum,
    standId:STAND_ID,
    userName: USER_NAME
  }
  confirmInventory(request).then(res => {
    const response = res.data
    if (response.code == 0) {
      // 设置form
      resetConfirmEntity()
      ElMessage.success(response.message)
      pauseGetPickFlag.value = false
    } else if (response.code == 400) {
      // 设置form
      resetConfirmEntity()
      warningBox(response.message)
      pauseGetPickFlag.value = false
    } else {
      // 错误，弹框
      errorBox(response.message)
    }
  }).catch(err => {
    console.log(err)
    errorBox('请求错误，请检查完原因后刷新界面。')
  })
}
// 重置确认信息
const resetConfirmEntity = () => {
  confirmEntity.inventoryId = ''
  confirmEntity.goodsId = ''
  confirmEntity.vehicleId = ''
  confirmEntity.stockNum = null
  confirmEntity.confirmNum = null
}
// 清空下发信息
const clearInput = () => {
  inventoryRequestFormEntity.goodsId = ''
  inventoryRequestFormEntity.vehicleId = ''
}
</script>

<style scoped>
.content {
  display: flex;
  width: 100%;
}

.work-area {
  width: 100%;
  /* padding: 5px; */
}

.search-area {
  margin: auto;
  min-height: fit-content;
  max-height: 90%;
  margin-bottom: 10px;
  min-width: inherit;
  border: solid 1px;
  border-radius: 10px;
  box-shadow: 0px 15px 10px -15px #000;
  overflow: auto;
  padding: 10px;
}

.confirm-area {
  margin: auto;
  min-height: fit-content;
  max-height: 90%;
  margin-bottom: 10px;
  min-width: inherit;
  border: solid 1px;
  border-radius: 10px;
  box-shadow: 0px 15px 10px -15px #000;
  overflow: auto;
  padding: 10px;
}

.el-form-item {
  margin: 10px 5px 10px 5px;
}

.el-form-item .el-input {
  width: 196px;
}

.table-class {
  margin: 5px 5px 5px 5px;
  width: inherit;
}
</style>