<template>
  <div>
    <el-table v-loading="loading" :data="projectList" show-summary :summary-method="getSummaries">
      <el-table-column label="部门" align="center" prop="applyDeptName" />
      <el-table-column label="经办人" align="center" prop="applyName" 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="tradeTotal" />
      <el-table-column label="交易收入总额" align="center" prop="totalDealPrice" />
    </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="projectDetail">
        <el-table-column label="部门" align="center" prop="applyDeptName" :show-overflow-tooltip="true" width="120px"/>
        <el-table-column label="经办人" align="center" prop="applyName"/>
        <el-table-column label="买方部门" align="center" prop="tradeDeptName" :show-overflow-tooltip="true" width="120px"/>
        <el-table-column label="交易项目" align="center" prop="relationTransactionProjectName" :show-overflow-tooltip="true"/>
        <el-table-column label="交易细项名称" align="center" prop="transactionDetailName" :show-overflow-tooltip="true"width="100px">
          <template slot-scope="scope">
            <span v-if="scope.row.transactionDetailName">{{scope.row.transactionDetailName}}</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="申请时间" align="center" prop="createTime" width="150px"/>
        <el-table-column label="项目状态" align="center" prop="tradeStatus" :formatter="getTradeStatus" :show-overflow-tooltip="true"/>
        <el-table-column label="交易总价" align="center" prop="tradeTotal" />
        <el-table-column label="交易成交价" align="center" prop="dealPrice" />
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="detailParam.pageNum"
        :limit.sync="detailParam.pageSize"
        @pagination="detailProjectList"
      />
    </el-dialog>
  </div>

</template>

<script>
  import { tradeIncomeStatistics, tradeIncomeStatisticsExport, tradeStatisticsDetailExport } from "@/api/transaction/statistics.js";
  import { listProject } from "@/api/transaction/tradeProject.js";
  export default {
    name: "income-table-list",
    props:{
      param:{
        type: Object
      }
    },
    data(){
        return{
          loading: false,
          projectList: [],
          open: false,
          projectDetail: [],
          total: 0,
          detailParam: {
            pageNum: 1,
            pageSize: 10,
          }
        }
    },
    created(){
      this.getIncomeList();
    },
    methods:{
      getIncomeList(){
        this.loading = true;
        tradeIncomeStatistics(this.param).then(res =>{
          if(res.code == 200){
            this.loading = false;
            this.projectList = res.data;
          }
        })
      },
      detail(row){
        this.detailParam = { ...this.param };
        this.detailParam.applyDeptId = row.applyDeptId;
        if(this.param.sortType != '0'){
          this.detailParam.applyId = row.applyId;
        }
        this.detailParam.pageNum = 1;
        this.detailParam.pageSize = 10;
        this.open = true;
        this.detailProjectList();
      },
      detailProjectList(){
        this.loading = true;
        listProject(this.detailParam).then(res =>{
          if(res.code == 200){
            this.loading = false;
            this.projectDetail = res.rows;
            this.total = res.total;
          }
        })
      },
      //获取交易状态
      getTradeStatus(row) {
        return this.selectDictLabel(
          this.$parent.$parent.transactionProjectStatus,
          row.tradeStatus
        );
      },
      incomeExport(){
        this.$confirm('是否确认导出交易项目收入统计?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          return tradeIncomeStatisticsExport(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 tradeStatisticsDetailExport(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 === "totalDealPrice" ||
            column.property === "tradeTotal"
          ) {
            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">
  .detail{
    text-decoration: underline;
    color: blue;
    cursor:pointer;
  }
</style>
