<template>
  <div class="cardForm" v-loading="loading">
    <dm-steps :active="active - 1" style="width:811px;margin: 20px auto 48px;">
      <dm-step title="填写基本信息"></dm-step>
      <dm-step title="填写适用信息"></dm-step>
      <dm-step title="完善说明信息"></dm-step>
    </dm-steps>
    <!-- 第一步 -->
    <div class="content" v-show="active ===1">
      <el-form :model="ruleForm1" :rules="rules1" class="ruleForm1" ref="ruleForm1" label-width="200px">
        <el-form-item>
          <el-tooltip open-delay="200" slot="label" content="请在应用左上角切换会员卡" placement="top">
            <span class="tooltip-icon">适用会员卡</span>
          </el-tooltip>
          {{ $store.state.currentAreaName || '--' }}
        </el-form-item>
        <el-form-item label="卡券类型">
          <el-radio-group v-model="ruleForm1.cardType" @change="reset">
            <el-radio :label="0">抵金券</el-radio>
            <el-radio :label="1">折扣券</el-radio>
            <el-radio :label="2">兑换券</el-radio>
            <!-- <el-radio :label="3">其他券</el-radio> -->
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="cardName" label="卡券名称">
          <dm-input class="wInput352" v-model="ruleForm1.cardName" :byte-type="1" :maxlength="9" />
        </el-form-item>
        <el-form-item prop="remarkName" label="备注名">
          <dm-input class="wInput352" v-model="ruleForm1.remarkName" :byte-type="1" :maxlength="10" />
        </el-form-item>
        <el-form-item prop="subTitle" label="副标题">
          <dm-input class="wInput352" v-model="ruleForm1.subTitle" :byte-type="1" :maxlength="18"></dm-input>
        </el-form-item>
        <el-form-item class="is-required" prop="color" label="卡券颜色">
          <div class="color-picker-custom">
            <span class="color vertical-top">{{ ruleForm1.color }}</span>
            <el-color-picker popper-class="hide-picker" v-model="ruleForm1.color" :predefine="predefineColors" />
          </div>
        </el-form-item>


        <!-- 抵金券 -->
        <el-form-item prop="denomination" label="优惠金额" v-if="ruleForm1.cardType === 0">
          <!-- <el-input-number class="prefix-amount wInput352" controls-position="right" v-model="ruleForm1.denomination" :max="10000000" placeholder="请输入大于0的整数" :precison="2" :min="0" /> -->
          <dm-input-amount style="width:352px;" v-model="ruleForm1.denomination" :max="10000000" placeholder="请输入大于0的整数" :precison="2" :min="0" ></dm-input-amount>
          <span class="tips">请输入大于0的数字</span>
        </el-form-item>
        <!-- 折扣券 -->
        <el-form-item prop="denomination" label="优惠折扣" v-if="ruleForm1.cardType === 1">
          <!-- <el-input-number class="wInput352" controls-position="right" v-model="ruleForm1.denomination" placeholder="请填写1-9.9之间的数字" :precision="1" :step="0.1" :max="9.9" :min="0" /> -->
          <el-input-number style="width:120px;" v-model="ruleForm1.denomination" :max="9.9" placeholder="请填写1-9.9之间的数字" controls-position="right" :precision="1" :step="0.1" :min="0" ></el-input-number>
          <span class="tips">折</span>
        </el-form-item>
        <!-- 兑换券 !!! 比微信卡券多的内容 -->
        <el-form-item label="卡券优惠内容" v-if="ruleForm1.cardType === 2">
          <vue-gic-goods-selector-new real-save :waiting-save.sync="goodsSearchIdWaiting" @submit="(res) => { goodsSearchId = res.goodsSelectorId }" force-show-save />
        </el-form-item>
        <!-- 抵金券、兑换券 -->
        <el-form-item prop="costPrice" label="成本费用" v-if="ruleForm1.cardType !== 1">
          <!-- <el-input-number class="prefix-amount wInput352" controls-position="right" :precision="2" :min="0" v-model="ruleForm1.costPrice" /> -->
          <dm-input-amount style="width:352px;" v-model="ruleForm1.costPrice" :precision="2" :min="0" ></dm-input-amount>
          <span class="tips">请输入大于0的数字（限制两位小数）</span>
        </el-form-item>
        <el-form-item label="最低适用商品件数">
          <el-radio v-model="useConditionLimit.goodsDiscountCheckLower" :label="0">不限</el-radio>
          <span class="ml15">
            <el-radio v-model="useConditionLimit.goodsDiscountCheckLower" :label="1">
              <el-input-number class="w110" controls-position="right" :disabled="!useConditionLimit.goodsDiscountCheckLower" v-model="useConditionLimit.goods_adapt_number_min_limit" :precision="0" :step="1" :min="1"></el-input-number> 件 &nbsp;
            </el-radio>
          </span>
        </el-form-item>
        <el-form-item label="最高适用商品件数">
          <el-radio v-model="useConditionLimit.goodsDiscountCheck" :label="0">不限</el-radio>
          <span class="ml15">
            <el-radio v-model="useConditionLimit.goodsDiscountCheck" :label="1">
              <el-input-number class="w110" controls-position="right" :disabled="!useConditionLimit.goodsDiscountCheck" v-model="useConditionLimit.goods_adapt_number_max_limit" :precision="0" :step="1" :min="1"></el-input-number> 件 &nbsp;
            </el-radio>
          </span>
        </el-form-item>
        <el-form-item label="code类型" class="is-required">
          <el-radio v-model="ruleForm1.customCodeFlag" :label="0">
            <el-tooltip open-delay="200" content="仅随机生成支持卡券转赠" placement="top">
              <span class="tooltip-icon">随机生成</span>
            </el-tooltip>
          </el-radio>
          <el-radio v-model="ruleForm1.customCodeFlag" :label="1">自定义号段</el-radio>
          <!-- 20210203 后端 暂时隐藏 TODO: -->
          <!-- <el-radio v-model="ruleForm1.customCodeFlag" :label="2" @change="(v) => { if(v == 2) { importVisible = true } }">
            <span @click="ruleForm1.customCodeFlag = 2;importVisible = true">导入券码</span>
            <span class="gray03 cursor" v-if="fileList.length > 0">
              <el-popover placement="top-start" title="已上传列表" width="250" trigger="hover">
                <ul><li v-for="(f, idx) in fileList" :key="idx" class="ellipsis"><i class="el-icon-success success-color mr5"></i>{{ f.name }}({{ f.size }}k)</li></ul>
                <i slot="reference" class="el-icon-document ml5"></i>
              </el-popover>
            </span>
          </el-radio> -->
        </el-form-item>
        <el-form-item prop="customCode" label="code号段" key="customCode" v-if="ruleForm1.customCodeFlag === 1">
          <!--  @blur="checkInputNumber(ruleForm1.codeBegin, 'codeBegin')" -->
          <el-input :min="0" :maxlength="16" @input="inputChange('codeBegin')" class="w165" v-model="ruleForm1.codeBegin" placeholder="请输入纯数字" />
          <span class="ml8 mr8">-</span>
          <!--  @blur="checkInputNumber(ruleForm1.codeEnd, 'codeEnd')" -->
          <el-input :min="0" :maxlength="16" @input="inputChange('codeEnd')" class="w165" v-model="ruleForm1.codeEnd" placeholder="请输入纯数字" />
          <span class="tips">优惠券创建数量上限为1,000,000 张</span>
        </el-form-item>
        <el-form-item prop="codeFixed" v-if="ruleForm1.customCodeFlag === 1">
          <div>
            <el-checkbox class="mr8" v-model="ruleForm1.codePrefixFlag" :true-label="1" :false-label="0">固定开头</el-checkbox>
            <!--  @blur="checkInputString(ruleForm1.codePrefix, 'codePrefix', 'ruleForm1')" -->
            <el-input class="w265" @input="inputChange2('codePrefix')" :disabled="!ruleForm1.codePrefixFlag" v-model="ruleForm1.codePrefix" :maxlength="6" placeholder="限6位以内字母/数字" />
          </div>
          <div class="pt20">
            <!-- @blur="checkInputString(ruleForm1.codeSuffix, 'codeSuffix', 'ruleForm1')" -->
            <el-checkbox class="mr8" v-model="ruleForm1.codeSuffixFlag" :true-label="1" :false-label="0">固定结尾</el-checkbox>
            <el-input class="w265" @input="inputChange2('codeSuffix')" :disabled="!ruleForm1.codeSuffixFlag" v-model="ruleForm1.codeSuffix" :maxlength="4" placeholder="限4位以内字母/数字" />
          </div>
        </el-form-item>

        <!-- 自定义号段库存最大100w    随机生成默认10w最大一千万 -->
        <el-form-item v-if="!ruleForm1.customCodeFlag" key="couponStock" prop="couponStock" label="库存数量">
          <!-- <el-input-number controls-position="right" :min="1" :max="10000000" v-model="ruleForm1.couponStock" /> 张 -->
          <dm-input-unit style="width:180px;" :min="1" :max="10000000" v-model="ruleForm1.couponStock">
            <span slot="append">张</span>
          </dm-input-unit>
          <span class="tips ml5">优惠券创建数量，如不填，则默认为100,000张</span>
        </el-form-item>
        <el-form-item label="库存数量" class="is-required" key="customCodeNum" v-else>
          <el-input-number controls-position="right" :min="0" :max="1000000" disabled :value="customCodeNum" />
        </el-form-item>

        <el-form-item label="领券限制">
          <el-radio-group v-model="ruleForm1.cardLimitRadio">
            <el-radio :label="1">1 张/人</el-radio>
            <el-radio :label="100">100 张/人</el-radio>
            <el-radio :label="0">
              <el-input-number class="w110" :disabled="ruleForm1.cardLimitRadio !== 0" controls-position="right" :min="1" v-model="ruleForm1.getLimit" @blur="(e) => { if(e.target.value === '')  { ruleForm1.getLimit = 1; } }" /> 张/人<span class="tips ml5">每个用户领券上限，默认为 1</span>
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 有效期 -->
        <el-form-item class="is-required" label="有效期类型">
          <el-radio-group v-model="ruleForm1.cardEffectiveMode">
            <el-radio :label="0">固定日期</el-radio>
            <el-radio :label="1">领取后计算</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="ruleForm1.cardEffectiveMode === 0" class="is-required" label="有效期" prop="cardEffectiveMode0" key="cardEffectiveMode0">
          <el-date-picker :disabled="ruleForm1.cardEffectiveMode !== 0" class="w350" v-model="ruleForm1.dateTime" :picker-options="pickerOptions" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        </el-form-item>
        <el-form-item v-if="ruleForm1.cardEffectiveMode === 1" label="有效期" prop="cardEffectiveMode1" key="cardEffectiveMode1">
          <div>
            <el-radio-group v-model="ruleForm1.effectTimeMode" @change="() => { ruleForm1.expireTimeCount = ''; }">
              <el-radio :label="0">按天计算</el-radio>
              <el-radio :label="1">按月计算</el-radio>
            </el-radio-group>
          </div>
          <div class="pt20">
            <span class="gray02 mr8">生效时间</span>
            <el-select :disabled="ruleForm1.cardEffectiveMode !== 1" v-model="ruleForm1.effectTimeCount" class="w130" placeholder="请选择">
              <el-option v-for="item in startDayOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <span class="gray02 ml8 mr8">，
              <el-tooltip open-delay="200" content="使用有效期只能在卡券有效期范围内" placement="top"><span class="tooltip-icon">有效时间</span></el-tooltip>
            </span>
            <el-input-number :disabled="ruleForm1.cardEffectiveMode !== 1" controls-position="right" class="w110" v-model="ruleForm1.expireTimeCount" :precision="0" :min="1" :max="ruleForm1.effectTimeMode === 0 ? 180 : 12" @blur="(e) => { if(e.target.value === '')  { ruleForm1.expireTimeCount = 0; } }" />
            <span class="gray02 ml8">{{ ruleForm1.effectTimeMode === 0 ? '天' : '月' }}</span>
          </div>
        </el-form-item>

        <el-form-item label="手动领取">
          <el-switch :active-value="1" :inactive-value="0" v-model="ruleForm1.manualGetFlag"></el-switch>
        </el-form-item>
        <!-- 转赠 -->
        <template v-if="ruleForm1.customCodeFlag == 0">
          <!-- 仅随机生成支持卡券转赠 -->
          <el-form-item label="转赠开关">
            <el-switch :active-value="1" :inactive-value="0" v-model="ruleForm1.giveFlag"></el-switch>
          </el-form-item>
          <!-- !!!需要通过$el找到，避免开关来来回回初始化，所以用v-show -->
          <el-form-item label="转赠对话框文字" prop="giveContent" class="is-required"  v-show="ruleForm1.giveFlag === 1">
            <dm-input class="wInput352" type="textarea" ref="ruleTextarea" :row="4" :autosize="{ minRows: 4, maxRows: 8 }" v-model="ruleForm1.giveContent" wrap="soft" :byte-type="1" :maxlength="24" />
          </el-form-item>
          <template v-if="ruleForm1.giveFlag === 1">
            <el-form-item label="转赠对话框图片" prop="giveImage">
              <div class="zm-img">
                <dm-upload-picture :use-transition="false" with-credentials :before-upload="beforeUpload" :headers="{ isControl: true }" project-name="marketing" :action-url="uploadUrl" :is-gic-four="true" :image-list="zmImg" :max-image-length="1" @uploadOnSuccess="zmSuccess" @deleteImage="() => { zmImg = [];ruleForm1.giveImage='';ruleForm1.giveImageField=''; }" />
              </div>
              <p class="tips">图片建议尺寸： 320*240px 的jpg/png图片，大小不超过1MB。</p>
            </el-form-item>
            <el-form-item label="转赠页面首图" prop="giveBannerImage">
              <div class="st-img">
                <dm-upload-picture :use-transition="false" with-credentials :before-upload="beforeUpload" :headers="{ isControl: true }" project-name="marketing" :action-url="uploadUrl" :is-gic-four="true" :image-list="stImg" :max-image-length="1" @uploadOnSuccess="stSuccess" @deleteImage="() => { stImg = [];ruleForm1.giveBannerImage='';ruleForm1.giveBannerImageField=''; }" />
              </div>
              <p class="tips">图片建议尺寸： 640*210px 的jpg/png图片，大小不超过1MB。</p>
            </el-form-item>
            <el-form-item label="首图链接设置" prop="giveBannerJumpUrl">
              <el-checkbox v-model="checked" @change="onShow" />
              <span class="op-btn ml5" @click="onShow(true)">首图链接</span>
              <span v-if="checked && (linkData.name || linkData.url)" class="gray03 ml10" :title="linkData.url">【{{ linkData.name || '--' }}】【{{ linkData.url || '--' }}】</span>
            </el-form-item>
            <el-form-item label="卡券转赠规则" prop="giveRule" v-show="ruleForm1.giveFlag === 1">
            <dm-input type="textarea" class="autosize wInput352" :rows="4" :autosize="{ minRows: 4, maxRows: 8 }" v-model="ruleForm1.giveRule" :byte-type="1" :maxlength="200" />
          </el-form-item>
          </template>
        </template>
        <el-form-item label="跳转配置">
          <el-switch :active-value="1" :inactive-value="0" v-model="ruleForm1.cardJumpFlag"></el-switch>
          <template v-if="ruleForm1.cardJumpFlag">
            <el-button type="text" class="ml10" @click="$refs.link2.onShow()">设置链接</el-button>
            <span v-if="(linkData2.name || linkData2.url)" class="gray03 ml10" :title="linkData2.url">【{{ linkData2.name || '--' }}】【{{ linkData2.url || '--' }}】</span>
          </template>
          <p class="tips">* 开启后小程序卡券详情将对应路径的跳转按钮</p>
        </el-form-item>
        <el-form-item label="库存消耗方式" prop="stockType">
          <el-checkbox-group v-model="stockType">
            <!-- （0:占用,1:动态 , 2占用+动态） -->
            <el-checkbox :label="0">固定库存</el-checkbox>
            <el-checkbox :label="1">实时库存</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="操作人权限">
          <dm-acc-group-select :etype.sync="ruleForm1.operAuthType" :group-ids.sync="ruleForm1.operAuth" />
        </el-form-item>
        <el-form-item class="pt10">
          <el-button class="w85" type="primary" @click="changeStep(2, 'ruleForm1')">下一步</el-button>
          <el-button class="w85" v-if="ruleForm1.customCodeFlag === 0 && ruleForm1.giveFlag" :disabled="!preview.disabled" @click="preview.visible = true">转赠预览</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 第二步 -->
    <div class="content" v-show="active === 2">
      <el-form :model="ruleForm2" :rules="rules2" class="ruleForm2" ref="ruleForm2" label-width="200px">
        <el-form-item label="线下门店适用">
          <el-switch v-model="xxsy.switch" :active-value="1" :inactive-value="0" />
        </el-form-item>
        <!-- 线下门店适用内容 -->
        <template v-if="xxsy.switch">
          <el-form-item prop="erpDemoCode" label="DEMO券号">
            <el-input class="wInput352" v-model="ruleForm2.erpDemoCode" maxlength="100"  @blur="checkErpDemoCode" placeholder="选填" />
            <span class="tips">若不输入 DEMO 券号，则不同步 ERP</span>
          </el-form-item>
          <el-form-item label="消费金额门槛" class="is-required">
            <!-- <el-input-number class="prefix-amount wInput352" controls-position="right" :precision="2" :min="0" :max="10000000" v-model="xxsy.feeLimit" /> -->
            <dm-input-amount style="width:352px;"  :precision="2" :min="0" :max="10000000" v-model="xxsy.feeLimit" ></dm-input-amount>
            <!-- <div class="line-height1 mt20">
              <el-checkbox v-model="xxsy.onlyFlag">不与其它优惠共享</el-checkbox>
            </div> -->
          </el-form-item>
          <el-form-item label="优惠金额封顶" v-if="ruleForm1.cardType === 1">
            <el-input-number class="prefix-amount wInput352" controls-position="right" :min="0" :max="10000000" v-model="xxsy.maxDiscountAmount" /> 元
          </el-form-item>
          <el-form-item label="最大商品优惠数" v-if="ruleForm1.cardType === 1">
            <el-input-number class="prefix-amount wInput352" controls-position="right" :min="0" :max="10000000" v-model="xxsy.maxDiscountGoodsCount" /> 件
          </el-form-item>
          <!-- <el-form-item prop="verificationType" label="核销方式" v-show="ruleForm1.cardType !== 2">
            <el-radio v-model="ruleForm1.verificationType" :label="0">会员自助核销</el-radio>
            <el-radio v-model="ruleForm1.verificationType" :label="1">收银台录入核销</el-radio>
          </el-form-item> -->
          <el-form-item label="线下适用门店" class="is-required">
            <dm-store-select :waiting-save.sync="xxsyStoreWaiting" force-show-save ref="newStoreSelect" @pass-store-data="abbrInfo"  @reset-condition="xxsy.storeFilterId = ''" />
          </el-form-item>
          <el-form-item v-if="ruleForm1.cardType !== 2" label="线下适用商品" class="is-required">
            <vue-gic-goods-selector-new real-save :waiting-save.sync="xxsyGoodsWaiting" @submit="(val) => { confirm('xxsy', val) }" force-show-save />
          </el-form-item>
        </template>
        <el-form-item label="GIC微商城适用">
          <el-switch v-model="gicmall.switch" :active-value="1" :inactive-value="0" />
        </el-form-item>
        <!-- GIC微商城适用内容 -->
        <template v-if="gicmall.switch">
          <el-form-item label="消费金额门槛" class="is-required">
            <!-- <el-input-number class="prefix-amount wInput352" controls-position="right" :min="0" :max="10000000" :precision="2" v-model="gicmall.feeLimit" /> -->
            <dm-input-amount style="width:352px;" :precision="2" :min="0" :max="10000000" v-model="gicmall.feeLimit"></dm-input-amount>
            <!-- <div class="line-height1 mt20">
              <el-checkbox v-model="gicmall.onlyFlag">不与其它优惠共享</el-checkbox>
            </div> -->
          </el-form-item>
          <el-form-item label="优惠金额封顶" v-if="ruleForm1.cardType === 1">
            <el-input-number class="wInput352" controls-position="right" v-model="gicmall.maxDiscountAmount" :precision="2" :step="1" :min="0"></el-input-number> <span class="tips">元</span>
          </el-form-item>
          <el-form-item label="最大商品优惠数" v-if="ruleForm1.cardType === 1">
            <el-input-number class="wInput352" controls-position="right" v-model="gicmall.maxDiscountGoodsCount" :precision="0" :step="1" :min="0"></el-input-number> <span class="tips">件</span>
          </el-form-item>
          <el-form-item label="适用微商城店铺" prop="gicmallShopFilter">
            <el-select v-if="active == 2" class="wInput352" v-model="gicmall.shopFilter" multiple placeholder="请选择微商城店铺（可多选）">
              <el-option v-for="item in gicMallShopList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="ruleForm1.cardType !== 2" label="适用商品" class="is-required">
            <vue-gic-goods-selector-new real-save :waiting-save.sync="gicmallGoodsWaiting" @submit="(val) => { confirm('gicmall', val) }" force-show-save />
          </el-form-item>
        </template>
        <!-- 微盟微商城适用内容 -->
        <!-- <el-form-item label="微盟微商城适用">
          <el-switch v-model="wmmall.switch" :active-value="1" :inactive-value="0" />
        </el-form-item>
        <template v-if="wmmall.switch">
          <el-form-item label="消费金额门槛" class="is-required">
            <el-input-number class="prefix-amount wInput352" controls-position="right" :precision="2" :min="0" :max="10000000" v-model="wmmall.feeLimit" />
          </el-form-item>
          <el-form-item label="优惠金额封顶" v-if="ruleForm1.cardType === 1">
            <el-input-number class="wInput352" controls-position="right" v-model="wmmall.maxDiscountAmount" :precision="2" :step="1" :min="0"></el-input-number> <span class="tips">元</span>
          </el-form-item>
          <el-form-item label="最大商品优惠数" v-if="ruleForm1.cardType === 1">
            <el-input-number class="wInput352" controls-position="right" v-model="wmmall.maxDiscountGoodsCount" :precision="0" :step="1" :min="0"></el-input-number> <span class="tips">件</span>
          </el-form-item>
          <el-form-item v-if="ruleForm1.cardType !== 2">
            <el-tooltip open-delay="200" slot="label" content="不筛选则默认所有商品" placement="top">
              <span class="tooltip-icon">适用商品</span>
            </el-tooltip>
            <vue-gic-goods-selector-new ref="selector3" />
            <el-button @click="confirm('selector3', 'wmmall')" class="mt20">确认</el-button>
          </el-form-item>
        </template> -->
        <el-form-item class="pt10">
          <el-button class="w85" type="primary" @click="changeStep(3, 'ruleForm2')">下一步</el-button>
          <el-button class="w85" @click="changeStep(1)">上一步</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 第三步 -->
    <div class="content" v-show="active === 3">
      <el-form :model="ruleForm3" :rules="rules3" class="ruleForm2" ref="ruleForm3" label-width="200px">
        <el-form-item prop="useExplain" label="使用说明">
          <dm-input type="textarea" :autosize="{ minRows: 4, maxRows: 6 }" class="w500 autosize" :byte-type="1" :rows="4" v-model="ruleForm3.useExplain" :maxlength="500" placeholder="请输入使用说明" />
        </el-form-item>
        <el-form-item label="适用商品说明">
          <dm-input type="textarea" class="w500" :byte-type="1" :rows="4" v-model="ruleForm3.adaptGoodsExplain" :maxlength="50" placeholder="选填" />
        </el-form-item>
        <el-form-item label="适用门店说明">
          <dm-input type="textarea" class="w500" :byte-type="1" :rows="4" v-model="ruleForm3.adaptStoreExplain" :maxlength="50" placeholder="选填" />
        </el-form-item>
        <el-form-item class="pt10">
          <el-button type="primary" @click="changeStep(4, 'ruleForm3')">确认新建</el-button>
          <el-button class="w85" @click="changeStep(2)" :class="`${ needCheck ? 'w125' : 'w85' }`">上一步</el-button>
        </el-form-item>
      </el-form>
    </div>

    <result-dialog :dialog-visible.sync="result.visible" :title="result.title" :info="result.info" @handleClose="handleResClose">
      <el-button slot="footer" class="mt30" @click="handleResClose">关闭</el-button>
    </result-dialog>
    <send-preview :data="ruleForm1" :visible.sync="preview.visible" /><!-- 转赠预览 -->
    <import-code :coupon-id="couponId" :visible.sync="importVisible" open-type="blank" @success="(fileList)=> { fileList = fileList; }" /><!-- 导入券码 -->
    <div style="opacity:0;height:1px;visiable:hidden;">
      <!-- 链接小工具 -->
      <dm-link-tools :member-card-id="currentAreaId" v-if="currentAreaId" :data="ruleForm1.giveBannerJumpUrl" ref="link" @save="onSave" @onHide="onHide" />
      <dm-link-tools :member-card-id="currentAreaId" v-if="currentAreaId" :data="ruleForm1.cardJumpLink" ref="link2" @save="onSave2" />
    </div>
  </div>
</template>

<script>
import cardFormAdd from './card-form.js';
export default cardFormAdd;
</script>

<style lang="scss" scoped>
.cardForm {
  padding: 30px 20px;
  .w165 {
    width: 165px !important;
  }
  .w265 {
    width: 265px !important;
  }
  .tips {
    font-size: 12px;
    color: #909399;
    margin-left: 8px;
  }
  div.content {
    // padding:0 20px 0 165px;
  }
  .step {
    // margin: 20px 195px 48px;
    margin: 20px auto 48px;
  }
  /deep/ {
    .el-form {
      .el-input-number, .el-select {
        .el-input{
          width: 100%;
        }
      }
      .wInput352 {
        width: 352px;
      }
    }
  }
}
.w500 /deep/ {
  textarea, input {
    width: 500px;
  }
}
</style>