<template>
  <a-modal
    class="container"
    :visible="value"
    title="新建限购"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form
      :form="form"
    >
      <div class="tips">限购票种请到票种管理页面，票种详情选择限购组。不限制则填9999</div>
      <a-form-item
        label="名称"
        v-bind="formItemLayout"
      >
        <a-input
          style="width:150px"
          v-decorator="[
            'name',
            {
              rules: [{ required: true, message: '请输入限购组名称' }]
            }
          ]"
        ></a-input>
      </a-form-item>
      <a-form-item
        label="IP限购：每个IP限购"
        v-bind="formItemLayout"
      >
        <a-input
          placeholder="9999"
          style="width:100px"
          v-decorator="[
            'ip_limit',
            {
              rules: [
                { required: true, message: '请输入数量' },
                { pattern:/^\d{1,4}$/, message:'请输入正确的数量'}
              ]
            }
          ]"
        ></a-input> 个<span style="margin-left:10px;font-size:10px;color:rgb(255,132,8)">注意：共用一个WiFi，一个IP的手机网络可能只有一个IP地址。</span>
      </a-form-item>
      <a-form-item
        label="账号限购：每个账号限购"
        v-bind="formItemLayout"
      >
        <a-input
          placeholder="9999"
          style="width:150px"
          v-decorator="[
            'user_limit',
            {
              rules: [
                { required: true, message: '请输入数量' },
                { pattern:/^\d{1,4}$/, message:'请输入正确的数量'}
              ]
            }
          ]"
        ></a-input> 个
      </a-form-item>
      <a-form-item
        label="身份证限购：每个身份证限购"
        v-bind="formItemLayout"
      >
        <a-input
          placeholder="9999"
          style="width:150px"
          v-decorator="[
            'identity_limit',
            {
              rules: [
                { required: true, message: '请输入数量' },
                { pattern:/^\d{1,4}$/, message:'请输入正确的数量'}
              ]
            }
          ]"
        ></a-input> 个 <span style="margin-left:10px;font-size:10px;color:rgb(255,132,8)">注意：只有开启游客实名制的票才生效。</span>
      </a-form-item>
      <a-form-item
        label="限购策略"
        v-bind="formItemLayout"
      >
        <a-select
          @change="selectedType"
          style="width: 100%"
          v-decorator="[
            'round_strategy.type',
            {
              initialValue:'FIXED',
              rules: [{ required: true, message: '请选择'}]
            }
          ]"
        >
          <a-select-option value="FIXED">
            永久
          </a-select-option>
          <a-select-option value="DAY">
            按日
          </a-select-option>
          <a-select-option value="WEEK">
            按周
          </a-select-option>
          <a-select-option value="MONTH">
            按月
          </a-select-option>
          <a-select-option value="YEAR">
            按年
          </a-select-option>
          <a-select-option value="CUSTOM">
            手动更新
          </a-select-option>
        </a-select>
        <a-input
          v-if="isCustom"
          placeholder="请填写本轮限购描述"
          v-decorator="[
            'round_strategy.description',
          ]"
        ></a-input>
        <span style="margin-left:10px;font-size:10px;color:rgb(255,132,8)">
          注意：限购策略按<b style="color:red"> {{ isCustom ?'购买':'游玩' }}日期 </b>限购。
        </span>
      </a-form-item>
      <a-form-item
        label="限购组描述"
        v-bind="formItemLayout"
      >
        <a-input
          v-decorator="[
            'description',
          ]"
        ></a-input>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import { addLimitGroup } from '@/api/systemSetting/limitGroup'
import limitGroupMixin from './limitGroupMixin.js'

export default {
  mixins: [limitGroupMixin],
  data () {
    return {
      isCustom: false // 策略是否为手动更新
    }
  },

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

<style scoped>
.container>>>.ant-modal-content{
  width: 680px;
}
.container>>>.ant-col-sm-4{
  width: auto
}
.container>>>.ant-col-sm-20{
  width: auto
}
.container>>>.ant-select-selection--single{
  width: 100px;
}
.tips{
  height: 45px;
  line-height: 40px;
  padding-left: 20px;
  color:rgb(255,132,8);
  font-size: 14px;
  margin-bottom: 20px;
  background: rgb(251,252,207);

}
</style>
