<template>
  <div>
    <div class="card-info" id="wrapper">
      <div class="common-title mb25" id="f1">基本信息</div>
      <!-- label-position="left" label-width="110px" -->
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="info pb10">
        <el-row :gutter="20" class="row">
          <el-col :span="24">
            <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="卡券类型">{{ info.cardType != undefined ? cardType[info.cardType].label : '--' }}</el-form-item>
            <el-form-item label="卡券名称">{{ info.cardName }}</el-form-item>
            <el-form-item label="备注名">{{ info.remarkName }}</el-form-item>
            <!-- <el-form-item label="副标题">{{ info.subTitle }}</el-form-item> -->
            <el-form-item prop="color" label="卡券颜色">
              <div class="color-picker-custom">
                <span class="color vertical-top">{{ ruleForm.color }}</span>
                <el-color-picker :disabled="isInfo" popper-class="hide-picker" v-model="ruleForm.color" :predefine="predefineColors" />
              </div>
            </el-form-item>
            <el-form-item label="导入券码" v-if="info.customCodeFlag === 2 && isEdit">
              <el-button type="text" @click="importVisible = true">上传文件</el-button>
              <span class="gray03 cursor" v-if="fileList.length > 0">
                <el-popover open-delay="200" 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 ml15"></i>
                </el-popover>
              </span>
            </el-form-item>
            <el-form-item label="兑换券优惠内容" v-if="info.cardType === 2">
              <vue-gic-goods-selector-new ref="selector4" :read-only="true" :id="info.goodsSearchId" />
            </el-form-item>
            <el-form-item label="减免金额" v-if="info.cardType === 0">{{ info.denomination }} 元</el-form-item>
            <el-form-item label="优惠折扣" v-if="info.cardType === 1">{{ info.denomination }} 折</el-form-item>
            <el-form-item label="成本费用" v-if="info.cardType !== 1">{{ info.costPrice }} 元</el-form-item>
            <el-form-item v-if="info.useConditionLimit" label="最低适用商品件数">{{ info.useConditionLimit.goods_adapt_number_min_limit ? `${info.useConditionLimit.goods_adapt_number_min_limit} 件` : '不限' }}</el-form-item>
            <el-form-item v-if="info.useConditionLimit" label="最高适用商品件数">{{ info.useConditionLimit.goods_adapt_number_max_limit ? `${info.useConditionLimit.goods_adapt_number_max_limit} 件` : '不限' }}</el-form-item>
            <el-form-item label="code类型">{{ info.customCodeFlag === 0 ? '随机生成' : '自定义号段' }}</el-form-item>
            <el-form-item label="code号段" v-if="info.customCodeFlag === 1">{{ info.codeBegin }}<span class="ml8 mr8">-</span>{{ info.codeEnd }}</el-form-item>
            <el-form-item v-if="info.customCodeFlag === 1">
              <div v-if="info.codePrefixFlag">固定开头: {{ info.codePrefix }}</div>
              <div v-if="info.codeSuffixFlag" class="pt20">固定结尾: {{ info.codeSuffix }}</div>
            </el-form-item>
            <el-form-item label="库存数量">{{ info.couponStock }}</el-form-item>
            <div class="common-title mb25 mt60" id="f2">领取和使用限制</div>
            <el-form-item label="领券限制">{{ info.getLimit }} 张/人</el-form-item>
            <el-form-item label="有效期">
              <div>{{ effectiveDateFormate(info) }}</div>
              <!-- <div v-if="info.cardEffectiveMode === 0">{{ formatDateTimeByType(info.startDate, 'yyyy-MM-dd') }} ~ {{ formatDateTimeByType(info.expireDate, 'yyyy-MM-dd') }}</div>
              <div v-if="info.cardEffectiveMode === 1">领取后第{{ info.effectTimeCount }}{{ info.effectTimeMode ? '月' : '天' }} - 第{{ info.expireTimeCount + info.effectTimeCount - 1 }}{{ info.effectTimeMode ? '月' : '天' }}</div> -->
            </el-form-item>
            <el-form-item label="手动领取">
              <el-switch disabled :active-value="1" :inactive-value="0" v-model="info.manualGetFlag"></el-switch>
            </el-form-item>
            <el-form-item label="转赠开关">
              <el-switch disabled :active-value="1" :inactive-value="0" v-model="info.giveFlag"></el-switch>
              <el-button type="text" class="ml15" v-if="info.giveFlag" @click="preview.visible = true">预览</el-button>
            </el-form-item>
            <template v-if="info.giveFlag === 1">
              <el-form-item label="转赠对话框图片">
                <dm-el-image-view v-if="info.giveImage" class="img-wrap ml15" style="width: 100px; height: 100px" :src="info.giveImage" fit="fill" />
              </el-form-item>
              <el-form-item label="转赠页面首图">
                <dm-el-image-view v-if="info.giveBannerImage" class="img-wrap ml15" style="width: 100px; height: 100px" :src="info.giveBannerImage" fit="fill" />
              </el-form-item>
              <template v-if="info.giveFlag === 1">
                <el-form-item label="转赠对话框文字">{{ info.giveContent }}</el-form-item>
                <el-form-item label="卡券转赠规则">
                  <pre>{{ info.giveRule }}</pre>
                </el-form-item>
                <el-form-item label="转赠首图链接"><span v-if="info.giveBannerJumpUrl">【{{ linkData.name || '--' }}】【{{ linkData.url || '--' }}】</span><span v-else>未添加</span></el-form-item>
              </template>
            </template>
            <el-form-item label="跳转配置">
              <el-switch disabled :active-value="1" :inactive-value="0" v-model="info.cardJumpFlag"></el-switch>
              <span v-if="info.cardJumpFlag" class="gray03 ml10" :title="linkData2.url">【{{ linkData2.name || '--' }}】【{{ linkData2.url || '--' }}】</span>
            </el-form-item>
            <el-form-item label="库存消耗方式">
              <!-- （0:占用,1:动态 , 2占用+动态） -->
              {{ info.stockUseType == 0 ? '固定库存' : info.stockUseType == 1 ? '实时库存' : '固定+实时库存' }}
            </el-form-item>
            <el-form-item label="操作人权限">
              <dm-acc-group-select :etype.sync="info.operAuthType" :group-ids.sync="operAuth" read-only />
            </el-form-item>
            <el-form-item prop="useExplain" label="使用说明">
              <dm-input v-if="isEdit" type="textarea" :rows="4" v-model="ruleForm.useExplain" class="w500" :maxlength="500" />
              <div v-if="isInfo" class="word-break">{{ ruleForm.useExplain || '--' }}</div>
            </el-form-item>
            <el-form-item label="适用商品说明">
              <dm-input v-if="isEdit" type="textarea" :rows="4" v-model="ruleForm.adaptGoodsExplain" class="w500" :maxlength="50" placeholder="选填" />
              <div v-if="isInfo" class="word-break">{{ ruleForm.adaptGoodsExplain || '--' }}</div>
            </el-form-item>
            <el-form-item label="适用门店说明">
              <dm-input v-if="isEdit" type="textarea" :rows="4" v-model="ruleForm.adaptStoreExplain" class="w500" :maxlength="50" placeholder="选填" />
              <div v-if="isInfo" class="word-break">{{ ruleForm.adaptStoreExplain || '--' }}</div>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm" v-if="!isInfo">保存</el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="common-title mb25 mt60" id="f3">适用信息</div>
        <!-- 线下适用门店 -->
        <el-form-item label="线下门店适用">
          <el-switch v-model="xxsy.switch" disabled />
        </el-form-item>
        <template v-if="xxsy.switch">
          <el-form-item label="DEMO券号">{{ info.erpDemoCode || '--' }}</el-form-item>
          <el-form-item label="消费金额门槛">
            {{ xxsy.feeLimit }} 元
            <!-- <el-checkbox  class="ml20" v-model="xxsy.onlyFlag" disabled>不与其它优惠共享</el-checkbox> -->
          </el-form-item>
          <!-- <el-form-item prop="verificationType" label="核销方式" v-show="info.cardType === 2">{{ info.verificationType ? '收银台录入核销' : '会员自助核销' }}</el-form-item> -->
          <el-form-item label="线下适用门店">
            <div>
              <dm-store-select :selector-id="xxsy.storeFilterId" read-only />
            </div>
          </el-form-item>
          <el-form-item label="线下适用商品" v-if="info.cardType !== 2">
            <vue-gic-goods-selector-new v-if="xxsy.goodsFilterId" ref="selector1" :read-only="true" :id="xxsy.goodsFilterId" />
            <span v-else>未配置</span>
          </el-form-item>
        </template>
        <!-- GIC微商城适用  -->
        <el-form-item label="GIC微商城适用">
          <el-switch v-model="gicmall.switch" disabled />
        </el-form-item>
        <template v-if="gicmall.switch">
          <el-form-item label="消费金额门槛">
            {{ gicmall.feeLimit }} 元
            <!-- <el-checkbox  class="ml20" v-model="gicmall.onlyFlag" disabled>不与其它优惠共享</el-checkbox> -->
          </el-form-item>
          <el-form-item label="优惠金额封顶" v-if="info.cardType === 1">{{ gicmall.maxDiscountAmount }} 元</el-form-item>
          <el-form-item label="最大商品优惠数" v-if="info.cardType === 1">{{ gicmall.maxDiscountGoodsCount }} 件</el-form-item>
          <el-form-item label="适用微商城店铺">{{ gicmall.shopFilter.join('， ') }}</el-form-item>
          <el-form-item label="适用商品" v-if="info.cardType !== 2">
            <vue-gic-goods-selector-new ref="selector2" :read-only="true" v-if="gicmall.goodsFilterId" :id="gicmall.goodsFilterId" />
            <span v-else>未配置</span>
          </el-form-item>
        </template>

      </el-form>
      <!-- 楼层 -->
      <ul class="floor">
        <li v-for="(item, idx) in floor" :key="idx" :class="{ active: item.targetId === floorId }" @click="toFloor(item)"><span>{{ item.name }}</span></li>
      </ul>
      <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="info" :visible.sync="preview.visible" v-if="info.giveFlag" type="info" /><!-- 转赠预览 -->
      <import-code v-if="info.couponId && info.customCodeFlag === 2 && isEdit" :coupon-id="info.couponId" :visible.sync="importVisible"  @success="importCodeSuccess" /><!-- 导入券码 -->
    </div>
  </div>
</template>

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

<style lang="scss" scoped>
.info .row{
  /deep/ .el-form-item {
    margin-bottom: 12px;
  }
}
.w500 /deep/ {
  textarea, input {
    width: 500px;
  }
}
.card-info {
  padding: 24px 20px;
  position: relative;
  .title {
    font-size:14px;
    font-weight:700;
    color:rgba(48,49,51,1);
    line-height:22px;
    margin-bottom: 24px;
  }
  /deep/ {
    .btn-area {
      // 商品选择器自带按钮不要
      display: none;
    }
    .el-form-item__content {
      color: #303133;
    }
    .el-form {
      .el-input-number, .el-select {
        .el-input{
          width: 100%;
        }
      }
      .dm-input, .el-input, .el-select, .el-textarea, .el-input-number {
        width: 352px;
      }
    }
  }
}
</style>