<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-11-15 10:10:08
 * @LastEditors  : 无尘
 * @LastEditTime : 2020-01-08 15:47:12
 -->
<!--
<card-log></card-log>

import cardLog from '@/components/data-details/card-log.vue';
-->
<template>
  <div class="card-log">
    <el-table
      class="select-table"
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      :style="{ width: '100%', minHeight: tableH }"
    >
      <el-table-column
        prop=""
        label="奖励时间"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <div class="cell">
            <div>{{ scope.row.awardTime | timeStampToYmd }}</div>
            <div>{{ scope.row.awardTime | timeStampToHms }}</div>
          </div>
        </template>
      </el-table-column>

      <el-table-column
        prop=""
        label="奖励来源"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <div class="cell">
            <div>
              <!-- <span v-if="scope.row.awardProgram == 1">即时奖励{{scope.row.awardStatus == 2? '（退款追扣）' : ''}}</span>
              <span v-if="scope.row.awardProgram == 2">闯关奖励</span> -->
              <span>{{scope.row.competitionName}}</span>
            </div>
            <!-- <div v-if="scope.row.awardProgram == 1">{{stepObj[scope.row.transType]}}</div> -->
            <div>{{scope.row.awardDetail }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="受邀人信息"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <div class="cell flex flex-align-center">
            <img
              :src="scope.row.headUrl"
              alt=""
            /><span class="font-14 color-606266 p-l-10">{{ scope.row.nickName || '--' }}/{{scope.row.realName || '--'}}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop=""
        label="奖励内容"
        show-overflow-tooltip
      >
        <template slot-scope="scope">{{ scope.row.awardCardName || '--' }}</template>
      </el-table-column>
    </el-table>
    <div
      class="block common-wrap__page text-right m-t-24"
      v-if="tableData.length != 0"
    >
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[20, 40, 60, 80]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      > </el-pagination>
    </div>
  </div>
</template>
<script>
import { getRequest } from '@/api/api';
import errMsg from '@/common/js/error';
export default {
  name: 'card-log',
  data() {
    return {
      // 分页参数
      tableData: [],
      currentPage: 1,
      pageSize: 20,
      total: 0,
      stepObj: {
        '1': '服务号关注',// 1服务号关注，2活动营销页访问奖励，3会员认证奖励，4游戏参与奖励，5卡券领取奖励6，消费奖励
        '2': '访问活动营销页',
        '3': '会员认证',
        '4': '游戏参与',
        '5': '卡券领取',
        '6': '消费'
      },

    };
  },
  methods: {
    /**
     * 分页---页码变化
     */
    handleSizeChange(val) {
      const that = this;
      that.pageSize = val;
      that.getTableList();
    },

    /**
     * 分页---当前页变化
     */
    handleCurrentChange(val) {
      const that = this;
      that.currentPage = val;
      that.getTableList();
    },

    /**
     * 获取列表数据
     */
    getTableList() {
      const that = this;
      let para = {
        inviteOpenId: that.$route.query.inviteOpenId,
        activityId: that.$route.query.activityId,
        pageNum: that.currentPage,
        pageSize: that.pageSize,
        awardType: 2
      };
      getRequest('/sharing-core-web/page-activity-invited-log', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            that.tableData = resData.result.result || [];
            that.total = resData.result.totalCount;
            return false;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    }
  },
  mounted() {
    const that = this;
    that.getTableList();
  },
};
</script>
<style lang="less" scoped>
.card-log {
  width: 100%;
  .cell {
    img {
      width: 40px;
      height: 40px;
    }
  }
}
</style>
