<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">120033</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">560333</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">903333</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">125333</span>
                            <span class="text">元</span>
                        </div>
                    </div>
                </HcGradientCard>
            </el-col>
        </el-row>

        <HcCardItem class="static-project-card mt-8">
            <template #header>
                <div class="hc-expense-total-title">列表统计</div>
            </template>
            <HcTable :column="tableColumn" :datas="tableData" v-if="!isProject">
                <template #name="{row}">
                    <span class="text-blue text-hover">{{ row.name }}</span>
                </template>
            </HcTable>


            <div class="bg-white p-2  " style="height: 100%;">
                <el-table :data="tableData" border style="width: 100%;  "
                          v-if="!isProject"
                          :span-method="spanMethod"
                          :cell-style="columnStyle"
                          :header-cell-style="tableHeaderColor"
                          class="card-box1"
                >
                    <el-table-column prop="name" label="项目名称">
                        <template #default="scope">
                            <div @click='rowNameClick(scope.row)'>
                                    <span class="text-blue text-hover"
                                          @click="rowNameClick(scope.row)"> {{ scope.row.name }}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="contract" label="合同额" align="center"/>
                    <el-table-column prop="cost" label="测算成本" align="center"/>
                    <el-table-column prop="disbursed" label="实际已支出成本" align="center"/>
                    <el-table-column prop="receive" label="实际已回款" align="center"/>
                    <el-table-column prop="uncollected" label="未回款" align="center"/>
                </el-table>

                <div class="project_table" v-else>
                    <div class="project_table_title">
                        <HcIcon name="arrow-left-double" class="goback_icon" @click="showAllexcel"
                                v-if="isShowDetailtable===1"/>
                        <HcIcon name="arrow-left-double" class="goback_icon" @click="showDetail"
                                v-if="isShowDetailtable===2"/>
                        <HcIcon name="arrow-left-double" class="goback_icon" @click="showPrice"
                                v-if="isShowDetailtable===3"/>
                        <span v-if="isShowDetailtable===1">XXX项目</span>
                        <span v-if="isShowDetailtable===3">XXX项目>研发部</span>
                        <span v-if="isShowDetailtable===2">XXX项目>研发部>产品-研发</span>
                    </div>
                    <el-table :data="protableData" border style="width: 100%; " v-if="isShowDetailtable===3"
                              class=" card-box"

                              :header-cell-style="tableHeaderColor"
                    >
                        <el-table-column prop="link" label="项目环节" align="center"/>
                        <el-table-column prop="type" label="参与" align="center">
                            <template #default="scope">
                                <HcIcon name="checkbox-circle" class="text-green " v-if="scope.row.type==1"/>
                                <HcIcon name="error-warning" class="text-red " v-else/>
                            </template>
                        </el-table-column>
                        <el-table-column prop="cost" label="成本支出（元）" align="center"/>
                        <el-table-column prop="timecost" label="时间成本（工作日）" align="center"/>
                        <el-table-column prop="peoplecost" label="人员投入（人）" align="center"/>
                        <el-table-column prop="detail" label="明细">
                            <template #default="scope">
                                <div @click='rowDetail(scope.row)'>
                                    <span class="text-blue text-hover">查看明细</span>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-table :data="priceData" border style="width: 100%;"
                              class=" card-box"
                              v-if="isShowDetailtable===1"
                              :span-method="pricespanMethod"
                              :cell-style="pricecolumnStyle"
                              :header-cell-style="pricetableHeaderColor"

                    >
                        <el-table-column prop="pricetype" label="费用分类"/>
                        <el-table-column prop="price" label="测算费用（元）" align="center"/>
                        <el-table-column prop="cost" label="实际费用（元）" align="center"/>
                        <el-table-column prop="detail" label="费用明细" align="center">
                            <template #default="scope">
                                <div @click='rowpriceDetail(scope.row)'>
                                    <span class="text-blue text-hover">查看明细</span>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="total" label="总计" align="center"/>
                    </el-table>
                    <el-table :data="costData" border style="width: 100%"
                              v-if="isShowDetailtable===2"
                              :span-method="costspanMethod"
                              :cell-style="costcolumnStyle"
                              :header-cell-style="costtableHeaderColor"
                              class=" card-box"
                    >
                        <el-table-column prop="costobject" label="费用分类"/>
                        <el-table-column prop="price" label="费用（元）" align="center"/>
                        <el-table-column prop="total" label="总计" align="center"/>
                    </el-table>
                </div>
            </div>
        </HcCardItem>
    </div>
</template>
<script setup>
import {onActivated, ref} from "vue";
import mainApi from "~api/static/project";
import {getSpanMethod} from "~src/utils/el-table-span-method";


onActivated(() => {

})

//类型处理
const tabsKey = ref('image')
const tabsData = ref([
    {icon: 'bar-chart-box', label: '列表统计', key: 'image'},
    // {icon: 'image', label: '图形统计', key: 'excel'},
])

