<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-11-12 11:02:27
 * @LastEditors: 无尘
 * @LastEditTime: 2019-11-15 14:06:02
 -->
<template>
  <div class="inviter-log common-wrap">
    <nav-crumb :navpath="navpath"></nav-crumb>
    <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="" alt="" /></div>

          <div class="inviter-data-name text-center font-14 color-606266">-123-</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">20</div>
              </li>
              <li class="flex-1">
                <div class="font-14 color-606266">积分收益</div>
                <div class="font-20 color-303133 m-t-10">20</div>
              </li>
              <li class="flex-1">
                <div class="font-14 color-606266">卡券收益</div>
                <div class="font-20 color-303133 m-t-10">20</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"><i class="iconfont icon-icon_yunxiazai"></i> 导出数据</el-button>
          </div>
        </div>
        <div class="inviter-log-tables m-t-20">
          <invite-log v-if="tabName == 'invite'"></invite-log>
          <point-log v-if="tabName == 'point'"></point-log>
          <card-log v-if="tabName == 'card'"></card-log>
        </div>
      </div>
    </div>
    <vue-gic-footer></vue-gic-footer>
  </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 navCrumb from '@/components/nav/nav.vue';
import { getRequest } from '@/api/api';
import errMsg from '@/common/js/error';
export default {
  name: 'invite-table',
  data() {
    return {
      tabName: 'invite',
      // 面包屑参数
      navpath: [
        {
          name: '分享有礼',
          path: `/shareIndex`
          /*relocation: true */
        },
        {
          name: '邀请人日志'
          /*relocation: true */
        }
      ]
    };
  },
  components: {
    navCrumb,
    inviteLog,
    pointLog,
    cardLog
  },
  methods: {
    /**
     * 分页---页码变化
     */
    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,
        pageNum: that.currentPage,
        pageSize: that.pageSize,
      };
      getRequest('/haoban-app-member-web/customer/find_message_list', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            that.tableData = resData.result.list || [];
            that.total = resData.result.total;
            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>
.inviter-log {
  width: 100%;
  .inviter-data {
    width: 100%;
    height: 290px;
    .inviter-data-img {
      width: 100px;
      height: 100px;
      margin: 0 auto;
      img {
        max-width: 100px;
        max-height: 100px;
      }
    }
    .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>
