<template>
  <a-modal
    :visible="value"
    title="编辑票种"
    @ok="handleOk"
    width="60%"
    @cancel="handleCancel"
  >
    <a-spin :spinning="loading">
      <div>
        <a-form
          :form="form"
          v-if="formData"
        >

          <div class="block-title">
            租赁票计费类型
            <a-button
              class="addBtn"
              style="float: right; margin-bottom: 5px;"
              type="primary"
              icon="plus"
              @click="handleAddBillingTypeItem"
              size="small"
            >添加计费类型</a-button>
          </div>
          <div
            class="noData"
            v-if="!billingTypeListArr.length"
          >
            请添加计费类型
          </div>

          <div v-if="false">
            {{ billingTypeListArr }}
          </div>

          <ul class="priceList">
            <li
              v-for="(item,index) in billingTypeListArr"
              :key="index"
              style="padding: 8px;"
            >
              <template>
                <a-input-number
                  style="width: 30%"
                  :min="0"
                  class="priceInput"
                  v-model="billingTypeListArr[index].price"
                  :formatter="value => `￥ ${value}`"
                  :parser="value => value.replace(/\￥\s?|(,*)/g, '')"
                ></a-input-number>

                {{ '&nbsp;&nbsp;/&nbsp;&nbsp;' }}

                <!--  v-show="!billingTypeListArr[index].billingTypeItem" v-model="billingTypeListArr[index].billingTypeItem" -->
                <!-- index代表第几个计费类型，$event是value代表第几个选项 -->
                <!-- {{ billingTypeListArr[index].billingTypeItem }} -->
                <!-- value(v-model) 	指定当前选中的条目 -->
                <!-- position 设置为选中第几个选项 -->
                <!-- :value="billingTypeListArr[index].position" -->
                <!-- <a-select style="width: 30%" @change="handleChangeBselect($event, index)" :value="billingTypeListArr[index].position">
                  <a-select-option v-for="(bitem,bindex) in billingTypeList" :key="bindex" >
                    {{ bitem.name }}  {{ '（' + bitem.value }} {{ bitem.type ==='HOUR'?'小时':(bitem.type ==='DAY'? '天': bitem.type) }} {{ '）' }}
                  </a-select-option>
                </a-select> -->
                <!-- :value="billingTypeListArr[index].position" -->
                <!-- 添加时需要设置默认选中的，否则有问题 -->
                <a-select style="width: 30%" @change="handleChangeBselect($event, index)" :value="billingTypeListArr[index].position">
                  <a-select-option v-for="(bitem,bindex) in billingTypeList" :key="bindex" >
                    {{ bitem.name }}  {{ '（' + bitem.value }} {{ bitem.type ==='HOUR'?'小时':(bitem.type ==='DAY'? '天': bitem.type) }} {{ '）' }}
                  </a-select-option>
                </a-select>

                {{ '&nbsp;&nbsp;&nbsp;&nbsp;' }}
                <a-tooltip placement="top">
                  <template slot="title">
                    <span>删除</span>
                  </template>

                  <a-popconfirm
                    title="确定删除吗？"
                    @confirm="handleDeleteBillingTypeItem(index)"
                    ok-text="是"
                    cancel-text="否"
                  >
                    <a-button
                      type="danger"
                      icon="close"
                      size="small"
                    ></a-button>
                  </a-popconfirm>
                </a-tooltip>
              </template>
            </li>
          </ul>

          <!-- ticketTypeExtraInfo -->
          <div class="block-title">
            租赁票种信息
          </div>

          <!-- ticketTypeExtraInfo.area -->
          <a-form-item
            label="面积"
            v-bind="formItemLayout"
          >
            <a-input
              v-decorator="[
                'ticketTypeExtraInfo.area',
                {
                  initialValue:formData.ticketTypeExtraInfo.area,
                  rules: [{ required: true, message: '请输入' }]
                }
              ]"></a-input>
          </a-form-item>

          <!-- ticketTypeExtraInfo.crop_suitability -->
          <a-form-item
            label="作物适宜性"
            v-bind="formItemLayout"
          >
            <a-input
              v-decorator="[
                'ticketTypeExtraInfo.crop_suitability',
                {
                  initialValue:formData.ticketTypeExtraInfo.crop_suitability,
                  rules: [{ required: true, message: '请输入' }]
                }
              ]"></a-input>
          </a-form-item>

          <!-- ticketTypeExtraInfo.geographic -->
          <a-form-item
            label="地理位置"
            v-bind="formItemLayout"
          >
            <a-input
              v-decorator="[
                'ticketTypeExtraInfo.geographic',
                {
                  initialValue:formData.ticketTypeExtraInfo.geographic,
                  rules: [{ required: true, message: '请输入' }]
                }
              ]"
            ></a-input>
          </a-form-item>

          <!-- ticketTypeExtraInfo.soil_type -->
          <a-form-item
            label="土壤类型"
            v-bind="formItemLayout"
          >
            <a-input
              v-decorator="[
                'ticketTypeExtraInfo.soil_type',
                {
                  initialValue:formData.ticketTypeExtraInfo.soil_type,
                  rules: [{ required: true, message: '请输入' }]
                }
              ]"></a-input>
          </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>
          <a-form-item
            label="详情"
            v-bind="formItemLayout2"
            style="width:100%"
          >
            <a-input
              v-show="false"
              v-decorator="[
                'detail'
              ]"
            ></a-input>

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

          <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',
                {
                  initialValue:formData.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: '请选择' }],
                  initialValue:formData.category.id
                }
              ]"
            >
              <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:(formData.show_qrcode===1)
                }
              ]"
            />
          </a-form-item>

          <a-form-item
            label="原价"
            v-bind="formItemLayout"
            v-if="showOtherRentInfo"
          >
            <a-input-number
              :step="0.01"
              :precision="2"
              :min="0"
              :formatter="value => `￥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
              :parser="value => value.replace(/\￥\s?|(,*)/g, '')"
              v-decorator="[
                'price_original',
                {
                  initialValue:formData.price_original
                }
              ]"
            />（仅供显示）
          </a-form-item>

          <!-- 租赁票种价格由计费类型决定，票种的price已经没有作用，故租赁票种这里隐藏价格、价格码、佣金 -->
          <a-form-item
            label="价格"
            v-if="false"
            v-bind="formItemLayout"
          >
            <a-input-number
              :step="0.01"
              :precision="2"
              :min="0"
              :formatter="value => `￥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
              :parser="value => value.replace(/\￥\s?|(,*)/g, '')"
              v-decorator="[
                'price',
                {
                  initialValue:formData.price,
                  rules: [{ required: true, message: '请输入' }]
                }
              ]"
            />
          </a-form-item>

          <a-form-item
            label="价格码"
            v-bind="formItemLayout"
            v-if="showOtherRentInfo"
          >
            <a-select
              style="width: 100%"
              disabled
              v-decorator="[
                'ticket_product_id',
                {
                  initialValue:formData.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"
            v-if="showOtherRentInfo"
          >
            <a-switch
              checked-children="是"
              un-checked-children="否"
              @change="formData.is_convertible=$event"
              v-decorator="[
                'is_convertible',
                {
                  valuePropName: 'checked',
                  initialValue:(formData.is_convertible===1)
                }
              ]"
            />
          </a-form-item>

          <a-form-item
            label="协议独立显示"
            v-bind="formItemLayout"
            v-if="showOtherRentInfo"
          >
            <a-switch
              checked-children="是"
              un-checked-children="否"
              @change="formData.show_purchase_protocol_separate=$event"
              v-decorator="[
                'show_purchase_protocol_separate',
                {
                  valuePropName: 'checked',
                  initialValue:(formData.show_purchase_protocol_separate===1)
                }
              ]"
            />
          </a-form-item>

          <a-form-item
            label="佣金"
            v-if="false"
            v-bind="formItemLayout"
          >
            <a-input-number
              :step="0.01"
              :precision="2"
              :min="0"
              :formatter="value => `￥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
              :parser="value => value.replace(/\￥\s?|(,*)/g, '')"
              v-decorator="[
                'commission',
                {
                  initialValue:formData.commission,
                  rules: [{ required: true, message: '输入' }]
                }
              ]"
            />
          </a-form-item>

          <a-form-item
            label="购票限制策略"
            v-bind="formItemLayout"
            v-if="showOtherRentInfo"
          >
            <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="showOtherRentInfo && 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===1)
                }
              ]"
            />
          </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"
            v-if="showOtherRentInfo"
          >
            <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"
            v-if="showOtherRentInfo"
          >
            <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
            v-if="showStudent"
            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(formData.sell_startdate),moment(formData.sell_enddate)],
                  rules: [{ required: true, message: '请选择销售日期' }]
                }
              ]"
            />
          </a-form-item>

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

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

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

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

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

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

          <a-form-item
            v-if="formData.is_book_today"
            label="当日可订截止时间"
            v-bind="formItemLayout"
          >
            <a-time-picker
              v-decorator="[
                'book_today_endtime',
                {
                  initialValue:formData.book_today_endtime?moment(formData.book_today_endtime,'HH:mm:ss') : null,
                  rules: [{ required: true, message: '请选择结束时间' }]
                }
              ]"
            />
          </a-form-item>

          <a-alert type="warning" v-if="showOtherRentInfo">
            <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"
            v-if="showOtherRentInfo"
          >
            <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" v-if="showOtherRentInfo">
            <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"
            v-if="showOtherRentInfo"
          >
            <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"
            v-if="showOtherRentInfo"
          >
            <GrayList v-model="greylistIdentities" :greyList="greyList"></GrayList>
          </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:(formData.is_restricted_sales===1)
                }
              ]"
            />
          </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:formData.sales_volume,
                  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:formData.total_sales_limit,
                  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="否"
              @change="formData.is_order_limit=$event"
              v-decorator="[
                'is_order_limit',
                {
                  valuePropName: 'checked',
                  initialValue:(formData.is_order_limit===1)
                }
              ]"
            />
          </a-form-item>
          <a-form-item
            label="选择限购组"
            v-if="formData.is_order_limit"
            v-bind="formItemLayout"
          >
            <a-select
              v-decorator="[
                'order_limit_group',
                {
                  initialValue:formData.order_limit_group || null,
                  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" v-if="showOtherRentInfo">
            <div slot="message"><b class="red">【灰名单】</b>：购买时会弹出提示，不影响正常购票。<b class="red">打开游客实名认证,才可生效</b></div>
          </a-alert>

          <a-form-item
            label="是否开启灰名单提示"
            style="width:100%"
            v-bind="formItemLayout2"
            v-if="showOtherRentInfo"
          >
            <a-switch
              checked-children="是"
              un-checked-children="否"
              @change="formData.is_grey_list=$event"
              v-decorator="[
                'is_grey_list',
                {
                  valuePropName: 'checked',
                  initialValue:formData.is_grey_list
                }
              ]"
            />
          </a-form-item>
          <a-form-item
            label="选择灰名单模板"
            v-if="formData.is_grey_list"
            v-bind="formItemLayout"
          >
            <a-input
              v-show="false"
              v-decorator="[
                'grey_list_id',
                {
                  initialValue:formData.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="否"
              @change="formData.is_change=$event"
              v-decorator="[
                'is_change',
                {
                  valuePropName: 'checked',
                  initialValue:(formData.is_change===1)
                }
              ]"
            />
          </a-form-item>

          <a-form-item
            v-if="formData.is_change"
            label="改签截止时间"
            v-bind="formItemLayout"
          >
            <RefundDayEndtime
              tips="指当日改签截至时间"
              v-decorator="[
                `change_today_endtime`,
                {
                  initialValue:moment(formData.change_today_endtime || '23:59:59','HH:mm:ss'),
                  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="否"
              @change="formData.is_refund=$event"
              v-decorator="[
                'is_refund',
                {
                  valuePropName: 'checked',
                  initialValue:(formData.is_refund===1)
                }
              ]"
            />
          </a-form-item>

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

            <a-form-item
              label="当日可退截止时间"
              v-bind="formItemLayout"
              v-if="showOtherRentInfo"
            >
              <RefundDayEndtime
                v-decorator="[
                  `refund_today_endtime`,
                  {
                    initialValue:moment(formData.refund_today_endtime || '00:00:00','HH:mm:ss'),
                    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" v-if="showOtherRentInfo">
            年龄设置
          </div>
          <a-form-item
            label="年龄限制"
            v-bind="formItemLayout2"
            style="width:100%"
            v-if="showOtherRentInfo"
          >
            <a-button
              class="addBtn"
              type="primary"
              @click="addAge"
              size="small"
            >添加</a-button>
            （需开启游客实名才能生效）
            <br>
            <a-table
              :data-source="ageLimits"
              :columns="columns"
              :pagination="false"
              v-decorator="[
                'age_limits',
                {
                  initialValue:ageLimits,
                }
              ]">
              <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" v-if="showOtherRentInfo">
            票种详情介绍
          </div>
          <a-form-item
            label="票种标签"
            v-bind="formItemLayout2"
            style="width:100%"
            v-if="showOtherRentInfo"
          >
            <a-select
              mode="multiple"
              style="width: 100%"
              v-decorator="[
                'tags',
                {
                  initialValue:formData.tags.map(i=>i.id)
                }
              ]"
            >
              <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-if="showOtherRentInfo"
            v-bind="formItemLayout2"
            style="width:100%"
          >
            <a-input
              v-show="false"
              v-decorator="[
                'purchase_notice',
                {
                  initialValue:formData.purchase_notice,
                }
              ]"
            ></a-input>

            <Editor ref="editor" v-model="formData.purchase_notice"></Editor>
          </a-form-item>
          <a-form-item
            label="使用须知"
            v-bind="formItemLayout2"
            style="width:100%"
            v-if="showOtherRentInfo"
          >
            <a-input
              v-show="false"
              v-decorator="[
                'description',
                {
                  initialValue:formData.description,
                }
              ]"
            ></a-input>

            <Editor ref="editor" v-model="formData.description"></Editor>

          </a-form-item>
          <a-form-item
            label="退改须知"
            v-bind="formItemLayout2"
            style="width:100%"
            v-if="showOtherRentInfo"
          >
            <a-input
              v-show="false"
              v-decorator="[
                'withdrawal_notice',
                {
                  initialValue:formData.withdrawal_notice,
                }
              ]"
            ></a-input>

            <Editor ref="editor" v-model="formData.withdrawal_notice"></Editor>
          </a-form-item>
          <a-form-item
            label="其他须知"
            v-bind="formItemLayout2"
            style="width:100%"
            v-if="showOtherRentInfo"
          >
            <a-input
              v-show="false"
              v-decorator="[
                'other_notice',
                {
                  initialValue:formData.other_notice,
                }
              ]"
            ></a-input>

            <Editor ref="editor" v-model="formData.other_notice"></Editor>
          </a-form-item>

          <div class="block-title" v-if="showOtherRentInfo">
            购票协议
          </div>
          <a-form-item
            label="是否显示票种购票协议"
            v-bind="formItemLayout"
            v-if="showOtherRentInfo"
          >
            <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%"
            v-if="showOtherRentInfo"
          >
            <a-input
              v-show="false"
              v-decorator="[
                'purchase_protocol',
                {
                  initialValue:formData.purchase_protocol,
                }
              ]"
            ></a-input>

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

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