const tabsClick = (key) => {
    tabsKey.value = key
}

const tableColumn = [
    {key: 'name', name: '名称', minWidth: 200},
    {key: 'contract', name: '合同额', align: 'center'},
    {key: 'cost', name: '测算成本', align: 'center'},
    {key: 'disbursed', name: '实际已支出成本', align: 'center'},
    {key: 'receive', name: '实际已回款', align: 'center'},
    {key: 'uncollected', name: '未回款', align: 'center'},
]
const tableData = ref([
    {
        name: '延长高速公路大蒲柴河至烟筒山段PPP项目',
        contract: '222',
        cost: 'red',
        disbursed: '1111',
        receive: '1111',
        uncollected: '2222',
        total: 10000
    },
    {
        name: '延长高速公路大蒲柴河至烟筒山段PPP项目',
        contract: '222',
        cost: 'red',
        disbursed: '1111',
        receive: '1111',
        uncollected: '2222',
        total: 10000
    },
    {
        name: '延长高速公路大蒲柴河至烟筒山段PPP项目',
        contract: '222',
        cost: 'red',
        disbursed: '1111',
        receive: '1111',
        uncollected: '2222',
        total: 10000
    },
])
//合并
const spanMethod = ref(
    getSpanMethod(tableData.value, ['id'], ['total'])
)
const columnStyle = ({row, column, rowIndex, columnIndex}) => {
    // 状态列字体颜色
    // columnIndex 列下标
    // rowIndex 行下标
    // row 行
    // column 列
    if (columnIndex === 6) {
        return {background: "rgba(64, 149, 229, 0.44)", fontSize: "24px"};

    }
}
// 更改表头样式
const tableHeaderColor = ({row, column, rowIndex, columnIndex}) => {
    if (columnIndex === 6) {
        return {background: "rgba(64, 149, 229, 0.44)"};
    }
    if (columnIndex === 1 || columnIndex === 0 || columnIndex === 2 || columnIndex === 3 || columnIndex === 4 || columnIndex === 5) {
        return {fontSize: "18px", color: "black"};
    }
}

const protableData = ref([
    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
    {link: '商机-演示沟通3333333333', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},


])
const isProject = ref(false)
const rowNameClick = (row) => {
    isProject.value = true
    isShowDetailtable.value = 1
}
const showAllexcel = () => {
    isProject.value = false
    isShowDetailtable.value = 1

}
const showDetail = () => {
    isShowDetailtable.value = 3
}
const isShowDetailtable = ref()
const rowDetail = () => {
    isShowDetailtable.value = 2
}

//费用明细

const priceData = ref([
    {pricetype: '商务佣金', price: '2365', cost: '1010', total: '8858'},
    {pricetype: '商务佣金', price: '2365', cost: '1010', total: '8858'},
    {pricetype: '商务佣金', price: '2365', cost: '1010', total: '8858'},
    {pricetype: '商务佣金', price: '2365', cost: '1010', total: '8858'},

])

//合并
const pricespanMethod = ref(
    getSpanMethod(priceData.value, ['id'], ['total'])
)
const pricecolumnStyle = ({row, column, rowIndex, columnIndex}) => {
    if (columnIndex === 4) {
        return {background: "rgba(64, 149, 229, 0.44)", fontSize: "24px",};

    }
}
// 更改表头样式
const pricetableHeaderColor = ({row, column, rowIndex, columnIndex}) => {
    if (columnIndex === 4) {
        return {background: "rgba(64, 149, 229, 0.44)", fontSize: "18px", color: "black"};
    }
    if (columnIndex === 1 || columnIndex === 0 || columnIndex === 2 || columnIndex === 3) {
        return {fontSize: "18px", color: "black"};
    }

}
const rowpriceDetail = () => {
    isShowDetailtable.value = 3
}
const showPrice = () => {
    isShowDetailtable.value = 1
}
//成本明细cost

const costData = ref([
    {costobject: '陆秀贤', price: '2222', total: '45689'},
    {costobject: '陆秀贤', price: '2222', total: '45689'},
    {costobject: '陆秀贤', price: '2222', total: '45689'},
    {costobject: '陆秀贤', price: '2222', total: '45689'},

])
//合并
const costspanMethod = ref(
    getSpanMethod(costData.value, ['id'], ['total'])
)
const costcolumnStyle = ({row, column, rowIndex, columnIndex}) => {
    if (columnIndex === 2) {
        return {background: "rgba(64, 149, 229, 0.44)", fontSize: "24px"};

    }
}
// 更改表头样式
const costtableHeaderColor = ({row, column, rowIndex, columnIndex}) => {
    if (columnIndex === 2) {
        return {background: "rgba(64, 149, 229, 0.44)", fontSize: "18px", color: "black", lineHeight: "30px"};
    }
    if (columnIndex === 1 || columnIndex === 0) {
        return {fontSize: "18px", color: "black"};
    }
}


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

</style>
