<template>
  <div>
    <el-form class="dm-wrap" :model="form" ref="form" :rules="rules" label-width="150px">
      <el-form-item label="卡券类型">
        <el-radio-group v-model="form.cardType" :disabled="isEdit || isInfo" @change="reset">
          <el-radio :label="0">抵金券</el-radio>
          <el-radio :label="1">折扣券</el-radio>
          <el-radio :label="2">兑换券</el-radio>
          <el-radio v-if="$store.getters.getLimitCodeList.every(el => el != 'couponCreate')" :label="3">商场抵金券</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="form.cardType != 3" 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 v-if="form.cardType != 3" label="展示适用渠道文案" prop="channelTip" key="channelTip">
        <dm-input v-model="form.channelTip" class="w400" placeholder="请输入小程序端展示的适用渠道文案" :byteType="0" :maxlength="18"></dm-input>
        <el-popover placement="right" width="360" trigger="hover">
          <img :src="require('@/assets/img/coupon-preview.png')" alt="" style="display:block" />
          <el-button slot="reference" type="text" class="ml10">查看示例</el-button>
        </el-popover>
      </el-form-item>
      <el-form-item prop="cardName" label="卡券名称">
        <dm-input v-model="form.cardName" class="w400 card-name-input" placeholder="请输入卡券名称" :disabled="isEdit || isInfo" :byteType="0" :maxlength="30"></dm-input>
      </el-form-item>

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

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

      <el-form-item v-if="form.cardType != 3" prop="erpDemoCode" label="demo券号">
        <el-input v-model="form.erpDemoCode" class="w400" placeholder="请输入demo券号" :disabled="isEdit || isInfo" @blur="checkErpDemoCode"></el-input>
      </el-form-item>

      <!-- 微盟微商城  微盟卡券 -->
      <template v-if="showWeimobDemoSelector || (form.cardType != 3 && form.cardApplyChannel.indexOf('WMmicroMall') !== -1 && countFlag)">
        <el-alert type="warning" :closable="false" class="f-alert" style="margin-bottom: 10px;margin-left:130px;">
          <span slot="title">
            <div class="info-line">
              <div class="dot"></div>
              <p style="margin-left: 8px;">1、若需创建在微盟微商城与线下都可用的卡券，请在下方选择对应的微盟卡券。GIC卡券的相关信息应与对应的微盟卡券保持一致，避免核销客诉！</p>
            </div>
            <div class="info-line">
              <div class="dot" style="top: 6px;"></div>
              <p style="margin-left: 8px;">2、若需创建在微盟微商城与线下都可用的卡券，请确保微盟侧【设置-订单设置-售后流程设置】中的“售后退券设置”为“支付前整单取消，退优惠券”，而不是其他设置，否则会导致微盟订单自动取消！</p>
            </div>
          </span>
        </el-alert>
        <el-form-item label="微盟卡券">
          <div class="mb10" v-for="(saveItem, idx) in weimobDemoCodeList" :key="idx">
            <el-select class="w200" :disabled="saveItem.save || isEdit || isInfo" v-model="saveItem.pid" filterable placeholder="请选择店铺" clearable @change="handleShopChange($event, idx)">
              <el-option :disabled="wmShopIds.includes(item.wmPid)" v-for="item in weimobShopList" :key="item.wmPid" :label="item.wmPidName" :value="item.wmPid"></el-option>
            </el-select>
            <el-select v-loadmore="getMore" :disabled="!saveItem.pid || saveItem.save || isEdit || isInfo" :loading="saveItem.loading" class="w200" v-model="saveItem.card" remote filterable placeholder="请选择微盟卡券" :remote-method="remoteMethod" @clear="handleClear" clearable>
              <el-option v-for="item in saveItem.cardList" :key="item.cardTemplateId" :label="item.name" :value="item.cardTemplateId"></el-option>
            </el-select>
            <template v-if="isAdd || isCopy">
              <el-button type="text" v-if="!saveItem.save" class="ml10" @click="saveWmShop(saveItem, idx)">保存</el-button>
              <el-button type="text" class="ml10" @click="delWmShop(saveItem, idx)">删除</el-button>
            </template>
            <span v-if="saveItem.useCount > 0" class="fz12 gray ml10"><i class="el-icon-warning mr5" style="color:rgb(230, 162, 60);"></i>该券号此前已被选择使用，请确认选择项</span>
          </div>
          <template v-if="isAdd || isCopy">
            <el-button v-if="countFlag == 2 || isAdd || isCopy" :disabled="wmShopAddDisabled || weimobDemoCodeList.length >= weimobShopList.length" type="primary" @click="addWmShop">添加店铺</el-button>
            <span class="fz12 gray ml10">* 店铺不可重复选择，新建卡券仅保存点击保存过的数据</span>
          </template>
        </el-form-item>
      </template>
      <el-form-item prop="cardColor" label="卡券颜色" style="height: 40px;">
        <el-color-picker class="color-picker" v-model="form.cardColor" :disabled="isEdit || isInfo"></el-color-picker>
      </el-form-item>

      <!-- 抵金券 -->
      <el-form-item prop="cardDenomination" label="减免金额" key="cardDenomination" v-if="form.cardType === 0 || form.cardType == 3"> <el-input-number controls-position="right" :disabled="isEdit || isInfo" v-model="form.cardDenomination" class="200" :precison="0" :min="0" :max="10000000"></el-input-number> 元 <span class="fz12 gray">请输入大于0的整数</span> </el-form-item>

      <el-form-item v-if="form.cardType == 3" label="卡券成本比例">
        <el-switch v-model="form.costValueProportionFlag" :active-value="1" :inactive-value="0" :disabled="isEdit || isInfo"></el-switch>
        <div class="cost-box" v-if="form.costValueProportionFlag == 1">
          <div class="cost-box-type">
            <span class="cost-box-type-label">成本费用</span>
            <el-radio-group v-model="form.costValueType" :disabled="isEdit || isInfo">
              <el-radio :label="0">固定成本</el-radio>
              <el-radio :label="1">门店成本</el-radio>
            </el-radio-group>
          </div>
        </div>
      </el-form-item>
      <el-form-item v-if="form.cardType == 3" label="适用门店" ref="useStore" prop="storeUuid" :rules="[{ required: true, validator: (rules, value, callback) => callback(), trigger: 'change' }]">
        <template slot="label">
          适用门店
          <el-tooltip placement="top" content="仅支持选择账号管辖门店范围内的门店">
            <i class="iconfont icon-QuestionCircleOutlined"></i>
          </el-tooltip>
        </template>
        <dm-store-selector class="card-store-selector" :uuid.sync="storeUuid" :default-all="false" :options="[5]" :store-type-disabled="isEdit && form.costValueType == 0" @optionsChange="onOptionsChange" @store-change="onStoreChange"></dm-store-selector>
        <div v-if="form.costValueProportionFlag == 1" class="cost-box">
          <div v-if="form.costValueType == 0" class="fixed-cost">
            <el-form-item label="成本比例" prop="costValueProportion" label-width="85px"><el-input-number v-model="form.costValueProportion" :disabled="isEdit || isInfo" :min="0" :max="100" :precision="0" :controls="false" style="margin-right: 10px; width: 130px" placeholder="请输入成本比例"></el-input-number>%</el-form-item>
            <!-- <el-form-item label="成本金额" label-width="100px"><el-input :value="typeof form.costValueProportion == 'number' && typeof form.cardDenomination == 'number' ? (form.costValueProportion * form.cardDenomination) / 100 : 0" disabled style="margin-right: 10px; width:120px"></el-input>元</el-form-item> -->
          </div>
          <div v-if="form.costValueType == 1" class="store-fixed-cost">
            <div class="store-cost-search">
              <el-input v-model="searchStore" placeholder="请输入门店名称/code" prefix-icon="el-icon-search" clearable style="width: 260px"></el-input>
              <el-button v-if="!isEdit && !isInfo && storeMode == 1" @click="importCost.visible = true" type="primary" style="border: none"><i class="iconfont icon-shangc"></i> 成本批量导入</el-button>
            </div>
            <div class="store-list">
              <div class="store-row store-header">
                <div class="store-cell store-header-cell" style="width: 197px">门店信息</div>
                <div class="store-cell store-header-cell" style="width: 284px">
                  成本比例
                  <span class="sort-handle">
                    <i :class="['sort-icon ascending', { ascend: sortType == 0 }]" @click="onSortStore(0)"></i>
                    <i :class="['sort-icon descending', { descend: sortType == 1 }]" @click="onSortStore(1)"></i>
                  </span>
                </div>
                <div class="store-cell store-header-cell" style="width: 135px">成本金额</div>
              </div>
              <recycle-scroller :items="storeList" key-field="storeId" :style="{ height: storeList.length > 6 ? '287px' : 'auto' }" :itemSize="48" v-slot="{ item }">
                <div class="store-row">
                  <div class="store-cell" style="width: 197px">
                    <el-tooltip placement="top" :disabled="item.storeName.length < 13">
                      <div slot="content" style="max-width: 400px">{{ item.storeName }}</div>
                      <div class="store-name">{{ item.storeName.length >= 13 ? `${item.storeName.slice(0, 13)}...` : item.storeName }}</div>
                    </el-tooltip>
                    <el-tooltip placement="top" :disabled="item.storeCode.length < 20">
                      <div slot="content" style="max-width: 400px">code：{{ item.storeCode }}</div>
                      <div class="store-code">code：{{ item.storeCode.length >= 20 ? `${item.storeCode.slice(0, 20)}...` : item.storeCode }}</div>
                    </el-tooltip>
                  </div>
                  <div class="store-cell" style="width: 284px"><el-input-number v-model="item.costValueProportion" :disabled="isEdit && form.costStoreList.some(el => el.storeId == item.storeId)" :min="0" :max="100" :precision="0" :controls="false" style="margin-right: 10px; width: 130px" placeholder="请输入成本比例"></el-input-number>%</div>
                  <div class="store-cell" style="width: 135px">{{ typeof item.costValueProportion == 'number' && typeof form.cardDenomination == 'number' ? (item.costValueProportion * form.cardDenomination) / 100 : 0 }} 元</div>
                </div>
              </recycle-scroller>
              <el-table v-if="!Array.isArray(storeList) || storeList.length == 0" :data="[]"></el-table>
            </div>
          </div>
        </div>
      </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 v-if="form.cardType != 3" label="最低适用商品件数"> <el-input-number controls-position="right" :disabled="isEdit || isInfo || goodsDiscountCheckLower" v-model="form.goods_discounts_number_lower_limit" class="200" :precision="0" :step="1" :min="0"></el-input-number> 件 &nbsp;<el-checkbox v-model="goodsDiscountCheckLower" :disabled="isEdit || isInfo">不限</el-checkbox></el-form-item>
      <el-form-item v-if="form.cardType != 3" label="最高适用商品件数"> <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></el-form-item>

      <!-- 兑换券无 -->
      <el-form-item prop="" label="使用条件">
        <div v-show="form.cardType === 0 || form.cardType == 3" class="mb10">
          <el-checkbox :disabled="isEdit || isInfo" v-model="sale_limit.flag">最低消费满</el-checkbox>
          <el-input-number controls-position="right" :min="0" :max="10000000" @focus="sale_limit.flag = true" :disabled="isEdit || isInfo" v-model="sale_limit.fee" class="w200"></el-input-number> 元可使用
        </div>
        <div v-show="form.cardType !== 2 && form.cardType != 3"><el-checkbox :disabled="isEdit || isInfo" v-model="goods.flag">适用商品</el-checkbox> <span class="fz12 gray">（至少填写一项）</span></div>
        <div class="mb10" v-show="form.cardType !== 2 && form.cardType != 3"><span class="inline-block w100 pr10 text-right">适用商品</span> <dm-input @focus="goods.flag = true" v-model="goods.ok" :disabled="isEdit || isInfo" class="w300" placeholder="限制18个汉字内" :maxlength="18"></dm-input></div>
        <div v-show="form.cardType !== 2 && form.cardType != 3" class="mb10"><span class="inline-block w100 pr10 text-right">不适用商品</span> <dm-input @focus="goods.flag = true" v-model="goods.no" :disabled="isEdit || isInfo" class="w300" placeholder="限制18个汉字内" :maxlength="18"></dm-input></div>
        <!-- 微盟适用商品 -->
        <div v-loading="wmloading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(255, 255, 255, 0)">
          <div v-if="(form.cardType === 0 || form.cardType === 1) && form.cardApplyChannel.indexOf('WMmicroMall') !== -1">
            <div v-for="(list, idx) in goodsList" :key="idx" class="mb10" id="wnsysp">
              <span class="inline-block w100 pr10 text-right">
                微盟适用商品
                <span v-show="goodsList.length !== 1">{{ idx + 1 }}</span>
              </span>
              <el-select :disabled="isEdit" class="w200" v-model="list.v1" filterable placeholder=" 选择商品类目" clearable :loading="loading" @change="handleF1Change($event, idx)">
                <el-option v-for="item in f1" :key="item.id" :label="item.title" :value="item.id"></el-option>
              </el-select>
              <el-select v-show="list.f2.length > 0" :disabled="isEdit || list.isCopy" class="w200" v-model="list.v2" filterable remote reserve-keyword placeholder="选择商品参数" clearable :loading="loading" @change="handleF2Change($event, idx)">
                <el-option v-for="item in list.f2" :key="item.id" :label="item.title" :value="item.id"></el-option>
              </el-select>
              <el-select v-if="list.f3.length > 0" :disabled="isEdit || list.isCopy" class="w250" v-model="list.v3" multiple filterable remote reserve-keyword placeholder="选择商品参数值" clearable :loading="loading">
                <el-option v-for="item in list.f3" :key="item.id" :label="item.title" :value="item.id"></el-option>
              </el-select>
              <div v-if="isAdd || isCopy" class="inline-block">
                <el-button v-if="list.isCopy" type="warning" icon="el-icon-edit" circle @click="getLine(idx)"></el-button>
                <el-button v-show="idx === goodsList.length - 1 && goodsList.length < 10" type="primary" icon="el-icon-plus" circle @click="addLine"></el-button>
                <el-button icon="el-icon-delete" circle @click="delLine(idx)"></el-button>
              </div>
            </div>
            <el-alert type="warning" show-icon :closable="false" class="f-alert">
              <span slot="title">
                <div class="info-line">
                  微盟适用商品数据来源于微盟侧商品及商品参数，请确保填写正确。
                  <b v-if="latestReptileTime">最近同步时间 {{ latestReptileTime }}</b>
                </div>
              </span>
            </el-alert>
          </div>
        </div>
        <!-- 线下适用商品 -->
        <div v-if="(form.cardType === 0 || form.cardType === 1) && form.cardApplyChannel.indexOf('offlineStore') !== -1 && xxSysp.goodsEnable">
          <span class="inline-block w100 pr10 text-right" style="vertical-align:top">线下适用商品</span>
          <div class="sysp__content clearfix inline-block">
            <div class="fl" v-if="xxSysp.filterAbbrInfo.length && !Array.isArray(xxSysp.filterAbbrInfo[0])">
              <template v-for="(item, idx) in xxSysp.filterAbbrInfo">
                {{ item.optName }}
                <span :key="idx" class="item">{{ item.text }}</span>
              </template>
            </div>
            <div class="fl" v-if="xxSysp.filterAbbrInfo.length && Array.isArray(xxSysp.filterAbbrInfo[0])">
              <div v-for="(item, idx) in xxSysp.filterAbbrInfo" :key="idx">
                <div class="complex-and" v-if="idx > 0 && (idx < xxSysp.max || xxSysp.isExpand)">【{{ getXxSysFilterText(idx - 1) }}】</div>
                <template v-for="(el, i) in item">
                  <span :key="i" v-show="idx < xxSysp.max || xxSysp.isExpand">
                    {{ el.optName }}
                    <span class="item">{{ el.text }}</span>
                  </span>
                </template>
              </div>
              <el-button v-if="xxSysp.filterAbbrInfo.length > xxSysp.max" type="text" @click="xxSysp.isExpand = !xxSysp.isExpand">{{ xxSysp.isExpand ? '收起' : '展开' }}<i class="el-icon-arrow-down" :class="{ 'is-expand': xxSysp.isExpand }"></i></el-button>
            </div>
            <template v-if="gicCouponType != 3 && gicCouponType != 4">
              <template v-if="xxSysp.goodsEnable && (((isEdit || isInfo) && xxSysp.filterAbbrInfo.length) || isAdd || isCopy)">
                <el-button type="primary" @click="handleXxSyspClick" class="fl mt5" size="mini">{{ isEdit || isInfo ? '查看' : '编辑' }}</el-button>
                <el-button v-show="xxSysp.filterAbbrInfo.length && !isEdit && !isInfo" @click="handleXxSyspReset" class="fl mt5" size="mini">清空</el-button>
              </template>
              <p v-else class="fz14 gray">未选择</p>
            </template>
          </div>
          <div v-if="xxSysp.goodsEnable && (((isEdit || isInfo) && xxSysp.filterAbbrInfo.length) || isAdd || isCopy)" class="tips fz12 gray"><span class="w100 pr10 inline-block"></span>* 仅支持第三方api接口核销卡券时使用</div>
        </div>
        <!-- 兑换券 -->
        <div v-show="form.cardType === 2" class="mb10"><el-checkbox :disabled="isEdit || isInfo" v-model="sale_limit.flag">消费条件</el-checkbox> <span class="fz12 gray">（至少填写一项）</span></div>
        <div class="mb10" v-show="form.cardType === 2">
          <el-radio v-model="sale_limit.type" :label="1" :disabled="isEdit || isInfo">
            消费金额满
            <el-input-number
              controls-position="right"
              @focus="
                sale_limit.type = 1;
                sale_limit.flag = true;
              "
              :disabled="isEdit || isInfo"
              :precision="1"
              :min="0"
              class="w300"
              v-model="sale_limit.fee"
            ></el-input-number>
            元可使用
          </el-radio>
        </div>
        <div v-show="form.cardType === 2" class="mb10">
          <el-radio v-model="sale_limit.type" :label="2" :disabled="isEdit || isInfo">
            消费指定商品
            <el-input
              @focus="
                sale_limit.type = 2;
                sale_limit.flag = true;
              "
              :disabled="isEdit || isInfo"
              class="w300"
              v-model="sale_limit.goods"
            ></el-input>
            可使用
            <div class="pl25 pt10">指定商品货号 <dm-goods-input :disabled="isEdit || isInfo" class="w300 inline-block" v-model="form.proNoList" :multiple="false"></dm-goods-input></div>
            <div class="pl25 pt10" v-show="products_exchange_number_show">兑换商品件数 <el-input-number controls-position="right" :disabled="isEdit || isInfo" v-model="form.products_exchange_number" class="200" :precision="0" :step="1" :min="0"></el-input-number></div>
          </el-radio>
        </div>
        <!-- 只有线下门店展示适用商品折扣 -->
        <!-- 1: 大于等于 2:大于  3: 等于 4: 小于 5: 小于等于 -->
        <div v-if="form.cardApplyChannel.indexOf('offlineStore') !== -1 && form.cardType !== 2 && form.cardType != 3 && xxSysp.goodsEnable">
          <el-checkbox v-model="discount_limit.flag" :disabled="isEdit || isInfo">适用商品折扣</el-checkbox>
          <div v-if="discount_limit.flag" class="inline-block">
            <el-select :disabled="isEdit || isInfo" v-model="discount_limit.type" class="w100 ml10">
              <el-option label="大于等于" :value="1"></el-option>
              <el-option label="大于" :value="2"></el-option>
              <el-option label="等于" :value="3"></el-option>
              <el-option label="小于" :value="4"></el-option>
              <el-option label="小于等于" :value="5"></el-option>
            </el-select>
            <el-input-number controls-position="right" :disabled="isEdit || isInfo" v-model="discount_limit.count" :precision="2" :min="0" :max="10" class="w150"></el-input-number>&nbsp;&nbsp;折
          </div>
          <span class="fz12 gray ml5">* 仅支持第三方api接口核销卡券时使用</span>
        </div>
        <div class="mb10" v-if="form.cardType != 3">
          <!-- <el-checkbox v-model="only" :disabled="isEdit || isInfo">不与其它优惠共享</el-checkbox>
          <span class="fz12 gray ml5">* 无实际业务，仅用于ERP或第三方接口回传</span> -->
          <span style="position:relative">与其它优惠共享<b style="text-align:right;font-style:normal;font-size:12px;position:absolute;bottom:-28px;display:block;width: 150px;right: 0;" class="gray">(卡券叠加、门店活动等)</b></span>
          <el-switch v-model="form.only" :disabled="isEdit || isInfo" :active-value="false" :inactive-value="true" class="ml5" @change="changeOnly"></el-switch>
          <ul class="fz12 gray ml5" style="width: 350ox;display:inline-block;vertical-align: top;">
            <li>用于ERP或第三方的卡券适用判定</li>
            <li>开启后可与其它卡券叠加或在门店活动中使用（需要单独对接）</li>
            <li>修改后请注意调整卡券使用说明</li>
          </ul>
          <el-alert v-if="wmCouponFlag && form.cardApplyChannel.some(el => el == 'WMmicroMall') && wmCouponJson.couponOnlyFlag == 1" class="f-alert" type="warning" show-icon :closable="false" title="开启后，当此券同步至微盟侧，可在微盟侧修改调整卡券相应配置，比如修改使用规则等。注意，微盟侧修改后不会同步给达摩，请谨慎操作。"></el-alert>
        </div>
      </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 prop="costValue" label="成本费用" v-show="form.cardType !== 1 && form.cardType != 3"> <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="cardCodePrefix" label="code号段" v-if="cardCodePrefixFlag && form.useCustomCode === 0">
        <span class="fz13 gray">卡券code格式：随机编码</span>
        <div class="pt20">
          <el-checkbox v-model="form.useCardCodePrefix" :true-label="1" :false-label="0" :disabled="isEdit || isInfo">前缀</el-checkbox>
          <el-input class="w140" :disabled="isEdit || isInfo" placeholder="3位以内字母/数字" @focus="form.useCardCodePrefix = 1" v-model="form.cardCodePrefix" :maxlength="3" @blur="checkInputString(form.cardCodePrefix, 'cardCodePrefix')"></el-input>
          <span class="fz13 gray">请确保ERP支持添加前缀后的code</span>
        </div>
      </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" @change="onChangeNumber"></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>

      <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 ref="effectDate" @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>
        <div v-if="isEffective || form.cardEffectiveMode == 2" class="pt20">
          <el-radio @change="changeCardEffectiveMode" v-model="form.cardEffectiveMode" :label="2" :disabled="isEdit || isInfo || cardValidity">当月</el-radio>
        </div>
      </el-form-item>

      <!-- 当输入完整用户使用有效期后，出现卡券模板投放期限 -->
      <el-form-item v-if="form.cardType != 3" 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 || form.cardApplyChannel.indexOf('WMmicroMall') !== -1" :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 || form.cardApplyChannel.indexOf('WMmicroMall') !== -1" :label="1">长期有效</el-radio>
          <el-radio @change="resetSendDateTime" v-model="form.putEffectiveMode" :disabled="isEdit || isInfo || form.cardApplyChannel.indexOf('WMmicroMall') !== -1" :label="0">固定日期</el-radio>
          <el-date-picker v-if="form.putEffectiveMode == 0" v-model="form.sendDateTime" @focus="form.putEffectiveMode = 0" :disabled="isEdit || isInfo || form.cardApplyChannel.indexOf('WMmicroMall') !== -1" :picker-options="pickerOptions" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        </div>
      </el-form-item>

      <!-- 商户配置开关关闭时，编辑和详情是自动领取的需要展示manualGetFlag=0 -->
      <el-form-item label="手动领取" v-if="couponAutoGetFlag || (!couponAutoGetFlag && form.manualGetFlag == 0 && (this.isEdit || this.isInfo))">
        <el-switch :disabled="isEdit || isInfo" :active-value="1" :inactive-value="0" :value="form.manualGetFlag" @change="changeManualGetFlag"></el-switch>
        <span class="gray fz13">* 用户是否需要手动点击来领取卡券</span>
        <div style="margin-left:48px;" class="fz13 regular-font-color">
          * 用户在领取卡券后需要<b class="bold">同步至ERP</b>，如果关闭用户<b class="bold">手动领取</b>，卡券在<b class="bold">批量投放</b>时会需要将卡券信息批量同步至ERP。 <br />
          该过程可能需要持续一段时间（具体同步时间和同步卡券张数以及ERP性能有关，参考同步时间为1万张卡券1个小时）。 <br />
          当前支持不需要用户手动领取的卡券库存最大值为<b class="bold">{{ couponAutoGetStock }}</b
          >张。
        </div>
      </el-form-item>

      <el-form-item v-if="form.cardType != 3" 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>
          <span class="link-status">{{ statusText }}</span>
        </template>
        <div class="gray fz13">* 开启后小程序卡券详情将对应路径的跳转按钮</div>
      </el-form-item>

      <!-- 转赠 -->
      <!-- 新建和复制要根据giveEnable来展示开关 -->
      <template v-if="form.useCustomCode == 0 && (((this.isAdd || this.isCopy) && giveEnable) || this.isInfo || this.isEdit)">
        <!-- 仅随机生成支持卡券转赠 -->
        <el-form-item label="转赠开关">
          <el-switch :disabled="isEdit || isInfo" :active-value="1" :inactive-value="0" v-model="form.giveFlag"></el-switch>
          <div class="tips fz12 gray">* code类型为自定义号段暂时不支持卡券转赠，转赠多次会消耗相同次数的库存，请设置足够的安全库存</div>
          <div class="tips fz12 gray">* 需要将会员小程序版本升级至3.7.3或更高（小程序升级事项请联系达摩侧运营）</div>
        </el-form-item>
        <!-- !!!需要通过$el找到，避免开关来来回回初始化，所以用v-show -->
        <el-form-item label="转赠对话框文字" prop="giveContent" class="is-required" v-show="form.giveFlag === 1">
          <dm-input type="textarea" :disabled="isEdit || isInfo" class="w400" ref="ruleTextarea" :row="4" :autosize="{ minRows: 4, maxRows: 8 }" v-model="form.giveContent" wrap="soft" :byte-type="1" :maxlength="24" />
        </el-form-item>
        <template v-if="form.giveFlag === 1">
          <el-form-item label="转赠对话框图片" prop="giveImage">
            <dm-upload-avatar :model.sync="giveImg1" url="/api-plug/upload-img" :unused="isEdit || isInfo" width="107" height="80" label="上传图片" tips="图片建议尺寸： 320*240px 的jpg/png图片，大小不超过1MB。" :limit="{ type: true, maxSize: 1 }"></dm-upload-avatar>
          </el-form-item>
          <el-form-item label="转赠页面首图" prop="bannerImage">
            <dm-upload-avatar :model.sync="giveImg2" url="/api-plug/upload-img" :unused="isEdit || isInfo" width="345" height="144" label="上传图片" tips="图片建议尺寸： 699*288px 的jpg/png图片，大小不超过1MB。" :limit="{ type: true, maxSize: 1 }"></dm-upload-avatar>
          </el-form-item>
          <el-form-item label="首图链接设置" prop="bannerJumpUrl">
            <div style="display:flex;">
              <el-checkbox :disabled="isEdit || isInfo" v-model="form.useJumpFlag" :true-label="1" :false-label="0">首图链接</el-checkbox>
              <span v-if="form.useJumpFlag">
                <!-- 不能编辑 -->
                <el-button @click="linkToolsVisible2 = true" v-if="isAdd || isCopy" type="text" class="ml10">{{ JSON.stringify(form.bannerJumpUrl) == '{}' ? '设置链接' : '修改链接' }}</el-button>
                <span class="gray ml10">{{ form.bannerJumpUrl.name }}</span>
              </span>
            </div>
          </el-form-item>
          <!-- <el-form-item label="卡券转赠规则" prop="giveRule" v-show="form.giveFlag === 1">
            <dm-input type="textarea" :disabled="isEdit || isInfo" class="autosize w400" :rows="4" :autosize="{ minRows: 4, maxRows: 8 }" v-model="form.giveRule" :byte-type="1" :maxlength="200" />
          </el-form-item> -->
        </template>
      </template>
      <el-form-item prop="cardExplain" label="适用门店说明">
        <dm-input class="w400" v-model="form.cardExplain" :disabled="isInfo" :maxlength="50"></dm-input>
      </el-form-item>

      <el-form-item label="适用门店" v-if="form.cardType != 3">
        <el-radio :disabled="isEdit" v-model="storeMode" :label="0">所有门店</el-radio>
        <el-radio :disabled="isEdit" v-model="storeMode" :label="1">部分门店</el-radio>
        <div v-if="isEdit" class="fz12 gray">
          * 修改适用门店前客户领取的卡券以修改前为准，修改后客户领取的卡券适用门店以修改后为准；<br />
          * 仅支持选择创建人管辖门店范围内的门店
        </div>
        <div class="fz12 gray " v-else>* 仅支持选择账号管辖门店范围内的门店；</div>
        <!-- :readonly="isEdit"  -->
        <vue-gic-store-card class="pt10" :readonly="isInfo" v-bind="storeParams" v-show="storeMode" ref="storeCard" :uuid.sync="uuid"></vue-gic-store-card>
        <!-- <dm-store-selector v-if="isAdd ? storeMode : storeMode && !isAdd && uuid" :readonly="isInfo" v-bind="storeParams" ref="storeCard" :uuid.sync="uuid"></dm-store-selector> -->
        <el-alert v-show="storeMode && form.cardApplyChannel.indexOf('WMmicroMall') !== -1" title="选择的门店必须保持与微盟侧门店一致，请确认选择无误" type="warning" show-icon :closable="false" class="mt20 width80"></el-alert>
      </el-form-item>

      <el-form-item v-if="(isAdd || isCopy) && refundEnable && form.cardType != 2 && form.cardType != 3" label="退货退券">
        <el-switch :disabled="isEdit" v-model="form.refundFlag" :active-value="1" :inactive-value="0"></el-switch>
      </el-form-item>
      <!-- 非新增：运维开启正常展示||运维关闭开关开启 -->
      <el-form-item v-if="!isAdd && !isCopy && form.cardType != 2 && form.cardType != 3 && (refundEnable || form.refundFlag)" label="退货退券">
        <el-switch :disabled="isEdit" v-model="form.refundFlag" :active-value="1" :inactive-value="0"></el-switch>
      </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>

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

      <dm-form-bottom>
        <el-button v-if="form.useCustomCode === 0 && form.giveFlag" :disabled="!preview.disabled" @click="preview.visible = true">转赠预览</el-button>
        <el-button type="primary" @click="submitForm('form')" v-loading="submitLoading" v-show="!isInfo && canEdit && $store.state.marketing.appletEnable">保存</el-button>
        <el-button @click="$router.push('/card/list')">返 回</el-button>
      </dm-form-bottom>
    </el-form>

    <el-dialog title="适用商品" :visible.sync="xxSysp.visible" width="700px">
      <vue-gic-goods-selector style="max-height:500px;overflow-y:auto;overflow-x:hidden" ref="selector" :projectName="requestProject" isCoupon></vue-gic-goods-selector>
      <div slot="footer" class="dialog-footer">
        <el-button @click="xxSysp.visible = false">{{ isEdit ? '关闭' : '取消' }}</el-button>
        <el-button v-if="isAdd || isCopy" type="primary" @click="xxSyspConfirm">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="成本批量导入" :visible.sync="importCost.visible" width="720px" @close="onCloseImportCost">
      <dm-import-file ref="importFile" style="width:680px" :options="importCost.options" @change="handleFileChange" :echo="fileEcho"></dm-import-file>
      <template slot="footer">
        <el-button :disabled="importCost.loading" @click="importCost.visible = false">取消</el-button>
        <el-button :disabled="importCost.loading" :loading="importCost.loading" @click="onSaveImportCost" type="primary">确认</el-button>
      </template>
    </el-dialog>
    <dm-send-preview :data="form" :visible.sync="preview.visible" /><!-- 转赠预览 -->
    <linktools showType="5" :canSave="!isInfo" :linkVisible.sync="linkToolsVisible" @linkSelect="linkSelect" :linkData="form.jumpLink" /><!-- 链接小工具 -->
    <linktools showType="5" :canSave="isAdd || isCopy" :linkVisible.sync="linkToolsVisible2" @linkSelect="linkSelect2" :linkData="form.bannerJumpUrl" /><!-- 链接小工具 - 转赠 -->
  </div>
