<template>
  <uni-popup ref="popup" type="center">
    <view class="refund-root">
      <view class="title">多份商品退款</view>
      <view class="goods-name">{{ data.goodsName }}</view>
      <view class="goods-operation">
        <uni-number-box :min="1" v-model="refundNum" :max="data.goodsCount" />
      </view>
      <view class="goods-brn">
        <text class="cancel" @tap="popup.close()">取消</text>
        <text class="confirm" @tap="handelerSubmit(refundNum)">确定</text>
      </view>
    </view>
  </uni-popup>
</template>

<script lang="ts" setup>
import { onBeforeUnmount, ref } from 'vue'

/*************************************************
 * 接收参数
 */
interface dataType {
  goodsName: string
  goodsCount: number
  skuID: number
  storeSubID: number
}
interface refundDataType {
  data: dataType
}
const props = defineProps<refundDataType>()
const popup = ref<any>(null)

const emits = defineEmits<{
  (e: 'confirm', num: dataType): void
}>()

/*************************************************
 * 打开多份退款
 */
function open() {
  popup.value.open()
}

/*************************************************
 * 退款数量
 */
let handelerSubmitTimer: any = null
const refundNum = ref<number>(props.data.goodsCount)
function handelerSubmit(num: number) {
  popup.value.close()
  let emitData = {
    goodsName: props.data.goodsName,
    goodsCount: num,
    skuID: props.data.skuID,
    storeSubID: props.data.storeSubID,
  }
  clearTimeout(handelerSubmitTimer)
  handelerSubmitTimer = setTimeout(() => {
    emits('confirm', emitData)
  }, 300)
}

/*************************************************
 * 导出函数
 */
defineExpose({
  open,
})

onBeforeUnmount(() => {
  clearTimeout(handelerSubmitTimer)
})
</script>

<style lang="scss" scoped>
.refund-root {
  background-color: #fff;
  width: 400rpx;
  border-radius: 10rpx;
  padding: 20rpx 40rpx 10rpx 40rpx;

  .title {
    text-align: center;
    margin-bottom: 30rpx;
    color: rgb(122, 122, 122);
  }

  .goods-name {
    margin-bottom: 50rpx;
    margin-top: 20rpx;
    color: $jx-primary;
  }

  .goods-operation {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30rpx;
  }

  .goods-brn {
    display: flex;
    justify-content: space-between;
    border-top: 1rpx solid rgb(177, 177, 177);

    .cancel,
    .confirm {
      display: inline-block;
      width: 100%;
      padding: 20rpx;
      text-align: center;
    }

    .confirm {
      border-left: 1rpx solid rgb(177, 177, 177);
      color: $jx-primary;
    }
  }
}
</style>