<template>
  <div class="integral-all-wrap">
    <div class="search-wrap clearfix">
      <el-date-picker class="select-input" @change="selectDate" v-model="dateValue" type="month" placeholder="选择月"> </el-date-picker>
      <el-select class="select-input select-m-both" v-model="searchType" placeholder="请选择">
        <el-option v-for="item in searchOptions" :key="item.type" :label="item.name" :value="item.type"> </el-option>
      </el-select>
      <el-button @click="downloadExcelDtl" type="primary" class="fr">导出明细数据</el-button>
      <el-button @click="downloadExcelAll" type="primary" class="fr" style="margin-right:8px;">导出汇总数据</el-button>
    </div>
    <el-table :data="tableData" v-loading="loading" @sort-change="sortChange" ref="myTable" class="table-no-line-wrap" style="width: 100%">
      <el-table-column prop="storeName" label="成本主体">
        <template slot-scope="scope">
          <p class="table-first-item">{{ scope.row.storeName }}</p>
          <p class="table-second-item">{{ scope.row.storeCode }}</p>
        </template>
      </el-table-column>
      <el-table-column prop="storeType" label="成本主体类型" sortable="custom"> </el-table-column>
      <el-table-column prop="storeGroupName" label="成本主体所属商户" sortable="custom"> </el-table-column>
      <el-table-column prop="commissionSettleValue" label="结算归属" sortable="custom" :render-header="renderHeader"> </el-table-column>
      <el-table-column prop="commissionSettleRefundValue" label="结算总积分" sortable="custom" width="130"> </el-table-column>
      <el-table-column prop="clerkTotalCommission" label="结算总成本金额" sortable="custom" width="150"> </el-table-column>
    </el-table>
    <div class="pagination" v-show="totalCount > 0">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[20, 40, 60, 80]" :page-size="pageSize" layout="total, sizes, prev, pager, next" :total="totalCount"> </el-pagination>
    </div>
    <!-- 导出数据 -->
    <vue-gic-export-excel :dataArr="tableData" :dialogVisible.sync="dialogVisible" :type="1" :excelUrl="excelUrl" :params="params" :projectName="projectName"></vue-gic-export-excel>
  </div>
</template>

<script>
import { postRequest } from '@/api/api';
import { log } from '@/utils/index.js';
export default {
  name: 'integralCloseAll',
  data() {
    return {
      projectName: 'gic-clique',
      dateValue: '',
      searchOptions: [
        {
          type: '',
          name: '所有商户'
        }
      ],
      searchType: '',
      tableData: [],
      currentPage: 1,
      pageSize: 20,
      totalCount: 0,
      loading: false,
      // 导出数据
      dialogVisible: false,
      excelUrl: '/api-admin/report-store-commission-collect',
      params: {},
      // 排序
      curSortType: ''
    };
  },
  mounted() {
    this.nowDate();
    // this.getList();
  },
  methods: {
    // 获得当前的年月
    nowDate() {
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      this.dateValue = year + '-' + month;
    },
    getList() {
      this.loading = true;
      let para = {};
      postRequest('/api-admin/list-store-commission-collect', para).then(res => {
        var data = res.data;
        this.loading = false;
        if (data.errorCode == 0) {
          this.tableData = data.result.result ? data.result.result : [];
          this.totalCount = data.result.totalCount;
        } else {
          this.$message.error(data.message);
        }
      });
    },
    // 排序
    sortChange(column, prop, order) {
      let itemProp = column.prop;
      let itemOrder = column.order;
      if (itemProp == 'commissionSettleValue') {
        // 归属佣金
        if (itemOrder === 'ascending') {
          // 上升
          this.curSortType = '1';
        } else if (itemOrder === 'descending') {
          this.curSortType = '2';
        }
      } else if (itemProp == 'commissionSettleRefundValue') {
        // 归属退佣
        if (itemOrder === 'ascending') {
          this.curSortType = '3';
        } else if (itemOrder === 'descending') {
          this.curSortType = '4';
        }
      } else if (itemProp == 'sendCommissionSettleValue') {
        // 发货佣金
        if (itemOrder === 'ascending') {
          this.curSortType = '5';
        } else if (itemOrder === 'descending') {
          this.curSortType = '6';
        }
      } else if (itemProp == 'sendCommissionSettleRefundValue') {
        // 发货退佣
        if (itemOrder === 'ascending') {
          this.curSortType = '7';
        } else if (itemOrder === 'descending') {
          this.curSortType = '8';
        }
      } else if (itemProp == 'clerkTotalCommission') {
        // 总佣金
        if (itemOrder === 'ascending') {
          this.curSortType = '9';
        } else if (itemOrder === 'descending') {
          this.curSortType = '10';
        }
      }
      this.getList();
    },
    // 选择日期
    selectDate(val) {
      log('选择月份' + val);
    },
    // 选择分页符
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getList();
    },
    // 自定义表头
    renderHeader(h, obj) {
      let r = h('span', [obj.column.label], {
        attrs: {
          style: 'text-align:left'
        }
      });
      r = h('span', [
        obj.column.label,
        h(
          'el-popover',
          {
            attrs: {
              trigger: 'hover',
              width: '190',
              placement: 'top'
            }
          },
          [
            this.operation(h, obj.column.label), // 组件  或者 多处用
            h('i', {
              slot: 'reference',
              attrs: {
                class: 'iconfont tooltip-icon icon-xinxixianshi',
                style: 'padding-left:4px;cursor:pointer'
              }
            })
          ]
        )
      ]);
      return r;
    },
    operation(h, label) {
      var arr = [];
      if (label == '结算归属') {
        arr = [h('span', {}, [<span slot="content">结算归属为空值的主要原因：1、该成本主体未分配归属；2、该成本主体门店状态非上线状态，无法进行分配归属</span>])];
      }
      return arr;
    },
    // 导出明细数据
    downloadExcelDtl() {
      this.dialogVisible = true;
      this.params = {
        requestProject: this.projectName
      };
    },
    // 导出汇总数据
    downloadExcelAll() {
      this.dialogVisible = true;
      this.params = {
        requestProject: this.projectName
      };
    }
  }
};
</script>

<style lang="less" scoped>
.integral-all-wrap {
  background-color: #fff;
  padding: 24px 24px 0;
}
.search-wrap {
  margin-bottom: 22px;
  font-size: 0;
  .select-input {
    width: 150px;
  }
}
.select-m-both {
  margin: 0 8px;
}
.table-wrap {
  padding: 0 32px 24px;
}
.pagination {
  text-align: right;
  padding: 30px 0 34px 0;
}
</style>
