<template>
    <el-scrollbar class="hc-main-scrollbar">
        <div class="hc-main-row">
            <el-row :gutter="14">
                <el-col :span="6">
                    <HcGradientCard color="green1">
                        <div class="hc-card-item-sub">
                            <div class="item-sub-icon">
                                <HcIcon name="calendar-todo"/>
                            </div>
                            <div class="item-sub-content">
                                <div class="num">36条</div>
                                <div class="title">您的任务总计划</div>
                            </div>
                        </div>
                    </HcGradientCard>
                </el-col>
                <el-col :span="6">
                    <HcGradientCard color="blue2">
                        <div class="hc-card-item-sub">
                            <div class="item-sub-icon">
                                <HcIcon name="calendar-check"/>
                            </div>
                            <div class="item-sub-content">
                                <div class="num">53条</div>
                                <div class="title">已完成计划</div>
                            </div>
                        </div>
                    </HcGradientCard>
                </el-col>
                <el-col :span="6">
                    <HcGradientCard color="pink1">
                        <div class="hc-card-item-sub">
                            <div class="item-sub-icon">
                                <HcIcon name="alert" fill/>
                            </div>
                            <div class="item-sub-content">
                                <div class="num">14条</div>
                                <div class="title">风险计划</div>
                            </div>
                        </div>
                    </HcGradientCard>
                </el-col>
                <el-col :span="6">
                    <HcGradientCard color="purple1">
                        <div class="hc-card-item-sub">
                            <div class="item-sub-icon">
                                <HcIcon name="time"/>
                            </div>
                            <div class="item-sub-content">
                                <div class="num">22条</div>
                                <div class="title">延期计划</div>
                            </div>
                        </div>
                    </HcGradientCard>
                </el-col>
            </el-row>

            <el-row :gutter="14" class="mt-8">
                <el-col :span="12">
                    <HcCardItem ui="hac-card-item">
                        <template #header>
                            <div class="hac-card-title">最新预警信息</div>
                        </template>
                        <div class="hac-card-item-table">
                            <HcTable ui="no-border" indexName="编号" :column="tableColumn" :datas="tableData"/>
                        </div>
                    </HcCardItem>
                </el-col>
                <el-col :span="12">
                    <HcCardItem ui="hac-card-item">
                        <template #header>
                            <div class="hac-card-title">通知</div>
                        </template>
                        <div class="hac-card-item-table">
                            <el-scrollbar>
                                <div class="hac-home-notice-item">
                                    <div class="line-clamp-2 title">
                                        《任务名称xxxxxx》中其中【任务描述】已被【代潘】变更为已完成状态，
                                        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx,
                                        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                                    </div>
                                    <div class="time">2022-10-25</div>
                                </div>
                                <div class="hac-home-notice-item">
                                    <div class="line-clamp-2 title">《任务名称xxxxxx》您有一条新任务待执行，xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>
                                    <div class="time">2022-10-25</div>
                                </div>
                                <div class="hac-home-notice-item">
                                    <div class="line-clamp-2 title">《任务名称xxxxxx》您有一条新任务待执行，xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>
                                    <div class="time">2022-10-25</div>
                                </div>
                                <div class="hac-home-notice-item">
                                    <div class="line-clamp-2 title">《任务名称xxxxxx》您有一条新任务待执行，xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>
                                    <div class="time">2022-10-25</div>
                                </div>
                            </el-scrollbar>
                        </div>
                    </HcCardItem>
                </el-col>
            </el-row>

            <HcCardItem ui="hac-card-item mt-4">
                <template #header>
                    <div class="hac-card-title">任务统计</div>
                </template>
                <template #extra>
                    <HcDropdown :cur="planTime" :datas="itemData"/>
                </template>
                <div class="hac-card-item-body">
                    <el-row :gutter="14">
                        <el-col :span="4">
                            <div class="hac-row-total-item">
                                <div class="num">96</div>
                                <div class="text">累计任务总数</div>
                            </div>
                        </el-col>
                        <el-col :span="4">
                            <div class="hac-row-total-item">
                                <div class="num">33</div>
                                <div class="text">累计未完成任务</div>
                            </div>
                        </el-col>
                        <el-col :span="4">
                            <div class="hac-row-total-item">
                                <div class="num">3</div>
                                <div class="text">累计取消任务</div>
                            </div>
                        </el-col>
                        <el-col :span="4">
                            <div class="hac-row-total-item">
                                <div class="num">6</div>
                                <div class="text">累计延期任务</div>
                            </div>
                        </el-col>
                        <el-col :span="4">
                            <div class="hac-row-total-item">
                                <div class="num">6</div>
                                <div class="text">累计转移任务</div>
                            </div>
                        </el-col>
                        <el-col :span="4">
                            <div class="hac-row-total-item">
                                <div class="num">1</div>
                                <div class="text">累计未填写日志</div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </HcCardItem>

            <HcCardItem ui="hac-card-item mt-4">
                <template #header>
                    <div class="hac-card-title">计划统计图</div>
                </template>
                <div class="hac-card-item-body">
                    <div class="hc-row-echarts-box">
                        <BarLabelRotation isMonth :datas="planDatas" :legend="{show:false,   }"/>
                    </div>
                </div>
            </HcCardItem>
        </div>
    </el-scrollbar>
</template>

<script setup>
import {onMounted, ref} from "vue";
import BarLabelRotation from "~com/echarts/BarLabelRotation.vue";

const tableColumn = [
    {key: 'name', name: '任务名称', align: 'left'},
    {key: 'text', name: '关联项目', align: 'left'},
    {key: 'time', name: '完成时间', align: 'left'}
]
const tableData = ref([
    {name: '名称1', text: '奉建路', time: '2023-03-20'},
    {name: '名称2', text: '奉建路', time: '2023-03-21'},
    {name: '名称3', text: '奉建路', time: '2023-03-22'},
    {name: '名称4', text: '奉建路', time: '2023-03-20'},
    {name: '名称5', text: '奉建路', time: '2023-03-21'},
    {name: '名称6', text: '奉建路', time: '2023-03-22'},
    {name: '名称7', text: '奉建路', time: '2023-03-20'},
    {name: '名称8', text: '奉建路', time: '2023-03-21'},
    {name: '名称9', text: '奉建路', time: '2023-03-22'}
])

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

//计划统计图
const planDatas = 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]
    },
])
</script>

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