<template>
  <div class="tableInfo">
    <el-table v-loading="loading" :data="purchaseList" show-summary :summary-method="getSummaries">
      <el-table-column label="部门" align="center" prop="purchaseDeptName" />
      <el-table-column label="经办人" align="center" prop="handledByUserName" v-if="'1' == param.sortType || '2' == param.sortType || !param.sortType"/>
      <el-table-column label="使用人" align="center" prop="userName" v-if="'2' == param.sortType || !param.sortType"/>
      <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="totalPurchase" />
    </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="purchaseDetail">
        <el-table-column label="部门" align="center" prop="purchaseDeptName" :show-overflow-tooltip="true" width="120px"/>
        <el-table-column label="经办人" align="center" prop="handledByUserName" :show-overflow-tooltip="true"/>
        <el-table-column label="使用人" align="center" prop="userName" :show-overflow-tooltip="true"/>
        <el-table-column label="物品名称" align="center" prop="purchaseName" :show-overflow-tooltip="true" v-if="'0' == param.purchaseType"/>
        <el-table-column label="费用名称" align="center" prop="purchaseName" :show-overflow-tooltip="true" v-if="'1' == param.purchaseType"/>
        <el-table-column label="用途" align="center" prop="applicationDescription" :show-overflow-tooltip="true"/>
        <el-table-column label="报销金额" align="center" prop="total" :show-overflow-tooltip="true"/>
        <el-table-column label="申请时间" align="center" prop="createTime" :show-overflow-tooltip="true"/>
        <el-table-column label="状态" align="center" prop="purchaseStatus" :formatter="getPurchaseStatus"  :show-overflow-tooltip="true"/>
        <el-table-column label="审批人" align="center" prop="approvedUserName">
          <template slot-scope="scope">
            <span v-if="scope.row.approvedUserName == null">-</span>
            <span v-else>{{scope.row.approvedUserName}}</span>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="detailParam.pageNum"
        :limit.sync="detailParam.pageSize"
        @pagination="getPurchaseList"
      />

    </el-dialog>
  </div>
</template>

<script>
  import { purchaseStatistics, purchaseStatisticsExport, purchaseStatisticsDetailExport } from "@/api/transaction/statistics.js";
  import { purchaseList } from "@/api/transaction/purchase";
  export default {
    name: "table-list",
    props:{
      param:{
        type: Object
      }
    },
    data(){
      return{
        purchaseList: [],
        loading: false,
        detailParam:{
          pageNum: 1,
          pageSize: 10,
        },
        open: false,
        total: 0,
        purchaseDetail: []
      }
    },
    created(){
      this.getPurchaseList();
    },
    methods:{
      getPurchaseList(){
        this.loading = true;
        purchaseStatistics(this.param).then(res =>{
          if(res.code == 200){
            this.loading = false;
            this.purchaseList = res.data;
          }
        })
      },
      detail(row){
        this.detailParam = { ...this.param };
        this.detailParam.purchaseDeptId = row.purchaseDeptId;
        if(this.param.sortType != '0'){
          this.detailParam.handledByUserId = row.handledByUserId;
          this.detailParam.userId = row.userId;
        }
        this.detailParam.pageNum = 1;
        this.detailParam.pageSize = 10;
        this.open = true;
        this.detailPurchaseList();
      },
      detailPurchaseList(){
        this.loading = true;
        purchaseList(this.detailParam).then(res =>{
          if(res.code == 200){
            this.loading = false;
            this.total = res.total;
            this.purchaseDetail = res.rows;
          }
        })
      },
      //获取交易状态
      getPurchaseStatus(row) {
        return this.selectDictLabel(
          this.$parent.$parent.purchaseStatusList,
          row.purchaseStatus
        );
      },
      purchaseExport(){
        this.$confirm('是否确认导出报销统计?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          return purchaseStatisticsExport(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 purchaseStatisticsDetailExport(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 === "totalPurchase"
          ) {
            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>
