<template>
  <div class="app-container calendar-list-container" v-loading.body="showLoadingBody">
    <div class="filter-container" ref="filter-container">
      <el-form ref="queryForm" :inline="inline" :model="listQuery" label-width="100px" class="ulti-form">
        <el-row>
          <el-col :span="8">
            <el-form-item label="姓名">
              <el-input v-model.number="listQuery.name" placeholder="请输入姓名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="时间">
              <el-date-picker
                v-model="dateList"
                type="monthrange"
                value-format="yyyy-MM"
                range-separator="至"
                start-placeholder="开始月份"
                end-placeholder="结束月份">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-button class="filter-item" type="primary" v-waves @click="handleFilter">搜索</el-button>
      <el-button class="filter-item" style="margin-left: 10px;" @click="handleClean" >清除搜索</el-button>
      <el-button class="filter-item" style="margin-left: 10px;" @click="handleExport" >导出</el-button>
    </div>
    <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.countMonth}}</span>
        </template>
      </el-table-column>

      <el-table-column width="300" align="center" label="会员">
        <template slot-scope="scope">
          <span>{{scope.row.realName}}</span>
        </template>
      </el-table-column>

      <el-table-column width="200" 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-column align="center" width="150" label="操作">
        <template slot-scope="scope">
          <el-button size="small"  class="el-button el-button--text el-button--small" @click="handleSee(scope.row)">查看明细</el-button>
        </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>
    <el-dialog :visible.sync="oneDialogVisible" title="分红明细">
      <one-dividend :one-row="oneRow"  v-on:oneDialogEvent="oneDialogEvent" ></one-dividend>
    </el-dialog>
  </div>
</template>
<style>
  .el-date-editor .el-range-separator {
    width: auto !important;
  }
</style>
<script type="javascript">
  import {mapGetters} from 'vuex';
  import {
    getToken
  } from 'utils/auth';
  import {
    financialList
  } from 'api/financialReports';
  import oneDividend from "./oneDividend";
  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 {
    name: 'tourManage',
    components: {
      ElCol,
      ElRow,
      Element1,
      oneDividend
    },
    data() {
      return {
        BASE_API: process.env.BASE_API,
        oneDialogVisible: false,//查看明细
        showLoadingBody: false,
        oneRow: {},
        list: [],
        total: 0,
        listLoading: true,
        listQuery: {
          page: 1,
          limit: 20,
          startDate: undefined,
          endDate: undefined,
          name: '' // 姓名
        },
        dateList: '',
        inline: true,
        tableKey: 0
      }
    },
    created() {
      this.getList();
    },
    computed: {
      ...mapGetters([
        'elements'
      ])
    },
    methods: {
      /**
       * 查看明细
       * */
      handleSee(row) {
        this.oneRow = row;
        this.oneDialogVisible = true;
      },
      /**
       * 旅游modal传递回来的数据
       * */
      oneDialogEvent(e){
        this.oneDialogVisible = false;
      },
      /**
       * 获取列表
       * */
      getList() {
        this.listLoading = true;
        financialList(this.listQuery).then(response => {
          let totalCountRs = 0;
          let listRs = [];
          if (!this.$utils.isEmpty(response.data.data) && this.$utils.isInteger(response.data.totalCount)) {
            listRs = response.data.data;
            totalCountRs = response.data.totalCount;
          }
          this.listLoading = false;
          this.list = listRs;
          this.total = totalCountRs;
        })

      },

      /**
       * 清除搜索
       */
      handleClean(){
        this.listQuery = {
          page: 1,
          limit: 20,
          startDate: undefined,
          endDate: undefined,
          name: '' // 姓名
        }
        this.dateList = ''
        this.getList()
      },
      /**
       * 导出
       */
      handleExport() {
        var url =
          this.BASE_API + "/api/admin/memberShareCountRecord/export";
        if(this.dateList) {
          this.listQuery.startDate = this.dateList[0]
          this.listQuery.endDate = this.dateList[1]
        }
        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: {
            "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);
            }
          })
        );
      },

      /**
       * 搜索
       */
      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();
      }
    }
  }
</script>
