<template>
  <div class="marking-logs" v-loading="loading">
    <header>
      <div>
        <el-select v-model="listParams.module" placeholder="来源模块" @change="moduleChange" clearable>
          <el-option v-for="(item, i) in moduleList" :key="i" :label="item" :value="i"></el-option>
        </el-select>

        <el-input
          type="text"
          placeholder="请输入来源明细"
          prefix-icon="el-icon-search"
          style="width: 180px;margin-right:10px"
          v-model.trim="listParams.detail"
          clearable
          @change="refresh">
        </el-input>

        <!-- <el-select v-model="listParams.type" placeholder="营销类型" @change="refresh" clearable>
          <el-option label="短信" value="sms"></el-option>
          <el-option label="微信客服接口" value="wx_custom_send"></el-option>
          <el-option label="微信群发接口" value="wx_mass_send"></el-option>
          <el-option label="微信模板消息" value="wx_tmpl"></el-option>
        </el-select> -->

        <el-date-picker
          v-model="listParams.sDate"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          @change="refresh"
          clearable>
        </el-date-picker>

        <el-input
          type="text"
          placeholder="请输入卡券名称/卡券代码/用户信息"
          prefix-icon="el-icon-search"
          style="width: 280px"
          v-model.trim="listParams.input"
          clearable
          @change="refresh">
        </el-input>
      </div>
    </header>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column show-overflow-tooltip prop="failLogId" label="日志id"></el-table-column>
      <el-table-column show-overflow-tooltip prop="appName" label="来源模块"></el-table-column>
      <el-table-column show-overflow-tooltip prop="appActivityName" label="来源明细"></el-table-column>

      <el-table-column show-overflow-tooltip label="发放时间">
        <template slot-scope="{row}">
          <div v-html="listTime(row.createTime)"></div>
        </template>
      </el-table-column>

      <el-table-column show-overflow-tooltip label="会员信息" min-width="180">
        <template slot-scope="{row}">
          <member-info :member-name="row.memberName" :member-image="row.memberImage" :member-phone="row.memberPhone"></member-info>
        </template>
      </el-table-column>

      <el-table-column show-overflow-tooltip label="卡券类型">
        <template slot-scope="{row}">
          {{ [ '抵金券', '折扣券', '兑换券' ][row.cardType] }}
        </template>
      </el-table-column>

      <el-table-column show-overflow-tooltip prop="cardName" label="卡券名称"></el-table-column>
      <el-table-column show-overflow-tooltip label="发放状态"><span>失败</span></el-table-column>
      <el-table-column show-overflow-tooltip prop="errorMsg" label="备注"></el-table-column>
    </el-table>

    <dm-pagination
      v-if="listParams.total > 0"
      :total="listParams.total"
      :page-sizes="listParams.pageSizes"
      :page-size="listParams.pageSize"
      :current-page="listParams.currentPage"
      background
      layout="total,sizes,prev,pager,next"
      style="text-align: right"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange">
    </dm-pagination>
  </div>
</template>
<script>
import { page, formate } from '@/mixins/table.js';
import { listTime } from '@/utils/index.js';
import fetch from '@/api/gic-card.js';
const { getCouponSendFailLogList, getMarketAppcodes } = fetch;

export default {
  name: 'MarkingLogs',
  mixins: [ page, formate ],
  data() {
    return {
      loading: false,
      listParams: {
        module: '',
        detail: '',
        type: '',
        sDate: '',
        input: '',
        total: 0,
        pageSizes: [ 20, 40, 60, 80 ],
        pageSize: 20,
        currentPage: 1
      },
      moduleList: [],
      tableData: [],
    };
  },
  created() {
    this.$emit('updateBread', [  { breadName: '福利中心'  }, { breadName: 'GIC卡券' }, { breadName: '卡券日志' }, { breadName: '卡券发放失败日志' } ]);
    this.getTableList();
    this.getMarketAppcodes();
  },
  methods: {
    listTime,
    getTableList() {
      if(this.loading) {
        return;
      }
      this.loading = true;
      const { module, detail, sDate, input, currentPage, pageSize } = this.listParams;
      let params = {
        appCode: module,
        appActivityName: detail,
        beginTime: sDate ? sDate[0] : undefined,
        endTime: sDate ? sDate[1] : undefined,
        memberCardId: this.currentAreaId,
        search: input,
        currentPage,
        pageSize
      };
      getCouponSendFailLogList(params).then(res => {
        const { result, totalCount } = res.result || {};
        this.tableData = result || [];
        this.listParams.total = totalCount;
      }).finally(_ => this.loading = false);
    },
    getMarketAppcodes() {
      getMarketAppcodes().then(res => {
        this.moduleList = res.result || {};
      });
    },
    moduleChange() {
      this.listParams.detail = '';
      this.refresh();
    }
  }
};
</script>
<style lang="scss">
.marking-logs {
  padding: 20px;
  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    .el-select {
      width: 140px;
      margin-right: 10px;
    }
    .el-date-editor {
      width: 320px;
      margin-right: 10px;
    }
  }
}
</style>