<template>
    <el-scrollbar class="hc-main-scrollbar">
        <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">1200</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">560</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">90</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">125</span>
                                <span class="text">万</span>
                            </div>
                        </div>
                    </HcGradientCard>
                </el-col>
            </el-row>
            <HcTabsSimple :cur="tabsKey" :datas="tabsData" @tabClick="tabsClick" class="mt-6">
                <template #tab-image>
                    <div class="bg-white p-2">
                        <el-table :data="tableData" border style="width: 100%"
                                  v-if="!isProject"
                                  :span-method="spanMethod"
                                  :cell-style="columnStyle"
                                  :header-cell-style="tableHeaderColor"
                        >
                            <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-column prop="total" 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"/>
                                XXX项目
                            </div>
                            <el-table :data="protableData" border style="width: 100%" v-if="isShowDetailtable===1">
                                <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%"
                                      v-if="isShowDetailtable===2"
                                      :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="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===3"
                                      :span-method="costspanMethod"
                                      :cell-style="costcolumnStyle"
                                      :header-cell-style="costtableHeaderColor"
                            >
                                <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>
                </template>
                <template #tab-excel>
                    <div style="position: relative; background-color: #EBF4F6;" v-if="!isProject">
                        <HcCardItem ui="hac-card-item">
                            <template #header>
                                <div class="hac-card-title">项目回款/未回款统计</div>
                            </template>
                            <div class="hac-card-item-body">
                                <el-row :gutter="14">
                                    <el-col :span="4">
                                        <div class="hac-row-total-item">
                                            <div class="num">1234.33</div>
                                            <div class="text">累计总回款</div>
                                            <div class="text">占比34%</div>
                                        </div>
                                    </el-col>
                                    <el-col :span="4">
                                        <div class="hac-row-total-item">
                                            <div class="num">123456</div>
                                            <div class="text">累计剩余回款</div>
                                            <div class="text">占比34%</div>
                                        </div>
                                    </el-col>
                                    <el-col :span="4">
                                        <div class="hac-row-total-item">
                                            <div class="num">3</div>
                                            <div class="text">累计总项目</div>
                                            <div class="text">占比34%</div>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                            <div class="hc-row-echarts-box" style="height: 300px;margin-top:10px" v-if="tabsKey==='excel'">
                                <StackedDouble isMonth name="已回款" :ydata="costsydata" :xdata="costxdata" :legend="costlegend" unit="元"/>
                            </div>
                        </HcCardItem>
                        <div class="hc-main-row" v-if="tabsKey==='excel'">
                            <el-row :gutter="14" class="mt-4">
                                <el-col :span="12">
                                    <HcCardItem ui="hac-card-item">
                                        <template #header>
                                            <div class="hac-card-title">回款排行榜</div>
                                        </template>
                                        <div class="hc-row-echarts-box" style="height: 300px;">
                                            <WordPopulation isMonth name="已回款" :ydata="ydata" :xdata="xdata" unit="元"/>
                                        </div>
                                    </HcCardItem>
                                </el-col>
                                <el-col :span="12">
                                    <HcCardItem ui="hac-card-item">
                                        <template #header>
                                            <div class="hac-card-title">支出/回款对比</div>
                                        </template>
                                        <div class="hc-row-echarts-box" style="height: 300px;">
                                            <StackedLine isMonth :ydata="sydata" :xdata="sxdata" :legend="slegend"/>
                                        </div>
                                    </HcCardItem>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                    <div v-else>
                        <div v-if="isShowDetailtable===1">
                            <div class="hc-main-row" v-if="tabsKey==='excel'">
                                <el-row :gutter="14">
                                    <el-col :span="24">
                                        <HcCardItem ui="hac-card-item">
                                            <template #header>
                                                <div class="hac-card-title">项目投入环节占比</div>
                                            </template>
                                            <div class="hc-row-echarts-box" style="height: 300px;width:50%">
                                                <SimpleChart :datas="incomeStatisticsDatas " v-if="isShowDetailtable===1"/>
                                            </div>
                                        </HcCardItem>
                                    </el-col>
                                </el-row>
                            </div>
                        </div>
                        <div v-if="isShowDetailtable===2">
                            <div class="hc-main-row" v-if="tabsKey==='excel'">
                                <el-row :gutter="14">
                                    <el-col :span="24">
                                        <HcCardItem ui="hac-card-item">
                                            <template #header>
                                                <div class="hac-card-title">费用分类占比统计</div>
                                            </template>
                                            <div class="hc-row-echarts-box" style="height: 500px;">
                                                <Rose v-if="isShowDetailtable===2"/>
                                            </div>
                                        </HcCardItem>
                                    </el-col>
                                </el-row>
                            </div>
                        </div>
                        <div v-if="isShowDetailtable===3">
                            <div class="hc-main-row" v-if="tabsKey==='excel'">
                                <el-row :gutter="14">
                                    <el-col :span="24">
                                        <HcCardItem ui="hac-card-item">
                                            <template #header>
                                                <div class="hac-card-title">投入对象成本</div>
                                            </template>
                                            <div class="hc-row-echarts-box" style="height: 300px;">
                                                <WordPopulation isMonth name="费用" :ydata="costobjectydata" :xdata="xdata" unit="元"/>
                                            </div>
                                        </HcCardItem>
                                    </el-col>
                                </el-row>
                            </div>
                        </div>
                    </div>
                </template>
            </HcTabsSimple>
        </div>
    </el-scrollbar>