<script>
import { setTicketTypeById, getTicketTypeById, getTicketScenic, setTicketScenic, getTicketChannel, 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'
import { getBillingType } from '@/api/ticketSetting/billingType'

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 {
  async created () {
    // console.log('formData', this.formData)
    // console.log(this.processStrBillingData(this.formData.ticketTypeExtraInfo.billing_type))
    const resb = await getBillingType()
    this.billingTypeList = resb.extraInfo.list
    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
    })
  },
  computed: {
    showStudent () {
      return ['xitangguzhen'].includes(this.project)
    },
    ticketTypeList () {
      return this.$store.state.app.ticketTypeList
    },
    limitGroupList () {
      return this.$store.state.app.limitGroupList
    },
    greyList () {
      return this.$store.state.app.greyList
    },
    greyListMap () {
      // 生成灰名单id对象
      const greyListMap = {}
      this.greyList.forEach(i => {
        greyListMap[i.id] = i
      })
      return greyListMap
    }
  },
  mixins: [ticketMixin],
  components: {
    Editor,
    GreySelector
  },
  props: {
    id: {
      type: Number,
      default: null
    },
    scenicList: {
      type: Array,
      default: () => []
    },
    salesChannel: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      detail: '',
      billingTypeList: [],
      billingTypeListArr: [], // 增加的计费类型
      columns,
      project: localStorage.mgt_project,
      showOtherRentInfo: false,
      greylistIdentities: [],
      loading: false,
      formData: null,
      bindScenic: [],
      bindChannel: [],
      ageLimits: [],
      limitIdentities: [],
      blacklistIdentities: [],
      allow_agency_order: 0,
      whether_to_use_thirdparty_pricecode: 0,
      timeRateList: [
        { timeEffect: '+',
          timeNum: '30',
          timeType: 'minute',
          rate: 0
        }
      ]
    }
  },
  methods: {
    processStrBillingData  (str) {
      // '[{"id":1,"name":"半年","type":"DAY","value":182,"status":0,"price":11,"idList":null,"pageSize":null,"pageNum":null}]'
      // 还需要通过id找到该元素在billingTypeList的位置，来设置下拉框默认选中第几个选项
      const findIndexById = (arr, id) => arr.findIndex(item => item.id === id)
      // const index = findIndexById(objectsArray, idToFind);
      if (!str) return [] // 处理billingtype为null情形
      const arr = JSON.parse(str)?.map(item => ({
        billingTypeItem: {
          id: item.id,
          name: item.name,
          type: item.type,
          value: item.value,
          status: item.status,
          price: item.price,
          idList: item.idList,
          pageSize: item.pageSize,
          pageNum: item.pageNum
        },
        price: item.price,
        position: findIndexById(this.billingTypeList, item.id)
      }))
      // billingTypeListArr
      return arr
    },
    handleChangeBselect (value, customParam) {
      // <!--  v-show="!billingTypeListArr[index].billingTypeItem" v-model="billingTypeListArr[index].billingTypeItem" -->
      // <!-- index(customParam)代表第几个计费类型，$event是value代表第几个选项 -->
      // this.$nextTick(() => {
      //   console.log('select change', customParam, this.billingTypeListArr[customParam], value)
      //   this.billingTypeListArr[customParam].billingTypeItem = this.billingTypeList[value]
      //   this.billingTypeListArr[customParam].position = value // 设置select选中第几个选项
      // })
      this.billingTypeListArr[customParam].billingTypeItem = this.billingTypeList[value]
      this.billingTypeListArr[customParam].position = value // 设置select选中第几个选项
    },
    initBillingTypeArr () {
      // this.processStrBillingData(this.formData.ticketTypeExtraInfo.billing_type)
      // this.formData
      // const str = this.formData.ticketTypeExtraInfo.billing_type
      // billingTypeListArr = JSON.string
    },
    handleDeleteBillingTypeItem (index) {
      this.billingTypeListArr.splice(index, 1)
    },
    handleAddBillingTypeItem () {
      console.log(this.billingTypeListArr)
      // 添加之前先校验
      for (const b of this.billingTypeListArr) {
        if (!b.hasOwnProperty('price')) {
          this.$message.error('请补充计费类型价格')
          return
        }
        if (!b.hasOwnProperty('billingTypeItem')) {
          this.$message.error('请选择计费类型')
          return
        }
      }
      // 校验后允许编辑
      // let lastBTitem
      // 需要默认选中第一个，不然默认选中做不了
      this.billingTypeListArr.push({
        billingTypeItem: this.billingTypeList[0],
        position: 0
      })
      console.log(this.billingTypeListArr, this.billingTypeListArr.length)
    },
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
    addAge () {
      this.ageLimits.push({
        ageStart: '',
        ageEnd: ''
      })
    },
    delAge (index) {
      this.ageLimits.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)
    },
    getFileList (obj) {
      if (obj && obj.fileList) {
        return obj.fileList.map(item => {
          const info = item.response
          if (info) {
            return {
              size: info.size - 0,
              url: info.link
            }
          } else {
            return {
              size: item.size,
              url: item.url
            }
          }
        })
      }

      if (Array.isArray(obj)) {
        return obj.map(item => {
          return {
            size: item.size,
            url: item.url
          }
        })
      }

      return []
    },
    handleOk (e) {
      e.preventDefault()
      // validate billingTypeListArr 校验计费类型
      if (!this.validateBillingTypeListArr()) { return }
      this.form.validateFieldsAndScroll((err, 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 = this.getFileList(values.pictures)
          params.limit_identities = this.limitIdentities
          params.age_limits = this.ageLimits
          params.blacklist_identities = this.blacklistIdentities

          params.order_limit_group = params.order_limit_group || 0

          // 设置计费类型
          params.ticketTypeExtraInfo.billing_type = JSON.stringify(this.genBillingTypeArrParams())

          params.ticketTypeExtraInfo.images = this.imageList.map(v => v.response.link).join(',')
          params.ticketTypeExtraInfo.detail = this.detail
          setTicketTypeById(this.formData.id, params).then(res => {
            this.$message.success('修改成功')
            this.handleScenicChange()
            this.handleChannelChange()
            this.$emit('update')

            this.handleCancel()
          })
        }
      })
    },
    validateBillingTypeListArr () {
      if (!this.billingTypeListArr.length) {
        this.$message.error('请添加计费类型')
        return false
      }
      for (const b of this.billingTypeListArr) {
        if (!b.price) {
          this.$message.error('请补充计费类型价格')
          return false
        }
        if (!b.billingTypeItem) {
          this.$message.error('请选择计费类型')
          return false
        }
      }
      return true
    },
    genBillingTypeArrParams () {
      const billingTypeArrParam = []
      for (const b of this.billingTypeListArr) {
        const t = b.billingTypeItem
        t.price = b.price
        billingTypeArrParam.push({
          ...t
        })
      }
      return billingTypeArrParam
    },
    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('绑定渠道成功')
      })
    },
    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
      }
    },
    formatTime (e) {
      switch (true) {
        case (e === 0):
          return {
            timeNum: e,
            timeType: 'minute'
          }
        case (e % (60 * 60 * 24 * 30) === 0):
          return {
            timeNum: e / (60 * 60 * 24 * 30),
            timeType: 'month'
          }
        case (e % (60 * 60 * 24 * 7) === 0):
          return {
            timeNum: e / (60 * 60 * 24 * 7),
            timeType: 'week'
          }
        case (e % (60 * 60 * 24) === 0):
          return {
            timeNum: e / (60 * 60 * 24),
            timeType: 'day'
          }
        case (e % (60 * 60) === 0):
          return {
            timeNum: e / (60 * 60),
            timeType: 'hour'
          }
        case (e % 60 === 0):
          return {
            timeNum: e / 60,
            timeType: 'minute'
          }

        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[prop].inputValue = ''
    }
  },
  watch: {
    async value (val) {
      if (!val) return
      this.loading = true
      await getTicketScenic(this.id).then(res => {
        const scenicList = res.extraInfo.list.filter(s => {
          return this.scenicList.find(i => {
            return i.id === s.id
          })
        })
        this.bindScenic = scenicList.map(i => i.id)
      })

      await getTicketChannel(this.id).then(res => {
        this.bindChannel = res.extraInfo.list.map(i => i.id)
      })

      getTicketTypeById(this.id).then(res => {
        this.formData = res.extraInfo

        console.log(this.processStrBillingData(this.formData.ticketTypeExtraInfo.billing_type))
        console.log(this.billingTypeList)
        // 初始化计费类型
        this.billingTypeListArr = this.processStrBillingData(this.formData.ticketTypeExtraInfo.billing_type)

        this.limitIdentities = this.formData.limit_identities || []
        this.blacklistIdentities = this.formData.blacklist_identities || []
        this.formData.grey_list_id = this.formData.grey_list_id || undefined
        this.formData.is_grey_list = !!this.formData.is_grey_list

        // console.log(this.greylistIdentities, this.formData.greyList_identities)

        this.ageLimits = this.formData.age_limits || []

        this.detail = this.formData.ticketTypeExtraInfo.detail
        if (this.formData.ticketTypeExtraInfo && this.formData.ticketTypeExtraInfo.images) {
          const imageArr = this.formData.ticketTypeExtraInfo.images.split(',')
          this.imageList = imageArr.map((i, index) => {
            return {
              uid: index + '',
              name: '图' + index,
              url: i,
              thumbUrl: i,
              size: i.size,
              percent: 100,
              response: {
                link: i
              }
            }
          })
        }

        if (typeof this.formData.discount_rule === 'string') {
          this.formData.discount_rule0 = JSON.parse(this.formData.discount_rule)[0]
          this.formData.discount_rule1 = JSON.parse(this.formData.discount_rule)[1]
        } else {
          this.formData.discount_rule1 = null
          this.formData.discount_rule1 = null
        }

        if (!this.formData.is_refund) {
          this.formData.refund_strategy = {
            type: 'RATE',
            pirce: 0,
            rate: 0,
            contents: []
          }
        }
        if (this.formData.refund_strategy && this.formData.refund_strategy.type === 'TIME_RATE') {
          this.timeRateList = this.formData.refund_strategy.contents.map(item => {
            const timeEffect = item.seconds > 0 ? '+' : '-'
            const obj = this.formatTime(Math.abs(item.seconds))

            return {
              timeEffect: timeEffect,
              timeNum: obj.timeNum,
              timeType: obj.timeType,
              rate: item.rate
            }
          }).reverse()
        }
        // 设置默认策略
        this.loading = false
        // this.imageList = this.formData.pictures.map((i, index) => {
        //   return {
        //     uid: index + '',
        //     name: '图' + index,
        //     url: i.url,
        //     thumbUrl: i.url,
        //     size: i.size
        //   }
        // })
        this.$nextTick(() => {
          this.form.getFieldDecorator('is_refund', { initialValue: !!this.formData.is_refund })
          this.form.getFieldDecorator('is_change', { initialValue: !!this.formData.is_change })
          this.form.getFieldDecorator('is_book_today', { initialValue: !!this.formData.is_book_today })
          this.form.getFieldDecorator('show_qrcode', { initialValue: !!this.formData.show_qrcode })
          this.form.getFieldDecorator('is_restricted_sales', { initialValue: !!this.formData.is_restricted_sales })
        })
      })
    }
  }
}
</script>

<style scoped>
.ant-form-item{
  width: 50%; display: inline-block;
}

.priceList {
  font-variant: tabular-nums;
  li {
    margin-bottom: 15px;
  }
  .calendarTxt {
    display: inline-block; width: 332px; box-sizing: border-box; padding-right: 30px;margin-right: 20px;text-align: center;
    span {
      display: inline-block; width: 135px;
    }
  }
  .priceTxt {
    display: inline-block; width: 200px; box-sizing: border-box; padding-left: 10px;margin-right: 20px;
    span {
      margin-right: 5px;
    }
  }
  .calendarPicker {
    margin-right: 20px;
  }
  .priceInput {
    display: inline-block; width: 200px; margin-right: 20px;
  }
}

.noData {
  padding: 10px;text-align: center; border: 1px dashed #ddd;
}
</style>
