<!--
  <select-card :brandId="brandId"  @closeCard="closeCard" @returnId="returnId"></select-card>
  import selectCard from '@/components/app/card/select-card.vue';
 -->
<template>
  <el-dialog title="卡券选择" :visible.sync="dialogVisible" width="994px" :before-close="handleClose">
    <div class="search-div">
      <el-input placeholder="请输入卡券名称" maxlength="50" v-model="searchInput" class="w-264" style="width: 264px;" clearable @keyup.native="value => toInput(value, searchInput)" @clear="clearInput"> <i slot="prefix" class="el-input__icon el-icon-search"></i> </el-input>
      <!-- <span class="search-tip p-l-20 font-14 color-909399">仅支持选择“领取限制&gt;=100”的卡券，系统已自动过滤不符合条件的卡券，符合条件的卡券共{{ total }}张</span> -->
    </div>
    <div class="chat-log-content boder-box m-t-20">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column class-name="hide-ellipsis" label="" width="50">
          <template slot-scope="scope">
            <el-radio v-model="selectCoupCardId" :disabled="scope.row.selected == 1 ? true : false" :label="scope.row.coupCardId">{{ '' }}</el-radio>
          </template>
        </el-table-column>
        <el-table-column label="卡券名称" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.cardName || '--' }}
          </template>
        </el-table-column>
        <el-table-column label="备注名" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.subName || '--' }}
          </template>
        </el-table-column>
        <el-table-column label="" show-overflow-tooltip>
          <template slot="header">
            <span style="width: 69px; display: inline-block;line-height: 18px;">卡券模板投放期限</span>
          </template>
          <template slot-scope="scope">
            {{ scope.row.putEffectDateString || '--' }}
          </template>
        </el-table-column>
        <el-table-column prop="" label="" show-overflow-tooltip>
          <template slot="header">
            <span style="width: 69px; display: inline-block;line-height: 18px;">用户使用有效期</span>
          </template>
          <template slot-scope="scope">
            {{ scope.row.effectDateString || '--' }}
          </template>
        </el-table-column>
        <el-table-column prop="cardLimit" label="领取限制" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="storeMode" label="适用门店" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.storeMode == 0 ? '所有门店' : scope.row.storeMode == 1 ? '部分分组' : '部分门店' }}
          </template>
        </el-table-column>
        <el-table-column prop="couponStock" label="库存" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="getedQuantity" label="领取次数" show-overflow-tooltip> </el-table-column>
      </el-table>
      <div class="block common-wrap__page text-right m-t-24" v-if="tableData.length != 0">
        <dm-pagination background @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize" layout=" prev, pager, next" :total="total"> </dm-pagination>
      </div>
    </div>
    <div slot="footer" class="dialog-footer m-b-20">
      <el-button @click="toCancel">取 消</el-button>
      <el-button type="primary" @click="toConfirm">确认</el-button>
    </div>
  </el-dialog>
</template>
<script>
import errMsg from '@/common/js/error';
import { getRequest } from '@/api/api';
import { _debounce } from '@/common/js/public';
export default {
  props: {
    brandId: {
      type: String,
      default() {
        return '';
      }
    },
    coupCardId: {
      type: String,
      default() {
        return '';
      }
    }
  },
  data() {
    return {
      dialogVisible: true,
      selectCoupCardId: this.coupCardId || '',
      tableData: [],
      // 分页参数
      currentPage: 1,
      pageSize: 6,
      total: 0
    };
  },
  methods: {
    handleClose(done) {
      const that = this;
      that.$emit('closeCard');
    },
    toConfirm() {
      const that = this;
      let row = {};
      that.tableData.forEach(ele => {
        if (ele.coupCardId == that.selectCoupCardId) {
          row = ele;
        }
      });
      that.$emit('returnId', that.selectCoupCardId, row);
    },
    toCancel() {
      const that = this;
      that.$emit('closeCard');
    },
    /**
     * 输入
     * @param {Object} e
     * @param {String} value
     */
    toInput: _debounce(function(e, value) {
      const that = this;
      that.currentPage = 1;
      that.getTableList();
    }, 200),
    // 搜索清除
    clearInput() {
      const that = this;
      that.currentPage = 1;
      that.getTableList();
    },
    /**
     * 分页---页码变化
     * @param {Number} val
     */
    handleSizeChange(val) {
      const that = this;
      that.currentPage = 1;
      that.pageSize = val;
      that.getTableList();
    },

    /**
     * 分页---当前页变化
     * @param {Number} val
     */
    handleCurrentChange(val) {
      const that = this;
      that.currentPage = val;
      that.getTableList();
    },
    /**
     * 获取列表数据
     */
    getTableList(val) {
      const that = this;
      let para = {
        cardName: that.searchInput || '', // 搜索字段
        pageNum: that.currentPage, // 当前页
        pageSize: that.pageSize, // 一页显示个数
        gicEnterpriseId: that.brandId
        // taskType: 1 //0不良评价，1话务任务
      };
      getRequest('/haoban-app-customer-web/cardCoupon/find-select-card-page', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            that.tableData = resData.result.list || [];
            that.total = resData.result.pageInfo.total;

            return false;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    }
  },
  watch: {
    brandId: function(newData, oldData) {
      const that = this;
      if (!!newData) {
        that.getTableList();
      }
    },
    coupCardId: function(newData, oldData) {
      const that = this;
      if (!!newData) {
        that.selectCoupCardId = newData;
      }
    }
  },
  mounted() {
    const that = this;
    that.selectCoupCardId = that.coupCardId;
    if (that.brandId) {
      that.getTableList();
    }
  }
};
</script>
<style lang="scss" scoped>
.m-b-20 {
  margin-bottom: 20px;
}
.p-l-18 {
  padding-left: 18px;
}
</style>
