<template>
  <a-modal
    class="container"
    :visible="value"
    title="新建商品组"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form
      :form="form"
    >
      <a-form-item
        label="名称"
        v-bind="formItemLayout"
      >
        <a-input
          v-decorator="[
            'name',
            {
              initialValue:formData.name,
              rules: [{ required: true, message: '请输入商品组名称' }]
            }
          ]"
        ></a-input>
      </a-form-item>
      <a-form-item
        label="商品限购策略"
        v-bind="formItemLayout"
      >
        <a-select
          @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-form-item>
    </a-form>
  </a-modal>
</template>

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

export default {
  mixins: [goodsGroupMixin],
  data () {
    return {
      formData: {
        name: '',
        purchase_strategy: {
          type: 'NONE',
          num: 1
        },
        description: ''
      }
    }
  },

  methods: {
    handleOk (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        console.log('values', values)
        if (!err) {
          addGoodsGroup(values).then(res => {
            this.$message.success('添加成功。')
            this.form.resetFields()
            this.$emit('input', false)
            this.$emit('update')
          })
        }
      })
    }
  }
}
</script>

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