<template>
    <el-scrollbar class="hc-main-scrollbar">
        <div class="hc-main-row">
            <el-row :gutter="14">
                <el-col :span="4">
                    <HcCardItem ui="hac-card-item">
                        <template #header>
                            <div class="hac-card-title g">年度合同指标</div>
                        </template>
                        <template #extra>
                            <img class="hac-extra-img" :src="QImg" alt="">
                        </template>
                        <div class="hac-card-item-body">
                            <div class="money">￥3,000.00</div>
                            <div class="text">已收入：￥220</div>
                        </div>
                    </HcCardItem>
                </el-col>
                <el-col :span="4">
                    <HcCardItem ui="hac-card-item">
                        <template #header>
                            <div class="hac-card-title g">年度利润指标</div>
                        </template>
                        <template #extra>
                            <img class="hac-extra-img" :src="QImg" alt="">
                        </template>
                        <div class="hac-card-item-body">
                            <div class="money">￥1,000.00</div>
                            <div class="text">已盈利：￥?</div>
                        </div>
                    </HcCardItem>
                </el-col>
                <el-col :span="16">
                    <HcCardItem ui="hac-card-item">
                        <template #header>
                            <div class="hac-card-title g">进度统计</div>
                        </template>
                        <div class="hac-card-item-body">
                            <div class="hac-item-progress">
                                <div class="title">年度合同指标</div>
                                <div class="num">
                                    <el-progress :text-inside="true" :stroke-width="18" :percentage="70" color="#8978FD"/>
                                </div>
                            </div>
                            <div class="hac-item-progress">
                                <div class="title">年度利润指标</div>
                                <div class="num">
                                    <el-progress :text-inside="true" :stroke-width="18" :percentage="30" color="#73A3FE"/>
                                </div>
                            </div>
                        </div>
                    </HcCardItem>
                </el-col>
            </el-row>

            <HcCardItem ui="hac-card-item mt-4">
                <template #header>
                    <div class="hac-card-title text-black">年度各项费用统计</div>
                </template>
                <template #extra>
                    <HcDropdown :cur="planTime" :datas="itemData"/>
                </template>
                <div class="hac-card-item-body mb-2">
                    <el-row :gutter="14">
                        <el-col :span="6">
                            <HcGradientCard color="purple1">
                                <div class="hc-card-item-sub">
                                    <div class="item-sub-content">
                                        <div class="title">总合同</div>
                                        <div class="num-box">
                                            <span class="num">1200</span>
                                            <span class="text">万</span>
                                        </div>
                                    </div>
                                    <div class="item-sub-icon">
                                        <img class="img" :src="HeImg" alt="">
                                    </div>
                                </div>
                            </HcGradientCard>
                        </el-col>
                        <el-col :span="6">
                            <HcGradientCard color="blue1">
                                <div class="hc-card-item-sub">
                                    <div class="item-sub-content">
                                        <div class="title">总收入</div>
                                        <div class="num-box">
                                            <span class="num">560</span>
                                            <span class="text">万</span>
                                        </div>
                                    </div>
                                    <div class="item-sub-icon">
                                        <img class="img" :src="ShouImg" alt="">
                                    </div>
                                </div>
                            </HcGradientCard>
                        </el-col>
                        <el-col :span="6">
                            <HcGradientCard color="red1">
                                <div class="hc-card-item-sub">
                                    <div class="item-sub-content">
                                        <div class="title">总实际支出</div>
                                        <div class="num-box">
                                            <span class="num">90</span>
                                            <span class="text">万</span>
                                        </div>
                                    </div>
                                    <div class="item-sub-icon">
                                        <img class="img" :src="ZhiImg" alt="">
                                    </div>
                                </div>
                            </HcGradientCard>
                        </el-col>
                        <el-col :span="6">
                            <HcGradientCard color="purple1">
                                <div class="hc-card-item-sub">
                                    <div class="item-sub-content">
                                        <div class="title">总计划支出</div>
                                        <div class="num-box">
                                            <span class="num">125</span>
                                            <span class="text">万</span>
                                        </div>
                                    </div>
                                    <div class="item-sub-icon">
                                        <img class="img" :src="Zhi1Img" alt="">
                                    </div>
                                </div>
                            </HcGradientCard>
                        </el-col>
                    </el-row>
                </div>
            </HcCardItem>

            <HcCardItem ui="hac-card-item mt-4">
                <template #header>
                    <div class="hac-card-title text-black">本年度各项目支出对比</div>
                </template>
                <template #extra>
                    <HcDropdown :cur="planTime" :datas="itemData"/>
                </template>
                <div class="hc-row-echarts-box" style="height: 260px">
                    <BarLabelRotation isMonth :datas="expendDatas"/>
                </div>
            </HcCardItem>

            <el-row :gutter="14" class="mt-4">
                <el-col :span="10">
                    <HcCardItem ui="hac-card-item">
                        <template #header>
                            <div class="hac-card-title text-black">当月各部门计划安排比重</div>
                        </template>
                        <template #extra>
                            <HcDropdown :cur="planTime" :datas="itemData"/>
                        </template>
                        <div class="hac-card-item-body" style="height: 410px">
                            <HcTable ui="no-border" :isIndex="false" :column="tableColumn" :datas="tableData"/>
                        </div>
                    </HcCardItem>
                </el-col>
                <el-col :span="14">
                    <div class="hac-card-col-item">
                        <HcCardItem ui="hac-card-item">
                            <template #header>
                                <div class="hac-card-icon-title">
                                    <HcIcon name="alarm-warning" ui="text-orange text-xl"/>
                                    <el-badge :value="12">
                                        <span class="ml-2 mr-3 text-black">影响回款的风险计划</span>
                                    </el-badge>
                                </div>
                            </template>
                            <div class="hac-card-item-body" style="height: 160px">
                                <HcTable ui="no-border" :isIndex="false" :column="tableColumn1" :datas="tableData1">
                                    <template #action="{row,index}">
                                        <el-button plain size="small" type="primary">查看</el-button>
                                    </template>
                                </HcTable>
                            </div>
                        </HcCardItem>
                    </div>
                    <div class="hac-card-col-item mt-4">
                        <el-row :gutter="14">
                            <el-col :span="12">
                                <HcCardItem ui="hac-card-item">
                                    <template #header>
                                        <div class="hac-card-title text-black">各项目支出占比统计</div>
                                    </template>
                                    <template #extra>
                                        <HcDropdown :cur="planTime" :datas="itemData"/>
                                    </template>
                                    <div class="hac-card-item-body" style="height: 160px">
                                        <BorderRadius :datas="expendStatisticsDatas"/>
                                    </div>
                                </HcCardItem>
                            </el-col>
                            <el-col :span="12">
                                <HcCardItem ui="hac-card-item">
                                    <template #header>
                                        <div class="hac-card-title text-black">各项目收入占比统计</div>
                                    </template>
                                    <template #extra>
                                        <HcDropdown :cur="planTime" :datas="itemData"/>
                                    </template>
                                    <div class="hac-card-item-body" style="height: 160px">
                                        <SimpleChart :datas="incomeStatisticsDatas"/>
                                    </div>
                                </HcCardItem>
                            </el-col>
                        </el-row>
                    </div>
                </el-col>
            </el-row>

            <HcCardItem ui="hac-card-item mt-4">
                <template #header>
                    <div class="hac-card-title text-black">项目服务阶段进程</div>
                </template>
                <template #extra>
                    <el-select v-model="value" size="small">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
                    </el-select>
                </template>
                <div class="hc-row-echarts-box pt-5 mb-1">
                    <ProgressChart leftTitle="计划执行进度" rightTitle="已支出成本" title="商机商机商机商机商机" leftRatio="100" rightRatio="70" rightText="36222.36"/>
                    <ProgressChart title="商机" leftRatio="40" rightRatio="50" rightText="95231"/>
                    <ProgressChart title="商机商机" leftRatio="55" rightRatio="35" rightText="16895"/>
                    <ProgressChart title="商机商机商机" leftRatio="40" rightRatio="28.6" rightText="6352"/>
                    <ProgressChart title="商机商机商机商机" leftRatio="30" rightRatio="15" rightText="1200"/>
                    <ProgressChart title="商机商机商机商机商机" leftRatio="20" rightRatio="8" rightText="300"/>
                </div>
            </HcCardItem>
        </div>
    </el-scrollbar>
