<!--
 * @Author: ysh
 * @Date: 2024-12-16 10:25:17
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2025-01-06 09:55:47
-->
<template>
  <div class="app-container">
    <el-row :gutter="10">
      <!-- 承接合同 -->
      <el-col :span="6" class="border">
        <div class="text-center header">承接合同列表
          <div class="sort-btn">
            <el-dropdown trigger="click" @command="handleCommand">
              <span style="color:#000;font-size:20px;">
                <svg-icon icon-class="FilterSort"></svg-icon>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="">按拟稿日期</el-dropdown-item>
                <el-dropdown-item command="amount">按主合同额</el-dropdown-item>
                <el-dropdown-item command="subAmount">按分包合同额</el-dropdown-item>
                <el-dropdown-item command="borrowAmount">按借款额</el-dropdown-item>
                <el-dropdown-item command="settleAmount">按结算额</el-dropdown-item>
                <el-dropdown-item command="budgetAmount">按预算额</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>

          </div>
        </div>
        <div class="query-box">
          <el-input placeholder="请输入内容" v-model="queryInput" clearable class="input-with-select"
            @keyup.enter.native="queryContract()">
            <el-select v-model="queryParams.type" slot="prepend" placeholder="请选择" @change="initType()">
              <el-option label="合同名称" value="contractName"></el-option>
              <el-option label="甲方单位" value="partyAName"></el-option>
              <el-option label="合同编码" value="contractCode"></el-option>
              <el-option label="项目名称" value="projectName"></el-option>
            </el-select>
            <el-button slot="append" icon="el-icon-search" @click="queryContract()"></el-button>
          </el-input>
        </div>
        <el-scrollbar view-style="overflow-x:hidden;" :style="{ height: contractHeight + 'px' }">
          <div v-loading="loading">
            <div class="flex align-center box-item">
              <div class="name">
                <span><b><i class="el-icon-star-on"></i>合同名称</b> ({{ total }})</span>
              </div>
              <div>
                <div class="text-center"><b>{{ sortByField() }}</b></div>
              </div>
              <div class="text-right pl-5"><i class="el-icon-star-on"></i></div>
            </div>
            <div class="flex align-center box-item" :class="{ isActive: item.contractId == contract.contractId }"
              v-for="item in contractList" :key="item.contractId" @click="handleClickContract(item)">
              <div class="name">
                <span>{{ item.contractName }}</span>
              </div>
              <div>
                <el-tag>{{ setAmountByFieId(item).toFixed(2) }}</el-tag>
              </div>
              <div class="text-right pl-5"><i class="el-icon-d-arrow-right"></i></div>
            </div>
          </div>
        </el-scrollbar>
        <div class="text-right pagination">
          <el-pagination small layout="sizes,prev, pager, next" :total="total" :current-page.sync="queryParams.pageNum"
            :page-sizes="[10, 20, 30, 40]" :page-size="queryParams.pageSize" @size-change="handleSizeChange"
            @current-change="changePage()"></el-pagination>
        </div>
      </el-col>
      <el-col :span="18">
        <el-breadcrumb class="pl-5" separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>当前选择合同</el-breadcrumb-item>
          <el-breadcrumb-item>{{ contract.contractName }}</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="pl-5 contract-info">
          <span class="info-title">甲方单位：</span><span class="mr20">{{ contract.partyA ? contract.partyA.partyAName : ''
            }}</span>
          <span class="info-title">合同编码：</span><span class="mr20">{{ contract.contractCode }}</span>
          <span class="info-title">合同额：</span><span class="mr20">{{ contract.amount }}</span>
        </div>
        <el-row :gutter="20">
          <el-col :span="12" class="border">
            <project-statistic :projectId="projectIds" :contractId="contract.contractId"></project-statistic>
          </el-col>
          <el-col :span="12">
            <!-- 分包合同 -->
            <sub-statistic :contract="contract"></sub-statistic>
          </el-col>
        </el-row>
        <el-divider></el-divider>
        <el-row :gutter="10">
          <el-col :span="7" class="border">
            <borrow-statistic :projectId="projectIds" :contractId="contract.contractId"></borrow-statistic>
          </el-col>
          <el-col :span="7" class="border">
            <settle-statistic :projectId="projectIds" :contractId="contract.contractId"></settle-statistic>
          </el-col>
          <el-col :span="7" class="border">
            <budget-statistic :projectId="projectIds" :contractId="contract.contractId"></budget-statistic>
          </el-col>
          <el-col :span="3">
            <div class="text-center header">统计</div>
            <div class="pr-5 pl-5">
              <div class="title">主合同额</div>
              <div class="amount text-right">{{ contract.amount ? contract.amount.toFixed(2) : '0.00' }}</div>
              <div class="title">分包合同额</div>
              <div class="amount text-right">{{ subContractAmount.toFixed(2) }}</div>
              <div class="title">合同额差值</div>
              <div class="amount text-right border-bottom">{{ (contract.amount - subContractAmount).toFixed(2) }}</div>
              <!-- <el-divider></el-divider> -->
              <div class="title">借款总额</div>
              <div class="amount text-right">{{ borrowSumAmount.toFixed(2) }}</div>
              <div class="title">结算总额</div>
              <div class="amount text-right border-bottom">{{ settleSumAmount.toFixed(2) }}</div>
              <div class="title">合同额与结算差值</div>
              <div class="amount text-right">{{ ((contract.amount - subContractAmount) - settleSumAmount).toFixed(2) }}
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { listContract, getContractStatisticSortByField, getContractStatisticById } from "@/api/oa/contract/contract";
import { listProjectContract } from "@/api/oa/contract/projectContract";
import SubStatistic from './components/subStatistic.vue';
import BorrowStatistic from "./components/borrowStatistic.vue";
import BudgetStatistic from './components/budgetStatistic.vue';
import SettleStatistic from './components/settleStatistic.vue';
import ProjectStatistic from './components/projectStatistic.vue';
export default {
  components: { SubStatistic, BorrowStatistic, BudgetStatistic, SettleStatistic, ProjectStatistic },
  data() {
    return {
      contractList: [],
      queryInput: '',
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        contractName: '',
        partyAName: '',
        contractCode: '',
        projectName: '',
        type: 'contractName'
      },
      total: 0,
      loading: true,
      contractHeight: 675,
      contract: {},
      projectIds: [],
      subContractAmount: 0,
      borrowSumAmount: 0,
      settleSumAmount: 0,
      budgetSumAmount: 0,
      status: 'normal',
      field: '',
    }
  },
  created() {
    this.getContractList();
  },
  mounted() {
    this.initHeight();// 添加事件监听器，以便在窗口大小改变时更新高度
  },
  methods: {
    initHeight() {
      this.contractHeight = window.innerHeight - 250;
    },
    getContractList() {
      this.loading = true;
      this.status = 'normal'
      listContract(this.queryParams).then(res => {
        this.contractList = res.rows;
        this.total = res.total;
        this.loading = false;
        if (res.total != 0) {
          this.contract = this.contractList[0];
          this.getContractProject(this.contract.contractId);
          this.getStatistic(this.contract.contractId);
        }
      })
    },
    handleCommand(command) {
      this.queryParams.pageNum = 1
      this.sortFn(command)
    },
    sortFn(field) {
      this.loading = true
      this.status = 'sort'
      this.field = field
      this.queryInput = ''
      getContractStatisticSortByField({ field }).then(res => {
        let list = res.data.sort;
        this.total = list.length;
        let a = list.slice((this.queryParams.pageNum - 1) * this.queryParams.pageSize, this.queryParams.pageNum * this.queryParams.pageSize);
        this.contractList = a;
        this.loading = false;
      })
    },
    sortByField() {
      switch (this.field) {
        case '':
          return '合同金额'
        case 'amount':
          return '合同金额'
        case 'subAmount':
          return '分包合同金额'
        case 'budgetAmount':
          return '预算金额'
        case 'borrowAmount':
          return '借款金额'
        case 'settleAmount':
          return '结算金额'
        default:
          break;
      }
    },
    setAmountByFieId(item) {
      switch (this.field) {
        case '':
          return item.amount
        case 'amount':
          return item.amount
        case 'subAmount':
          return item.subAmount ? item.subAmount : 0
        case 'budgetAmount':
          return item.budgetAmount
        case 'borrowAmount':
          return item.borrowAmount
        case 'settleAmount':
          return item.settleAmount
        default:
          break;
      }
    },
    changePage() {
      if (this.status == 'normal') {
        this.getContractList();
      } else {
        this.sortFn(this.field);
      }
    },
    getStatistic(contractId) {
      getContractStatisticById(contractId).then(res => {
        this.subContractAmount = res.data.subAmount
        this.budgetSumAmount = res.data.budgetAmount
        this.borrowSumAmount = res.data.borrowAmount
        this.settleSumAmount = res.data.settleAmount
      })
    },
    async getContractProject(contractId) {
      let res = await listProjectContract({ contractId })
      if (res.total > 0) {
        this.projectIds = res.rows.map(item => item.projectId)
      } else {
        this.projectIds = []

      }
    },
    handleSizeChange(val) {
      this.queryParams.pageSize = val
      this.getContractList();
    },
    queryContract() {
      const type = this.queryParams.type
      this.field = ''
      this.queryParams[type] = this.queryInput;
      this.getContractList();
    },
    initType() {
      this.queryParams.contractName = '';
      this.queryParams.partyAName = '';
      this.queryParams.contractCode = '';
      this.queryParams.projectName = '';
    },
    async handleClickContract(val) {
      this.contract = val;
      await this.getContractProject(val.contractId);
      this.getStatistic(val.contractId);
      this.subContractAmount = 0
      this.borrowSumAmount = 0
      this.settleSumAmount = 0
      this.budgetSumAmount = 0
    },
    // getSubContractAmount(amount) {
    //   this.subContractAmount = amount
    // },
    // getBorrowSumAmount(amount) {
    //   this.borrowSumAmount = amount
    // },
    // getSettleSumAmount(amount) {
    //   this.settleSumAmount = amount
    // },
    // getBudgetSumAmount(amount) {
    //   this.budgetSumAmount = amount
    // },
  }
}
</script>

<style lang="scss" scoped>
.header {
  font-family: 'puhuiti';
  font-size: 18px;
  line-height: 30px;
  position: relative;

  .sort-btn {
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 0;
  }
}

.border {
  border-right: 1px solid #ebeef5;
}

.border-bottom {
  padding: 5px 0;
  border-bottom: 1px solid #ebeef5;
}

.box-item {
  cursor: pointer;
  font-size: 14px;
  margin: 10px 0;
  border-top: 1px solid #ebeef5;
  padding: 5px;
}

.name {
  flex: 2;
}

.box-item:hover {
  color: var(--current-color);
}

.isActive {
  color: var(--current-color);
}

.pagination {
  border-top: 1px solid #ebeef5;
  padding: 20px 0 0;
}

.contract-info {
  font-size: 14px;
  color: #606266;

  .info-title {
    font-weight: bold;
    font-family: 'puhuiti';
  }
}

::v-deep.el-select .el-input {
  width: 110px;
}

.title {
  font-family: '微软雅黑';
  color: #606266;
  line-height: 30px;
}

.amount {
  font-family: 'puhuiti';
}
</style>
<style>
.el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>