<template>
  <el-dialog title="修改打包数量" width="410px" v-model="show" @close="reset">
    <el-input-number
      :min="0"
      :max="max"
      type="number"
      v-model="number"
      placeholder="请输入打包数量"
    ></el-input-number>
    <template #footer>
      <el-button size="medium" @click="close">取消</el-button>
      <el-button size="medium" type="primary" @click="confirm">确定</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
let show = ref(false);
let number = ref(0);
const max = ref(0);
function reset() {
  max.value = 0;
  number.value = 0;
}

function open(packNumber, maxNumber) {
  show.value = true;
  max.value = maxNumber || 0;
  number.value = packNumber || 0;
}
function close() {
  show.value = false;
  reset();
}
const emits = defineEmits(["confirm"]);
function confirm() {
  emits("confirm", number.value);
  close();
}

defineExpose({
  open,
  close,
});
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  margin-bottom: 14px;
  margin-top: 14px;
}
::v-deep .el-tag {
  margin-top: 10px;
  margin-right: 10px;
  margin-bottom: 5px;
  cursor: pointer;
  font-size: 15px;
  line-height: 35px;
  height: 35px;
}
</style>