<template>
    <HcCard>
        <template #header>
            <div class="hc-card-header-back" @click="goBackClick">
                <HcIcon name="arrow-go-back"/>
                <span>返回</span>
            </div>
            <span class="mr-2">{{projectName}} 总成本为</span>
            <span class="text-red text-xl">{{ previewTotalCost }}</span>
            <span class="ml-2">元</span>
        </template>
        <template #extra>
            <div class="w-44">
                <el-select block clearable placeholder="费用支出所属分类" size="large">
                    <el-option v-for="item in projectType" :label="item.name" :value="item.key"/>
                </el-select>
            </div>
            <div class="w-40 ml-2">
                <el-select block clearable placeholder="请选择参建方" size="large">
                    <el-option v-for="item in projectType" :label="item.name" :value="item.key"/>
                </el-select>
            </div>
        </template>
        <div class="hc-table-ref-box no-border hc-project-cost-data">
            <el-table :data="tableData" border
                      :header-cell-style="tableHeaderCellStyle"
                      :cell-style="tableCellStyle"
                      style="width: 100%; height: 100%"
                      :loading="tableLoading"
            >
                <el-table-column prop="costTypeValue" label="费用分类" align="center"/>
                <el-table-column prop="projectProcessValue" label="项目环节" align="center"/>
                <el-table-column prop="budgetTypeValue" label="预算类型" align="center"/>
                <el-table-column prop="taskDetailValue" label="任务明细" align="center"/>
                <el-table-column prop="budgetDays" label="预计工作量(小数/整数)" align="center"/>
                <el-table-column prop="postTypeValue" label="投入岗位类型(日单价)" align="center">
                    <template #default="{ row }">
                        <div style="background: #00CCFF">{{ row.postTypeValue }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="staffCount" label="投入人员数量" align="center"/>
                <el-table-column prop="budgetStaffCost" label="预计人工成本(元)" align="center">
                    <template #default="{ row }">
                        <div style="background: #fe6e22">{{ row.budgetStaffCost }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="budgetTravelExpense" label="预计差旅费(元)" align="center"/>
                <el-table-column prop="outsourceUnitPrice" label="外包单价" align="center"/>
                <el-table-column prop="outsourcePeopleCount" label="外包数量" align="center"/>
                <el-table-column prop="outsourceCountMoney" label="外包金额" align="center"/>
                <el-table-column prop="otherBudgetMoney" label="其他预算金额" align="center"/>
                <el-table-column prop="budgetCountMoney" label="总预算金额" align="center">
                    <template #default="{ row }">
                        <div style="background: #fe6e22">{{ row.budgetCountMoney }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="budgetRemark" label="测算备注" align="center"/>
            </el-table>
        </div>
    </HcCard>
</template>

<script setup>
import {onActivated, ref} from "vue";
import {useRouter, useRoute} from 'vue-router'
import costApi from '~api/project/cost.js';
import {getArrValue,getObjValue,formValidate} from "js-fast-way"
//初始变量
const router = useRouter()
const useRoutes = useRoute()
const dataId = ref(useRoutes?.query?.id ?? '')

//缓存页面被激活时
onActivated(() => {
    dataId.value = useRoutes?.query?.id ?? ''
    console.log(useRoutes.query)
    getTableData()
})

const projectType = ref([
    {key: '1', name: '选项1'},
    {key: '2', name: '选项2'},
])

//表格数据
const tableData = ref([
    {id: '1', key1: '选项1', key2: 'xxxx'},
    {id: '2', key1: '选项2', key2: 'xxxx'},
    {id: '3', key1: '选项3', key2: 'xxxx'},
])
const tableLoading=ref(false)
const projectName=ref('')
const previewTotalCost=ref('')
const getTableData = async() => {
    tableLoading.value = true
    const {error, code, data} = await costApi.getBudgetList({projectId:dataId.value})
    tableLoading.value = false
    if (!error && code === 200) {
        tableData.value = getArrValue(data['previewList'])
        projectName.value=data?.projectName
        previewTotalCost.value=data?.previewTotalCost
   
    } else {
        tableData.value = []
    
    }
}
//自定义表头样式
const tableHeaderCellStyle = ({column}) => {
    if (column.property === 'key6' || column.property === 'key14') {
        return {backgroundColor: 'rgba(233, 157, 66, 0.23)', color: '#101010'}
    } else if (column.property === 'key8') {
        return {backgroundColor: 'rgba(147, 210, 243, 0.23)', color: '#101010'}
    } else {
        return {backgroundColor: 'rgba(73, 128, 248, 0.23)', color: '#101010'}
    }
}

//自定义列的样式
const tableCellStyle = ({column}) => {
    if (column.property === 'key6' || column.property === 'key14') {
        return {backgroundColor: 'rgba(233, 157, 66, 0.23)'}
    } else if (column.property === 'key8') {
        return {backgroundColor: 'rgba(147, 210, 243, 0.23)'}
    } else {
        return {}
    }
}


//取消并返回
const goBackClick = () => {
    router.back()
}
</script>

<style lang="scss">
.hc-project-cost-data .el-table {
    --el-table-border-color: #b7b7b7;
}
</style>
