
<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <el-form ref="queryForm" :model="listQuery" label-width="100px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="统计时间:">
              <el-date-picker
                v-model="listQuery.time"
                type="daterange"
                range-separator="-"
                value-format="timestamp"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="changeTime"
                placeholder="请选择统计时间"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="统计方式:" class="wayMsg">
							<span
                v-for="(item,index) in way"
                :key="index"
                :class="{active:isactive==item.label}"
                @click="changeWay(item)"
              >{{item.label}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="5" style="float:right;text-align:right">
            <el-button class="filter-item" type="primary" v-waves @click="handleFilter">导出为Excel</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-table :data="list" border fit highlight-current-row v-loading="loading">
        <el-table-column align="center" label="统计时间">
          <template slot-scope="scope">
            <span>{{scope.row.date}}</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.userNum}}</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>

      <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"
        style="margin-top:20px"
      ></el-pagination>
    </div>
  </div>
</template>
<script type="javascript">
  import { memberShareCountRecord } from 'api/financialReports'
  import {getToken} from 'utils/auth';
  export default {
    data() {
      return {
        BASE_API: process.env.BASE_API,
        loading: false,
        total: null,
        list: [],
        scrollTop: '',
        // 统计时间筛选
        listQuery: {
          type: '1',
          startDate: null,
          endDate: null,
          time: '',
          limit: 10,
          page: 1
        },
        //统计方式筛选
        way: [
          {
            label: '日统计',
            id: '1'
          },
          {
            label: '月统计',
            id: '2'
          },
          {
            label: '年统计',
            id: '3'
          }
        ],
        isactive: '日统计'
      }
    },
    created() {
      this.getList()
    },
    methods: {
      //统计时间筛选
      changeTime() {
        if(this.listQuery.time){
          !!this.listQuery.time[0]
            ? (this.listQuery.startDate = this.listQuery.time[0])
            : (this.listQuery.startDate = null)
          !!this.listQuery.time[1]
            ? (this.listQuery.endDate = this.listQuery.time[1])
            : (this.listQuery.endDate = null)
        } else {
          this.listQuery.endDate = undefined
          this.listQuery.startDate = undefined
        }
        this.listQuery.page = 1
        this.getList()
      },
      //统计方式筛选
      changeWay(val) {
        this.isactive = val.label
        this.listQuery.type = val.id
        this.listQuery.page = 1
        this.getList()
      },
      /**
       * 导出
       */
      handleFilter() {
        var url =  this.BASE_API + "/api/admin/memberShareRecord/exportCountRecordList";
        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];
          }
          if (c == "time") {
            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: {
            "Authorization": getToken(),
            "Content-type": "application/json;charset=UTF-8"
          },
        }).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);
            }
          })
        );
      },
      handleSizeChange(val) {
        this.listQuery.limit = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.listQuery.page = val
        this.getList()
      },
      // 数组去重
      repeat(json){
        try{
          let newJson = [];
          for(var i = 0;i < json.length; i++){
            let flag = true;
            for(var j = 0; j < newJson.length; j++){
              if(newJson[j].tname == json[i].tname) {
                flag = false;
              }
            }
            if(flag){ //判断是否重复
              newJson.push(json[i]);
            }
          }
          return newJson
        } catch(err){
          console.log(err)
        }
      },
      //列表
      getList() {
        let _this = this
        let params = {
          type: this.listQuery.type,
          startDate: this.listQuery.startDate,
          endDate: this.listQuery.endDate,
          page: this.listQuery.page,
          limit: this.listQuery.limit
        }
        this.loading = true
        memberShareCountRecord(params).then(data => {
          if (data.status == 200) {
            this.total = data.data.total
            this.list = data.data.data
          }
          setTimeout(() => {
            this.loading = false
          }, 300)
          document.documentElement.scrollTop = 0
        })
      }
    }
  }
</script>
<style>
  .wayMsg span {
    margin: 10px;
    cursor: pointer;
  }
  .active {
    color: #409eff;
    font-weight: bold;
  }
</style>
