<template>
    <div class="hc-page-box hc-using-stats-page">
        <HcCard scrollbar>
            <template #header>
                <div class="hc-project-box">
                    <HcIcon name="stack" class="project-icon"/>
                    <span class="project-alias">{{projectInfo?.projectAlias}}</span>
                </div>
            </template>
            <div class="hc-chart-flex">
                <el-row :gutter="20" class="h-full">
                    <el-col :span="8" class="h-full">
                        <div class="hc-chart-card-box">
                            <div class="header">原生、数字化文件数量（份）</div>
                            <div class="body" v-loading="isNativeLoading">
                                <BarChart ref="nativeChartRef" :config="nativeChartConfig" :datas="nativeChartData"/>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="8" class="h-full">
                        <div class="hc-chart-card-box gird">
                            <div class="header">档案总存储</div>
                            <div class="body font-FZGongYHJW num-text" v-loading="isSizeLoading">
                                {{ allArchiveFileSizedata }}
                            </div>
                        </div>
                        <div class="hc-chart-card-box gird">
                            <div class="header">已组案卷</div>
                            <div class="body" v-loading="isHasBeenLoading">
                                <ArrRoundChart ref="hasBeenChartRef" :config="hasBeenChartConfig" :datas="hasBeenChartData"/>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="8" class="h-full">
                        <div class="hc-chart-card-box gird">
                            <div class="header">档案年限占比</div>
                            <div class="body" v-loading="isFixedLoading">
                                <RoundPieChart ref="fixedChartRef" :datas="fixedChartData"/>
                            </div>
                        </div>
                        <div class="hc-chart-card-box gird">
                            <div class="header">已销毁案卷</div>
                            <div class="body" v-loading="isDestroyLoading">
                                <ArrRoundChart ref="destroyChartRef" :config="destroyChartConfig" :datas="destroyChartData"/>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>

            <el-table :data="tableData" lazy :load="loadData" v-loading="isLoading" border row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" >
                <el-table-column prop="name" label="归档目录文件夹"></el-table-column>
                <el-table-column prop="auto" label="已组卷" align="center" width="100"></el-table-column>
                <el-table-column prop="deleted" label="已销毁" align="center" width="100"></el-table-column>
            </el-table>

        </HcCard>
    </div>
</template>

<script setup>
import {ref, onMounted,watch} from "vue";
import {useAppStore} from "~src/store";
import BarChart from "./components/echarts/BarChart.vue"
import ArrRoundChart from "./components/echarts/ArrRoundChart.vue"
import RoundPieChart from "./components/echarts/RoundPieChart.vue"
import archivesStatsApi from "~api/using/stats.js";
import {getObjValue,getArrValue} from "js-fast-way"

//变量
const useAppState = useAppStore()
const projectId = ref(useAppState.getProjectId);
const contractId = ref(useAppState.getContractId);
const projectInfo = ref(useAppState.getProjectInfo);

//渲染完成
onMounted(() => {
    gethasBeenChartData()
    getfixedChartData()
    getdestroyChartData()
    getnativeChartData()
    getallArchiveFileSize()
    gettableData()

})
//监听
watch(() => [
    useAppState.getProjectId
], ([ProjectId]) => {
    projectId.value = ProjectId
    gethasBeenChartData()
    getfixedChartData()
    getdestroyChartData()
    getnativeChartData()
    getallArchiveFileSize()
    gettableData()
})
//原生、数字化文件数量 图表配置
const nativeChartRef = ref(null)
const nativeChartConfig = {
    name: ['原生', '数字化'],
    key: ['key1', 'key2'],
    color: ['#3187FF', '#1ACC96'],
    label: '',
}

//原生、数字化文件数量 图表数据
const isNativeLoading = ref(false)
const nativeChartData = ref([
    {title: '施工', key1: 100, key2: 50},
    {title: '监理', key1: 60, key2: 80},
    {title: '业主', key1: 4, key2: 30},
])
//获取原生文件数量
const getnativeChartData = async () => {
    const { error, code, data } = await archivesStatsApi.getallnativeChartData({
        projectId: projectId.value,

    });
    if (!error && code === 200) {
        nativeChartData.value = getArrValue(data);
    } else {
        nativeChartData.value = [];
    }
}

