<template>
  <el-dialog title="选择卡券" :visible.sync="show" width="800px" :before-close="close">
    <div class="clearfix pb10">
      <div class="fl">
        <el-input v-model="listParams.searchParam" class="w200 mr10" clearable placeholder="请输入卡券名/备注名" @change="refresh"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
        <el-select style="width:120px;margin-right:10px;" v-model="listParams.cardTypes" placeholder="卡券类型" @change="refresh">
          <el-option v-for="item in cardTypesList" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <span class="fz12 gray">{{ limitTips }}{{ total }}张。 </span>
      </div>
      <!-- <div class="fr">
        <el-button type="primary" @click="add">新建卡券</el-button>
        <el-button @click="refresh">刷新列表</el-button>
      </div> -->
    </div>
    <div style="font-size:12px;color:#909399;line-height:30px;">* 仅能选择卡券模板投放期限有效的卡券</div>
    <el-table tooltipEffect="light" :data="tableList" row-class-name="cursor-pointer" style="width: 100%" v-loading="loading" @row-click="rowClick">
      <el-table-column :show-overflow-tooltip="false" width="60" align="center" prop="coupCardId">
        <template slot-scope="scope">
          <div class="sms-record_left label-hidden">
            <el-radio v-model="selectedData" :label="scope.row" class="pr10"></el-radio>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="140" align="left" prop="cardName" label="卡券名称">
        <template slot-scope="scope">
          <el-tooltip v-if="scope.row.showTooltip" :content="scope.row.cardName" placement="top">
            <span class="card-name" :style="{ 'max-width': showOutCouponIcon && (scope.row.gicCouponType == 3 || scope.row.gicCouponType == 4) ? '65px' : '115px' }">{{ scope.row.cardName }}</span>
          </el-tooltip>
          <span v-else class="card-name">{{ scope.row.cardName }}</span>
          <i class="out-coupon-icon" v-if="showOutCouponIcon && (scope.row.gicCouponType == 3 || scope.row.gicCouponType == 4)">外部券</i>
          <p style="line-height:20px;color:#909399;font-size:13px;">{{ scope.row.subName }}</p>
        </template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="false" min-width="120" align="left" prop="createTime" label="卡券模板投放期限">
        <template slot-scope="scope">
          <span v-if="scope.row.putEffectiveMode == 0"> 固定日期：{{ formatDateTimeByType(scope.row.putBeginDate, 'yyyy-MM-dd') }} 至 {{ formatDateTimeByType(scope.row.putEndDate, 'yyyy-MM-dd') }} </span>
          <span v-else>长期有效</span>
        </template>
      </el-table-column>
      <el-table-column prop="" label="用户使用有效期" :min-width="120" :show-overflow-tooltip="false">
        <template slot-scope="scope">
          <div v-if="scope.row.cardEffectiveMode == 0">固定日期：{{ formatDateTimeByType(scope.row.beginDate, 'yyyy-MM-dd') + '至' + formatDateTimeByType(scope.row.endDate, 'yyyy-MM-dd') }}</div>
          <div v-if="scope.row.cardEffectiveMode == 1">领取后{{ (scope.row.startDay === 0 ? '当' : '第' + scope.row.startDay) + '天，有效天数' + scope.row.limitDay }}天</div>
          <div v-if="scope.row.cardEffectiveMode == 2">投放后当月</div>
        </template>
      </el-table-column>
      <el-table-column prop="cardLimit" :show-overflow-tooltip="false" label="领取限制" width="90">
        <template slot-scope="scope"> {{ scope.row.cardLimit }}张/人 </template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="false" :width="90" align="left" prop="storeMode" label="适用门店">
        <template slot-scope="scope">
          {{ scope.row.storeMode === 0 ? '所有门店' : scope.row.storeMode === 1 ? '部分分组' : '部分门店' }}
        </template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="false" :width="100" align="left" prop="couponStock" label="库存" :formatter="(row, col, val) => (showOutCouponIcon && (row.gicCouponType == 3 || row.gicCouponType == 4) ? '--' : val)"></el-table-column>
    </el-table>
    <dm-pagination v-show="tableList.length" class="dm-pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listParams.currentPage" :page-sizes="[20, 40, 60, 80]" :page-size="listParams.pageSize" layout="prev, pager, next" :total="total"></dm-pagination>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close">关 闭</el-button>
      <el-button type="primary" @click="addItem">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getCardList } from '../assets/api.js';
