<template>
  <div class="commissionDetails-box">
    <div class="query-box">
      <ul>
        <li>
          <input type="button" class="normalBtn" value="导出" @click="exportExcel">
        </li>
      </ul>
    </div>
    <v-table
      v-if="isReady"
      is-horizontal-resize
      column-width-drag
      style="width:100%"
      :columns="columns"
      :table-data="dataList"
      :filter-method="filterMethod"
      :total="total"
      :pageSize="msg.pageSize"
      :pageIndex="msg.pageIndex"
      :handleCurrentChange="handleCurrentChange"
      :multiple-sort="multipleSort"
      :is-loading="loading"
      sort-always
      @sort-change="sortChange"
      @on-custom-comp="customCompFunc"
    ></v-table>
    <div style="height:20px;"> </div>
  </div>
</template>
<script>
import Vue from 'vue'
import XLSX from 'xlsx'
var FileSaver = require('file-saver')
export default {
  data() {
    return {
      activeName: "first",
      commonName: "姓名",
      loading: false,
      msg: {
        pageIndex: 1,
        pageSize: 20,
        ParentId: 0,
        OrderStr: "RB_Branch_Id asc",
        BName:-1
      },
      total: 0,
      currentPage: 1,
      columns: [],
      remoteLoading: false,
      total: 0,
      dataList: [],
      isReady: false,
      multipleSort: false,
      loading: true,
      CompanyList:[],
      dataListTwo: [],
      stringPerons:''
    };
  },
  methods: {
    exportExcel(){
      const defaultCellStyle =  {'!cols': [{wpx: 60}, {wpx: 200}, {wpx: 60}, {wpx: 150},{wpx:60}]};
      const wopts = { bookType:'xlsx', bookSST:false, type:'binary', defaultCellStyle: defaultCellStyle, showGridLines: true};
      const wb = { SheetNames: ['提成统计'], Sheets: {}, Props: {} }; 
      let data = []
      this.dataList.forEach(x=>{
        let obj={
          '公司':x.bName,
          '部门':x.departmentName,
          '员工':x.createByStr,
          '提成金额':x.commissionMoney.toFixed(2),
          '额外奖励':x.otherMoney.toFixed(2),
          '额外扣除':x.backMoney.toFixed(2),
          '应发提成':x.sumMoney.toFixed(2),
          '收客数':x.peopleCount,
          '单签证人数':x.visaPeopleCount,
          '所属期数':x.periods
        }
        data.push(obj)
      })
      wb.Sheets['提成统计'] = XLSX.utils.json_to_sheet(data)
      
      //创建二进制对象写入转换好的字节流
      let tmpDown =  new Blob([this.s2ab(XLSX.write(wb, wopts))], { type: "application/octet-stream" })
      FileSaver.saveAs(tmpDown, "提成统计.xls");
    },
    s2ab (s) {
      if (typeof ArrayBuffer !== 'undefined') {  
        var buf = new ArrayBuffer(s.length);  
        var view = new Uint8Array(buf);  
        for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;  
        return buf;  
      } else {  
        var buf = new Array(s.length);  
        for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;  
        return buf;
      }
    },
    filterMethod(filters){
      console.log("filter", filters);
      let data = JSON.parse(JSON.stringify(this.dataListTwo))
      let dataListTwo = JSON.parse(JSON.stringify(this.dataListTwo))
      if (filters.bName!='' && filters.bName!='__all__'){
        data = data.filter(item => item.bName.indexOf(filters.bName)!=-1);
      }
      if (filters.departmentName!=''){
        data = data.filter(item => item.departmentName.indexOf(filters.departmentName)!=-1);
      }
      if (filters.createByStr!=''){
        data = data.filter(item => item.createByStr.indexOf(filters.createByStr)!=-1);
      }
      if ((filters.bName === '' || filters.bName==='__all__') && filters.departmentName === '' && filters.createByStr === ''){
        data = dataListTwo
      }
      this.dataList = data
      console.log(data)
    },
    customCompFunc(params) {
      if (params.type === "see") {
        this.getInfo(params.data)
      } 
    },
    getCompanyList() {
      //获取公司列表
      this.apipost(
        "admin_get_BranchGetList",
        this.getCompanyMsg,
        res => {
          if (res.data.resultCode == 1) {
            let data = res.data.data;
            data.forEach(x => {
              x.disabled = false;
            });
            this.CompanyList = data;
            this.initColums();
          } else {
          }
        },
        err => {}
      );
    },
    initColums() {
      this.isReady = false;
      let that = this;
      let companyList = [];
      this.CompanyList.forEach(x => {
        let item = {};
        item.label = x.BName;
        item.value = x.BName;
        companyList.push(item);
      });
      console.log(companyList)
      let company = {
        field: "bName",
        title: "公司",
        width: 40,
        titleAlign: "left",
        columnAlign: "left",
        isResize: true,
        result: "",
        filterMultiple: false,
        filters: companyList,
        type: "select"
        // filterMultiple: false,
        // filters: companyList,
        // result: "",
        // type: "select",
        // orderBy: "asc"
        // isFrozen:true
      };
      let department = {
        field: "departmentName",
        title: "部门",
        width: 80,
        titleAlign: "left",
        columnAlign: "left",
        isResize: true,
        result: "",
        filterMultiple: false,
        filters: companyList,
        type: "text"
      };
      let userName = {
        field: "createByStr",
        title: "姓名",
        titleAlign: "left",
        columnAlign: "left",
        isResize: true,
        width: 80,
        result: "",
        filterMultiple: false,
        filters: [{}],
        type: "text"
      };
      let commissionMoney = {
        field: "commissionMoney",
        title: "提成金额",
        titleAlign: "left",
        columnAlign: "left",
        isResize: true,
        width: 80,
        orderBy: "",
        formatter: function(rowData, rowIndex, pagingIndex, field) {
          return `<span>${rowData.commissionMoney.toFixed(2)}</span>`
        }
      };
      let otherMoney = {
        field: "otherMoney",
        title: "额外奖励",
        titleAlign: "left",
        columnAlign: "left",
        isResize: true,
        width: 80,
        orderBy: "",
        formatter: function(rowData, rowIndex, pagingIndex, field) {
          return `<span>${rowData.otherMoney.toFixed(2)}</span>`
        }
      };
      let backMoney = {
        field: "backMoney",
        title: "额外扣除",
        titleAlign: "left",
        columnAlign: "left",
        isResize: true,
        width: 80,
        orderBy: "",
        formatter: function(rowData, rowIndex, pagingIndex, field) {
          return `<span>${rowData.backMoney.toFixed(2)}</span>`
        }
      };
      let sumMoney = {
        title: "应发提成",
        field: "sumMoney",
        titleAlign: "left",
        columnAlign: "left",
        isResize: true,
        width: 80,
        orderBy: "",
        formatter: function(rowData, rowIndex, pagingIndex, field) {
          return `<span style='color:red'>${(rowData.otherMoney+rowData.commissionMoney-rowData.backMoney).toFixed(2)}</span>`
        }
      };
      let peopleCount = {
        field: "peopleCount",
        title: "收客人数",
        titleAlign: "left",
        columnAlign: "left",
        isResize: true,
        width: 80,
        orderBy: "",
        formatter: function(rowData, rowIndex, pagingIndex, field) {
          return `<span style='color:blue'>${rowData.peopleCount+rowData.visaPeopleCount}人</span>`
        }
      };
      let visaPeopleCount = {
        field: "visaPeopleCount",
        title: "单签证人数",
        titleAlign: "left",
        columnAlign: "left",
        isResize: true,
        width: 80,
        formatter: function(rowData, rowIndex, pagingIndex, field) {
          if(rowData.visaPeopleCount>0)
            return `<span style='color:orange'>${rowData.visaPeopleCount}人</span>`
          else
            return ''
        }
      };
      let periods = {
        field: "periods",
        title: "期数",
        titleAlign: "left",
        columnAlign: "left",
        isResize: true,
        width: 80,
        formatter: function(rowData, rowIndex, pagingIndex, field) {
          if(rowData.periods!=that.stringPerons)
            return `<div style='height:40px;line-height:40px;color:#f1f1f1;background: red;margin: 0 -10px;padding-left: 10px;'>${rowData.periods}</div>`
          else
            return rowData.periods
        }
      };
      let remark = {
        field: "remark",
        title: "备注",
        titleAlign: "left",
        columnAlign: "left",
        isResize: true,
        width: 80,
        formatter: function(rowData, rowIndex, pagingIndex, field) {
          return ``;
        }
      };
      let opera = {
        title: "操作",
        titleAlign: "left",
        columnAlign: "left",
        width: 80,
        isResize: false,
        componentName: "commission-table-operation"
      };
      this.columns = [];
      this.columns.push(company);
      this.columns.push(department);
      this.columns.push(userName);
      this.columns.push(commissionMoney);
      this.columns.push(otherMoney);
      this.columns.push(backMoney);
      this.columns.push(sumMoney);
      this.columns.push(peopleCount);
      this.columns.push(visaPeopleCount);
      this.columns.push(periods);
      this.columns.push(remark);
      this.columns.push(opera);
      this.isReady = true;
    },
    sortChange(param) {
      console.log(param)
      if(param.sumMoney==''){
        if(param.BName!=''){
          this.msg.OrderStr='RB_Branch_Id '+param.bName
        }
        if(param.commissionMoney!=''){
          this.msg.OrderStr='CommissionMoney '+param.commissionMoney
        }
        if(param.peopleCount!=''){
          this.msg.OrderStr='PeopleCount '+param.peopleCount
        }
        if(param.backMoney!=''){
          this.msg.OrderStr='BackMoney '+param.backMoney
        }
        if(param.otherMoney!=''){
          this.msg.OrderStr='OtherMoney '+param.otherMoney
        }
        //this.tableData = this.orderBy(d, ["incomeVal"], param.income).results;
        this.getList();
      }else{
        let d=JSON.parse(JSON.stringify(this.dataList))
        this.dataList = this.orderBy(d, ["sumMoney"], param.sumMoney).results;
      }
    },
    handleCurrentChange(val) {
      this.msg.pageIndex = val;
      this.getList();
    },
    getList() {
      this.loading = true;
      this.apipost(
        "sellcommission_GetDetailsList",
        this.msg,
        res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            this.dataList = res.data.data.pageData;
            this.total = res.data.data.count;
            this.dataList.forEach(x=>{
              x.sumMoney=x.commissionMoney+x.otherMoney-x.backMoney
            })
            this.dataListTwo = JSON.parse(JSON.stringify(this.dataList))
          } else {
            this.Error(res.data.message);
          }
        },
        null
      );
    },
    //切换排序
    handleClick(tab, event) {
      if (this.activeName == "first") {
        // this.commonName='姓名'
        this.msg.OrderStr = "UserId";
      } else {
        // this.commonName='公司名'
        this.msg.OrderStr = "RB_Branch_Id";
      }
      this.getList();
    },
    //跳转
    getInfo(item) {
      var dateStr = item.periods;
      var year = dateStr.substring(0, 4);
      var month = dateStr.substring(4, 6);

      var nextMonthFirstDay = new Date(year, month, 1);

      var oneDay = 1000 * 60 * 60 * 24;
      var entDay = new Date(nextMonthFirstDay - oneDay).Format("yyyy-MM-dd");
      var startDay = year + "-" + month + "-" + "01";
      var userId = item.userId;

      this.$router.push({
        path: "enrollTotal",
        query: {
          EmployeeId: userId,
          starTime: startDay,
          endTime: entDay,
          blank:'y'
        }
      });
    }
  },
  mounted() {
    this.msg.pageSize = 10000; //不分页
    this.msg.ParentId = this.$route.query.ParentId;
    let dt=new Date()
    this.stringPerons=(dt.getMonth()==0?(dt.getFullYear()-1):dt.getFullYear())+''+(dt.getMonth().toString().length<2?'0':'')+(dt.getMonth()==0?12:dt.getMonth());
    console.log(this.stringPerons)
    this.getList();
    this.getCompanyList();
  },
  created(){
      Vue.component('commission-table-operation',{
      template:`<div style='width:80px;height:40px;background:#fff;text-align:center;position: relative;left:-5px;padding-top: 6px;padding-top:6px;'><el-button type="primary" size='mini' icon="el-icon-view" circle @click="see(rowData,index)"></el-button></div>`,
      props:{
          rowData:{
              type:Object
          },
          field:{
              type:String
          },
          index:{
              type:Number
          }
      },
      methods:{
        see(){
          let params = {type:'see',data:this.rowData};
          this.$emit('on-custom-comp',params);
        }
      }
    })
  }
  
};
</script>
<style>

.commissionDetails-box .el-button.is-circle{padding: 5px !important;}
.commissionDetails-box .v-table-body-cell span {
    display: block;
    width: 100%;
}
</style>
