<template>
  <div class="dm-wrap">
    <el-date-picker v-model="search.date" type="daterange" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" clearable style="width: 256px" @change="onSearch"> </el-date-picker>
    <el-input clearable type="text" style="margin-left: 10px;width: 260px" placeholder="请输入卡券名称" prefix-icon="el-icon-search" v-model.trim="search.input" @change="onSearch"></el-input>
    <div class="check-active-card">
      <el-checkbox v-model="search.isActive" label="仅展示有效卡券" @change="onSearch"></el-checkbox>
    </div>
    <el-button v-if="$getButtonLimit($buttonCode.marketingConnectLogs)" :limit-code="$buttonCode.marketingConnectLogs" style="float: right;color:#2F54EB;border-color:#2F54EB" @click="$router.push('/card/async-logs')">错误日志</el-button>
    <el-table :data="tableData" style="margin-top: 20px">
      <el-table-column label="绑定时间" sortable sort-by="createDate">
        <template slot-scope="{ row }">{{ formatDateTimeByType(row.createDate) }}</template>
      </el-table-column>
      <el-table-column label="卡券名称 (达摩侧) " prop="cardName"></el-table-column>
      <!-- 带上微盟卡券id -->
      <el-table-column label="卡券名称 (微盟侧)">
        <div slot-scope="{ row }" v-if="Array.isArray(JSON.parse(row.weimobDemoCode))" style="line-height: normal">
          <p>{{ JSON.parse(row.weimobDemoCode)[0].name }}</p>
          <p style="font-size:12px">{{ JSON.parse(row.weimobDemoCode)[0].card }}</p>
        </div>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="{ row }">
          <el-button type="text" @click="toCouponDetail(row)">卡券详情</el-button>
          <el-button type="text" @click="toGetList(row)">领取记录</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-if="pager.total > 0" style="margin-top: 20px;text-align: right" layout="total,sizes,prev,pager,next" background :total="pager.total" :page-sizes="pager.pageSizes" :page-size="pager.pageSize" :current-page="pager.currentPage" @current-change="onCurrentChange" @size-change="onSizeChange"></el-pagination>
  </div>
</template>

<script>
import { getCouponList } from '@/service/api/cardApi.js';
import { formatDateTimeByType } from '@/utils/index.js';
export default {
  name: 'card-connect-list',
  data() {
    return {
      tableData: [],
      search: {
        date: [],
        input: '',
        isActive: true
      },
      pager: {
        total: 0,
        pageSizes: [20, 40, 60, 80],
        pageSize: 20,
        currentPage: 1
      }
    };
  },
  created() {
    this.getData();
  },
  methods: {
    formatDateTimeByType,
    getData() {
      const { currentPage, pageSize } = this.pager;
      const { input, date, isActive } = this.search;
      const params = {
        search: input,
        beginTime: Array.isArray(date) ? date[0] : '',
        endTime: Array.isArray(date) ? date[1] : '',
        showFlag: Number(isActive), //int	仅展示有效卡券 (1: 选中, 0/null: 未选择)
        currentPage,
        pageSize
      };
      getCouponList(params).then(res => {
        const { errorCode, message, result } = res || {};
        if (errorCode != 0) {
          this.$message.error(message);
          return;
        }
        this.tableData = result.result || [];
        this.pager.total = result.totalCount || 0;
      });
    },
    onSearch() {
      this.pager.currentPage = 1;
      this.getData();
    },
    onCurrentChange(currentPage) {
      this.pager.currentPage = currentPage;
      this.getData();
    },
    onSizeChange(pageSize) {
      this.pager.pageSize = pageSize;
      this.onSearch();
    },
    toCouponDetail(couponData) {
      this.$router.push(`/card/info/${couponData.coupCardId}`);
    },
    toGetList(couponData) {
      this.$router.push(`/card/record/get?coupCardId=${couponData.coupCardId}`);
    }
  }
};
</script>

<style lang="scss" scoped>
.check-active-card {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-left: 10px;
  width: 146px;
  height: 30px;
  border-radius: 2px;
  border: 1px solid #dcdfe6;
  &:hover {
    border-color: #c0c4cc;
  }
}
</style>
