<template>
    <div class="hc-main-row">
        <el-row :gutter="14">
            <el-col :span="6">
                <HcGradientCard color="purple1">
                    <div class="hc-card-item-sub">
                        <div class="item-sub-title">
                            截至目前总合同额
                        </div>
                        <div class="item-sub-num">
                            <span class="num">{{ statsAll.allContractMoney }}</span>
                            <span class="text">万</span>
                        </div>
                    </div>
                </HcGradientCard>
            </el-col>
            <el-col :span="6">
                <HcGradientCard color="blue1">
                    <div class="hc-card-item-sub">
                        <div class="item-sub-title">
                            截至目前项目总测算成本
                        </div>
                        <div class="item-sub-num">
                            <span class="num">{{ statsAll.allProjectCost }}</span>
                            <span class="text">元</span>
                        </div>
                    </div>
                </HcGradientCard>
            </el-col>
            <el-col :span="6">
                <HcGradientCard color="red1">
                    <div class="hc-card-item-sub">
                        <div class="item-sub-title">
                            截至目前总实际支出成本
                        </div>
                        <div class="item-sub-num">
                            <span class="num">{{ statsAll.allPracticalDisburse }}</span>
                            <span class="text">元</span>
                        </div>
                    </div>
                </HcGradientCard>
            </el-col>
            <el-col :span="6">
                <HcGradientCard color="purple1">
                    <div class="hc-card-item-sub">
                        <div class="item-sub-title">
                            截至目前总回款
                        </div>
                        <div class="item-sub-num">
                            <span class="num">{{ statsAll.allReturned }}</span>
                            <span class="text">元</span>
                        </div>
                    </div>
                </HcGradientCard>
            </el-col>
        </el-row>
        <!-- 列表统计 -->
        <HcCardItem class="static-project-card mt-8">
            <template #header>
                <div v-if="breadcrumbs.name" class="hc-static-breadcrumb-box">
                    <el-breadcrumb :separator-icon="ArrowRight">
                        <el-breadcrumb-item
                            :class="breadcrumbs.name ? 'hover' : ''"
                            @click="breadcrumbTitle"
                        >
                            {{ breadcrumbs.title }}
                        </el-breadcrumb-item>
                        <el-breadcrumb-item
                            :class="breadcrumbs.section ? 'hover' : ''"
                            @click="breadcrumbName"
                        >
                            {{ breadcrumbs.name }}
                        </el-breadcrumb-item>
                        <el-breadcrumb-item
                            v-if="breadcrumbs.section"
                            :class="breadcrumbs.post ? 'hover' : ''"
                            @click="breadcrumbSection"
                        >
                            {{ breadcrumbs.section }}
                        </el-breadcrumb-item>
                        <el-breadcrumb-item v-if="breadcrumbs.post">
                            {{ breadcrumbs.post }}
                        </el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
                <div v-else class="hc-expense-total-title">
                    列表统计
                </div>
            </template>
            <HcTable v-if="isShowtable === 0" ui="no-border" border :is-index="false" :column="tableColumn" :datas="tableData">
                <template #projectName="{ row }">
                    <span class="text-blue text-hover" @click="rowNameClick(row)">{{ row.projectName }}</span>
                </template>
            </HcTable>
            <!-- 费用分类 -->
            <HcTable v-if="isShowtable === 1" ui="no-border" border :is-index="false" :column="tableColumn1" :datas="tableData1" :span-method="tableSpanMethod1">
                <template #detail="{ row }">
                    <span class="text-blue text-hover" @click="rowNameClick1(row)">查看明细</span>
                </template>
                <template #total="{ row, index }">
                    {{ index === 0 ? row.total : '' }}
                </template>
            </HcTable>
            <!-- 细分环节费用 -->
            <HcTable v-if="isShowtable === 2" ui="no-border" border :is-index="false" :column="tableColumn2" :datas="tableData2">
                <template #isParticipate="{ row }">
                    <HcIcon v-if="row.isParticipate === 1" name="checkbox-circle" class="text-green text-xl" />
                    <HcIcon v-else name="error-warning" class="text-red text-xl" />
                </template>
                <template #detail="{ row }">
                    <span class="text-blue text-hover" @click="rowNameClick2(row)">查看明细</span>
                </template>
            </HcTable>
            <!-- 费用明细 -->
            <HcTable v-if="isShowtable === 3" ui="no-border" border :is-index="false" :column="tableColumn3" :datas="tableData3" :span-method="tableSpanMethod2">
                <template #total="{ row, index }">
                    {{ index === 0 ? row.total : '' }}
                </template>
            </HcTable>
        </HcCardItem>
    </div>
</template>

<script setup>
import { onActivated, ref } from 'vue'
import mainApi from '~api/static/project'
import { ArrowRight } from '@element-plus/icons-vue'
import { getArrValue, getObjValue } from 'js-fast-way'

//缓存被激活
onActivated(() => {
    getDataApi()
})


const getDataApi = () => {
    allProjectStats()
    getTableData()
}

