<template>
  <view class="">
    <u-popup v-model="show" mode="bottom">
      <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="closeEditPopup"></image>
          </view>
          <view class="split_line"></view>
          <view class="uni-flex uni-column" style="background-color: white; height: 60%">
            <view class="uni-flex uni-column">
              <view class="uni-flex uni-row space-between padding title">
                <text>标包个数 : </text>
                <view class="uni-flex uni-row u-col-center">
                  <!-- <uni-number-box @change="calcQty($event,stdCount)" :value="stdCount" :focus="false">
									</uni-number-box> -->
                  <u-number-box v-model="stdCount" @change="calcQty($event, stdCount)" :focus="false"></u-number-box>
                  <view class="std_pack">
                    {{ handleGetPackUnitInfo(dataContent.packUnit) }}
                  </view>
                </view>
              </view>
              <view class="split_line"></view>
              <view class="uni-flex uni-row space-between padding title u-col-center">
                <text>标包量 : </text>
                <view class="uni-flex u-col-center uni-row">
                  <text>{{ Number(dataContent.packQty) }}</text>
                  <uom :uom="dataContent.uom"></uom>
                </view>
              </view>

              <view class="split_line"></view>
              <view class="uni-flex uni-row space-between padding title u-col-center">
                <text>数量 : </text>
                <view class="uni-flex uni-row uni-center" style="align-items: center">
                  <input class="qty_input" v-model="allQty" :focus="true" type="number" @mousedown="mousedown" @input="checkNum" :maxlength="maxlength" />
                  <uom :uom="dataContent.uom"></uom>
                </view>
              </view>
              <view class="split_line"></view>
              <view v-if="isShowBalance" class="uni-flex uni-row space-between padding title u-col-center">
                <text>库存数量 : </text>
                <view class="uni-flex uni-row uni-center" style="align-items: center">
                  <text class="text_recommend">{{ Number(dataContent.balanceQty) }}</text>
                  <uom :uom="dataContent.uom"></uom>
                </view>
              </view>
              <view class="split_line"></view>
              <view v-if="isShowStatus" class="uni-flex uni-row space-between title" style="align-items: center; padding-left: 30rpx">
                <text>库存状态 : </text>
                <view class="uni-flex uni-row uni-center" style="align-items: center">
                  <balanceStatus ref="balanceStatus" :status="inventoryStatus" :allowEdit="true" @updateStatus="updateStatus" @onOpen="clickState"> </balanceStatus>
                </view>
              </view>
              <view class="split_line"></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 v-if="showConfirmCountdown" class="btn_edit_big_confirm" hover-class="btn_edit_big_after" @click="confirm()">确认({{ seconds }}s关闭)</button>
          <button v-else class="btn_edit_big_confirm" hover-class="btn_edit_big_after" @click="confirm()">确认</button>
        </view>
      </view>
    </u-popup>
    <com-message ref="comMessageRef" />
  </view>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance } from 'vue'
import uom from '@/mycomponents/qty/uom.vue'
import balanceStatus from '@/mycomponents/status/balanceStatus.vue'
import { getPackUnitInfo, getInventoryStatusName } from '@/common/directory.js'

const props = defineProps({
  title: {
    type: String,
    default: '编辑数量'
  },
  settingParam: {
    type: Object,
    default: {}
  },
  isShowStatus: {
    type: Boolean,
    default: true
  },
  isShowBalance: {
    type: Boolean,
    default: true
  },
  allowEditStatus: {
    type: Boolean,
    default: false
  }
})
const allQty = ref(0)
const stdCount = ref(0)
const stateData = ref(0)
const balanceQty = ref(0)
const inventoryStatus = ref('')
const dataContent = ref({})
const handleQty = ref(0)
const seconds = ref(0)
const timer = ref({})
const showConfirmCountdown = ref(false)
const detailList = ref([])
const maxlength = ref(10)
const show = ref(false)
const mode = ref('add') // add 新增  edit 编辑
const checkNum = (e) => {
  const { value } = e.detail
  const dot = value.indexOf('.') // 包含小数点
  const reg = /^[0-9]+$/ // 正整数
  if (dot > -1) {
    maxlength.value = dot + 7 // 长度是小数点后两位
    if (value.length > dot + 7) {
    }
  }
  if (reg.test(value)) {
    // 如果是正整数不包含小数点
    maxlength.value = 10
  }
}

const openEditPopup = (item, detailList) => {
  initData(item, detailList)
  showConfirmCountdown.value = false
  mode.value = 'edit'
  setTimeout((res) => {
    show.value = true
  }, 500)
  clearInterval(timer.value)
}

// 新增时弹出

const openEditPopupShowSeconds = (item, detailList) => {
  initData(item, detailList)
  showConfirmCountdown.value = true
  mode.value = 'add'
  setTimeout((res) => {
    show.value = true
  }, 500)
  startTimer()
}

const initData = (item, detailListParams) => {
  dataContent.value = item
  inventoryStatus.value = dataContent.value.inventoryStatus
  allQty.value = Number(dataContent.value.handleQty)
  stdCount.value = Math.ceil(allQty.value / dataContent.value.packQty)
  detailList.value = detailListParams
}

const mousedown = () => {
  showConfirmCountdown.value = false
  clearInterval(timer.value)
}

const clickState = () => {
  showConfirmCountdown.value = false
  clearInterval(timer.value)
}

const closeEditPopup = () => {
  clearInterval(timer.value)
  emit('close')
  show.value = false
}
const confirm = () => {
  setValue()
}
const cancel = () => {
  closeEditPopup()
}
const startTimer = () => {
  seconds.value = 3
  clearInterval(timer.value)
  timer.value = setInterval(() => {
    seconds.value--
    if (seconds.value <= 0) {
      confirm()
      // this.cancel()
    }
  }, 1000)
}
const calcQty = (val) => {
  if (val > 0) {
    allQty.value = val * Number(dataContent.value.packQty)
  }
}

const setValue = () => {
  dataContent.value.handleQty = Number(allQty.value)
  emit('confirm', Number(allQty.value), inventoryStatus.value, mode.value)
  closeEditPopup()
}

const updateStatus = (value) => {
  inventoryStatus.value = value
}

const handleGetPackUnitInfo = (value) => {
  return getPackUnitInfo(value).name
}
// 传递给父类
const emit = defineEmits(['close', 'confirm'])
defineExpose({
  openEditPopupShowSeconds,
  openEditPopup
})
</script>

<style lang="scss">
.uni-popup .uni-popup__wrapper {
  width: 100% !important;
  padding: 30rpx;
}

.hide_border {
  button {
    border: none;
  }

  button::after {
    border: none;
  }
}

.title {
  font-size: 30rpx;
}
</style>