</template>
<script setup>
import {ref} from "vue";
import StackedLine from "~com/echarts/StackedLine.vue";
import WordPopulation from "~com/echarts/WordPopulation.vue";
import StackedDouble from "~com/echarts/StackedDouble.vue";
import SimpleChart from "~com/echarts/SimpleChart.vue";
import Rose from "~com/echarts/Rose.vue";
import {getSpanMethod} from "~src/utils/el-table-span-method";

//类型处理
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 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)"};
    }
}

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},
])
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 = 1
}
const isShowDetailtable = ref()
const rowDetail = () => {
    isShowDetailtable.value = 2
}

//费用明细

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

])

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

    }
}
// 更改表头样式
const pricetableHeaderColor = ({row, column, rowIndex, columnIndex}) => {
    if (columnIndex === 3) {
        return {background: "rgba(64, 149, 229, 0.44)"};
    }
}
const rowpriceDetail = () => {
    isShowDetailtable.value = 3
}
const showPrice = () => {
    isShowDetailtable.value = 2
}
//成本明细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)"};
    }
}
//图表数据
const ydata = ref(['西环线', '封建路', '封建路', '封建路', '西环线', '西环线'])
const costobjectydata = ref(['陆秀贤', '陆秀贤', '陆秀贤', '陆秀贤', '陆秀贤'])
const xdata = ref([10000, 2568, 5698, 4235, 9963, 7785])
const sydata = ref([
    {
        name: '已回款',
        type: 'line',
        stack: 'Total',
        data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
        name: '已支出',
        type: 'line',
        stack: 'Total',
        data: [220, 182, 191, 234, 290, 330, 310]
    },
])
const costxdata = ref(['奉建路', '西环线', '宝北路', '宝北路', '宝北路', '宝北路', '宝北路',])
const costlegend = ref(['已回款', '未回款',])
const costsydata = ref([
    {
        name: '已回款',
        type: 'bar',
        stack: 'Total',
        data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
        name: '未回款',
        type: 'bar',
        stack: 'Total',
        data: [220, 182, 191, 234, 290, 330, 310]
    },
])
const sxdata = ref(['奉建路', '西环线', '宝北路', '宝北路', '宝北路', '宝北路', '宝北路',])
const slegend = ref(['已回款', '未回款',])


//各项目收入占比统计
const incomeStatisticsDatas = ref([
    {value: 1048, name: '商机-沟通演示'},
    {value: 735, name: '合同-服务范围洽谈'},
    {value: 580, name: '产品-研发'},
    {value: 484, name: '产品-配置'},
    {value: 484, name: '产品-测试'},
])
</script>
<style lang="scss" scoped>
@import "~src/styles/static/project.scss";
.project_table_title {
    margin-top: 15px;
    margin-bottom: 15px;
}
.goback_icon {
    font-size: 24px;
    cursor: pointer;
    font-weight: bolder;
    color: var(--el-color-primary);
}
</style>
