<template>
    <HcCard>
        <template #header>
            <span class="text-blue font-bold text-lg">{{ name }}</span>
        </template>
        <template #extra>
            <el-button @click="goBackClick">
                <HcIcon name="arrow-go-back"/>
                <span>返回上一级</span>
            </el-button>
        </template>
        <div class="hc-program-annual-view-table">
            <el-table :data="tableData" :header-cell-style="tableHeaderCellStyle" style="width: 100%; height: 100%;">
                <el-table-column prop="key" label="经营分类" width="150" align="center">
                    <template #default="{ row, $index }">
                        <span class="title-span">{{row.key}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="预算" align="center">
                    <template v-for="item in tableColumn">
                        <el-table-column :prop="item.key" :label="item.name" align="center">
                            <template #default="{ row, $index }">
                                <span class="num-span" v-if="$index !== 2" @click="numSpanClick(item, $index,row)">{{row[item.key]}}</span>
                                <span class="total-span" v-else>{{row[item.key]}}</span>
                            </template>
                        </el-table-column>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!--收入详情预览-->
        <HcDialog bgColor="#ffffff" isToBody isTable :footer="false" :show="incomeModal" title="收入详情预览" widths="80%" @close="incomeCloseClick">
            <HcTable :isIndex="false" :column="tableIncomeColumn" :datas="tableIncomeData"/>
        </HcDialog>

        <!--支出详情预览-->
        <HcDialog bgColor="#ffffff" isToBody isTable :footer="false" :show="expendModal" title="支出详情预览" widths="62rem" @close="expendCloseClick">
            <HcTable :isIndex="false" :column="tableExpendColumn" :datas="tableExpendData"/>
        </HcDialog>

    </HcCard>
</template>

<script setup>
import {ref,onActivated} from "vue";
import {useRoute, useRouter} from 'vue-router'
import annualApi from '~api/program/annual.js';
import {getArrValue,getObjValue} from "js-fast-way"

const router = useRouter()
const useRoutes = useRoute()
const dataId = ref(useRoutes?.query?.id ?? '')
const name = ref(useRoutes?.query?.name ?? '')

//获取数据
const tableLoading = ref(false)
const tableColumn = [
    {key: 'key1', name: '1月'},
    {key: 'key2', name: '2月'},
    {key: 'key3', name: '3月'},
    {key: 'key4', name: '4月'},
    {key: 'key5', name: '5月'},
    {key: 'key6', name: '6月'},
    {key: 'key7', name: '7月'},
    {key: 'key8', name: '8月'},
    {key: 'key9', name: '9月'},
    {key: 'key10', name: '10月'},
    {key: 'key11', name: '11月'},
    {key: 'key12', name: '12月'},

    
  

]
const tableData = ref([
    {id: 1, key: '收入', key1: '10000', key2: '20000',  key3: '36', key4: '30', key5: '6'},
    {id: 2, key: '支出', key1: '10000', key2: '20000',  key3: '36', key4: '30', key5: '6'},
    {id: 3, key: '月总计', key1: '+10000', key2: '-20000',  key3: '+36', key4: '-30', key5: '-6'}
])
const getTableData = async() => {
    tableLoading.value = true
    const {error, code, data} = await annualApi.getPreview({id:dataId.value})
    tableLoading.value = false
    if (!error && code === 200) {
        let monthDisburseObj=tableData.value[1]
        let monthDisburse=data.monthDisburse
        monthDisburse.forEach((ele,index) => {
            monthDisburseObj['key'+parseInt(index+1)]=ele.disburse
            monthDisburseObj['disburseList'+'key'+parseInt(index+1)]=ele.disburseList
        });
        let incomeObj=tableData.value[0]
        let monthIncome=data.monthIncome
        monthIncome.forEach((ele,index) => {
            incomeObj['key'+parseInt(index+1)]=ele.income
            incomeObj['incomeList'+'key'+parseInt(index+1)]=ele.incomeList
        });
        let monthTotalObj=tableData.value[2]
        let monthTotal=data.monthTotal
        monthTotal.forEach((ele,index) => {
            monthTotalObj['key'+parseInt(index+1)]=ele
        });
    } else {
        tableData.value = []
    }
}
//缓存页面被激活时
onActivated(() => {
    getTableData()
   
})
//自定义表头样式
const tableHeaderCellStyle = () => {
    return {backgroundColor: 'rgba(64, 149, 229, 0.36)', color: '#101010'}
}

//名称被点击
const numSpanClick = (item, index,row) => {
    if (index === 0) {  //收入
        incomeModal.value = true
        tableIncomeData.value=row['incomeList'+item.key]
    } else if (index === 1) {   //支出
        expendModal.value = true
        tableExpendData.value=row['disburseList'+item.key]
        console.log(row['disburseList'+item.key]);
    }
}

//收入详情预览
const incomeModal = ref(false)
const incomeCloseClick = () => {
    incomeModal.value = false
}
//收入详情表格
const tableIncomeColumn = [
    {key: 'projectName', name: '项目名称'},
    {key: 'incomeTypeValue', name: '收入类别',  align: 'center'},
    {key: 'projectTypeValue', name: '项目类别', align: 'center'},
    {key: 'predictContractMoney', name: '产品线', align: 'center'},
    {key: 'predictSignDate', name: '预计签单时间', align: 'center'},
    {key: 'predictAnnualReturned', name: '预计新签合同额', align: 'center'},
    {key: 'predictAnnualReturned', name: '预计本年度回款总金额', align: 'center'},
]
const tableIncomeData = ref([
    {id: 1, key1: 'xxxx'},
    {id: 2, key1: 'xxxx'},
    {id: 3, key1: 'xxxx'},
    {id: 4, key1: 'xxxx'},
])


//支出详情预览
const expendModal = ref(false)
const expendCloseClick = () => {
    expendModal.value = false
}
//支出详情表格
const tableExpendColumn = [
    {key: 'budgetSubjectValue', name: '预算科目(一级)',  align: 'center'},
    {key: 'secondSubjectValue', name: '二级科目',  align: 'center'},
    {key: 'currentMonthMoney', name: '当月', align: 'center'},
]
const tableExpendData = ref([
    {id: 1, key1: 'xxxx'},
    {id: 2, key1: 'xxxx'},
    {id: 3, key1: 'xxxx'},
    {id: 4, key1: 'xxxx'},
])


const goBackClick = () => {
    router.back()
}
</script>

<style lang="scss">
.hc-program-annual-view-table {
    position: relative;
    height: 100%;
    .el-table {
        --el-table-border-color: #b7b7b7;
        --el-table-row-hover-bg-color: inherit;
        .el-table__header-wrapper {
            height: 130px;
        }
        .el-table__body-wrapper .el-scrollbar .el-scrollbar__view,
        .el-table__body-wrapper .el-table__body,
        .el-table__header-wrapper .el-table__header {
            height: 100%;
        }
    }
    .title-span {
        color: #101010;
        font-size: 16px;
        font-weight: bold;
    }
    .num-span {
        color: #4980F8;
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
    }
    .total-span {
        color: #E99D42;
        font-size: 16px;
        font-weight: bold;
    }
}
</style>
