<template>
  <a-modal
    class="container"
    :visible="value"
    title="编辑商品组"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form
      :form="form"
      v-if="formData"
    >
      <a-form-item
        label="名称"
        v-bind="formItemLayout"
      >
        <a-input
          style="width:150px"
          v-decorator="[
            'name',
            {
              initialValue:formData.name,
              rules: [{ required: true, message: '请输入商品组名称' }]
            }
          ]"
        ></a-input>
      </a-form-item>
      <a-form-item
        label="商品限购策略"
        v-bind="formItemLayout"
      >
        <a-select
          disabled
          @change="formData.purchase_strategy.type=$event"
          v-decorator="[
            'purchase_strategy.type',
            {
              initialValue:formData.purchase_strategy.type,
              rules: [{ required: true, message: '请选择'}]
            }
          ]"
        >
          <a-select-option value="NONE">
            无
          </a-select-option>
          <a-select-option value="SAME_DATE">
            与票的日期相同
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item
        label="每张票可购买的数量"
        v-bind="formItemLayout"
        v-if="formData.purchase_strategy.type === 'SAME_DATE'"
      >
        <a-input-number
          id="inputNumber"
          v-decorator="[
            'purchase_strategy.num',
            {
              initialValue:formData.purchase_strategy.num,
              rules: [{ required: true, message: '请输入'}]
            }
          ]"
          :min="0"
        />
      </a-form-item>
      <a-form-item
        label="描述"
        v-bind="formItemLayout"
      >
        <a-textarea
          v-decorator="[
            'description',
            {initialValue:formData.description,}
          ]"
          :auto-size="{ minRows: 3, maxRows: 5 }"
        ></a-textarea>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import { updateGoodsGroup } from '@/api/ticketSetting/goodsGroup'
import goodsGroupMixin from './goodsGroupMixin.js'

export default {
  mixins: [goodsGroupMixin],
  props: {
    formData: {
      type: Object,
      default: () => null
    }
  },
  methods: {
    handleOk (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          updateGoodsGroup(this.formData.id, values).then(res => {
            this.$message.success('修改成功。')
          })

          this.form.resetFields()
          this.$emit('input', false)

          // 数据更新有延迟
          setTimeout(() => {
            this.$emit('update')
          }, 500)
        }
      })
    }
  }
}
</script>

<style scoped>
.container>>>.ant-modal-content{
  width: 800px;
}
</style>
