<template>
  <el-form class="dm-wrap" :model="form"  ref="form" :rules="rules" label-width="120px">
    <el-form-item label="卡券类型">
      <el-radio-group v-model="form.cardType" :disabled="editDisabled || infoDisabled" @change="reset(form.cardType)">
        <el-radio :label="0">抵金券</el-radio>
        <el-radio :label="1">折扣券</el-radio>
        <el-radio :label="2">兑换券</el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item prop="cardName" label="卡券名称">
      <dm-input v-model="form.cardName" class="w400" placeholder="请输入卡券名称" :disabled="editDisabled || infoDisabled" :maxlength="9"></dm-input>
    </el-form-item>

    <el-form-item prop="subName" label="备注名">
      <dm-input v-model="form.subName" class="w400" placeholder="请输入备注名称" :disabled="editDisabled || infoDisabled" :maxlength="9"></dm-input>
    </el-form-item>

    <el-form-item prop="subTitle" label="卡券副标题">
      <dm-input v-model="form.subTitle" class="w400" placeholder="请输入卡券副标题" :disabled="editDisabled || infoDisabled" :maxlength="18"></dm-input>
    </el-form-item>

    <el-form-item prop="cardColor" label="卡券颜色" style="height: 40px;">
      <el-color-picker  v-model="form.cardColor" :disabled="infoDisabled"></el-color-picker> <span class="vertical-top">{{form.cardColor}}</span>
    </el-form-item>

     <!-- 抵金券 -->
    <el-form-item prop="cardDenomination" label="减免金额" v-if="form.cardType === 0">
      <el-input-number :disabled="editDisabled || infoDisabled" v-model="form.cardDenomination" class="200" :precison="0" :min="0"></el-input-number> 元 <span class="fz12 gray">请输入大于0的整数</span>
    </el-form-item>
     <!-- 折扣券 -->
    <el-form-item prop="cardDenomination" label="折扣额度" v-if="form.cardType === 1">
      <el-input-number :disabled="editDisabled || infoDisabled" v-model="form.cardDenomination" class="200" :precision="1" :step="0.1" :max="9.9" :min="0"></el-input-number> 折 <span class="fz12 gray">请填写1-9.9之间的数字</span>
    </el-form-item>
    <!-- 兑换券无 -->
    <el-form-item prop="" label="使用条件">
      <div v-if="form.cardType === 0" class="mb10">
        <el-checkbox :disabled="editDisabled || infoDisabled" v-model="sale_limit.flag">最低消费满</el-checkbox>
        <el-input-number :min="0" @focus="sale_limit.flag = true" :disabled="editDisabled || infoDisabled" v-model="sale_limit.fee" class="w200"></el-input-number> 元可使用
      </div>
      <div v-if="form.cardType !== 2">
        <el-checkbox :disabled="editDisabled || infoDisabled" v-model="goods.flag">适用商品</el-checkbox> <span class="fz12 gray">（至少填写一项）</span>
      </div>
      <div class="mb10" v-if="form.cardType!== 2">
        <span class="inline-block w100 text-right">适用商品</span> <dm-input @focus="goods.flag = true" v-model="goods.ok" :disabled="editDisabled || infoDisabled" class="w300" placeholder="限制18个汉字内" :maxlength="18"></dm-input>
      </div>
      <div v-if="form.cardType !== 2" class="mb10">
        <span class="inline-block w100 text-right">不适用商品</span>  <dm-input @focus="goods.flag = true" v-model="goods.no" :disabled="editDisabled || infoDisabled" class="w300" placeholder="限制18个汉字内" :maxlength="18"></dm-input>
      </div>
      <!-- 兑换券 -->
      <div v-if="form.cardType === 2" class="mb10">
        <el-checkbox :disabled="editDisabled || infoDisabled" v-model="sale_limit.flag">消费条件</el-checkbox> <span class="fz12 gray">（至少填写一项）</span>
      </div>
      <div class="mb10" v-if="form.cardType === 2">
        <el-radio v-model="sale_limit.type" :label="1" :disabled="editDisabled || infoDisabled">
          消费金额满 <el-input-number @focus="sale_limit.type = 1;sale_limit.flag = true" :disabled="editDisabled || infoDisabled" :precision="1" :min="0" class="w300" v-model="sale_limit.fee"></el-input-number> 元可使用
        </el-radio>
      </div>
      <div v-if="form.cardType === 2" class="mb10">
        <el-radio v-model="sale_limit.type" :label="2" :disabled="editDisabled || infoDisabled">
          消费指定商品 <el-input @focus="sale_limit.type = 2;sale_limit.flag = true" :disabled="editDisabled || infoDisabled" class="w300" v-model="sale_limit.goods"></el-input> 可使用
         <div class="inline-block pl10">指定商品货号<dm-goods-input :disabled="editDisabled || infoDisabled" class="w300 inline-block" v-model="form.proNoList" :multiple="false"></dm-goods-input></div>
        </el-radio>
      </div>
       <div>
        <el-checkbox v-model="only" :disabled="editDisabled || infoDisabled">不与其他优惠共享</el-checkbox>
      </div>
    </el-form-item>

    <el-form-item prop="cardLimit" label="领券限制">
      <el-radio-group v-model="cardLimitRadio" :disabled="editDisabled || infoDisabled">
        <el-radio :label="1">1张/人</el-radio>
        <el-radio :label="100">100张/人</el-radio>
        <el-radio :label="0">
          <el-input-number min="0" class="w150" v-model="form.cardLimit" :disabled="editDisabled || infoDisabled"></el-input-number> 张/人 <span class="fz13 gray">每个用户领券上限，默认为1</span>
        </el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item prop="costValue" label="成本费用" v-if="form.cardType !== 1">
      <el-input-number :disabled="editDisabled || infoDisabled" :precision="2" :min="0" class="w200" v-model="form.costValue"></el-input-number> 元 <span class="fz13 gray">请填写大于0的数字（限制两位小数）</span>
    </el-form-item>

    <el-form-item  label="code类型">
        <el-radio  v-model="form.useCustomCode" :label="0" :disabled="editDisabled || infoDisabled">随机生成</el-radio>
        <el-radio  v-model="form.useCustomCode" :label="1" :disabled="editDisabled || infoDisabled">自定义号段</el-radio>
    </el-form-item>

    <el-form-item prop="customCodeBegin" label="code号段" v-if="form.useCustomCode === 1">
      <el-input :disabled="editDisabled || infoDisabled" :min="0" :maxlength="16" class="w250" v-model="form.customCodeBegin" @blur="checkInputNumber(form.customCodeBegin,'customCodeBegin')"></el-input> —
      <el-input :disabled="editDisabled || infoDisabled" :min="0" :maxlength="16" class="w250" v-model="form.customCodeEnd" @blur="checkInputNumber(form.customCodeEnd,'customCodeEnd')"></el-input>
      <span class="fz13 gray">限制16位以内纯数字</span>
      <div class="pt20">
        <el-checkbox v-model="form.useCodePrefix" :true-label="1" :false-label="0" :disabled="editDisabled || infoDisabled">固定开头</el-checkbox>
        <el-input class="w400" :disabled="editDisabled || infoDisabled" v-model="form.customCodePrefix" :maxlength="6" @focus="form.useCodePrefix = 1" @blur="checkInputString(form.customCodePrefix,'customCodePrefix')"></el-input>
        <span class="fz13 gray">限制6位以内字母/数字</span>
      </div>
      <div class="pt20">
        <el-checkbox v-model="form.useCodeSuffix" :true-label="1" :false-label="0" :disabled="editDisabled || infoDisabled">固定结尾</el-checkbox>
        <el-input :disabled="editDisabled || infoDisabled" class="w400" v-model="form.customCodeSuffix" :maxlength="4" @focus="form.useCodeSuffix = 1" @blur="checkInputString(form.customCodeSuffix,'customCodeSuffix')"></el-input>
        <span class="fz13 gray">限制4位以内字母/数字</span>
      </div>
    </el-form-item>

    <el-form-item prop="cardCodeCount" :label="form.useCustomCode?'默认数量':'新建数量'">
      <div v-if="!form.useCustomCode"><el-input-number :min="0"  :disabled="editDisabled || infoDisabled" class="w200" v-model="form.cardCodeCount"></el-input-number> 张 <span class="fz13 gray">优惠券创建数量，如不填，则默认为100,000,000张</span></div>
      <div v-if="form.useCustomCode"><el-input-number :min="0"  :disabled="editDisabled || infoDisabled" class="w200" :value="form.customCodeEnd - form.customCodeBegin + 1"></el-input-number> 张 <span class="fz13 gray">优惠券创建数量，如不填，则默认为100,000,000张</span></div>
    </el-form-item>

    <el-form-item class="is-required" prop="useCustomCode" label="有效期">
      <div>
        <el-radio v-model="form.cardEffectiveMode" :disabled="editDisabled || infoDisabled" :label="0">固定日期</el-radio>
        <el-date-picker v-model="form.dateTime" @focus="form.cardEffectiveMode = 0" :disabled="editDisabled || infoDisabled" :picker-options="pickerOptions" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      </div>
      <div class="pt20">
        <el-radio v-model="form.cardEffectiveMode" :label="1" :disabled="editDisabled || infoDisabled">领取后，</el-radio>
        <el-select v-model="form.startDay" @focus="form.cardEffectiveMode = 1" class="w200" placeholder="请选择" :disabled="editDisabled || infoDisabled">
          <el-option v-for="item in startDayOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
         生效，有效天数 <el-input-number class="w200" @focus="form.cardEffectiveMode = 1" :disabled="editDisabled || infoDisabled" v-model="form.limitDay" :precision="0" :min="0"></el-input-number> 天
      </div>
    </el-form-item>

    <el-form-item prop="cardExplain" label="适用门店说明">
      <dm-input class="w400" v-model="form.cardExplain"  :disabled="infoDisabled" :maxlength="50"></dm-input>
    </el-form-item>

    <el-form-item prop="sendChildData" label="适用门店">
      <vue-gic-store-linkage :disabled="infoDisabled" :msg="sendChildData" ref="selectTree" @sendSelectGroupData="getSelectGroupData"></vue-gic-store-linkage>
    </el-form-item>

    <el-form-item prop="image" label="(选填)封面图片">
      <dm-upload-img :disabled="editDisabled || infoDisabled" :model.sync="form.image" width="64" label="上传图片" url="/api-plug/upload-img" tips="图片建议尺寸：850px*350px，大小不超过2M"></dm-upload-img>
    </el-form-item>

    <el-form-item prop="coverDescript" label="(选填)封面简介">
      <dm-input class="w400" v-model="form.coverDescript" :disabled="editDisabled || infoDisabled" :maxlength="12"></dm-input>
    </el-form-item>

    <el-form-item prop="useDescript" label="使用说明">
      <dm-input class="w400" type="textarea" :rows="6" v-model="form.useDescript" :maxlength="500" :disabled="infoDisabled"></dm-input>
    </el-form-item>

    <el-form-item prop="teletexts" label="(选填)图文介绍">
      <p class="fz13 gray">图片建议尺寸：900px*500px，大小不超过2M；至少上传1组图文，最多输入5000字</p>
      <img-text-drag :list.sync="imgTextList"></img-text-drag>
    </el-form-item>

    <el-form-item  label="放入卡券展架"  v-show="cardLimitRadio === 1">
      <el-transfer :disabled="infoDisabled"
        filterable
        :filter-method="filterMethod"
        filter-placeholder="输入展架名称搜索"
        v-model="form.shelfIds"
        :titles="['所有门店展架', '选中的展架']"
        :data="cardShelfsList">
      </el-transfer>
    </el-form-item>

    <el-form-item prop="verificationType" label="核销方式" v-if="form.cardType === 2">
      <el-radio v-model="form.verificationType" :label="0" :disabled="editDisabled || infoDisabled">会员自助核销</el-radio>
      <el-radio v-model="form.verificationType" :label="1" :disabled="editDisabled || infoDisabled">收银台录入核销</el-radio>
    </el-form-item>

    <div class="btn-wrap_fixed" :class="{'on':asideShow}">
      <el-button type="primary" @click="submitForm('form')" v-if="!infoDisabled">保存并提交审核</el-button>
      <el-button @click="$router.go(-1)">返 回</el-button>
    </div>

  </el-form>
</template>

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