<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="formItemLayout2"
        style="width:100%"
      >
        <a-select
          mode="multiple"
          v-model="bindScenic"
          show-search
          :filter-option="filterOption"
        >
          <a-select-option
            v-for="scenic in scenicList"
            :key="scenic.id"
            :value="scenic.id"
          >
            {{ scenic.name }}
          </a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item
        label="绑定渠道"
        v-bind="formItemLayout2"
        style="width:100%"
      >
        <a-select
          mode="multiple"
          v-model="bindChannel"
          show-search
          :filter-option="filterOption"
        >
          <a-select-option
            v-for="channel in salesChannel"
            :key="channel.id"
            :value="channel.id"
          >
            {{ channel.description }}
          </a-select-option>
        </a-select>
      </a-form-item>

      <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="[
            'category',
            {
              rules: [{ required: true, message: '请选择' }]
            }
          ]"
        >
          <a-select-option :value="0">
            暂无
          </a-select-option>
          <a-select-option
            v-for="(i,index) in ticketTypeList"
            :value="i.id"
            :key="index"
          >
            {{ i.name }}
          </a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item
        label="显示二维码"
        @change="formData.show_qrcode=$event"
        v-bind="formItemLayout"
      >
        <a-switch
          checked-children="是"
          un-checked-children="否"
          v-decorator="[
            'show_qrcode',
            {
              valuePropName: 'checked',
              initialValue:true
            }
          ]"
        />
      </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_original',
            {
              initialValue:0
            }
          ]"
        />（仅供显示）
      </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>

      <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 }} <span v-if="whether_to_use_thirdparty_pricecode&&i.thirdparty_code">- {{ i.thirdparty_code }}</span>
          </a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item
        label="购买人实名认证"
        v-bind="formItemLayout"
      >
        <a-switch
          checked-children="是"
          un-checked-children="否"
          v-decorator="[
            'need_realname',
            {
              valuePropName: 'checked',
              initialValue:(formData.need_realname===1)
            }
          ]"
        />
      </a-form-item>

      <a-form-item
        label="游客实名认证"
        v-bind="formItemLayout"
      >
        <a-switch
          checked-children="是"
          un-checked-children="否"
          v-decorator="[
            'player_need_realname',
            {
              valuePropName: 'checked',
              initialValue:(formData.player_need_realname===1)
            }
          ]"
        />
      </a-form-item>

      <a-form-item
        label="是否是兑换票"
        v-bind="formItemLayout"
      >
        <a-switch
          checked-children="是"
          un-checked-children="否"
          v-decorator="[
            'is_convertible',
            {
              valuePropName: 'checked',
              initialValue:(formData.is_convertible===1)
            }
          ]"
        />
      </a-form-item>

      <a-form-item
        label="协议独立显示"
        v-bind="formItemLayout"
      >
        <a-switch
          checked-children="是"
          un-checked-children="否"
          v-decorator="[
            'show_purchase_protocol_separate',
            {
              valuePropName: 'checked',
              initialValue:(formData.show_purchase_protocol_separate===1)
            }
          ]"
        />
      </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="[
            'commission',
            {
              rules: [{ required: true, message: '请输入' }]
            }
          ]"
        />
      </a-form-item>

      <a-form-item
        label="购票限制策略"
        v-bind="formItemLayout"
      >
        <a-select
          v-decorator="[
            'purchase_separate',
            {
              initialValue:formData.purchase_separate
            }
          ]">
          <a-select-option key="NONE">无</a-select-option>
          <a-select-option key="OTHER">只可与其他票种一起购买</a-select-option>
          <a-select-option key="SAME_DATE">只可与其他票种同日期一起购买</a-select-option>
          <a-select-option key="SAME_DATE_AND_BATCH">只可与其他票种同日期同场次一起购买</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item
        label="是否是旅行社单"
        v-bind="formItemLayout"
        v-if="allow_agency_order"
      >
        <a-switch
          checked-children="是"
          un-checked-children="否"
          @change="formData.is_agency_order=$event"
          v-decorator="[
            'is_agency_order',
            {
              valuePropName: 'checked',
              initialValue:(formData.is_agency_order)
            }
          ]"
        />
      </a-form-item>

      <a-form-item
        label="优惠策略"
        v-bind="formItemLayout2"
        v-if="formData.is_agency_order"
      >
        &nbsp;
        满
        <a-input-number
          v-decorator="[
            'discount_rule0',
            {
              initialValue:formData.discount_rule0,
            }
          ]"
          :min="0"
          :precision="0"></a-input-number>
        减
        <a-input-number
          v-decorator="[
            'discount_rule1',
            {
              initialValue:formData.discount_rule1,
            }
          ]"
          :min="0"
          :precision="0"></a-input-number>
      </a-form-item>

      <a-form-item
        label="是否是期票"
        v-bind="formItemLayout"
      >
        <a-switch
          checked-children="是"
          un-checked-children="否"
          @change="formData.is_promissory_note=$event"
          v-decorator="[
            'is_promissory_note',
            {
              valuePropName: 'checked',
              initialValue:(formData.is_promissory_note===1)
            }
          ]"
        />
      </a-form-item>

      <a-form-item
        label="是否是预约票"
        v-bind="formItemLayout"
      >
        <a-switch
          checked-children="是"
          un-checked-children="否"
          @change="formData.is_reservation=$event"
          v-decorator="[
            'is_reservation',
            {
              valuePropName: 'checked',
              initialValue:(formData.is_reservation===1)
            }
          ]"
        />
      </a-form-item>

      <a-form-item
        label="是否是学生票"
        v-bind="formItemLayout"
      >
        <a-switch
          checked-children="是"
          un-checked-children="否"
          @change="formData.is_student=$event"
          v-decorator="[
            'is_student',
            {
              valuePropName: 'checked',
              initialValue:(formData.is_student===1)
            }
          ]"
        />
      </a-form-item>

      <div class="block-title">
        销售限制
      </div>

      <a-form-item
        label="售票日期范围"
        v-bind="formItemLayout"
      >
        <a-range-picker
          v-decorator="[
            'sellDate',
            {
              initialValue:[moment(),moment().add('year',10)],
              rules: [{ required: true, message: '请选择销售日期' }]
            }
          ]"
        />
      </a-form-item>

      <a-form-item
        label="使用日期范围"
        v-bind="formItemLayout"
      >
        <a-range-picker
          v-decorator="[
            'useDate',
            {
              initialValue:[moment(),moment().add('year',10)],
              rules: [{ required: true, message: '请选择使用日期' }]
            }
          ]"
        />
      </a-form-item>

      <a-form-item
        label="可售开始时间"
        v-bind="formItemLayout"
      >
        <a-time-picker
          v-decorator="[
            `sale_time_start`,
            {
              initialValue:moment().startOf('day'),
              rules: [{ required: true, message: '请选择时间' }]
            }
          ]"
        />
      </a-form-item>

      <a-form-item
        label="可售截止时间"
        v-bind="formItemLayout"
      >
        <a-time-picker
          v-decorator="[
            `sale_time_end`,
            {
              initialValue:moment().endOf('day'),
              rules: [{ required: true, message: '请选择时间' }]
            }
          ]"
        />
      </a-form-item>

      <a-form-item
        label="使用开始时间"
        v-bind="formItemLayout"
      >
        <a-time-picker
          v-decorator="[
            `use_time_start`,
            {
              initialValue:moment().startOf('day'),
              rules: [{ required: true, message: '请选择结束时间' }]
            }
          ]"
        />
      </a-form-item>

      <a-form-item
        label="使用截止时间"
        v-bind="formItemLayout"
      >
        <a-time-picker
          v-decorator="[
            `use_time_end`,
            {
              initialValue:moment().endOf('day'),
              rules: [{ required: true, message: '请选择结束时间' }]
            }
          ]"
        />
      </a-form-item>

      <a-form-item
        label="最小起订数"
        v-bind="formItemLayout"
      >
        <a-input-number
          :min="0"
          v-decorator="[
            'book_min',
            {
              initialValue:1,
              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',
            {
              initialValue:100,
              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_future_days',
            {
              initialValue:30,
              rules: [{ required: true, message: '请输入' }]
            }
          ]"
        >
        </a-input-number>
      </a-form-item>

      <a-form-item
        label="可使用天数"
        v-bind="formItemLayout"
      >
        <a-input-number
          :min="0"
          v-decorator="[
            'use_valid_days',
            {
              initialValue:1,
              rules: [{ required: true, message: '请输入' }]
            }
          ]"
        >
        </a-input-number>
      </a-form-item>

      <a-form-item
        label="当日可订"
        v-bind="formItemLayout"
      >
        <a-switch
          checked-children="是"
          un-checked-children="否"
          v-decorator="[
            'is_book_today',
            {
              valuePropName: 'checked',
              initialValue:true
            }
          ]"
        />
      </a-form-item>
      <a-form-item
        v-if="form.getFieldValue('is_book_today')"
        label="当日可订截止时间"
        v-bind="formItemLayout"
      >
        <a-time-picker
          v-decorator="[
            `book_today_endtime`,
            {
              initialValue:moment().endOf('day'),
              rules: [{ required: true, message: '请选择结束时间' }]
            }
          ]"
        />
      </a-form-item>

      <a-alert type="warning">
        <div slot="message"><b class="red">【白名单】</b>：以下列数字开头的<b class="red">游客身份证</b>才可购买。<b class="red">打开游客实名认证,才可生效</b></div>
      </a-alert>
      <a-form-item
        style="width:100%"
        label="身份证号白名单"
        v-bind="formItemLayout2"
      >
        <a-tag
          :key="tag"
          v-for="tag in limitIdentities"
          closable
          :disable-transitions="false"
          @close="handleClose(tag,'limitIdentities')">
          {{ tag }}
        </a-tag>
        <a-input
          type="text"
          class="input-new-tag"
          placeholder="2~6位数字"
          v-if="limitIdentities.inputVisible"
          v-model="limitIdentities.inputValue"
          ref="limitIdentitiesInput"
          size="small"
          :min-length="2"
          :max-length="6"
          @keyup.enter.native="handleInputConfirm('limitIdentities')"
          @blur="handleInputConfirm('limitIdentities')"
        ></a-input>
        <a-button v-else type="primary" size="small" @click="showInput('limitIdentities')">添加</a-button>
      </a-form-item>

      <a-alert type="warning">
        <div slot="message"><b class="red">【黑名单】</b>：以下列数字开头的<b class="red">游客身份证</b>不可购买。<b class="red">打开游客实名认证,才可生效</b></div>
      </a-alert>
      <a-form-item
        style="width:100%"
        label="身份证号黑名单"
        v-bind="formItemLayout2"
      >
        <a-tag
          :key="tag"
          v-for="tag in blacklistIdentities"
          closable
          :disable-transitions="false"
          @close="handleClose(tag,'blacklistIdentities')">
          {{ tag }}
        </a-tag>
        <a-input
          type="text"
          class="input-new-tag"
          placeholder="2~6位数字"
          v-if="blacklistIdentities.inputVisible"
          v-model="blacklistIdentities.inputValue"
          ref="blacklistIdentitiesInput"
          size="small"
          :min-length="2"
          :max-length="6"
          @keyup.enter.native="handleInputConfirm('blacklistIdentities')"
          @blur="handleInputConfirm('blacklistIdentities')"
        ></a-input>
        <a-button v-else type="primary" size="small" @click="showInput('blacklistIdentities')">添加</a-button>
      </a-form-item>
      <!-- <a-alert type="warning">
        <div slot="message"><b class="red">【灰名单】</b>：以下列数字开头的<b class="red">游客身份证</b>购买时会弹出提示，不影响正常购票。<b class="red">打开游客实名认证,才可生效</b></div>
      </a-alert>
      <a-form-item
        style="width:100%"
        label="身份证号灰名单提示"
        v-bind="formItemLayout2"
      >
        <GrayList v-model="greylistIdentities" :greyList="greyList"></GrayList>
      </a-form-item> -->
      <!-- <a-form-item
        label="轮播图"
        v-bind="formItemLayout2"
        style="width:100%"
      >
        <a-upload
          list-type="picture-card"
          :action="uploadUrl"
          :file-list="imageList"
          :before-upload="beforeImageUpload"
          @preview="handleImagePreview"
          @change="handleImageChange"
          v-decorator="[
            'pictures'
          ]"
        >
          <div>
            <a-icon type="plus" />
            <div class="ant-upload-text">
              上传
            </div>
          </div>
        </a-upload>

        <a-modal
          :visible="previewImageVisible"
          :footer="null"
          @cancel="handleImageCancel"
        >
          <img
            alt="example"
            style="width: 100%"
            :src="previewImage"
          >
        </a-modal>
      </a-form-item> -->
      <div class="block-title">
        销售数量设置
      </div>
      <a-form-item
        label="是否限制销售数量"
        v-bind="formItemLayout2"
        style="width:100%"
      >
        <a-switch
          checked-children="是"
          un-checked-children="否"
          @change="formData.is_restricted_sales=$event"
          v-decorator="[
            'is_restricted_sales',
            {
              valuePropName: 'checked',
              initialValue:false
            }
          ]"
        />
      </a-form-item>

      <a-form-item
        v-if="formData.is_restricted_sales"
        label="每天可销售数量"
        v-bind="formItemLayout"
      >
        <a-input-number
          :min="0"
          v-decorator="[
            'sales_volume',
            {
              initialValue:0,
              rules: [{ required: true, message: '请输入' }]
            }
          ]"
        >
        </a-input-number> （不限制填 0）
      </a-form-item>

      <a-form-item
        v-if="formData.is_restricted_sales"
        label="总库存"
        v-bind="formItemLayout"
      >
        <a-input-number
          :min="0"
          v-decorator="[
            'total_sales_limit',
            {
              initialValue:0,
              rules: [{ required: true, message: '请输入' }]
            }
          ]"
        >
        </a-input-number> （不限制填 0）
      </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>

      <a-alert type="warning">
        <div slot="message"><b class="red">【灰名单】</b>：购买时会弹出提示，不影响正常购票。<b class="red">打开游客实名认证,才可生效</b></div>
      </a-alert>
      <a-form-item
        label="是否开启灰名单提示"
        style="width:100%"
        v-bind="formItemLayout2"
      >
        <a-switch
          checked-children="是"
          un-checked-children="否"
          v-decorator="[
            'is_grey_list',
            {
              valuePropName: 'checked',
              initialValue:false
            }
          ]"
        />
      </a-form-item>
      <a-form-item
        label="选择灰名单模板"
        v-if="form.getFieldValue('is_grey_list')"
        v-bind="formItemLayout"
      >
        <a-input
          v-show="false"
          v-decorator="[
            'grey_list_id',
            {
              rules: [{ required: true, message: '请选择灰名单模板' }]
            }
          ]"
        ></a-input>

        <GreySelector ref="editor" v-model="formData.grey_list_id"></GreySelector>
      </a-form-item>

      <div class="block-title">
        改签设置
      </div>

      <a-form-item
        label="是否可以改签"
        v-bind="formItemLayout"
      >
        <a-switch
          checked-children="是"
          un-checked-children="否"
          v-decorator="[
            'is_change',
            {
              valuePropName: 'checked',
              initialValue:false
            }
          ]"
        />
      </a-form-item>

      <a-form-item
        label="改签截止时间"
        v-bind="formItemLayout"
        v-if="form.getFieldValue('is_change')"
      >
        <RefundDayEndtime
          tips="指当日改签截至时间"
          v-decorator="[
            `change_today_endtime`,
            {
              initialValue:moment().endOf('day'),
              rules: [{ required: true, message: '请选择结束时间' }]
            }
          ]"
        />
      </a-form-item>

      <div class="block-title">
        退票设置
      </div>

      <a-form-item
        label="是否可退"
        v-bind="formItemLayout2"
        style="width:100%"
      >
        <a-switch
          checked-children="是"
          un-checked-children="否"
          v-decorator="[
            'is_refund',
            {
              valuePropName: 'checked',
              initialValue:true
            }
          ]"
        />
      </a-form-item>

      <template v-if="form.getFieldValue('is_refund')">
        <a-form-item
          label="提前可退天数"
          v-bind="formItemLayout"
        >
          <RefundAdvanceDay
            v-model="form.refund_advance_days"
            v-decorator="[
              'refund_advance_days',
              {
                initialValue:0,
                rules: [{ required: true, message: '请输入' }]
              }
            ]"></RefundAdvanceDay>
        </a-form-item>

        <a-form-item
          label="当日可退截止时间"
          v-bind="formItemLayout"
        >
          <RefundDayEndtime
            v-decorator="[
              `refund_today_endtime`,
              {
                initialValue:moment().endOf('day'),
                rules: [{ required: true, message: '请选择结束时间' }]
              }
            ]"
          />
        </a-form-item>
        <a-form-item
          label="退票策略"
          v-bind="formItemLayout"
        >
          <a-select
            @change="formData.refund_strategy.type=$event"
            v-decorator="[
              'refund_strategy.type',
              {
                initialValue: formData.refund_strategy.type,
                rules: [{ required: true, message: '请输入' }]
              }
            ]"
          >
            <a-select-option value="FIXED">
              固定价格
            </a-select-option>
            <a-select-option value="RATE">
              固定费率
            </a-select-option>
            <a-select-option value="TIME_RATE">
              阶梯费率
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item
          label="退票费率"
          v-if="formData.refund_strategy.type==='RATE'"
          v-bind="formItemLayout"
        >
          <a-input-number
            :precision="2"
            :min="0"
            :max="1"
            :step="0.01"
            v-decorator="[
              'refund_strategy.rate',
              {
                initialValue:formData.refund_strategy.rate,
                rules: [{ required: true, message: '请输入' }]
              }
            ]"
          />（0 表示全额退款）
        </a-form-item>

        <a-form-item
          label="退票价格"
          v-if="formData.refund_strategy.type==='FIXED'"
          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="[
              'refund_strategy.price',
              {
                initialValue:formData.refund_strategy.price,
                rules: [{ required: true, message: '请输入' }]
              }
            ]"
          />
        </a-form-item>
        <br>
        <a-form-item
          label="阶梯费率"
          v-if="formData.refund_strategy.type==='TIME_RATE'"
          v-bind="formItemLayout"
        >
          <a-button
            class="addBtn"
            type="primary"
            icon="plus"
            @click="handleAdd"
            size="small"
          >新增</a-button>
          <br>
          <ul class="priceList">
            <li
              v-for="(item,index) in timeRateList"
              :key="index"
            >

              <template>
                <div style="display:flex;margin-bottom:10px;width:400px">
                  <span style="white-space:nowrap">时间：</span>
                  <a-select v-model="item.timeEffect" slot="prepend" placeholder="请选择">
                    <a-select-option value="+">开场前</a-select-option>
                    <a-select-option value="-">开场后</a-select-option>
                  </a-select>
                  <a-input-number
                    style="width:100%"
                    v-model="item.timeNum"
                    controls-position="right"
                    :min="0"
                    :max="999"></a-input-number>
                  <a-select v-model="item.timeType" slot="prepend" placeholder="请选择">
                    <a-select-option value="minute">分钟</a-select-option>
                    <a-select-option value="hour">小时</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>
                  <span style="white-space:nowrap" v-if="item.timeEffect">{{ item.timeEffect ==='-'?'之后':'以内' }}</span>
                  <span style="white-space:nowrap;margin-left:20px">费率：</span>
                  <a-input-number
                    style="width:100%;"
                    :precision="2"
                    :min="0"
                    :max="1"
                    :step="0.01"
                    v-model="item.rate"
                  />
                  <a-tooltip placement="top">
                    <template slot="title">
                      <span>删除</span>
                    </template>

                    <a-popconfirm
                      title="确定删除吗？"
                      @confirm="handleDelete(index)"
                      ok-text="是"
                      cancel-text="否"
                    >
                      <a-button
                        type="danger"
                        icon="close"
                        size="small"
                        style="width:100px"
                      ></a-button>
                    </a-popconfirm>
                  </a-tooltip>
                </div>
              </template>
            </li>
          </ul>
        </a-form-item>
      </template>
      <div class="block-title">
        年龄设置
      </div>
      <a-form-item
        label="年龄限制"
        v-bind="formItemLayout2"
        style="width:100%"
      >
        <a-button
          class="addBtn"
          type="primary"
          @click="addAge"
          size="small"
        >添加</a-button>
        （需开启游客实名才能生效）
        <br>
        <a-table
          :data-source="formData.age_limits"
          :columns="columns"
          :pagination="false"
          v-decorator="[
            'age_limits',
            {
              initialValue:formData.age_limits,
            }
          ]">
          <span slot="ageStart" slot-scope="text, record">
            <a-input-number v-model="record.ageStart" :min="0" :max="120" />
          </span>
          <span slot="ageEnd" slot-scope="text, record">
            <a-input-number v-model="record.ageEnd" :min="0" :max="120" />
          </span>
          <span slot="action" slot-scope="text, record,index">
            <a-button size="small" @click="delAge(index)" type="danger">删除</a-button>
          </span>
        </a-table>
      </a-form-item>

      <div class="block-title">
        票种详情介绍 <span style="font-size:13px;color:red"> （上传图片后，请将图片宽高设置为100%）</span>
      </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-input
          v-show="false"
          v-decorator="[
            'purchase_notice'
          ]"
        ></a-input>

        <Editor ref="editor" v-model="purchase_content"></Editor>
      </a-form-item>
      <a-form-item
        label="使用须知"
        v-bind="formItemLayout2"
        style="width:100%"
      >
        <a-input
          v-show="false"
          v-decorator="[
            'description'
          ]"
        ></a-input>

        <Editor ref="editor" v-model="description_content"></Editor>
      </a-form-item>
      <a-form-item
        label="退改须知"
        v-bind="formItemLayout2"
        style="width:100%"
      >
        <a-input
          v-show="false"
          v-decorator="[
            'withdrawal_notice'
          ]"
        ></a-input>

        <Editor ref="editor" v-model="withdrawal_content"></Editor>
      </a-form-item>
      <a-form-item
        label="其他须知"
        v-bind="formItemLayout2"
        style="width:100%"
      >
        <a-input
          v-show="false"
          v-decorator="[
            'other_notice'
          ]"
        ></a-input>

        <Editor ref="editor" v-model="other_content"></Editor>
      </a-form-item>

      <div class="block-title">
        购票协议
      </div>
      <a-form-item
        label="是否显示票种购票协议"
        v-bind="formItemLayout"
      >
        <a-switch
          checked-children="是"
          un-checked-children="否"
          @change="formData.is_use_purchase_protocol=$event"
          v-decorator="[
            'is_use_purchase_protocol',
            {
              valuePropName: 'checked',
              initialValue:(formData.is_use_purchase_protocol===1)
            }
          ]"
        />
      </a-form-item>
      <a-form-item
        label="购票协议"
        v-bind="formItemLayout2"
        style="width:100%"
      >
        <a-input
          v-show="false"
          v-decorator="[
            'purchase_protocol'
          ]"
        ></a-input>

        <Editor ref="editor" v-model="purchase_protocol"></Editor>

      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import { addTicketType, setTicketScenic, setTicketChannel } from '@/api/ticketSetting/ticket'
