<template>
  <el-form :model="form" ref="form" :rules="rules" label-width="120px">
    <div class="dm-form__wrap">
      <h3 class="dm-title__label">选择卡券</h3>
      <div style="margin-bottom:20px;">
        <card-temp ref="cardTemp" cardType="0,1" :disabled="isEdit || isInfo" pbSize="pb15" :activeId.sync="form.proReferId" @emitActiveObj="getCardActiveObjFun" :showPagination="false" :cardLimitType="3"></card-temp>
      </div>
    </div>
    <div class="dm-form__wrap">
      <h3 class="dm-title__label">优惠券信息</h3>
      <el-form-item prop="integralCost" label="积分费用">
        <el-input-number controls-position="right" :disabled="isEdit || isInfo" v-model="form.integralCost" class="w300" :precision="0" :min="0"></el-input-number>
      </el-form-item>
      <el-form-item prop="cashCost" label="现金费用">
        <el-input-number controls-position="right" :disabled="isEdit || isInfo" v-model="form.cashCost" class="w300" :precision="2" :min="0"></el-input-number>
      </el-form-item>
      <el-form-item prop="limitTimes" label="次数限制">
        <el-checkbox :disabled="isInfo" v-model="isLimitTimes"> 每个会员限制兑换 </el-checkbox>
        <el-input-number controls-position="right" :disabled="isInfo" v-model="form.limitTimes" class="w100" :precision="0" :min="0"></el-input-number> 次
      </el-form-item>
      <el-form-item prop="memberGradeArr" label="适用会员">
        <el-select v-model="form.memberGradeArr" multiple placeholder="请选择" class="w300">
          <el-option v-for="item in memberGradeOptions" :key="item.gradeId" :label="item.gradeName" :value="item.gradeId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="展现门店" class="is-required">
        <vue-gic-store-linkage :disabled="isInfo" :msg="sendChildData" ref="selectTree" @sendSelectGroupData="getSelectGroupData"></vue-gic-store-linkage>
      </el-form-item>
    </div>
    <div class="dm-form__wrap">
      <h3 class="dm-title__label">兑换条件</h3>
      <el-form-item prop="exchangeDateType" label="兑换日期" class="is-required">
        <el-radio-group v-model="form.exchangeDateType" style="line-height:inherit;">
          <el-radio :label="1">全部日期</el-radio>
          <el-radio :label="2">固定日期</el-radio>
          <el-radio :label="3">每月</el-radio>
          <el-radio :label="4">每周</el-radio>
        </el-radio-group>
        <div class="">
          <el-date-picker class="w300" v-model="form.exchangeFixDate" v-if="form.exchangeDateType === 2" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
          <el-select class="w300" size="small" v-model="form.exchangeDateDayArr" v-if="form.exchangeDateType === 3" multiple placeholder="请选择">
            <el-option v-for="item in monthOptions" :key="item" :label="item" :value="item"></el-option>
          </el-select>
          <el-select class="w300" size="small" v-model="form.exchangeDateWeekArr" v-if="form.exchangeDateType === 4" multiple placeholder="请选择">
            <el-option v-for="item in exchangeDateWeekOptions" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </div>
      </el-form-item>

      <el-form-item prop="exchangeTimeType" label="兑换时段" class="is-required">
        <el-radio-group v-model="form.exchangeTimeType">
          <el-radio :label="1">全部时段</el-radio>
          <el-radio :label="2" class="vertical-middle">部分时段</el-radio>
        </el-radio-group>
        <div v-show="form.exchangeTimeType === 2" class="">
          <p v-for="(v, i) in timeRangeList" :key="i" class="pt8">
            <el-time-picker :disabled="form.exchangeTimeType === 1" class="vertical-middle w300" is-range v-model="v.timeRange" value-format="HH:mm" format="HH:mm" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围"></el-time-picker>
            <el-button v-if="i" class="vertical-middle" type="text" @click="delTimeRange(i)">删除</el-button>
          </p>
          <span class="gray fz12 vertical-top">请使用24小时制输入时间，格式如11:00至14:30</span>
          <p><el-button type="text" @click="addTimeRange">添加时间段</el-button></p>
        </div>
      </el-form-item>
      <el-form-item prop="proShowStatus" label="显示状态">
        <el-radio-group v-model="form.proShowStatus">
          <el-radio :label="1">上架状态就显示</el-radio>
          <el-radio :label="2">兑换状态下显示</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item prop="releaseType" label="发布时间">
        <el-radio-group v-model="form.releaseType">
          <el-radio :label="1">立即发布</el-radio>
          <el-radio :label="2">定时发布</el-radio>
        </el-radio-group>
        <div class="pt8" v-if="form.releaseType === 2">
          <el-date-picker v-model="form.limitTimeBegin" type="datetime" placeholder="选择日期时间"></el-date-picker>
        </div>
      </el-form-item>
    </div>
    <div class="btn-wrap_fixed" :class="{ on: asideShow }">
      <el-button type="primary" @click="submit('form')" v-if="!isInfo">{{ isAdd ? '确认新增' : '确认编辑' }}</el-button>
      <el-button @click="$router.go(-1)">返 回</el-button>
    </div>
  </el-form>
</template>

<script>
import infojs from './info.js';
export default infojs;
</script>
