<template>
  <div v-loading="loading">
    <el-form class="dm-wrap" :model="form" ref="form" :rules="rules" label-width="140px">
      <p class="mb20 fz18">基本信息</p>
      <el-form-item label="卡券类型">
        <el-radio-group v-model="form.giftCouponDiscountType" :disabled="isEdit || isInfo">
          <el-radio :label="1">抵金券</el-radio>
          <el-radio :label="2">免单券</el-radio>
          <!-- <el-tooltip class="item" content="领取可免费叠加使用" placement="top-start">
            <i class="el-icon-info place-font-color ml5 tips"></i>
          </el-tooltip> -->
        </el-radio-group>
      </el-form-item>
      <!-- <el-form-item label="卡券适用渠道" prop="cardApplyChannel">
        <el-select v-model="form.cardApplyChannel" multiple class="w400" placeholder="请选择" :disabled="isEdit || isInfo">
          <el-option v-for="item in cardApplyChannelOptions" :key="item.value" :label="item.name" :value="item.value"></el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item prop="cardName" label="卡券名称">
        <dm-input v-model="form.cardName" class="w400" placeholder="请输入卡券名称" :disabled="isEdit || isInfo" :byteType="1" :maxlength="30"></dm-input>
      </el-form-item>

      <el-form-item prop="subName" label="备注名">
        <dm-input v-model="form.subName" class="w400" placeholder="请输入备注名称" :disabled="isEdit || isInfo" :byteType="1" :maxlength="10"></dm-input>
      </el-form-item>

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

      <el-form-item prop="cardColor" label="卡券颜色" style="height: 40px;">
        <el-color-picker v-model="form.cardColor" :disabled="isEdit || isInfo"></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 controls-position="right" :disabled="isEdit || isInfo" 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 controls-position="right" :disabled="isEdit || isInfo" 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 label="优惠金额封顶" v-if="form.cardType === 1"> <el-input-number controls-position="right" :disabled="isEdit || isInfo || discountAmountCheck" v-model="form.discount_amount_upper_limit" class="200" :precision="2" :step="1" :min="0"></el-input-number> 元 &nbsp;<el-checkbox v-model="discountAmountCheck" :disabled="isEdit || isInfo">不封顶</el-checkbox><span class="pl10 fz12 gray vertical-baseline">*该条件目前仅线上可用</span> </el-form-item> -->

      <!-- <el-form-item label="最大商品优惠数" v-if="form.cardType === 1"> <el-input-number controls-position="right" :disabled="isEdit || isInfo || goodsDiscountCheck" v-model="form.goods_discounts_number_upper_limit" class="200" :precision="0" :step="1" :min="0"></el-input-number> 件 &nbsp;<el-checkbox v-model="goodsDiscountCheck" :disabled="isEdit || isInfo">无上限</el-checkbox><span class="pl10 fz12 gray vertical-baseline">*该条件目前仅线上可用</span> </el-form-item> -->

      <el-form-item prop="" label="使用条件">
        <div class="clearfix">
          <div class="inline-block fl" style="width:240px;">
            <el-checkbox :disabled="isEdit || isInfo" v-model="goods.edx" class="mr10" />适用类目(e袋洗类目)
            <el-button type="primary" class="ml5" @click="ableCategoryVisible = true" size="mini" :disabled="isEdit || !goods.edx">编辑</el-button>
          </div>
          <div class="sysp__content clearfix inline-block fl" style="width:calc(100% - 440px);max-height: 100px;overflow-y: auto;">
            <span v-if="!goods.edx" class="fz13 gray">* 未勾选默认全部类目</span>
            <span v-if="goods.edx && form.edxGoodsList.length === 0" class="el-form-item__error">至少选择一个类目</span>
            <template v-for="(item, idx) in form.edxGoodsList">
              <span :key="idx" class="item mr5">{{ item.name }}</span>
            </template>
          </div>
        </div>
      </el-form-item>

      <el-form-item label="适用门店">
        <el-radio :disabled="isEdit" v-model="storeMode" :label="0">所有门店</el-radio>
        <el-radio :disabled="isEdit" v-model="storeMode" :label="1">部分门店</el-radio>
        <span v-if="isEdit" class="fz12 gray ml20">编辑适用门店前会员领取该卡券不包含新增的适用门店；编辑适用门店后会员领取该卡券包含新增的适用门店。</span>
        <!-- v-bind="storeParams" -->
        <vue-gic-store-card class="pt10" v-show="storeMode" ref="storeCard" :uuid.sync="uuid" scenes="edaixi" />
      </el-form-item>

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

      <el-form-item label="优惠内容" prop="giftCouponValue">
        <el-input-number controls-position="right" class="w150" :disabled="isEdit || isInfo" v-model="form.giftCouponValue" :precision="0" :min="0"></el-input-number> {{ form.giftCouponDiscountType === 1 ? '元' : '件' }}
        <span class="fz13 gray">* 单笔订单满足一定金额可免邮，未满金额产生的运费将由品牌方自行承担，查看<a href="#" @click="downloadMX">运费明细</a></span>
      </el-form-item>

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

      <el-form-item class="is-required" prop="useCustomCode">
        <el-tooltip slot="label" open-delay="200" content="用户使用有效期为用户领取卡券后的使用有效期计算规则" placement="top">
          <span class="tooltip-icon cursor">用户使用有效期</span>
        </el-tooltip>
        <div>
          <el-radio @change="changeCardEffectiveMode" v-model="form.cardEffectiveMode" :disabled="isEdit || isInfo || cardValidity" :label="0">固定日期</el-radio>
          <el-date-picker @change="changeCardEffectiveMode(0, false)" v-model="form.dateTime" @focus="form.cardEffectiveMode = 0" :disabled="isEdit || isInfo || cardValidity" :picker-options="pickerOptions" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        </div>
        <div class="pt20">
          <el-radio @change="changeCardEffectiveMode" v-model="form.cardEffectiveMode" :label="1" :disabled="isEdit || isInfo || cardValidity">领取后，</el-radio>
          <el-select v-model="form.startDay" @focus="form.cardEffectiveMode = 1" class="w200" placeholder="请选择" :disabled="isEdit || isInfo || cardValidity">
            <el-option v-for="item in startDayOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          生效，有效天数 <el-input-number controls-position="right" class="w200" @focus="form.cardEffectiveMode = 1" :disabled="isEdit || isInfo || cardValidity" v-model="form.limitDay" :precision="0" :min="1" :max="isEdit || isInfo ? 100000000 : 1200"></el-input-number> 天
        </div>
      </el-form-item>

      <!-- 当输入完整用户使用有效期后，出现卡券模板投放期限 -->
      <el-form-item v-show="showSendDateTime" prop="sendDateTime">
        <el-tooltip slot="label" open-delay="200" content="卡券模板投放期限为该张卡券可在GIC后台或通过API接口可投放给用户的期限" placement="top">
          <span class="tooltip-icon cursor">卡券模板投放期限</span>
        </el-tooltip>
        <div v-if="form.cardEffectiveMode == 0">
          <el-date-picker v-model="form.sendDateTime" :disabled="isEdit || isInfo" :picker-options="pickerOptions2" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
          <span class="gray fz13">* 卡券模板投放期限结束日期不能超过卡券使用有效期固定日期结束日期</span>
        </div>
        <div v-if="form.cardEffectiveMode == 1" style="height:35px;">
          <el-radio @change="resetSendDateTime" v-model="form.putEffectiveMode" :disabled="isEdit || isInfo" :label="1">长期有效</el-radio>
          <el-radio @change="resetSendDateTime" v-model="form.putEffectiveMode" :disabled="isEdit || isInfo" :label="0">固定日期</el-radio>
          <el-date-picker v-if="form.putEffectiveMode == 0" v-model="form.sendDateTime" @focus="form.putEffectiveMode = 0" :disabled="isEdit || isInfo" :picker-options="pickerOptions" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        </div>
      </el-form-item>

      <!-- <el-form-item label="手动领取">
        <el-switch :disabled="isEdit || isInfo" :active-value="1" :inactive-value="0" v-model="form.manualGetFlag"></el-switch>
        <span class="gray fz13">* 用户是否需要手动点击来领取卡券</span>
      </el-form-item>

      <el-form-item label="跳转配置">
        <el-switch :disabled="isInfo" :active-value="1" :inactive-value="0" v-model="form.jumpFlag"></el-switch>
        <template v-if="form.jumpFlag">
          <el-button @click="linkToolsVisible = true" type="text" class="ml10">{{ JSON.stringify(form.jumpLink) == '{}' ? '设置链接' : '修改链接：' }}</el-button>
          <span class="gray ml10">{{ form.jumpLink.name }}</span>
        </template>
        <div class="gray fz13">* 开启后小程序卡券详情将对应路径的跳转按钮</div>
      </el-form-item> -->

      <el-form-item prop="cardCodeCount" label="库存">
        <el-input-number controls-position="right" :precision="0" :min="1" :max="999999" :disabled="isEdit || isInfo" v-model="form.cardCodeCount" class="w150"></el-input-number>
      </el-form-item>

      <el-form-item prop="costValue" label="成本费用" v-show="form.cardType !== 1"> <el-input-number controls-position="right" :disabled="isEdit || isInfo" :precision="2" :min="0" class="w200" v-model="form.costValue"></el-input-number> 元 </el-form-item>
      <el-form-item label="code类型">
        <el-radio v-model="form.useCustomCode" :label="0" :disabled="isEdit || isInfo">随机生成</el-radio>
        <!-- <el-radio v-model="form.useCustomCode" :label="1" :disabled="isEdit || isInfo">自定义号段</el-radio> -->
      </el-form-item>

      <!-- <el-form-item prop="customCodeBegin" label="code号段" v-show="form.useCustomCode === 1">
        <el-input :disabled="isEdit || isInfo" :min="0" :maxlength="16" class="w250" v-model="form.customCodeBegin" @blur="checkInputNumber(form.customCodeBegin, 'customCodeBegin')"></el-input> —
        <el-input :disabled="isEdit || isInfo" :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="isEdit || isInfo">固定开头</el-checkbox>
          <el-input class="w400" :disabled="isEdit || isInfo" 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="isEdit || isInfo">固定结尾</el-checkbox>
          <el-input :disabled="isEdit || isInfo" 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-show="!form.useCustomCode"><el-input-number controls-position="right" :min="0" :max="10000000" :disabled="isEdit || isInfo" class="w200" v-model="form.cardCodeCount"></el-input-number> 张 <span class="fz13 gray">优惠券创建数量，如不填，则默认为100,000张</span></div>
        <div v-show="form.useCustomCode"><el-input-number controls-position="right" :min="0" :max="100000" disabled class="w200" :value="form.customCodeEnd - form.customCodeBegin + 1"></el-input-number> 张 <span class="fz13 gray">优惠券创建数量，如不填，则默认为100,000张</span></div>
      </el-form-item> -->

      <p class="mb20 fz18 pt20 mt30">领取和使用规则</p>
      <el-form-item prop="cardLimit" label="领券次数">
        <el-radio-group v-model="cardLimitRadio" :disabled="isEdit || isInfo">
          <el-radio :label="1">1张/人</el-radio>
          <el-radio :label="100">100张/人</el-radio>
          <el-radio :label="0"> <el-input-number controls-position="right" :min="0" class="w150" v-model="form.cardLimit" :disabled="isEdit || isInfo"></el-input-number> 张/人 <span class="fz13 gray">每个用户领券上限，默认为1</span> </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item prop="useDescript" label="使用说明">
        <dm-input class="w400" type="textarea" :rows="4" v-model="form.useDescript" :maxlength="500" :disabled="isInfo"></dm-input>
      </el-form-item>

      <div class="btn-wrap_fixed" :class="{ on: asideShow }">
        <el-button type="primary" @click="submitForm('form')" v-loading="submitLoading" v-show="!isInfo && canEdit && $store.state.marketing.appletEnable">保存</el-button>
        <el-button @click="$router.go(-1)">返 回</el-button>
      </div>
    </el-form>
    <el-dialog title="适用类目" :visible.sync="ableCategoryVisible" width="500px">
      <good-category ref="category" />
      <div slot="footer" class="dialog-footer">
        <el-button @click="ableCategoryVisible = false">{{ isEdit ? '关闭' : '取消' }}</el-button>
        <el-button v-if="isAdd || isCopy" type="primary" @click="saveAbleCategory">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

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

<style lang="scss" scoped>
.dm-wrap {
  margin-bottom: 80px !important;
}
.tips {
  position: relative;
  top: 3px;
}
</style>
