<template>
  <div>
    <div class="filter-list">
    <el-select v-model="cardType" style="width: 200px;" placeholder="卡券类型" @change="handleChange">
      <el-option
        v-for="item in cardOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>
    <el-input v-model="cardName" style="width: 200px; margin-left: 20px;" placeholder="输入卡券名称" @keyup.native.enter="handleSearch"></el-input>

    </div>

    <el-table
      ref="multipleTable"
      :data="cardData"
      class="card-table"
      tooltip-effect="dark"
      style="width: 100%"
      @row-click="handleCurrentChangeRow"
      >
      <el-table-column label width="55">
        <template slot-scope="scope">
          <!-- <el-radio class="radio-style" :label="scope.row.coupCardId" v-model="radio" :disabled="scope.row.disabled">
                  &nbsp;
          </el-radio>-->
          <el-radio class="radio-style" :label="scope.row.coupCardId" v-model="radio">&nbsp;</el-radio>
        </template>
      </el-table-column>

      <el-table-column label="卡券名称">
        <template slot-scope="scope">{{ scope.row.cardName }}</template>
      </el-table-column>
      <el-table-column prop="subName" label="备注名"></el-table-column>
      <el-table-column prop label="有效期">
        <template slot-scope="scope">
          <div
            v-if="scope.row.cardEffectiveMode == 0"
          >{{scope.row.beginDate+'-'+ scope.row.endDate}}</div>
          <div
            v-if="scope.row.cardEffectiveMode == 1"
          >领取{{scope.row.startDay +'-'+ scope.row.limitDay}}天后,可以使用</div>
        </template>
      </el-table-column>
      <el-table-column prop label="领取限制">
        <template slot-scope="scope">每人限制{{scope.row.cardLimit}}张</template>
      </el-table-column>
      <el-table-column prop label="适用门店">
        <template slot-scope="scope">
          <div v-if="scope.row.storeMode == 0">所有门店</div>
          <div v-if="scope.row.storeMode == 1">部分分组</div>
          <div v-if="scope.row.storeMode == 2">部分门店</div>
        </template>
      </el-table-column>
      <el-table-column prop="couponStock" label="库存"></el-table-column>
    </el-table>
    <div class="pagination" v-if="total>0">
      <el-pagination
        @current-change="cardCurrentChange"
        :current-page="cardCurrentPage"
        small
        :page-size="cardPageSize"
        layout="prev, pager, next"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import qs from "qs";

export default {
  name: "card-list",

  props: {
    pname: String
  },

  data() {
    return {
      cardType: null, // 卡券类型
      cardOptions: [
        { value: 1, label: '折扣券' },
        { value: 0, label: '抵金券' }
      ],
      cardName: '',
      radio: null,
      cardCurrentPage: 1,
      cardPageSize: 5,
      cardLimitType: 1,
      cardData: [],
      total: 0
    };
  },

  methods: {
    // 当某行点击的时候
    handleCurrentChangeRow(row) {
      this.$emit('pass-id', row.coupCardId);
    },
    getCardList() {
      var param = {
        currentPage: this.cardCurrentPage,
        pageSize: this.cardPageSize,
        requestProject: this.pname,
        cardLimitType: this.cardLimitType,
        cardTypes: this.cardType,
        searchParam: this.cardName
      };
      this.axios
        .post(this.baseUrl + "/api-plug/get-coupon-list", qs.stringify(param))
        .then(res => {
          const resData = res.data;
          if (resData.errorCode == 0) {
            if (!!resData.result) {
              if (!!resData.result.result) {
                resData.result.result.forEach((ele, index) => {
                  if (!!ele.beginDate) {
                    ele.beginDate = this.formatDate(ele.beginDate, ".");
                  }
                  if (!!ele.endDate) {
                    ele.endDate = this.formatDate(ele.endDate, ".");
                  }
                });
                this.cardData = resData.result.result;
              }
              this.total = resData.result.totalCount;
            }
          } else {
            this.$message.error({ duration: 1000, message: resData.message });
          }
        })
        .catch(error => {
          this.$message.error({
            duration: 10000,
            message: error.message
          });
        });
    },
    // 当前切换分页
    cardCurrentChange(val) {
      this.cardCurrentPage = val;
      this.getCardList();
    },
    handleChange(val) {
      this.getCardList();
    },
    handleSearch() {
      this.getCardList();
    }
  },

  created() {
    const host = window.location.origin;
    if (host.indexOf("localhost") != "-1") {
      this.baseUrl = "http://gicdev.demogic.com";
    } else {
      this.baseUrl = host;
    }
  },

  mounted() {
    this.getCardList();
  }
};
</script>

<style scoped>
.filter-list {
  margin-bottom: 10px;
}
.pagination {
  text-align: right;
  margin-top: 10px;
}
</style>

