<!--
 * @Author: ysh
 * @Date: 2024-10-11 09:23:15
 * @LastEditors: wrh
 * @LastEditTime: 2025-12-25 18:31:30
-->
<template>
  <div class="app-container bg">
    <div class="head" v-loading="dataLoading">
      <top-head @handleClick="changeClick" :pDatas="projectInfo" :cDatas="contractInfo" :dDatas="deviceInfo"
        :bDatas="borrowInfo" :sDatas="settleInfo"></top-head>
    </div>
    <div class="content">
      <project-statistics v-if="isActive == 'project'" :datas="projectInfo"></project-statistics>
      <contract-statistics v-else-if="isActive == 'contract'" :datas="contractInfo"></contract-statistics>
      <car-device-statistics v-else-if="isActive == 'device'" :deviceData="deviceInfo"
        :carData="carInfo"></car-device-statistics>
      <borrow-statistics v-else-if="isActive == 'borrow'" :borrowData="borrowInfo"></borrow-statistics>
      <settle-statistics v-else-if="isActive == 'settle'" :settleData="settleInfo" :checkData="checkInfo"></settle-statistics>
    </div>
  </div>
</template>

<script>
import { getProjectStatistic } from '@/api/oa/project/project';
import { getContractStatistic } from '@/api/oa/contract/contract';
import { getCarStatistic } from '@/api/oa/car/car';
import { getDeviceStatistic } from '@/api/oa/device/device';
import { getBorrowStatistic } from '@/api/oa/borrow/borrow';
import { getSettleStatistic } from '@/api/oa/settle/settle';
import { getCheckStatistic } from '@/api/oa/budget/check';
import ProjectStatistics from './components/projectStatistics.vue';
import contractStatistics from './components/contractStatistics.vue';
import topHead from './components/topHead.vue';
import CarDeviceStatistics from './components/carDeviceStatistics.vue';
import BorrowStatistics from './components/borrowStatistics.vue';
import SettleStatistics from './components/settleStatistics.vue';
export default {
  components: { topHead, ProjectStatistics, contractStatistics, CarDeviceStatistics, BorrowStatistics, SettleStatistics },
  data() {
    return {
      isActive: 'project',
      contractInfo: {},
      projectInfo: {},
      carInfo: {},
      deviceInfo: {},
      borrowInfo: {},
      settleInfo:{},
      checkInfo:{},
      dataLoading: true,
    }
  },
  created() {
    this.dataLoading = true;
    this.getProjectInfo();
    this.getContractInfo();
    this.getCarInfo();
    this.getDeviceInfo();
    this.getBorrowInfo();
    this.getSettleInfo();
    this.getCheckInfo();
  },
  mounted() {

  },
  methods: {
    async getProjectInfo() {
      let res1 = await getProjectStatistic();
      if (res1.data) {
        this.projectInfo = res1.data
      }
    },
    async getContractInfo() {
      let res2 = await getContractStatistic();
      if (res2.data) {
        this.contractInfo = res2.data;
      }
    },
    async getCarInfo() {
      let res = await getCarStatistic();
      this.carInfo = res.data;
    },
    async getDeviceInfo() {
      let res = await getDeviceStatistic();
      this.deviceInfo = res.data;
      this.dataLoading = false;
    },
    async getBorrowInfo() {
      let res = await getBorrowStatistic();
      this.borrowInfo = res.data;
    },
    async getSettleInfo(){
      let res = await getSettleStatistic();
      this.settleInfo = res.data;
    },
    async getCheckInfo(){
      let res = await getCheckStatistic();
      this.checkInfo = res.data;
    },
    changeClick(val) {
      this.isActive = val
    }
  },
}
</script>

<style lang="scss" scoped>
.bg {
  background-color: #f0f4f7;
}

.head {
  background-color: #fff;
  height: 210px;
  border-radius: 4px;
  padding: 20px;
}

.content {
  margin-top: 20px;
  background-color: #fff;
  min-height: 570px;
  border-radius: 4px;
  padding: 20px;
}
</style>