<template>
    <div class="hc-home-chart-main hc-flex-center">
        <div class="chart-main">
            <div class="two-box hc-flex">
                <hc-new-card class="card1">
                    <div class="today-title">今日，</div>
                    <div class="today-date">{{ toDayDate }}，欢迎您使用档案控制台</div>
                    <div class="total-storage">
                        <div class="total-title">总存储量</div>
                        <div class="num-box">
                            <div class="num">{{ allSize.size }}</div>
                            <div class="unit">{{ allSize.unit }}</div>
                        </div>
                    </div>
                </hc-new-card>
                <hc-new-card class="card2">
                    <div class="bg-img">
                        <img :src="card2Png" alt="">
                    </div>
                    <div class="archives-title">档案总数</div>
                    <div class="archives-total">
                        <div class="num">{{ countArchives }}</div>
                        <div class="unit" @dblclick="openDevTools">卷</div>
                    </div>
                </hc-new-card>
            </div>
            <hc-new-card title="各保管期限案卷数量" class="card3">
                <hc-charts :option="chartsOption" />
            </hc-new-card>
            <div class="btn-box">
                <el-button class="btn-diy" block size="large" color="#4095E5" @click="toQueryClick">点击进馆查询</el-button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useAppStore } from '~src/store'
import { exec_sql } from '../utils/dbConnect'
import card2Png from '~src/assets/card2.png'
import { filterSize, isNullES } from 'js-fast-way'

//日期操作
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
import { toPage } from '../utils/tools'
dayjs.locale('zh-cn')

defineOptions({
    name: 'HcHome',
})

//初始组合式
const store = useAppStore()

//项目信息
const projectInfo = ref(store.projectInfo)
const toDayDate = dayjs().format('YYYY年MM月DD日 dddd')

onMounted(() => {
    projectInfo.value = store.projectInfo
    const pid = projectInfo.value?.key ?? ''
    if (!isNullES(pid)) {
        getAutoAllSize()
        getCountArchives()
        getHistogram()
    }
})

//获取档案总存储量
const allSize = ref({ size: 0, unit: 'KB' })
const getAutoAllSize = async () => {
    const { code, data } = await exec_sql('SELECT SUM(file_size) as fileSize FROM u_archives_auto')
    if (code !== 200) {
        window.$message.error('数据异常')
        return
    }
    //获取总存储量
    let fileSize = 0
    try {
        fileSize = data[0].values[0][0]
    } catch (error) {
        fileSize = 0
    }
    allSize.value = filterSize(fileSize, true)
}

//获取案卷总数
const countArchives = ref(0)
const getCountArchives = async () => {
    const { code, data } = await exec_sql('SELECT * FROM u_archives_auto')
    if (code !== 200) {
        window.$message.error('数据异常')
        return
    }
    //获取案卷总数
    let count = 0
    try {
        count = data[0].values?.length ?? 0
    } catch (error) {
        count = 0
    }
    countArchives.value = count
}

//初始图表的变量
const chartsOption = ref({})
const getHistogram = async () => {
    let data1Count = 0, data2Count = 0, data3Count = 0
    //永久
    const { code: code1, data: data1 } = await exec_sql('SELECT * FROM u_archives_auto where storage_time = "3"')
    if (code1 !== 200) {
        window.$message.error('数据异常')
        return
    }
    try {
        data1Count = data1[0].values?.length ?? 0
    } catch (error) {
        data1Count = 0
    }

    //30年
    const { code: code2, data: data2 } = await exec_sql('SELECT * FROM u_archives_auto where storage_time = "2"')
    if (code2 !== 200) {
        window.$message.error('数据异常')
        return
    }
    try {
        data2Count = data2[0].values?.length ?? 0
    } catch (error) {
        data2Count = 0
    }

    //10年
    const { code: code3, data: data3 } = await exec_sql('SELECT * FROM u_archives_auto where storage_time = "1"')
    if (code3 !== 200) {
        window.$message.error('数据异常')
        return
    }
    try {
        data3Count = data3[0].values?.length ?? 0
    } catch (error) {
        data3Count = 0
    }
    //设置图表
    chartsOption.value = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
            },
        },
        grid: {
            top: '10px',
            left: '10px',
            right: '10px',
            bottom: '5px',
            containLabel: true,
        },
        xAxis: {
            type: 'category',
            data: ['永久', '定期30年', '定期10年'],
            axisLine: {
                show: false, // 不显示坐标轴线
            },
            axisTick:{
                show:false, // 不显示坐标轴刻度线
            },
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                //这种做法就是在y轴的数据的值旁边拼接单位，貌似也挺方便的
                formatter: '{value}',
            },
            axisTick:{
                show: false, // 不显示坐标轴刻度线
            },
            axisLine: {
                show: false, // 不显示坐标轴线
            },
            splitLine :{
                lineStyle:{
                    type:'dashed', //虚线
                },
                show: true, //隐藏
            },
        },
        series:[
            { type: 'bar',
                data: [data1Count, data2Count, data3Count],
                barWidth: '30%',
                itemStyle:{
                    color:'#59CEF5',
                },
            },
        ],
    }
}

//点击进馆查询
const toQueryClick = () => {
    toPage({ page: '/query' })
}

//打开开发者工具
const openDevTools = () => {
    window.electron.ipcRenderer.invoke('openDevTools')
}
</script>

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