<template>
  <view class="">
    <uni-popup ref="popup" :maskClick="false">
      <view class="uni-flex uni-column pop_customer">
        <view class="" style="padding: 10rpx">
          <view class="uni-flex u-col-center uni-row space-between" style="padding: 10rpx 10rpx 20rpx 10rpx">
            <view class="" style="font-size: 35rpx">
              {{ title }}
            </view>
            <image style="width: 35rpx; height: 35rpx" src="/static/icons/icons_close.svg" @click="closeRequestPopup()"></image>
          </view>
          <view class="split_line"></view>
          <view class="uni-flex uni-column" style="background-color: white">
            <view class="uni-flex uni-column">
              <view class="title" style="display: flex; align-items: center; padding: 10rpx">
                <text style="flex-shrink: 0; width: 25%">生产线：</text>
                <view class="customerBorder" @click="showSelectLine">
                  {{ productionLineName }}
                </view>
                <u-select v-model="showProductLineSelect" mode="mutil-column-auto" title="请选择生产线和工位" :list="productLineList" @confirm="confirmSelectLine"></u-select>

                <view class="">
                  <image src="/static/icons/down.svg" mode="" style="width: 40rpx; height: 40rpx; margin-left: 20rpx" @click="showSelectLine"> </image>
                </view>
              </view>
              <view class="split_line"></view>
              <view class="title" style="display: flex; align-items: center; padding: 10rpx">
                <text style="flex-shrink: 0; width: 25%">计划日期：</text>
                <view class="customerBorder" @click="showSelectDate">
                  {{ planDate }}
                </view>
                <u-select v-model="showDateSelect" mode="mutil-column-auto" :list="planDateList" @confirm="confirmSelectDate"></u-select>

                <view class="">
                  <image src="/static/icons/down.svg" mode="" style="width: 40rpx; height: 40rpx; margin-left: 20rpx" @click="showSelectDate"> </image>
                </view>
              </view>
              <view class="split_line"></view>
              <view class="title" style="display: flex; align-items: center; padding: 10rpx">
                <text style="flex-shrink: 0; width: 25%">物料代码：</text>
                <view class="customerBorder">
                  {{ itemCode }}
                </view>
                <u-select v-model="showItemCodeSelect" mode="single-column" :list="itemCodeList" @confirm="confirmSelectItem"></u-select>
                <view class="">
                  <image src="/static/icons/down.svg" mode="" style="width: 40rpx; height: 40rpx; margin-left: 20rpx" @click="showSelectItemCode"> </image>
                </view>
              </view>
              <view class="split_line"></view>
              <view class="title" style="display: flex; align-items: center; padding: 10rpx">
                <text style="flex-shrink: 0; width: 25%">数量：</text>
                <uni-easyinput v-model="planQty"></uni-easyinput>
                <view v-if="uom">({{ getUomInfo(uom) }})</view>
                <view class="">
                  <image src="" mode="" style="width: 40rpx; height: 40rpx; margin-left: 20rpx"> </image>
                </view>
              </view>

              <view class="split_line"></view>
              <view class="title" style="display: flex; align-items: center; padding: 10rpx">
                <text style="flex-shrink: 0; width: 25%">包装规格：</text>
                <view class="customerBorder">
                  {{ packUnitName }}
                </view>
                <u-select v-model="showPackUnitSelect" mode="single-column" :list="packUnitList" @confirm="confirmSelectPackUnit"></u-select>
                <view class="">
                  <image src="/static/icons/down.svg" mode="" style="width: 40rpx; height: 40rpx; margin-left: 20rpx" @click="showSelectPackUnit"> </image>
                </view>
              </view>
              <view class="split_line"></view>

              <view class="title" style="display: flex; align-items: center; padding: 10rpx">
                <text style="flex-shrink: 0; width: 25%">批次：</text>
                <uni-easyinput v-model="batch"></uni-easyinput>
                <view class="">
                  <image src="" mode="" style="width: 40rpx; height: 40rpx; margin-left: 20rpx"> </image>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="uni-flex uni-row hide_border">
          <button class="btn_edit_big_cancle" hover-class="btn_edit_big_after" @click="cancel()">取消</button>
          <button class="btn_edit_big_confirm" hover-class="btn_edit_big_after" @click="confirm()">确认</button>
        </view>
      </view>
    </uni-popup>
    <comMessage ref="comMessage"></comMessage>
  </view>
</template>

<script>
import { getIssueJobByProductionline, getPlaneInfoByproductLine, getPackUnitByItemCode, getProductionlineAndWorkStation, getProductionlineItem } from '@/api/request2.js'
import { getPackUnitName, getUomInfo } from '@/common/directory.js'

