<template>
<section class="sms-lib">
  <div :class="pbSize">
    <span class="pr10">选择卡券(共{{total}}条)</span>
    <el-input v-model="listParams.searchParam" class="w200" clearable placeholder="请输入卡券名称" @change="getCardList"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
    <span class="fz12 gray pl20">{{limitTips}} </span>
  </div>
  <el-table tooltipEffect="light" :data="tableList" :height="tableHeight" style="width: 100%" v-loading="loading" @row-click="chooseCard">
    <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-if="cardIdName === 'wechatCardId'" v-model="selectedId" :label="scope.row.wechatCardId" class="pr10"></el-radio>
              <el-radio v-else v-model="selectedId" :label="scope.row.coupCardId" class="pr10"></el-radio>
          </div>
        </template>
    </el-table-column>
    <el-table-column  :show-overflow-tooltip="false" :width="200" align="left"  prop="cardName" label="卡券名称"></el-table-column>
    <el-table-column  :show-overflow-tooltip="false" :width="100" align="left"  prop="cardLimit" label="领取限制"></el-table-column>
    <el-table-column  :show-overflow-tooltip="false" :width="120"  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="120" align="left"  prop="couponStock" label="库存"></el-table-column>
    <el-table-column  :show-overflow-tooltip="true"  :min-width="200" align="left"  prop="subName" label="描述"></el-table-column>
  </el-table>
  <el-pagination v-show="tableList.length && showPagination" background class="dm-pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listParams.currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="listParams.pageSize" layout="total, prev, pager, next" :total="total"></el-pagination>
</section>
</template>

<script>
import {getCardList} from '@/service/api/commonApi.js';
export default {
  props:{
    activeId:{
      type:String,
      default:''
    },
    pbSize:{
      type:String,
      default:'pb22'
    },
    cardIdName:{
      type:String,
      default:'coupCardId'
    },
    tableHeight:{
      type:String,
      default:'auto'
    },
    showPagination:{
      type:Boolean,
      default:true
    },
    cardLimitType:{
      type:Number,
      default:1
    }
  },
  computed:{
    limitTips() {
      if (this.cardLimitType === 2) {
        return '领取限制领取 1~100的卡券，系统已过滤。';
      } else if (this.cardLimitType === 3) {
        return '领取限制领取>=100 的卡券，系统已过滤。';
      } else {
        return '领取限制>1的卡券不支持选择，系统已过滤。';
      }
    }
  },
  data(){
    return{
      listParams:{
        searchParam:'',
        currentPage:1,
        pageSize:10,
        requestProject:'gic-web',
        cardLimitType:this.cardLimitType,
        cardType:''
      },
      total:0,
      tableList:[],
      selectedId:this.activeId
    }
  },
  watch: {
    selectedId(val) {
      let obj = {};
      if (this.cardIdName === 'wechatCardId') {
        this.tableList.map(v => {
          if (v.coupCardId === val) {
            val = v.wechatCardId
            obj = v;
          }
        })
      } else {
        this.tableList.map(v => {
          if (v.coupCardId === val) {
            obj = v;
          }
        })
      }

      this.$emit('update:activeId',val);
      this.$emit('emitActiveObj',obj);
    },
    activeId(val) {
      this.selectedId = val;
    }

  },
  created(){
    this.selectedId = this.activeId;
    this.getCardList();
  },
  methods:{
      handleSizeChange(val) {
          this.listParams.pageSize = val;
          this.getCardList();
      },
      handleCurrentChange(val) {
          this.listParams.currentPage = val;
          this.getCardList();
      },
      async getCardList() {
          this.loading = true;
          let res = await getCardList(this.listParams);
          this.tableList = res.result.result || [];
          this.total = res.result.totalCount;
          this.loading = false;
      },
      reset() {
        this.listParams.searchParams = '';
        this.getCardList();
      },
      chooseCard(row) {
        this.selectedId = row.coupCardId;
        $bus.$emit('card-temp-choose',row);
      }
  }
}
</script>
