<template>
  <a-modal
    :visible="value"
    title="新增会员类型"
    @ok="handleOk"
    width="60%"
    @cancel="handleCancel"
  >
    <a-alert
      banner
      type="error"
      v-if="product.length===0"
    >
      <template slot="message">
        暂无可用价格码，请先至
        <router-link to="/ticketSetting/priceCode">
          价格码管理<b>（点此跳转）</b>
        </router-link>，添加或激活价格码，否则无法创建新票种
      </template>
    </a-alert>
    <a-alert
      banner
      v-else
      type="warning"
      message="请仔细选择价格码，票种绑定价格码后，不可再次编辑"
    >
    </a-alert>
    <a-form :form="form">
      <div class="block-title">
        基础信息
      </div>
      <a-form-item
        label="会员类型名称"
        v-bind="formItemLayout"
      >
        <a-input
          v-decorator="[
            'name',
            {
              rules: [{ required: true, message: '请输入' }]
            }
          ]"
        ></a-input>
      </a-form-item>
      <a-form-item
        label="价格码"
        v-bind="formItemLayout"
      >
        <a-select
          style="width: 100%"
          v-decorator="[
            'ticket_product_id',
            {
              rules: [{ required: true, message: '请选择' }]
            }
          ]"
        >
          <a-select-option
            v-for="(i,index) in product"
            :value="i.ticket_product_id"
            :key="index"
          >
            {{ i.ticket_product_id }} - {{ i.description }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item
        label="激活有效期天数"
        v-bind="formItemLayout"
      >
        <a-input-number
          :min="1"
          v-decorator="[
            'use_valid_days',
            {
              rules: [{ required: true, message: '请输入' }]
            }
          ]"
        >
        </a-input-number>
      </a-form-item>
      <a-form-item
        label="价格"
        v-bind="formItemLayout"
      >
        <a-input-number
          :precision="2"
          :min="0"
          :formatter="value => `￥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
          :parser="value => value.replace(/\￥\s?|(,*)/g, '')"
          v-decorator="[
            'price',
            {
              rules: [{ required: true, message: '请选择' }]
            }
          ]"
        />
      </a-form-item>
      <div class="block-title">
        销售限制
      </div>
      <a-form-item
        label="销售日期范围"
        v-bind="formItemLayout"
      >
        <a-range-picker
          v-decorator="[
            'sellDate',
            {
              rules: [{ required: true, message: '请选择销售日期' }]
            }
          ]"
        />
      </a-form-item>
      <a-form-item
        label="使用日期范围"
        v-bind="formItemLayout"
      >
        <a-range-picker
          v-decorator="[
            'useDate',
            {
              rules: [{ required: true, message: '请选择使用日期' }]
            }
          ]"
        />
      </a-form-item>
      <a-form-item
        label="可售开始时间"
        v-bind="formItemLayout"
      >
        <a-time-picker
          v-decorator="[
            `sale_time_start`,
            {
              rules: [{ required: true, message: '请选择时间' }]
            }
          ]"
        />
      </a-form-item>

      <a-form-item
        label="可售截止时间"
        v-bind="formItemLayout"
      >
        <a-time-picker
          v-decorator="[
            `sale_time_end`,
            {
              rules: [{ required: true, message: '请选择时间' }]
            }
          ]"
        />
      </a-form-item>
      <a-form-item
        label="使用开始时间"
        v-bind="formItemLayout"
      >
        <a-time-picker
          v-decorator="[
            `use_time_start`,
            {
              rules: [{ required: true, message: '请选择结束时间' }]
            }
          ]"
        />
      </a-form-item>
      <a-form-item
        label="使用截止时间"
        v-bind="formItemLayout"
      >
        <a-time-picker
          v-decorator="[
            `use_time_end`,
            {
              rules: [{ required: true, message: '请选择结束时间' }]
            }
          ]"
        />
      </a-form-item>
      <a-form-item
        label="最小起订数"
        v-bind="formItemLayout"
      >
        <a-input-number
          :min="0"
          v-decorator="[
            'book_min',
            {
              rules: [{ required: true, message: '请输入' }]
            }
          ]"
        >
        </a-input-number>
      </a-form-item>
      <a-form-item
        label="最大限订数"
        v-bind="formItemLayout"
      >
        <a-input-number
          :min="0"
          v-decorator="[
            'book_max',
            {
              rules: [{ required: true, message: '请输入' }]
            }
          ]"
        >
        </a-input-number>
      </a-form-item>
      <a-form-item
        label="是否可退"
        v-bind="formItemLayout2"
        style="width:100%"
      >
        <a-switch
          checked-children="是"
          un-checked-children="否"
          v-decorator="[
            'is_refund',
            {
              valuePropName: 'checked',
              initialValue:false
            }
          ]"
        />
      </a-form-item>
      <a-form-item
        v-if="form.getFieldValue('is_refund')"
        label="提前可退天数"
        v-bind="formItemLayout"
      >
        <RefundAdvanceDay
          v-decorator="[
            'refund_advance_days',
            {
              rules: [{ required: true, message: '请输入' }]
            }
          ]"></RefundAdvanceDay>
      </a-form-item>
      <a-form-item
        label="是否限制销售数量"
        v-bind="formItemLayout"
      >
        <a-switch
          checked-children="是"
          un-checked-children="否"
          v-decorator="[
            'is_restricted_sales',
            {
              valuePropName: 'checked',
              initialValue:false
            }
          ]"
        />
      </a-form-item>

      <a-form-item
        v-if="form.getFieldValue('is_restricted_sales')"
        label="每天可销售数量"
        v-bind="formItemLayout"
      >
        <a-input-number
          :min="0"
          v-decorator="[
            'sales_volume',
            {
              rules: [{ required: true, message: '请输入' }]
            }
          ]"
        >
        </a-input-number>
      </a-form-item>

      <a-form-item
        label="是否加入限购"
        style="width:100%"
        v-bind="formItemLayout2"
      >
        <a-switch
          checked-children="是"
          un-checked-children="否"
          v-decorator="[
            'is_order_limit',
            {
              valuePropName: 'checked',
              initialValue:false
            }
          ]"
        />
      </a-form-item>

      <a-form-item
        label="选择限购组"
        v-if="form.getFieldValue('is_order_limit')"
        v-bind="formItemLayout"
      >
        <a-select
          v-decorator="[
            'order_limit_group',
            {
              rules: [{ required: true, message: '请选择限购组' }]
            }
          ]"
        >
          <a-select-option
            v-for="(i,index) in limitGroupList"
            :value="i.id"
            :key="index"
          >
            {{ i.name }}
          </a-select-option>
        </a-select>
      </a-form-item>

      <div class="block-title">
        详情介绍
      </div>
      <a-form-item
        label="标签"
        v-bind="formItemLayout2"
        style="width:100%"
      >
        <a-select
          mode="multiple"
          style="width: 100%"
          v-decorator="[
            'tags'
          ]"
        >
          <a-select-option
            v-for="(i,index) in tags"
            :value="i.id"
            :key="index"
          >
            {{ i.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item
        label="购票须知"
        v-bind="formItemLayout2"
        style="width:100%"
      >
        <a-textarea
          :autoSize="{ minRows: 2 }"
          v-decorator="[
            'purchase_notice'
          ]"
        />
      </a-form-item>
      <a-form-item
        label="使用须知"
        v-bind="formItemLayout2"
        style="width:100%"
      >
        <a-textarea
          :autoSize="{ minRows: 2 }"
          v-decorator="[
            'description'
          ]"
        />
      </a-form-item>
      <a-form-item
        label="退改须知"
        v-bind="formItemLayout2"
        style="width:100%"
      >
        <a-textarea
          :autoSize="{ minRows: 2 }"
          v-decorator="[
            'withdrawal_notice'
          ]"
        />
      </a-form-item>
      <a-form-item
        label="其他须知"
        v-bind="formItemLayout2"
        style="width:100%"
      >
        <a-textarea
          :autoSize="{ minRows: 2 }"
          v-decorator="[
            'other_notice'
          ]"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import { addTicketType } from '@/api/ticketSetting/ticket'
import ticketMixin from './ticketMixin.js'
export default {
  mixins: [ticketMixin],
  methods: {
    handleOk (e) {
      e.preventDefault()
      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          if (values.book_max < values.book_min) {
            this.$message.error('最小起订数不能大于最大限订数')
            return
          }
          const params = this.formatParams(values)
          addTicketType(params).then(res => {
            this.$message.success('添加成功')
            this.$emit('update')
            this.handleCancel()
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.ant-form-item{
  width: 50%; display: inline-block;
}
.ant-alert{
  margin-bottom: 20px;
}
</style>
