<template>
  <div v-loading.body="showLoadingBody">
    <el-table :key='tableKey' :data="list" border fit highlight-current-row
              style="width: 100%">
      <el-table-column
        type="index"
        align="center" label="序号" width="65">
      </el-table-column>
      <el-table-column align="center" label="会员单号">
        <template slot-scope="scope">
          <span>{{scope.row.orderNo}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="下单用户">
        <template slot-scope="scope">
          <span>{{scope.row.realName}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="下单时间">
        <template slot-scope="scope">
          <span>{{scope.row.payTimeStr}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="订单金额">
        <template slot-scope="scope">
          <span>{{scope.row.orderAmount}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="总分红">
        <template slot-scope="scope">
          <span>{{scope.row.totalAmount}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="分红人数">
        <template slot-scope="scope">
          <span>{{scope.row.memberNum}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="分红人">
        <template slot-scope="scope">
          <span>{{oneRow.levelName}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="等级">
        <template slot-scope="scope">
          <span>{{scope.row.levelName}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="分红">
        <template slot-scope="scope">
          <span>{{scope.row.amount}}</span>
        </template>
      </el-table-column>
    </el-table>
    <div v-show="!listLoading" class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit"
                     layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>
    <div slot="footer" style="display:flex;justify-content: flex-end; margin-top:10px;">
      <el-button @click="cancel">关 闭</el-button>
      <el-button type="primary" @click="handleExport">导 出</el-button>
    </div>
  </div>
</template>
<style>
  .el-date-editor .el-range-separator {
    width: auto !important;
  }
</style>
<script type="javascript">
  import {
    timestamp2Date
  } from 'utils/dateUtils';
  import {mapGetters} from 'vuex';
  import {getToken} from 'src/utils/auth';
  import {
    getAllRecord
  } from 'api/financialReports';
  import Element1 from "../admin/menu/components/element";
  import ElRow from "element-ui/packages/row/src/row";
  import ElCol from "element-ui/packages/col/src/col";

  export default {
    props: ['oneRow'],
    name: 'tourManage',
    components: {
      ElCol,
      ElRow,
      Element1
    },
    data() {
      return {
        BASE_API: process.env.BASE_API,
        showLoadingBody: false,
        list: [],
        total: 0,
        listQuery: {
          page: 1,
          limit: 20,
          userId: this.oneRow.userId
        },
        listLoading: true,
        tableKey: 0
      }
    },
    mounted() {
      this.getList();
    },
    computed: {
      ...mapGetters([
        'elements'
      ])
    },
    methods: {
      /**
       * 获取列表
       * */
      getList() {
        this.listLoading = true;
        getAllRecord(this.listQuery).then(response => {
          let totalCountRs = undefined;
          let listRs = undefined;
          if (!this.$utils.isEmpty(response.data.data) && this.$utils.isInteger(response.data.totalCount)) {
            listRs = response.data.data;
            totalCountRs = response.data.totalCount;
            listRs.map(function(item){
              item.payTimeStr = timestamp2Date(item.payTime);
            });
          }
          this.listLoading = false;
          this.list = listRs;
          this.total = totalCountRs;
        })
      },
      /**
       * 导出
       */
      handleExport() {
        var url =
          this.BASE_API + "/api/admin/memberShareRecord/export";
        var params = this.listQuery;
        for (var c in params) {
          if (!params[c]) {
            delete params[c];
          }
          if (c == "page") {
            delete params[c];
          }
          if (c == "limit") {
            delete params[c];
          }
        }
        console.log(params);
        let paramsArray = [];
        //拼接参数
        Object.keys(params).forEach((key) =>
          paramsArray.push(key + "=" + params[key])
        );
        if (url.search(/\?/) === -1) {
          url += "?" + paramsArray.join("&");
        } else {
          url += "&" + paramsArray.join("&");
        }
        console.log(url);
        this.exportExcel(url);
      },

      exportExcel(excelUrl) {
        fetch(excelUrl, {
          headers: {
            "Content-type": "application/json;charset=UTF-8",
            "Authorization": getToken()
          },
        }).then((res) =>
          res.blob().then((blob) => {
            var filename = `分红明细.xlsx`;
            if (window.navigator.msSaveOrOpenBlob) {
              navigator.msSaveBlob(blob, filename); //兼容ie10
            } else {
              var a = document.createElement("a");
              document.body.appendChild(a); //兼容火狐，将a标签添加到body当中
              var url = window.URL.createObjectURL(blob); // 获取 blob 本地文件连接 (blob 为纯二进制对象，不能够直接保存到磁盘上)
              a.href = url;
              a.download = filename;
              a.target = "_blank"; // a标签增加target属性
              a.click();
              a.remove(); //移除a标签
              window.URL.revokeObjectURL(url);
            }
          })
        );
      },

      /**
       * 搜索
       */
      handleFilter() {
        this.listQuery.page = 1;
        if(this.dateList) {
          this.listQuery.startDate = this.dateList[0]
          this.listQuery.endDate = this.dateList[1]
        }
        this.$refs.queryForm.validate(valid => {
          if (valid) {
            this.getList();
          } else {
            return false;
          }
        });
      },
      handleSizeChange(val) {
        this.listQuery.limit = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.listQuery.page = val;
        this.getList();
      },
      cancel(){
        this.$emit('oneDialogEvent', false)
      }
    }
  }
</script>
