<template>
  <cr-dialog
    v-model="isEditNum"
    class="editNum"
    confirm-button-text="确定"
    :show-cancel-button="true"
    cancel-button-text="取消"
    cancel-button-color="#000000"
    @onConfirm="confirm"
    @onCancel="close"
  >
    <div slot="title">
      修改购买数量
    </div>
    <div class="content">
      <NumberBox
        :edit="true"
        :value="goodCount"
        :min="1"
        :max="999"
        :class="['num']"
        @change="changeGoodNum"
      />
    </div>
  </cr-dialog>
</template>
<script>
import NumberBox from './goodNum.vue';
import { mapActions } from '../shopCartModules';
export default {
  name: 'GoodNum',
  components: {
    NumberBox
  },
  props: {
    show: {
      type: Boolean,
      default() {
        return false;
      }
    },
    value: {
      type: Object,
      default() {
        return {};
      }
    },
    index: {
      type: Number
    },
    idx: Number
  },
  data() {
    return {
      goodCount: this.value?.count,
      isEditNum: false
    };
  },
  watch: {
    show: function(val) {
      this.isEditNum = val;
      this.goodCount = this?.value?.count;
    }
  },
  methods: {
    ...mapActions({
      changeCartGoodNum: 'change_cart_good_num'
    }),
    close() {
      this.$emit('close');
    },
    confirm() {
      this.changeCartGoodNum({
        index: this.index,
        idx: this.idx,
        goodInfo: { ...this.value, count: this.goodCount, skuNum: this.goodCount },
        type: 'EDIT_NUM'
      });
      this.$emit('close');
    },
    changeGoodNum(count) {
      this.goodCount = count;
    }
  }
};
</script>
<style lang="less" scoped>
.editNum ::v-deep .cr-dialog__header {
  padding: 20px 0 0 0 !important;
}
.editNum ::v-deep .cr-dialog__message {
  padding-top: 10px !important;
  padding-bottom: 20px !important;
}
.content {
  height: 22px;
  padding-bottom: 20px;
}
</style>
