<template>
  <el-form
    inline
    :model="form"
    ref="form"
    class="form-wrap dialog-form"
    label-width="140px">
    <el-form-item
      verify
      class="is-required"
      prop="ticketTypeId"
      label="票种">
      <el-select
        v-model="form.ticketTypeId"
        filterable>
        <el-option
          v-for="item in ticketTypeList"
          :key="item.id"
          :label="item.name"
          :value="item.ticketTypeId"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item
      verify
      class="is-required"
      prop="id"
      label="分销商">
      <el-select
        v-model="form.id"
        filterable>
        <el-option
          v-for="item in otaList"
          :key="item.id"
          :label="item.otaSourceName"
          :value="item.id"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item
      verify
      class="is-required"
      label="市场价"
      prop="marketPrice">
      <el-input-number
        controls-position="right"
        v-model="form.marketPrice"
        :min="0.00"
        :precision="2"></el-input-number>
    </el-form-item>
    <el-form-item
      verify
      class="is-required"
      label="结算价"
      prop="settlementPrice">
      <el-input-number
        controls-position="right"
        v-model="form.settlementPrice"
        :min="0.00"
        :precision="2"></el-input-number>
    </el-form-item>
    <el-form-item
      verify
      class="is-required"
      label="分销商实际售卖价"
      prop="salePrice">
      <el-input-number
        controls-position="right"
        v-model="form.salePrice"
        :min="0.00"
        :precision="2"></el-input-number>
    </el-form-item>
    <el-form-item
      verify
      class="is-required"
      prop="sellStartDate"
      label="起售日期">
      <el-date-picker
        v-model="form.sellStartDate"
        type="date"
        :picker-options="dateOption"
        placeholder="选择日期时间"
        default-time="00:00:00">
      </el-date-picker>
    </el-form-item>
    <el-form-item
      verify
      class="is-required"
      prop="sellEndDate"
      label="停售日期">
      <el-date-picker
        v-model="form.sellEndDate"
        type="date"
        :picker-options="dateOption"
        placeholder="选择日期时间"
        default-time="23:59:59">
      </el-date-picker>
    </el-form-item>
    <el-form-item
      verify
      class="is-required"
      label="可售时间"
      prop="saleTime"
      style="width:100%">
      <el-time-picker
        is-range
        style="width:100%"
        v-model="form.saleTime"
        value-format="HH:mm:ss"
        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        placeholder="选择时间范围">
      </el-time-picker>
    </el-form-item>
    <el-form-item
      verify
      class="is-required"
      label="当日可售时间"
      prop="saleTime"
      style="width:100%">
      <el-time-picker
        is-range
        style="width:100%"
        v-model="form.saleTime"
        value-format="HH:mm:ss"
        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        placeholder="选择时间范围">
      </el-time-picker>
    </el-form-item>
    <el-form-item
      label="最小提前预订天数"
      prop="min_preorder_days">
      <el-input-number
        controls-position="right"
        v-model="form.min_preorder_days"
        :min="0"></el-input-number>
    </el-form-item>
    <el-form-item
      label="最大提前预订天数"
      prop="max_preorder_days">
      <el-input-number
        controls-position="right"
        v-model="form.max_preorder_days"
        :min="0"></el-input-number>
    </el-form-item>
    <el-form-item
      label="是否可退"
      prop="is_refund">
      <el-select v-model="form.is_refund">
        <el-option
          :value="1"
          label="是"></el-option>
        <el-option
          :value="0"
          label="否"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item
      label="退票提前天数"
      prop="refund_advanceDays">
      <el-input-number
        controls-position="right"
        v-model="form.refund_advanceDays"
        :min="0"></el-input-number>
    </el-form-item>
    <el-form-item
      verify
      class="is-required"
      label="退票价格"
      prop="refund_price">
      <el-input-number
        controls-position="right"
        v-model="form.refund_price"
        :min="0.00"
        :precision="2"></el-input-number>
    </el-form-item>
    <el-form-item
      verify
      class="is-required"
      label="当日游玩时段"
      prop="useTime"
      style="width:100%">
      <el-time-picker
        is-range
        style="width:100%"
        v-model="form.useTime"
        value-format="HH:mm:ss"
        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        placeholder="选择时间范围">
      </el-time-picker>
    </el-form-item>
    <el-form-item
      label="是否上传二维码"
      prop="is_qrcode">
      <el-select v-model="form.is_qrcode">
        <el-option
          :value="1"
          label="是"></el-option>
        <el-option
          :value="0"
          label="否"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item
      class="is-required"
      prop="offline_count"
      verify
      label="线下产品数量">
      <el-input-number
        controls-position="right"
        v-model="form.offline_count"
        :min="1"></el-input-number>
    </el-form-item>
    <el-form-item
      label="可提前使用天数"
      prop="advanceDays">
      <el-input-number
        controls-position="right"
        v-model="form.advanceDays"
        :min="0"></el-input-number>
    </el-form-item>
    <el-form-item
      label="可延后使用天数"
      prop="delay_days">
      <el-input-number
        controls-position="right"
        v-model="form.delay_days"
        :min="0"></el-input-number>
    </el-form-item>
    <el-form-item
      verify
      class="is-required"
      prop="useStartDate"
      label="游玩开始日期">
      <el-date-picker
        v-model="form.useStartDate"
        type="date"
        :picker-options="dateOption"
        placeholder="选择日期时间"
        default-time="00:00:00">
      </el-date-picker>
    </el-form-item>
    <el-form-item
      verify
      class="is-required"
      prop="useEndDate"
      label="游玩截止日期">
      <el-date-picker
        v-model="form.useEndDate"
        type="date"
        :picker-options="dateOption"
        placeholder="选择日期时间"
        default-time="23:59:59">
      </el-date-picker>
    </el-form-item>
    <el-form-item
      verify
      class="is-required"
      label="游玩天数"
      prop="useValidDays">
      <el-input-number
        controls-position="right"
        v-model="form.useValidDays"
        :min="1"></el-input-number>
    </el-form-item>
    <el-form-item
      verify
      class="is-required"
      label="最小起订数"
      prop="minOrderNum">
      <el-input-number
        controls-position="right"
        v-model="form.minOrderNum"
        :min="1"></el-input-number>
    </el-form-item>
    <el-form-item
      verify
      class="is-required"
      label="最大限订数"
      prop="maxOrderNum">
      <el-input-number
        controls-position="right"
        v-model="form.maxOrderNum"
        :min="1"></el-input-number>
    </el-form-item>
    <el-collapse>
      <el-collapse-item
        title="身份证规则设置"
        name="1">
        <el-form-item
          label="性别限制"
          prop="idcard_sex_limit">
          <el-select v-model="form.idcard_sex_limit">
            <el-option
              :value="0"
              label="不限制"></el-option>
            <el-option
              :value="1"
              label="男"></el-option>
            <el-option
              :value="2"
              label="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <p class="manual-label">年龄限定</p>
          <el-input
            style="width: 60px;"
            v-model="form.idcard_age_min"></el-input>
          岁 - <el-input
            style="width: 60px;"
            v-model="form.idcard_age_max"></el-input> 岁
        </el-form-item>
        <el-form-item>
          <p class="manual-label">每个身份证</p>
          <el-input
            style="width: 60px;"
            v-model="form.idcard_limit_days"></el-input>
          天内购买
          <el-input
            style="width: 60px;"
            v-model="form.idcard_limit_count"></el-input> 张
        </el-form-item>
      </el-collapse-item>
      <el-collapse-item
        title="实名制身份证规则设置"
        name="2">
        <el-form-item
          label="性别限制"
          prop="realname_sex_limit">
          <el-select v-model="form.realname_sex_limit">
            <el-option
              :value="0"
              label="不限制"></el-option>
            <el-option
              :value="1"
              label="男"></el-option>
            <el-option
              :value="2"
              label="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <p class="manual-label">年龄限定</p>
          <el-input
            style="width: 60px;"
            v-model="form.realname_age_min"></el-input>
          岁 - <el-input
            style="width: 60px;"
            v-model="form.realname_age_max"></el-input> 岁
        </el-form-item>
        <el-form-item>
          <p class="manual-label">每个身份证</p>
          <el-input
            style="width: 60px;"
            v-model="form.realname_limit_days"></el-input>
          天内购买
          <el-input
            style="width: 60px;"
            v-model="form.realname_limit_count"></el-input> 张
        </el-form-item>
      </el-collapse-item>
    </el-collapse>
    <div class="btn-wrap">
      <el-button @click="reset">重置</el-button>
      <el-button
        @click="submit"
        type="primary">保存</el-button>
    </div>
  </el-form>