</template>

<script setup>
import {ref} from "vue";
import QImg from "~src/assets/images/q.png";
import HeImg from "~src/assets/images/he.png";
import ShouImg from "~src/assets/images/shou.png";
import ZhiImg from "~src/assets/images/zhi.png";
import Zhi1Img from "~src/assets/images/zhi1.png";
import BarLabelRotation from "~com/echarts/BarLabelRotation.vue";
import BorderRadius from "~com/echarts/BorderRadius.vue";
import SimpleChart from "~com/echarts/SimpleChart.vue";
import ProgressChart from "~com/echarts/ProgressChart.vue";

//选择日期时间
const planTime = ref('汇总所有')
const itemData = ref([{name: '2023年02月'}, {name: '2023年03月'}, {name: '2023年04月'}, {name: '汇总所有'}])

const tableColumn = [
    {key: 'name', name: '项目名称'},
    {key: 'put1', name: '实施投入', align: 'center'},
    {key: 'put2', name: '研发投入', align: 'center'},
    {key: 'put3', name: '维护投入', align: 'center'}
]
const tableData = ref([
    {name: '名称1', put1: '26%', put2: '26%', put3: '26%'},
    {name: '名称2', put1: '26%', put2: '26%', put3: '26%'},
    {name: '名称3', put1: '26%', put2: '26%', put3: '26%'},
    {name: '名称4', put1: '26%', put2: '26%', put3: '26%'},
    {name: '名称5', put1: '26%', put2: '26%', put3: '26%'},
    {name: '名称6', put1: '26%', put2: '26%', put3: '26%'},
    {name: '名称7', put1: '26%', put2: '26%', put3: '26%'},
    {name: '名称8', put1: '26%', put2: '26%', put3: '26%'},
])