//已组案卷 图表配置
const hasBeenChartRef = ref(null)
const hasBeenChartConfig = {
    name: ['施工', '监理', '业主'],
    key: ['key1', 'key2', 'key3'],
    color: ['#3187FF', '#FF8F3E', '#1ACC96'],
    label: '已组案卷',
}

//已组案卷 图表数据
const isHasBeenLoading = ref(false)
const hasBeenChartData = ref({
    key1: 3210, key2: 850, key3: 1203
})
//获取已组案卷
const gethasBeenChartData = async () => {

    const { error, code, data } = await archivesStatsApi.getallArchiveByContractType({
        projectId: projectId.value,

    });
    if (!error && code === 200) {
        hasBeenChartData.value = getObjValue(data);
    } else {
        hasBeenChartData.value = {};
    }
}

//档案年限占比 图表数据
const fixedChartRef = ref(null)
const isFixedLoading = ref(false)
const fixedChartData = ref([
    { value: 1048, name: '永久' },
    { value: 735, name: '30年' },
    { value: 580, name: '20年' },
    { value: 484, name: '10年' },
    { value: 300, name: '5年' }
])
//获取档案年限
const getfixedChartData = async () => {
    const { error, code, data } = await archivesStatsApi.getallArchiveAge({
        projectId: projectId.value,

    });
    if (!error && code === 200) {
        console.log(data,'data');
        fixedChartData.value = getArrValue(data);
    } else {
        fixedChartData.value = [];
    }
}

//已销毁案卷 图表配置
const destroyChartRef = ref(null)
const destroyChartConfig = {
    name: ['施工', '监理', '业主'],
    key: ['key1', 'key2', 'key3'],
    color: ['#63686E', '#999FA6', '#42494F'],
    label: '已销毁案卷',
}

//已销毁案卷 图表数据
const isDestroyLoading = ref(false)
const destroyChartData = ref({
    key1: 202, key2: 150, key3: 100
})
//获取已销毁案卷
const getdestroyChartData = async () => {
    const { error, code, data } = await archivesStatsApi.getallArchiveDestory({
        projectId: projectId.value,

    });
    if (!error && code === 200) {
        destroyChartData.value = getObjValue(data);
        console.log(data,'已销毁');
    } else {
        destroyChartData.value = [];
    }
}
//获取总存储数据
const allArchiveFileSizedata = ref('')
const isSizeLoading=ref(false)
const getallArchiveFileSize = async () => {
    isSizeLoading.value=true
    const { error, code, data } = await archivesStatsApi.getallArchiveSize({
        projectId: projectId.value,

    });
    if (!error && code === 200) {
        allArchiveFileSizedata.value = data;
        isSizeLoading.value=false

    } else {
        allArchiveFileSizedata.value = '';
        isSizeLoading.value=false
    }

}
//初始数据获取
const isLoading = ref(false)
const tableData = ref([])
const nodeId=ref(0)
//获取归档目录文件夹getArchiveTreeAndArchiveCount
const gettableData = async () => {
    isLoading.value=true
    const { error, code, data } = await archivesStatsApi.getArchiveTreeAndArchiveCount({
        projectId: projectId.value,
        nodeId:nodeId.value,

    });
    if (!error && code === 200) {
        let resdata= getArrValue(data);
        tableData.value=resdata
        isLoading.value=false

    } else {
        tableData.value=resdata
    }
    isLoading.value=false

}
const loadData=(tree, treeNode,resolve)=>{
 archivesStatsApi.getArchiveTreeAndArchiveCount({ projectId: projectId.value,nodeId:tree.id,}).then((response) => {
    console.log(response,'response');
        let resdata=getArrValue(response.data)
            resolve(resdata);
        })
}
</script>

<style lang="scss" scoped>
@import '~style/using/scoped/stats.scss';
</style>

<style lang="scss">
@import '~src/styles/theme/using/stats.scss';
</style>