import { formatDateTimeByType } from '../assets/utils.js';
export default {
  name: 'lib-card',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    cardLimitType: {
      type: Number,
      default: 1
    },
    // 是否展示外部券标识 true：展示 false不展示
    showOutCouponIcon: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    limitTips() {
      if (this.cardLimitType === 2) {
        return '领取限制领取1~100的卡券，系统已过滤，符合条件共';
      } else if (this.cardLimitType === 3) {
        return '领取限制领取<100的卡券不支持选择，系统已过滤，符合条件共';
      } else if (this.cardLimitType === -1) {
        return '该选择器可筛选所有领取限制卡券，共';
      } else {
        return '领取限制>1的卡券不支持选择，系统已过滤，符合条件共';
      }
    }
  },
  data() {
    return {
      formatDateTimeByType,
      cardTypesList: [
        { value: null, label: '全部' },
        { value: 0, label: '抵金券' },
        { value: 1, label: '折扣券' },
        { value: 2, label: '兑换券' }
      ],
      listParams: {
        searchParam: '',
        currentPage: 1,
        pageSize: 5,
        cardTypes: '', // 0：抵金券，1：折扣券，2：兑换券
        requestProject: 'gic-web',
        cardLimitType: this.cardLimitType,
        cardType: ''
      },
      total: 0,
      tableList: [],
      selectedData: {}
    };
  },
  created() {
    if (this.$store.getters.getStoreCardAuth) {
      this.cardTypesList.push({ value: 3, label: '商场抵金券' });
    }
    this.getCardList();
  },
  methods: {
    getTextWidth(text) {
      const span = document.createElement('span');
      span.innerHTML = text;
      span.style.position = 'fixed';
      span.style.zIndex = -1;
      span.style.opacity = 0;
      document.body.appendChild(span);
      const width = span.offsetWidth;
      document.body.removeChild(span);
      return width;
    },
    handleSizeChange(val) {
      this.listParams.pageSize = val;
      this.getCardList();
    },
    handleCurrentChange(val) {
      this.listParams.currentPage = val;
      this.getCardList();
    },
    getCardList() {
      this.loading = true;
      // useExtCard  能否使用微盟外部券: 0:否, 1:可以
      getCardList(Object.assign({}, this.listParams, { useExtCard: this.showOutCouponIcon ? 1 : 0 })).then(res => {
        if (res.errorCode === 0) {
          this.tableList = (res.result.result || []).map(el => {
            // 如果是外部券，而且配置显示外部券标识，需要缩短cardName的显示长度
            el.showTooltip = this.getTextWidth(el.cardName) > (this.showOutCouponIcon && (el.gicCouponType == 3 || el.gicCouponType == 4) ? 65 : 115);
            return el;
          });
          this.total = res.result.totalCount;
        }
        this.loading = false;
      });
    },
    reset() {
      this.listParams.searchParams = '';
      this.getCardList();
    },
    close() {
      this.$emit('update:show', false);
    },
    rowClick(row) {
      row.comName = 'card';
      this.selectedData = row;
    },
    addItem() {
      if (!this.selectedData.comName) {
        this.$message({ type: 'warning', message: '未选择卡券' });
        return;
      }
      this.$emit('sendItem', this.selectedData);
      this.close();
    },
    add() {
      window.open('/marketing/#/card/add');
    },
    refresh() {
      this.listParams.currentPage = 1;
      this.getCardList();
    }
  }
};
</script>

<style lang="scss" scoped>
.card-name {
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 22px;
}
.out-coupon-icon {
  margin-left: 5px;
  padding: 3px 4px;
  background: #fff1f0;
  border-radius: 2px;
  border: 1px solid #ffa39e;
  font-size: 12px;
  font-weight: 400;
  color: #f5222d;
  font-style: normal;
}
</style>