</template>

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

<style lang="scss" scoped>
.color-picker {
  /deep/ .el-color-picker__trigger {
    width: 60px;
  }
  /deep/ .el-color-picker__icon {
    display: none;
  }
}
.card-name-input {
  /deep/ .el-input__inner {
    padding-right: 40px;
  }
}
.card-store-selector {
  /deep/ .el-select .el-input {
    display: inline-block;
  }
  /deep/ .el-popover__reference .el-input__inner {
    height: 30px;
    line-height: 30px;
  }
}
.cost-box {
  margin-top: 10px;
  width: 701px;
  background: #f5f7fa;
  .cost-box-type {
    padding: 24px 22px;
    .cost-box-type-label {
      margin-right: 25px;
      font-size: 14px;
      font-weight: 400;
      color: #303133;
      line-height: 20px;
    }
  }
  .fixed-cost {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 20px;
  }
  .store-fixed-cost {
    padding: 17px 20px 20px 17px;
    .store-cost-search {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }
  }
  .store-list {
    border-bottom: 1px solid #e4e7ed;
    .store-row {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      border-bottom: 1px solid #e4e7ed;
      .store-cell {
        padding-top: 8px;
        padding-bottom: 8px;
        padding-left: 16px;
      }
    }
    .store-header {
      background: #ebecf0;
      .store-header-cell {
        padding-top: 7px;
        padding-bottom: 7px;
        font-size: 14px;
        font-weight: 500;
        color: #303133;
        line-height: 22px;
        .sort-handle {
          display: inline-flex;
          flex-direction: column;
          align-items: center;
          height: 34px;
          width: 24px;
          vertical-align: middle;
          cursor: pointer;
          overflow: initial;
          position: relative;
          .sort-icon {
            width: 0;
            height: 0;
            border: 5px solid transparent;
            position: absolute;
            left: 7px;
            &.ascending {
              border-bottom-color: #c0c4cc;
              top: 5px;
              &.ascend {
                border-bottom-color: #042f3f;
              }
            }
            &.descending {
              border-top-color: #c0c4cc;
              bottom: 7px;
              &.descend {
                border-top-color: #042f3f;
              }
            }
          }
        }
      }
    }
    .store-name {
      font-size: 14px;
      font-weight: 400;
      color: #303133;
      line-height: normal;
    }
    .store-code {
      margin-top: -3px;
      font-size: 12px;
      font-weight: 400;
      color: #909399;
      line-height: normal;
    }
  }
}
.link-status {
  margin-left: 20px;
  color: #f5222d;
}
.f-alert {
  width: 920px !important;
  /deep/ .el-alert__content {
    line-height: 18px;
  }
  .info-line {
    align-items: center;
    display: flex;
    color: #303133;
    position: relative;
  }
  .dot {
    width: 5px;
    height: 5px;
    background: #faad14;
    border-radius: 2.5px;
    left: -5px;
    position: absolute;
    margin-right: 8px;
  }
}
.complex-and {
  color: #535353;
  font-weight: bold;
  line-height: 1;
}
.el-icon-arrow-down {
  transition: transform 0.2s ease;
}
.is-expand {
  transform: rotate(180deg);
}
</style>
