<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-11-15 10:10:08
 * @LastEditors: 无尘
 * @LastEditTime: 2019-11-27 20:33:15
 -->

<template>
  <div class="data-detail common-wrap">
    <nav-crumb :navpath="navpath"></nav-crumb>
    <div class="right-content border-box">
      <div class="right-box border-box">
        <div class="data-detail-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="invited">受邀人列表</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="data-detail-table">
          <invite-table v-if="tabName == 'invite'"></invite-table>
          <invited-table v-if="tabName == 'invited'"></invited-table>
        </div>
      </div>
    </div>
    <vue-gic-footer></vue-gic-footer>
  </div>
</template>
<script>
import navCrumb from '@/components/nav/nav.vue';
import inviteTable from '@/components/data-details/invite-table.vue';
import invitedTable from '@/components/data-details/invited-table.vue';
import { postExcel } from '@/api/api';
import errMsg from '@/common/js/error';
// import showMsg from '@/common/js/showmsg';
export default {
  name: 'dataDetail',
  components: {
    navCrumb,
    inviteTable,
    invitedTable
  },
  data() {
    return {
      tabName: 'invite',
      // 面包屑参数
      navpath: [
        {
          name: '分享有礼',
          path: `/shareIndex`
          /*relocation: true */
        },
        {
          name: '数据明细'
          /*relocation: true */
        }
      ]
    };
  },
  methods: {
    /**
     * 导出数据
     */
    exportData() {
      const that = this;
      let para = {
        activityId: that.$route.query.activityId
      };
      postExcel('/sharing-core-web/export-activity-invite', para)
        .then(res => {
          if (!res.data) {
            errMsg.errorMsg('暂无数据');
            return false;
          }
          // let resData = res.data;
          const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' });
          const fileName = `报表.csv`;
          const elink = document.createElement('a');
          elink.download = fileName;
          elink.style.display = 'none';
          elink.href = URL.createObjectURL(blob);
          document.body.appendChild(elink);
          elink.click();
          URL.revokeObjectURL(elink.href); // 释放URL 对象
          document.body.removeChild(elink);
          // errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    }
  }
};
</script>
<style lang="less" scoped>
.data-detail {
  width: 100%;
  .data-detail-tab {
    width: 100%;
    height: 32px;
  }
  .data-detail-table {
    margin-top: 20px;
  }
}
</style>