import ticketMixin from './ticketMixin.js'
import Editor from '@/components/Editor/index.vue'
import GreySelector from '@/components/GreySelector'
import { getConfigProject } from '@/api/project'

const columns = [
  {
    title: '起始年龄',
    dataIndex: 'ageStart',
    key: 'ageStart',
    scopedSlots: { customRender: 'ageStart' }
  },
  {
    title: '截至年龄',
    dataIndex: 'ageEnd',
    key: 'ageEnd',
    scopedSlots: { customRender: 'ageEnd' }
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    scopedSlots: { customRender: 'action' }
  }

]
export default {
  mixins: [ticketMixin],
  created () {
    getConfigProject().then(res => {
      this.allow_agency_order = res.extraInfo.allow_agency_order
      this.whether_to_use_thirdparty_pricecode = res.extraInfo.whether_to_use_thirdparty_pricecode
    })
  },
  data () {
    return {
      columns,
      project: localStorage.mgt_project,
      bindScenic: [],
      greyValue: undefined,
      greylistIdentities: [],
      limitIdentities: [],
      blacklistIdentities: [],
      bindChannel: [],
      purchase_content: '',
      description_content: '',
      withdrawal_content: '',
      other_content: '',
      purchase_protocol: '',
      allow_agency_order: 0,
      whether_to_use_thirdparty_pricecode: 0,
      timeRateList: [
        { timeEffect: '+',
          timeNum: '30',
          timeType: 'minute',
          rate: 0
        }
      ],
      formData: {
        age_limits: [],
        need_realname: 0,
        player_need_realname: 0,
        is_restricted_sales: 0,
        is_order_limit: 0,
        order_limit_group: '',
        purchase_separate: 'NONE',
        refund_strategy: {
          type: 'RATE',
          pirce: 0,
          rate: 0,
          contents: []
        }

      }
    }
  },
  components: {
    Editor,
    GreySelector
  },
  props: {
    scenicList: {
      type: Array,
      default: () => []
    },
    salesChannel: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    showStudent () {
      return ['xitangguzhen'].includes(this.project)
    },
    ticketTypeList () {
      return this.$store.state.app.ticketTypeList
    },
    greyList () {
      return this.$store.state.app.greyList
    },
    greyListMap () {
      // 生成灰名单id对象
      const greyListMap = {}
      this.greyList.forEach(i => {
        greyListMap[i.id] = i
      })
      return greyListMap
    },
    limitGroupList () {
      return this.$store.state.app.limitGroupList
    }
  },
  methods: {
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
    addAge () {
      this.formData.age_limits.push({
        ageStart: '',
        ageEnd: ''
      })
    },
    delAge (index) {
      this.formData.age_limits.splice(index, 1)
    },
    // 添加阶梯费率弹窗
    handleAdd () {
      let lastTimeRate
      if (this.timeRateList.length > 0) {
        lastTimeRate = JSON.parse(JSON.stringify(this.timeRateList[this.timeRateList.length - 1]))
      } else {
        lastTimeRate = { seconds: '', rate: '' }
      }
      this.timeRateList.push({
        ...lastTimeRate
      })
    },
    handleDelete (index) {
      this.timeRateList.splice(index, 1)
    },
    handleScenicChange () {
      const params = {
        scenics: this.bindScenic.length > 0 ? this.bindScenic : null
      }
      setTicketScenic(this.id, params).then(res => {
        this.$message.success('绑定景点成功')
      })
    },
    handleChannelChange () {
      const params = {
        channels: this.bindChannel.length > 0 ? this.bindChannel : null
      }
      setTicketChannel(this.id, params).then(res => {
        this.$message.success('绑定渠道成功')
      })
    },
    handleOk (e) {
      e.preventDefault()
      this.form.validateFieldsAndScroll((err, values) => {
        console.log('values', values)
        if (!err) {
          if (values.book_max < values.book_min) {
            this.$message.error('最小起订数不能大于最大限订数')
            return
          }
          if ((values.discount_rule0 && !values.discount_rule1) || (values.discount_rule1 && !values.discount_rule0)) {
            return this.$message.error('请补全优惠策略')
          }
          if (values.discount_rule0 && values.discount_rule1) {
            if (values.discount_rule0 < values.discount_rule1) {
              return this.$message.error('请重新确认满减大小')
            }
          }
          if (values.refund_strategy && values.refund_strategy.type === 'TIME_RATE') {
            values.refund_strategy.contents = this.timeRateList.map(item => {
              const seconds = item.timeEffect + item.timeNum * this.calculateTime(item.timeType)
              const rate = item.rate
              return {
                seconds,
                rate
              }
            })
          }
          const params = this.formatParams(values)
          params.pictures = values.pictures ? values.pictures.fileList.map(item => {
            const info = item.response
            return {
              size: info.size - 0,
              url: info.link
            }
          }) : []
          params.purchase_notice = this.purchase_content
          params.description = this.description_content
          params.limit_identities = this.limitIdentities
          params.blacklist_identities = this.blacklistIdentities

          params.greyList_identities = this.greylistIdentities.map(i => {
            return {
              identityPrefix: i.identityPrefix,
              identityGreyListId: i.identityGreyListId
            }
          })

          params.withdrawal_notice = this.withdrawal_content
          params.other_notice = this.other_content
          params.purchase_protocol = this.purchase_protocol
          params.type = 'ACTIVITY'
          addTicketType(params).then(res => {
            this.$message.success('添加成功')
            this.id = res.extraInfo
            this.handleScenicChange()
            this.handleChannelChange()
            this.handleCancel()
            setTimeout(() => {
              this.$emit('update')
            }, 500)
          })
        }
      })
    },
    calculateTime (e) {
      switch (e) {
        case 'minute':
          return 60
        case 'hour':
          return 60 * 60
        case 'day':
          return 60 * 60 * 24
        case 'week':
          return 60 * 60 * 24 * 7
        case 'month':
          return 60 * 60 * 24 * 30
        default:
          return 0
      }
    },
    handleClose (tag, prop) {
      this[prop].splice(this[prop].indexOf(tag), 1)
    },

    showInput (prop) {
      this.$set(this[prop], 'inputVisible', true)

      this.$nextTick(_ => {
        this.$refs[`${prop}Input`].$refs.input.focus()
      })
    },

    handleInputConfirm (prop) {
      const inputValue = this[prop].inputValue
      if (inputValue) {
        if (this[prop].indexOf(inputValue) < 0) {
          this[prop].push(inputValue)
        } else {
          this.$message.error('已重复')
        }
      }
      this[prop].inputVisible = false
      this.greyValue = undefined
      this[prop].inputValue = ''
    },
    handleGreyInputConfirm (prop) {
      if (this.greyValue) {
        const inputValue = this[prop].inputValue
        if (inputValue) {
          if (this[prop].indexOf(inputValue) < 0) {
            this[prop].push(`${inputValue}-${this.greyValue}`)
          } else {
            this.$message.error('已重复')
          }
        }
      }
      this[prop].inputVisible = false
      this.greyValue = undefined
      this[prop].inputValue = ''
    }
  },
  watch: {
    'formData.is_grey_list' (val) {
      this.form.setFieldsValue({ is_grey_list: val })
    },
    'formData.grey_list_id' (val) {
      this.form.setFieldsValue({ grey_list_id: val })
    }
  }
}
</script>

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