<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-11-12 11:02:27
 * @LastEditors: 无尘
 * @LastEditTime: 2019-12-16 13:52:15
 -->
<template>
  <div class="inviter-log common-wrap">
    <div class="right-content border-box">
      <div class="right-box border-box">
        <div class="inviter-data">
          <div class="inviter-data-img flex flex-align-center flex-pack-center"><img
              :src="inviterData.headUrl"
              alt=""
            /></div>

          <div class="inviter-data-name text-center font-14 color-606266">-{{!!inviterData.realName ? inviterData.realName: inviterData.nickName}}-</div>
          <div class="inviter-data-datas">
            <ul class="inviter-data-wrap flex">
              <li class="flex-1">
                <div class="font-14 color-606266">邀请人数</div>
                <div class="font-20 color-303133 m-t-10">{{inviterData.totalTransPersonNum | formatThousand}}</div>
              </li>
              <li class="flex-1">
                <div class="font-14 color-606266">积分收益</div>
                <div class="font-20 color-303133 m-t-10">{{inviterData.sumPoints | formatThousand}}</div>
              </li>
              <li class="flex-1">
                <div class="font-14 color-606266">卡券收益</div>
                <div class="font-20 color-303133 m-t-10">{{inviterData.sumCardNum | formatThousand}}</div>
              </li>
            </ul>
          </div>
        </div>
        <div class="inviter-log-tab flex flex-space-between">
          <div class="data-detail-radios">
            <el-radio-group
              v-model="tabName"
              style="margin-bottom: 30px;"
            >
              <el-radio-button label="invite">邀请日志</el-radio-button>
              <el-radio-button label="point">积分收益明细</el-radio-button>
              <el-radio-button label="card">卡券收益明细</el-radio-button>
            </el-radio-group>
          </div>
          <div class="data-detail-export">
            <el-button
              type="primary"
              @click="exportData"
            ><i class="iconfont icon-icon_yunxiazai"></i> 导出数据</el-button>
          </div>
        </div>
        <div class="inviter-log-tables m-t-20">
          <invite-log
            ref="inviteTable"
            v-if="tabName == 'invite'"
          ></invite-log>
          <point-log
            ref="pointTable"
            v-if="tabName == 'point'"
          ></point-log>
          <card-log
            ref="cardTable"
            v-if="tabName == 'card'"
          ></card-log>
        </div>
      </div>
    </div>
    <!-- <vue-gic-footer></vue-gic-footer> -->
    <vue-gic-export-excel
      :dataArr="tableData"
      :dialogVisible.sync="dialogVisible"
      :projectName="projectName"
      :type="2"
      :excelUrl="excelUrl"
      :params="params"
    >
    </vue-gic-export-excel>
  </div>
</template>
<script>
import pointLog from '@/components/data-details/point-log.vue';
import cardLog from '@/components/data-details/card-log.vue';
import inviteLog from '@/components/data-details/invite-log.vue';
// import exportExcel from '@/components/export-excel'
import { getRequest } from '@/api/api';
import errMsg from '@/common/js/error';
export default {
  name: 'invite-table',
  data() {
    return {
      tabName: this.$route.query.tabName,
      // 面包屑参数
      navpath: [
        {
          name: '分享有礼',
          path: `/shareIndex`
          /*relocation: true */
        },
        {
          name: '邀请人日志'
          /*relocation: true */
        }
      ],
      inviterData: {
        nickName: '',
        realName: '',
        headUrl: '',
        totalTransPersonNum: '',
        sumCardNum: '',
        sumPoints: ''
      },
      tableData: [],
      dialogVisible: false,
      excelUrl: '/sharing-core-web/export-log',
      params: {
        activityId: this.$route.query.activityId,
        isExportInvited: this.tabName == 'invite'? false : true,
        requestProject: 'share-config',
      },
      projectName: 'share-config'
    };
  },
  components: {
    inviteLog,
    pointLog,
    cardLog,
    // exportExcel
  },
  methods: {
    /**
     * 导出数据
     */
    exportData() {
      const that = this;
      that.dialogVisible = true;
      that.tableData = that.tabName == 'invite'? that.$refs.inviteTable.tableData: that.tabName == 'point'? that.$refs.pointTable.tableData : that.$refs.cardTable.tableData;

      if (that.tabName == 'invite') {
        that.excelUrl = '/sharing-core-web/export';
        that.params = {
          activityId: that.$route.query.activityId,
          isExportInvited: true,
          requestProject: 'share-config',
          inviteOpenId: that.$route.query.inviteOpenId
        };
      }else {
        that.excelUrl = '/sharing-core-web/export-log';
        that.params = {
          activityId: that.$route.query.activityId,
          awardType: that.tabName == 'point'? 1: 2,
          inviteOpenId: that.$route.query.inviteOpenId,
          requestProject: 'share-config'
        }
      }
    },
    /**
     * 分页---页码变化
     */
    handleSizeChange(val) {
      const that = this;
      that.pageSize = val;
      that.getTableList();
    },

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

    /**
     * 获取数据
     */
    getInviterData() {
      const that = this;
      let para = {
        activityId: that.$route.query.activityId,
        inviteOpenId: that.$route.query.inviteOpenId
      };
      getRequest('/sharing-core-web/get-activity-invite', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            that.inviterData = resData.result || {
              nickName: '',
              realName: '',
              headUrl: '',
              totalTransPersonNum: '',
              sumCardNum: '',
              sumPoints: ''
            };
            return false;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 2500,
            message: error.message
          });
        });
    }
  },
  mounted() {
    const that = this;
    that.getInviterData();
    that.tabName = that.$route.query.tabName;
  },
};
</script>
<style lang="less" scoped>
.inviter-log {
  width: 100%;
  .inviter-data {
    width: 100%;
    height: 290px;
    .inviter-data-img {
      width: 100px;
      height: 100px;
      margin: 0 auto;
      border-radius: 50%;
      img {
        max-width: 100px;
        max-height: 100px;
        border-radius: 50%;
      }
    }
    .inviter-data-name {
      margin-top: 10px;
    }
    .inviter-data-datas {
      width: 100%;
      .inviter-data-wrap {
        width: 50%;
        margin: 27px auto 0 auto;
        li {
          width: 33.333333%;
          padding-left: 14%;
        }
      }
    }
  }
  .inviter-log-tab {
    height: 32px;
  }
}
</style>
