<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-11-15 10:10:08
 * @LastEditors: 无尘
 * @LastEditTime: 2019-12-15 14:14:17
 -->
<!--
<invite-table></invite-table>

import inviteTable from '@/components/data-details/invite-table.vue';
-->
<template>
  <div class="invite-table">
    <el-table
      class="select-table"
      ref="multipleTable"
      :data="tableData"
       v-loading="loading"
      tooltip-effect="dark"
      :style="{ width: '100%' }"
      @sort-change='sortColumn'
    >
      <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="createTime"
        label="参与时间"
        show-overflow-tooltip
        sortable='custom'
      >
        <template slot-scope="scope">
          <div class="cell">
            <div>{{ scope.row.createTime | timeStampToYmd }}</div>
            <div>{{ scope.row.createTime | timeStampToHms }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="totalTransPersonNum"
        label="邀请人数"
        show-overflow-tooltip
        sortable='custom'
      >
        <template slot-scope="scope">
          <div
            class="cell cursor-pointer color-2F54EB"
            @click="toLog('invite',scope.row)"
          >{{ scope.row.totalTransPersonNum || '--' }}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="sumPoints"
        label="积分收益"
        show-overflow-tooltip
        sortable='custom'
      >
        <template slot-scope="scope">
          <div
            class="cell cursor-pointer color-2F54EB"
            @click="toLog('point',scope.row)"
          >{{ scope.row.sumPoints || '--' }}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="sumCardNum"
        label="卡券收益"
        show-overflow-tooltip
        sortable='custom'
      >
        <template slot-scope="scope">
          <div
            class="cell cursor-pointer color-2F54EB"
            @click="toLog('card',scope.row)"
          >{{ scope.row.sumCardNum }}</div>
        </template>
      </el-table-column>
    </el-table>
    <div
      class="block common-wrap__page text-right m-t-24"
      v-if="tableData.length != 0"
    >
      <dm-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"
      > </dm-pagination>
    </div>
  </div>
</template>
<script>
import { getRequest } from '@/api/api';
import errMsg from '@/common/js/error';
export default {
  name: 'invite-table',
  data() {
    return {
      // 分页参数
      tableData: [],
      currentPage: 1,
      pageSize: 20,
      total: 0,
      createTimeSort: '1',
      totalTransPersonNumSort: '',
      sumPointsSort: '',
      sumCardNumSort: '',
      loading: false
    };
  },
  methods: {
    /**
     * 跳转日志
     */
    toLog(tabName,row) {
      const that = this;
      that.$router.push(`/inviterLog?activityId=${that.$route.query.activityId}&inviteOpenId=${row.openId}&tabName=${tabName}`)
    },
    /**
     * sort
     */
    sortColumn(column) {
      const that = this;
      if(column.prop == 'createTime'){
        that.createTimeSort = column.order== "descending" ? 1 :0;
        that.totalTransPersonNumSort = '';
        that.sumPointsSort ='';
        that.sumCardNumSort = '';
        that.getTableList();
      }
      if(column.prop == 'totalTransPersonNum'){
        that.createTimeSort = '';
        that.totalTransPersonNumSort = column.order== "descending"? 1 : 0;
        that.sumPointsSort ='';
        that.sumCardNumSort = '';
        that.getTableList();
      }
      if(column.prop == 'sumPoints'){
        that.createTimeSort = '';
        that.totalTransPersonNumSort = '';
        that.sumPointsSort = column.order== "descending"? 1 : 0;
        that.sumCardNumSort = '';
        that.getTableList();
      }
      if(column.prop == 'sumCardNum'){
        that.createTimeSort = '';
        that.totalTransPersonNumSort = '';
        that.sumPointsSort ='';
        that.sumCardNumSort = column.order== "descending"? 1 : 0;
        that.getTableList();
      }
    },
    /**
     * 分页---页码变化
     */
    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 = {
        activityId: that.$route.query.activityId,
        pageNum: that.currentPage,
        pageSize: that.pageSize,
        createTimeSort: that.createTimeSort,
        totalTransPersonNumSort: that.totalTransPersonNumSort ,
        sumPointsSort: that.sumPointsSort,
        sumCardNumSort: that.sumCardNumSort
      };
      this.loading=true;
      getRequest('/sharing-core-web/page-activity-invite', 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: 2500,
            message: error.message
          });
        }).finally(()=>{
          this.loading=false
        })
    }
  },
  mounted() {
    const that = this;
    that.getTableList();
  },
};
</script>
<style lang="less" scoped>
.invite-table {
  width: 100%;
  .cell {
    img {
      width: 40px;
      height: 40px;
    }
  }
}
</style>