import { getCurrDate, getBatch8, dateFormatData, lastThreeDays } from '@/common/basic.js'

import { calc } from '@/common/calc.js'

import uom from '@/mycomponents/qty/uom.vue'
import packQty from '@/mycomponents/qty/packQty.vue'
import balanceStatus from '@/mycomponents/status/balanceStatus.vue'
import winScanItem from '@/mycomponents/scan/winScanItem.vue'

export default {
  components: {
    uom,
    balanceStatus,
    winScanItem,
    packQty
  },
  data() {
    return {
      itemCode: '请选择物料信息',
      uom: '',
      qty: null,
      planQty: 0,
      goodQty: 0,
      planNumber: '',
      productLineCode: '',
      showProductLineSelect: false,
      productLineList: [],
      productionLineName: '请选择生产线',
      productionLineCode: '',
      batch: '',
      packUnitName: '请选择包装规格',
      packUnit: '',
      packUnitList: [],
      packQtyHint: '',
      packQty: 0,
      showPackUnitSelect: false,
      itemCodeList: [],
      showItemCodeSelect: false,
      workStationCode: '',
      planDate: '',
      showDateSelect: false,
      planDateList: [],
      fgLocationCode: '',
      rawLocationCode: ''
    }
  },
  props: {
    title: {
      type: String,
      default: '开工阶段'
    },
    itemCodeTypeList: {
      type: Array,
      default: []
    }
  },
  methods: {
    openRequestPopup() {
      this.initData()
      this.planDate = getCurrDate()
      this.batch = getBatch8()
      this.$refs.popup.open('bottom')
    },
    initData() {
      this.itemCode = '请选择物料信息'
      this.uom = ''
      this.planQty = 0
      this.goodQty = 0
      this.packQty = 0
      this.planNumber = ''
      this.productLineCode = ''
      this.showProductLineSelect = false
      this.productLineList = []
      this.productionLineName = '请选择生产线'
      this.productionLineCode = ''
      this.batch = ''
      this.packUnitName = '请选择包装规格'
      ;(this.packUnit = ''), (this.packQtyHint = '')
      this.showPackUnitSelect = false
      // this.packUnitList = []
      this.itemCodeList = []
      this.showItemCodeSelect = false
      this.workStationCode = ''
      this.planDate = ''
      this.showDateSelect = false
      this.planDateList = []
      this.fgLocationCode = ''
      this.rawLocationCode = ''
    },

    closeRequestPopup() {
      this.$refs.popup.close()
    },
    itemCodeLoseFocus() {
      this.itemCodeFocus = false
    },

    confirm() {
      if (!this.planDate) {
        this.showErrorMessage('请先选择计划日期')
        return
      }

      if (this.productionLineName == '请选择生产线') {
        this.showErrorMessage('请选择生产线')
        return
      }

      if (!this.batch) {
        this.showErrorMessage('请输入批次例如:20200101')
        return
      }

      if (this.itemCode == '请选择物料信息') {
        this.showErrorMessage('请选择物料信息')
        return
      }

      if (this.planQty <= 0) {
        this.showErrorMessage('请输入完工数量')
        return
      }

      if (this.packUnitName == '请选择包装规格') {
        this.showErrorMessage('请选择包装规格')
        return
      }

      this.callback()
    },

    callback() {
      const item = {
        productionLineName: '',
        productionLineCode: '', // 生产线
        itemCode: this.itemCode,
        itemName: this.itemName,
        uom: this.getUomInfo(this.uom),
        batch: this.batch,
        packUnitName: this.packUnitName,
        packUnit: this.packUnit,
        packQtyHint: this.packQtyHint,
        packQty: this.packQty,
        planQty: this.planQty,
        goodQty: this.goodQty,
        planNumber: '',
        workStationCode: this.workStationCode,
        fgLocationCode: this.fgLocationCode,
        rawLocationCode: this.rawLocationCode
      }
      this.closeRequestPopup()
      this.$emit('confirm', item)
    },

    showErrorMessage(message, type) {
      setTimeout((r) => {
        this.$refs.comMessage.showErrorMessage(message, (res) => {})
      })
    },
    cancel(e) {
      this.closeRequestPopup()
    },

    confirmSelectLine(data) {
      this.productionLineName = `${data[0].label}—${data[1].label}`
      this.productionLineCode = data[0].value
      this.workStationCode = data[1].value
      const parent = this.productLineList.filter((res) => res.value == this.productionLineCode)
      const fgLocation = parent[0].children.filter((children) => children.value == this.workStationCode)
      this.fgLocationCode = fgLocation[0].fgLocationCode
      this.clearItemCode()
      this.clearPackUnit()
    },
    clearItemCode() {
      this.planDate = getCurrDate()
      this.itemCode = '请选择物料信息'
      this.uom = ''
      this.planQty = 0
      this.goodQty = 0
      this.planNumber = ''
    },

    confirmSelectDate(data) {
      this.planDate = data[0].label
    },

    showSelectDate() {
      this.showDateSelect = true
      const list = lastThreeDays(3)
      this.planDateList = []
      list.forEach((res) => {
        this.planDateList.push({
          label: res,
          value: ''
        })
      })
    },

    showSelectLine() {
      if (this.productLineList.length == 0) {
        uni.showLoading({
          title: '加载中',
          mask: true
        })
        getProductionlineAndWorkStation()
          .then((res) => {
            uni.hideLoading()
            if (res.data && res.data.length > 0) {
              this.productLineList = res.data
              this.showProductLineSelect = true
            } else {
              this.showErrorMessage('未查找到生产线信息')
            }
          })
          .catch((error) => {
            uni.hideLoading()
            this.showErrorMessage(error)
          })
      } else {
        this.showProductLineSelect = true
      }
    },
    showSelectItemCode() {
      if (!this.productionLineCode) {
        this.showErrorMessage('请先选择生产线')
        return
      }
      uni.showLoading({
        title: '加载中',
        mask: true
      })
      const param = {
        pageSize: 20,
        pageNo: 1,
        productionLineCode: this.productionLineCode
      }

      getProductionlineItem(param)
        .then((res) => {
          uni.hideLoading()
          if (res.data.list && res.data.list.length > 0) {
            res.data.list.forEach((item) => {
              item.label = item.itemCode
              item.value = item
            })
            this.itemCodeList = res.data.list
            this.showItemCodeSelect = true
          } else {
            this.showErrorMessage('未查找到物料信息')
          }
        })
        .catch((error) => {
          uni.hideLoading()
          this.showErrorMessage(error)
        })
    },
    confirmSelectItem(data) {
      const itemInfo = data[0].value
      this.itemCode = itemInfo.itemCode
      this.uom = itemInfo.uom

      // 清除其他数据
      this.clearPackUnit()
      uni.showLoading({
        title: '加载中',
        mask: true
      })
      getPackUnitByItemCode(this.itemCode)
        .then((res) => {
          uni.hideLoading()
          if (res.data && res.data.list.length > 0) {
            res.data.list.forEach((item) => {
              item.value = item.packUnit
              item.label = `${getPackUnitName(item.packUnit)}(${item.packQty}${this.getUomInfo(item.uom)})`
            })
            this.packUnitList = res.data.list
            const defaultData = res.data.list.filter((item) => item.defaultPackageunit == 'TRUE')
            this.confirmSelectPackUnit(defaultData)
          }
        })
        .catch((error) => {
          uni.hideLoading()
        })
    },

    clearPackUnit() {
      this.packUnitName = '请选择包装规格'
      this.packUnit = ''
      const pack = this.packUnitList.filter((r) => r.packUnit == this.packUnit)
      this.packQtyHint = ''
      this.packQty = 0
    },

    showSelectPackUnit() {
      if (this.itemCode == '请选择物料信息') {
        this.showErrorMessage('请先选择物料')
        return
      }

      uni.showLoading({
        title: '加载中',
        mask: true
      })
      getPackUnitByItemCode(this.itemCode)
        .then((res) => {
          uni.hideLoading()
          if (res.data && res.data.list.length > 0) {
            res.data.list.forEach((item) => {
              item.value = item.packUnit
              item.label = `${getPackUnitName(item.packUnit)}(${item.packQty}${this.getUomInfo(item.uom)})`
            })
            this.packUnitList = res.data.list
            this.showPackUnitSelect = true
          } else {
            this.showErrorMessage('未查找到包装信息')
          }
        })
        .catch((error) => {
          uni.hideLoading()
          this.showErrorMessage(error)
        })
    },

    confirmSelectPackUnit(data) {
      this.packUnitName = data[0].label
      this.packUnit = data[0].value
      const pack = this.packUnitList.filter((r) => r.packUnit == this.packUnit)
      this.packQtyHint = `${pack[0].packQty}(${this.getUomInfo(pack[0].uom)})`
      this.packQty = pack[0].packQty
    },
    getUomInfo(uom) {
      const item = getUomInfo(uom)
      if (item == '') {
        return uom
      }
      return item.label
    }
  }
}
</script>

<style lang="scss">
.title {
  font-size: 30rpx;
}

.customerBorder {
  width: 100%;
  border: 1rpx solid lightgray;
  border-radius: 5rpx;
  padding: 15rpx;
}
</style>