</template>

<script>
import { addOTATicketSale } from '@/api/otaTicketSale'
import moment from 'moment'
export default {
  props: {
    otaList: {
      type: Array,
      default: () => []
    },
    ticketTypeList: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      visible: false,
      dateOption: {
        disabledDate (theTime) {
          let startTime = moment().format('YYYY-MM-DD') + ' 00:00:00'
          return moment(theTime).isBefore(startTime)
        }
      },
      form: {
        ticketTypeId: '',
        id: '',
        salePrice: 0,
        sellStartDate: '',
        sellEndDate: '',
        sale_time_start: '',
        sale_time_end: '',
        saleTime: ['00:00:00', '23:59:59'],
        useStartDate: '',
        useEndDate: '',
        useTimeStart: '',
        useTimeEnd: '',
        useTime: ['08:00:00', '20:00:00'],
        useValidDays: 0,
        min_preorder_days: 0,
        max_preorder_days: 365, // 最大提前预订天数
        is_refund: 0,
        refund_advanceDays: 0,
        refund_price: 0,
        is_qrcode: 0,
        offline_count: 1,
        advanceDays: 0,
        delay_days: 0,
        minOrderNum: 0,
        maxOrderNum: 0,
        idcard_limit_days: 0, // 身份证限制
        idcard_limit_count: 0,
        idcard_sex_limit: 0,
        idcard_area_limit: 0,
        idcard_age_min: 0,
        idcard_age_max: 0,
        realname_limit_days: 0,
        realname_limit_count: 0,
        realname_sex_limit: 0,
        realname_area_limit: 0,
        realname_age_min: 0,
        realname_age_max: 0
      }
    }
  },
  watch: {
    visible (val) {
      this.reset()
    },
    'form.saleTime': {
      handler (arr) {
        this.form.sale_time_start = arr[0]
        this.form.sale_time_end = arr[1]
      },
      immediate: true
    },
    'form.useTime': {
      handler (arr) {
        this.form.useTimeStart = arr[0]
        this.form.useTimeEnd = arr[1]
      },
      immediate: true
    }
  },
  methods: {
    handleClose () {
      this.$parent.handleClose()
    },
    reset () {
      this.$refs.form.resetFields()
    },
    submit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          addOTATicketSale(this.form).then(res => {
            this.$message.success('添加成功')
            this.reset()
            this.handleClose()
            this.$emit('updateList')
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
.manual-label {
  margin: 0;
  padding-right: 12px;
  box-sizing: border-box;
  text-align: right;
  display: inline-block;
  width: 140px;
}
</style>