const tableColumn1 = [
    {key: 'name', name: '项目名称'},
    {key: 'section', name: '风险部门', align: 'center'},
    {key: 'time', name: '原计划完成时间', align: 'center'},
    {key: 'delay', name: '延期计划条数', align: 'center'},
    {key: 'action', name: '操作', align: 'center'},
]
const tableData1 = ref([
    {name: '名称1', section: '研发部', time: '2023-04-28', delay: '26'},
    {name: '名称2', section: '研发部', time: '2023-04-28', delay: '26'},
    {name: '名称3', section: '业务部', time: '2023-04-28', delay: '26'},
    {name: '名称4', section: '业务部', time: '2023-04-28', delay: '26'},
    {name: '名称5', section: '业务部', time: '2023-04-28', delay: '26'},
])

const value = ref('')
const options = [
    {
        value: 'Option1',
        label: '奉建路',
    },
    {
        value: 'Option2',
        label: '西环线',
    },
    {
        value: 'Option3',
        label: '陈油路',
    },
]

//年度各项目支出对比
const expendDatas = ref([
    {
        name: '奉建路',
        value: [120, 132, 101, 134, 90, 230, 210, 210, 210, 210, 132, 101]
    },
    {
        name: '西环线',
        value: [120, 132, 101, 134, 90, 230, 210, 210, 210, 210, 132, 101]
    },
    {
        name: '陈油路',
        value: [120, 132, 101, 134, 90, 230, 210, 210, 210, 210, 132, 101]
    },
    {
        name: '宝贝路',
        value: [120, 132, 101, 134, 90, 230, 210, 210, 210, 210, 132, 101]
    },
])

//各项目支出占比统计
const expendStatisticsDatas = ref([
    { value: 1048, name: '奉建路' },
    { value: 735, name: '西环线' },
    { value: 580, name: '陈油路' },
    { value: 484, name: '宝北路' }
])

//各项目收入占比统计
const incomeStatisticsDatas = ref([
    { value: 1048, name: '奉建路' },
    { value: 735, name: '西环线' },
    { value: 580, name: '陈油路' },
    { value: 484, name: '宝北路' }
])
</script>

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

<style lang="scss">
.hac-item-progress .num .el-progress .el-progress-bar .el-progress-bar__outer,
.hac-item-progress .num .el-progress .el-progress-bar .el-progress-bar__inner {
    border-radius: 3px;
}
</style>
