<template>
  <div class="tableInfo">
    <el-table v-loading="loading" :data="borrowingList" show-summary :summary-method="getSummaries">
      <el-table-column label="部门" align="center" prop="borrowingDeptName" />
      <el-table-column label="使用人" align="center" prop="userName"  v-if="param.sortType != '0'"/>
      <el-table-column label="条数" align="center" prop="countNum" >
        <template slot-scope="scope">
          <span class="detail" @click="detail(scope.row)">{{scope.row.countNum}}</span>
        </template>
      </el-table-column>
      <el-table-column label="借支总额" align="center" prop="totalFigures" />
    </el-table>

    <el-dialog
      title="明细信息"
      :visible.sync="open"
      width="900px"
      append-to-body
      :close-on-click-modal="false"
      destroy-on-close
    >
      <el-button
        type="warning"
        plain
        icon="el-icon-download"
        size="mini"
        style="margin-bottom: 10px"
        @click="handleDetailExport">
        导出明细
      </el-button>

      <el-table v-loading="loading" :data="borrowingDetail">
        <el-table-column label="部门" align="center" prop="deptName" :show-overflow-tooltip="true" width="120px"/>
        <el-table-column label="使用人" align="center" prop="userIdName"/>
        <el-table-column label="费用名称" align="center" prop="feeName" :show-overflow-tooltip="true" width="120px"/>
        <el-table-column label="借支金额" align="center" prop="totalFigures" :show-overflow-tooltip="true"/>
        <el-table-column label="申请时间" align="center" prop="registrationDate" width="150px"/>
        <el-table-column label="状态" align="center" prop="approvalStatus" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span v-if="scope.row.approvalStatus == null">-</span>
            <span v-if="scope.row.approvalStatus == 1">待核算部审批</span>
            <span v-if="scope.row.approvalStatus == 2">完成</span>
            <span v-if="scope.row.approvalStatus == 3">驳回</span>
          </template>
        </el-table-column>
        <el-table-column label="审批人" align="center" prop="approvedUserIdName" >
          <template slot-scope="scope">
            <span v-if="scope.row.approvedUserIdName == null">-</span>
            <span>{{scope.row.approvedUserIdName}}</span>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="detailParam.pageNum"
        :limit.sync="detailParam.pageSize"
        @pagination="detailBorrowingList"
      />
    </el-dialog>

  </div>

</template>

<script>
  import { borrowingStatistics, borrowingStatisticsExport, borrowingStatisticsDetailExport } from "@/api/transaction/statistics.js";
  import { borrowingList } from "@/api/system/for";
  export default {
    name: "table-list",
    props:{
      param:{
        type: Object
      }
    },
    data(){
        return{
          borrowingList: [],
          borrowingDetail: [],
          loading: false,
          open: false,
          total: 0,
          detailParam: {
            pageNum: 1,
            pageSize: 10,
          }
        }
    },
    created(){
      this.getBorrowingList();
    },
    methods:{
      getBorrowingList(){
        this.loading = true;
        borrowingStatistics(this.param).then(res =>{
          if(res.code == 200){
            this.loading = false;
            this.borrowingList = res.data;
          }
        })
      },
      detail(row){
        this.detailParam = { ...this.param };
        this.detailParam.borrowingDeptId = row.borrowingDeptId;
        if(this.param.sortType != '0'){
          this.detailParam.userId = row.userId;
        }
        this.detailParam.pageNum = 1;
        this.detailParam.pageSize = 10;
        this.open = true;
        this.detailBorrowingList();
      },
      detailBorrowingList(){
        this.loading = true;
        borrowingList(this.detailParam).then(res =>{
          if(res.code == 200){
            this.loading = false;
            this.total = res.total;
            this.borrowingDetail = res.rows;
          }
        })
      },
      borrowingExport(){
        this.$confirm('是否确认导出借支统计?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          return borrowingStatisticsExport(this.param);
        }).then(response => {
          this.download(response.msg);
        }).catch(() => {});
      },
      handleDetailExport(){
        this.$confirm('是否确认导出借支明细?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          let detailParam = { ...this.detailParam}
          detailParam.pageNum = 1;
          detailParam.pageSize = 1000;
          return borrowingStatisticsDetailExport(detailParam);
        }).then(response => {
          this.download(response.msg);
        }).catch(() => {});
      },
      getSummaries(param){
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = "合计";
            return;
          }
          const values = data.map((item) => Number(item[column.property]));
          if (
            column.property === "totalFigures"
          ) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index] = sums[index].toFixed(2);
          }
        });
        return sums;
      }
    }
  }
</script>

<style scoped lang="scss">
  .tableInfo{
    height: 450px;
    overflow-y: auto;
    &::-webkit-scrollbar {
      /* 设置滚动条宽度 */
      width: 4px;
      /* 设置滚动条背景色 */
      //background: black;
    }

    //滚动条轨道
    &::-webkit-scrollbar-track {
      background-color:transparent;
      -webkit-border-radius: 2em;
      -moz-border-radius: 2em;
      border-radius:2em;
    }

    //滚动条滑块
    &::-webkit-scrollbar-thumb {
      background-color: rgb(147,147,153,0.5);
      -webkit-border-radius: 2em;
      -moz-border-radius: 2em;
      border-radius:2em;
    }
  }

  .detail{
    text-decoration: underline;
    color: blue;
    cursor:pointer;
  }
</style>
