<template>
    <hc-body scrollbar padding="12px">
        <HcAgentCharge :active="agentChargeIndex" @load="agentChargeLoad" />
        <div class="hc-home-chart-body relative mb-5 mt-5 h-[500px]">
            <el-row :gutter="20" class="h-full">
                <el-col :span="8" class="h-full">
                    <hc-new-card>
                        <template #header>
                            <div class="chart-title">
                                <img :src="frame001" alt="">
                                <div class="title-body">
                                    <span class="title">证书统计</span>
                                    <span class="text">(总计{{ pfxAmountVal }}个)</span>
                                </div>
                            </div>
                        </template>
                        <HcChartPfx :datas="pfxLists" />
                    </hc-new-card>
                </el-col>
                <el-col :span="8" class="h-full">
                    <hc-new-card>
                        <template #header>
                            <div class="chart-title">
                                <img :src="frame002" alt="">
                                <div class="title-body">
                                    <span class="title">人员账户统计</span>
                                    <span class="text">(总计{{ personAmount }}个)</span>
                                </div>
                            </div>
                        </template>
                        <HcChartPerson :datas="personUsers" />
                    </hc-new-card>
                </el-col>
                <el-col :span="8" class="h-full">
                    <hc-new-card>
                        <template #header>
                            <div class="chart-title">
                                <img :src="frame003" alt="">
                                <div class="title-body">维护类型统计汇总</div>
                            </div>
                        </template>
                        <template #extra>
                            <el-select v-model="projectId" placeholder="请选择项目" size="small" class="chart-select" @change="selectProjectOpinion">
                                <el-option v-for="item in projectList" :key="item.id" :label="item.projectName" :value="item.id" />
                            </el-select>
                        </template>
                        <HcChartType :datas="userTypeList" />
                    </hc-new-card>
                </el-col>
            </el-row>
        </div>
    </hc-body>
</template>

<script setup>
import { onActivated, ref } from 'vue'
import HcAgentCharge from './modules/agent-charge.vue'
import frame001 from '~src/assets/home/Frame001.png'
import frame002 from '~src/assets/home/Frame002.png'
import frame003 from '~src/assets/home/Frame003.png'
import HcChartPfx from './modules/chart-pfx.vue'
import HcChartPerson from './modules/chart-person.vue'
import HcChartType from './modules/chart-type.vue'
import { getArrValue, getObjValue } from 'js-fast-way'
import mainApi from '~api/home/index'

defineOptions({
    name: 'Index',
})

//激活
onActivated(() => {
    getChartData()
})

//工单类型
const agentChargeIndex = ref(1)
const agentChargeLoad = async (index, first, resolve) => {
    if (first) {
        await getAgentChargeData()
    } else {
        if (index === 1) {
            await queryBusinessUserOpinion()
        } else {
            await queryBusinessUserOpinionAll()
        }
        agentChargeIndex.value = index
    }
    resolve({
        tag: agentChargeTags.value,
        data: agentChargeData.value,
    })
}

//工单数据
const agentChargeTags = ref({ tag1: 0, tag2: 0 })
const agentChargeData = ref([])

const getAgentChargeData = async () => {
    const isRes = await queryBusinessUserOpinion()
    if (isRes) return
    agentChargeIndex.value = 2
    await queryBusinessUserOpinionAll()
}

//获取我的消息
const queryBusinessUserOpinion = async () => {
    const { data } = await mainApi.queryBusinessUserOpinion({
        current: 1,
        size: 999999,
    })
    //处理数据
    const { userOpinionFlowList, personToDoNumber } = getObjValue(data)
    agentChargeTags.value.tag1 = personToDoNumber ?? 0
    agentChargeData.value = getArrValue(userOpinionFlowList)
    return agentChargeData.value.length >= 1
}

//获取我的消息
const queryBusinessUserOpinionAll = async () => {
    const { data } = await mainApi.queryBusinessUserOpinionAll({
        current: 1,
        size: 999999,
    })
    //处理数据
    const { userOpinionFlowList, allToDoNumber } = getObjValue(data)
    agentChargeTags.value.tag2 = allToDoNumber ?? 0
    agentChargeData.value = getArrValue(userOpinionFlowList)
}

//获取图表数据
const getChartData = () => {
    queryProjectPfx()
    queryProjectUserAmount()
    queryOpinionTypeAmount()
}

//证书统计
const pfxAmountVal = ref('0')
const pfxLists = ref([])
const queryProjectPfx = async () => {
    const { data } = await mainApi.queryProjectPfx()
    const { pfxList, pfxAmount } = getObjValue(data)
    pfxAmountVal.value = pfxAmount ?? '0'
    pfxLists.value = getArrValue(pfxList)
}

//人员账户统计
const personAmount = ref('0')
const personUsers = ref([])
const queryProjectUserAmount = async () => {
    const { data } = await mainApi.queryProjectUserAmount()
    const { projectUserAmountVOList, projectUserAmount } = getObjValue(data)
    pfxAmountVal.value = projectUserAmount ?? '0'
    personUsers.value = getArrValue(projectUserAmountVOList)
}

//项目ID
const projectId = ref(null)
const projectList = ref([])
const queryOpinionTypeAmount = async () => {
    const { data } = await mainApi.queryOpinionTypeAmount()
    const { userOpinionList, projectInfos } = getObjValue(data)
    const userOpinionTypeList = getArrValue(userOpinionList)
    projectList.value = getArrValue(projectInfos)
    userOpinionTypeLists.value = getArrValue(userOpinionTypeList)
    //处理数据
    if (userOpinionTypeList.length > 0) {
        setUserTypeList(userOpinionTypeList[0])
        projectId.value = userOpinionTypeList[0].projectId ?? null
    } else {
        projectId.value = null
    }
}

//项目被选择
const userOpinionTypeLists = ref([])
const selectProjectOpinion = () => {
    const list = userOpinionTypeLists.value
    for (let i = 0; i < list.length; i++) {
        if (list[i].projectId === projectId.value) {
            setUserTypeList(list[i])
        }
    }
}

//设置项目图表
const userTypeList = ref([])
const setUserTypeList = ({ problemType, problemTypeAmount }) => {
    let newArr = []
    for (let i = 0; i < problemType.length; i++) {
        newArr.push({
            value: problemTypeAmount[i],
            name: problemType[i],
        })
    }
    userTypeList.value = newArr
}
</script>

<style lang="scss">
@import '~src/styles/home/home';
</style>