//项目统计总金额成本
const statsAll = ref({})
const allProjectStats = async () => {
    const { error, code, data } = await mainApi.allProjectStats()
    //判断状态
    if (!error && code === 200) {
        statsAll.value = getObjValue(data)
    } else {
        statsAll.value = {}
    }
}

//面包屑导航
const breadcrumbs = ref({ title: '列表统计', name: '', section: '', post: '' })

//项目名被点击
const breadcrumbTitle = () => {
    const { name } = breadcrumbs.value
    if (name) {
        isShowtable.value = 0
        breadcrumbs.value.name = ''
        breadcrumbs.value.post = ''
    }
}

//项目名被点击
const breadcrumbName = () => {
    const { section } = breadcrumbs.value
    if (section) {
        isShowtable.value = 1
        breadcrumbs.value.section = ''
        breadcrumbs.value.post = ''
    }
}

//部门
const breadcrumbSection = () => {
    const { post } = breadcrumbs.value
    if (post) {
        isShowtable.value = 2
        breadcrumbs.value.post = ''
    }
}

//基础表格
const isShowtable = ref(0)
const tableColumn = [
    { key: 'projectName', name: '名称', minWidth: 200 },
    { key: 'contractMoney', name: '合同额', align: 'center' },
    { key: 'budgetCost', name: '测算成本', align: 'center' },
    { key: 'practicalPayCost', name: '实际已支出成本', align: 'center' },
    { key: 'returnedMoney', name: '实际已回款', align: 'center' },
    { key: 'unreturnedMoney', name: '未回款', align: 'center' },
]
const tableData = ref([])
const getTableData = async () => {
    const { error, code, data } = await mainApi.ProjectListStats()
    //判断状态
    if (!error && code === 200) {
        tableData.value = getArrValue(data)
    } else {
        tableData.value = []
    }
}

const rowNameClick = ({ projectId, projectName }) => {
    breadcrumbs.value.name = projectName
    isShowtable.value = 1
    getTableData1(projectId)
}

//费用分类
const tableColumn1 = [
    { key: 'costTypeValue', name: '费用分类', align: 'center' },
    { key: 'budgetCost', name: '测算费用(元)', align: 'center' },
    { key: 'practicalCost', name: '实际费用(元)', align: 'center' },
    { key: 'detail', name: '费用明细', align: 'center' },
    { key: 'total', name: '总计', align: 'center' },
]
const tableData1 = ref([])
const getTableData1 = async (projectId) => {
    const { error, code, data } = await mainApi.ProjectCostTypeStats({
        id: projectId,
    })
    //判断状态
    if (!error && code === 200) {
        tableData1.value = getArrValue(data)
    } else {
        tableData1.value = []
    }
}


//合并单元格
const tableSpanMethod1 = ({ columnIndex }) => {
    if (columnIndex === tableColumn1.length - 1 && tableData1.value.length > 0) {
        return { rowspan: tableData1.value.length, colspan: 1 }
    }
}

const rowNameClick1 = ({ costTypeValue, costType, projectId }) => {
    breadcrumbs.value.section = costTypeValue
    isShowtable.value = 2
    getTableData2(costType, projectId)
}

//细分环节费用
const tableColumn2 = [
    { key: 'name', name: '项目环节' },
    { key: 'isParticipate', name: '参与', align: 'center' },
    { key: 'costDisburse', name: '成本支出(元)', align: 'center' },
    { key: 'timeCost', name: '时间成本(工作日)', align: 'center' },
    { key: 'staffTotal', name: '人员投入(人)', align: 'center' },
    { key: 'detail', name: '明细', align: 'center' },
]
const tableData2 = ref([])
const getTableData2 = async (typeId, projectId) => {
    const { error, code, data } = await mainApi.projectLinkCost({
        costType: typeId,
        projectId: projectId,
    })
    //判断状态
    if (!error && code === 200) {
        tableData2.value = getArrValue(data)
    } else {
        tableData2.value = []
    }
}

const rowNameClick2 = ({ name, costDetails }) => {
    breadcrumbs.value.post = name
    isShowtable.value = 3
    tableData3.value = costDetails
}

//细分环节费用
const tableColumn3 = [
    { key: 'costTypeValue', name: '费用分类' },
    { key: 'price', name: '费用(元)', align: 'center' },
    { key: 'total', name: '总计', align: 'center' },
]
const tableData3 = ref([])
//合并单元格
const tableSpanMethod2 = ({ columnIndex }) => {
    if (columnIndex === tableColumn3.length - 1 && tableData1.value.length > 0) {
        return { rowspan: tableData3.value.length, colspan: 1 }
    }
}
</script>

<style lang="scss" scoped>
@import "~src/styles/static/project.scss";
</style>

<style lang="scss">
.hc-static-breadcrumb-box .el-breadcrumb {
    font-size: 16px;
    .el-breadcrumb__item {
        .el-breadcrumb__inner, .el-breadcrumb__separator {
            color: var(--el-color-primary)
        }
        &.hover .el-breadcrumb__inner {
            cursor: pointer;
            transition: color .2s;
            &:hover {
                color: var(--el-color-primary-light-5)
            }
        }
    }
}
</style>
