<template>
<el-dialog  title="添加卡券" :visible.sync="show" width="80%" :before-close="close">
  <div class="pb10">
    <span class="pr10">卡券共{{total}}张</span>
    <el-input v-model="listParams.searchParams" class="w250" placeholder="输入门店信息/订单流水号" clearable @change="cardPageList"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
    <span class="fz12 gray pl20">*领取限制>1的卡券不支持选择，系统已自动过滤。</span>
  </div>
  <el-table tooltipEffect="light" ref="multipleTable" :data="tableList" style="width: 100%;cursor:pointer;" height="400" @row-click="rowClick" v-loading="loading" @selection-change="handleSelectionChange">
    <el-table-column type="selection" align="center" label="选择"></el-table-column>
    <el-table-column  :show-overflow-tooltip="true"  align="left"  prop="storeCode" label="卡券名">
      <template slot-scope="scope">
        <p>{{scope.row.cardName}}</p>
        <p class="gray fz12">{{scope.row.subName}}</p>
      </template>
    </el-table-column>
    <el-table-column width="100" align="left" prop="couponStock" label="卡券数量"></el-table-column>
    <el-table-column width="100" align="left" prop="getedQuantity" label="领取数量"></el-table-column>
    <el-table-column width="100" align="left" prop="usageQuantity" label="使用数量"></el-table-column>
    <el-table-column width="90" align="left" prop="col4" label="核销率">
      <template slot-scope="scope">
        {{(scope.row.usageQuantity * 100 / (scope.row.getedQuantity === 0 ? 1 : scope.row.getedQuantity)).toFixed(2)}}%
      </template>
    </el-table-column>
    <el-table-column :show-overflow-tooltip="false" width="80px" align="left" prop="storeCode" label="适用门店">
      <template slot-scope="scope">
        {{scope.row.storeMode === 0 ? "所有门店" : (scope.row.storeMode === 1 ? "部分分组" : "部分门店")}}
      </template>
    </el-table-column>
    <el-table-column  :show-overflow-tooltip="false"  align="left"  prop="storeCode" label="有效期">
      <template slot-scope="scope">
        <span v-if="scope.row.cardEffectiveMode !== 0">领取后第{{scope.row.startDay+1}}-{{scope.row.limitDay+scope.row.startDay}}天</span>
        <span v-if="scope.row.cardEffectiveMode === 0">{{formateDateTimeByType(scope.row.beginDate,'yyyy-MM-dd')}} 至 {{formateDateTimeByType(scope.row.endDate,'yyyy-MM-dd')}}</span>
      </template>
    </el-table-column>
    <el-table-column  :show-overflow-tooltip="false"  align="left"  prop="storeCode" label="适用条件">
      <template slot-scope="scope">
        {{scope.row.useCondition | filterUseCondition}}
       </template>
    </el-table-column>
  </el-table>
  <el-pagination v-show="tableList.length" 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, sizes, prev, pager, next" :total="total"></el-pagination>
  <span slot="footer" class="dialog-footer">
    <span class="pr10" v-show="multipleSelection.length>0">已选择{{multipleSelection.length}}张卡券</span>
    <el-button @click="close">取 消</el-button>
    <el-button type="primary" @click="submit">确 定</el-button>
  </span>
</el-dialog>
</template>

<script>
import {cardPageList,saveShelfCard} from '@/service/api/cardApi.js';
import {throttle} from '@/utils/index.js';
import {formateDateTimeByType} from '@/utils/index.js'
export default {
  name:'shelf-add',
  props:{
    obj:{
      type:Object,
      default(){
        return {
          memberId:'',
          coupCardId:''
        }
      }
    },
    show:{
      type:Boolean,
      default:false
    }
  },
  data(){
    return{
      throttle,
      formateDateTimeByType,
      loading:false,
      listParams:{
        currentPage:1,
        pageSize:20,
        searchParam:'',
        sortBy:'',
        limitOne:1,
        selected:1,
        shelfId:this.$route.params.id
      },
      total:0,
      tableList:[],
      multipleSelection:[]
    }
  },
  watch: {
    selectedId(val) {
      this.$emit('submit-order',this.selectedId);
    },
    show(val) {
      if (val) this.cardPageList();
    }
  },
  methods:{
      rowClick(row, event, column) {
        this.$refs.multipleTable.toggleRowSelection(row);
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleSizeChange(val) {
          this.listParams.pageSize = val;
          this.cardPageList();
      },
      handleCurrentChange(val) {
          this.listParams.currentPage = val;
          this.cardPageList();
      },
      async cardPageList() {
          this.loading = true;
          let res = await cardPageList(this.listParams);
          this.tableList = res.result.result;
          this.total = res.result.totalCount;
          this.loading = false;
      },
      close() {
        this.$emit('update:show',false)
      },
      // 提交添加
      submit() {
        if (this.multipleSelection.length===0) {
          this.tips({type:"warning",message:"未选择卡券"});
        } else {
          saveShelfCard({shelfId:this.$route.params.id,cardIds:this.multipleSelection.map(v =>v.coupCardId)}).then(res => {
            if (res.errorCode === 0) {
              this.$tips({type:'success',message:'添加卡券成功'})
              this.close();
              this.$emit('refresh');
            } else {
              this.$tips({type:'error',message:'添加卡券失败'})
            }
          }).catch (err => {
            this.$tips({type:'error',message:'添加卡券失败'})
          })
        }
      }
  },
  filters:{
    filterUseCondition(val) {
      var _useCondition = JSON.parse(val);
      return (typeof _useCondition.sale_limit === 'undefined' ? ""
        : ((typeof _useCondition.sale_limit.fee === 'undefined' ? ""
                : "最低消费满" + _useCondition.sale_limit.fee + "；") + (typeof _useCondition.sale_limit.goods === 'undefined' ? ""
                : "消费指定商品" + _useCondition.sale_limit.goods + "；")))
        + (typeof _useCondition["goods"] === 'undefined' ? ""
                : ((typeof _useCondition.goods.ok === 'undefined' ? ""
                        : "适用商品（" + _useCondition.goods.ok + ")；") + (typeof _useCondition.goods.no === 'undefined' ? ""
                        : "不适用商品（" + _useCondition.goods.no + ")；")))
        + (typeof _useCondition.only === 'undefined' ? ""
                : "不可与其他优惠共享");
    }
  }
}
</script>
