<template>
    <div>
        <TableHeader area datePicker></TableHeader>
        <div style="display: flex" v-loading="tableStore.table.loading" :style="{ height: height }">
            <MyEchart :options="options1" />
            <MyEchart :options="options2" />
        </div>
    </div>
</template>
<script setup lang="ts">
import TableHeader from '@/components/table/header/index.vue'
import TableStore from '@/utils/tableStore'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { mainHeight } from '@/utils/layout'
import { ref, provide, onMounted } from 'vue'
const options1 = ref()
const options2 = ref()
const tableStore = new TableStore({
    url: '/process-boot/process/pmsTerminalDetection/getStatistics',
    method: 'POST',
    column: [],
    beforeSearchFun: () => {
        tableStore.table.params.id = tableStore.table.params.deptIndex
    },
    loadCallback: () => {
        options1.value = {
            legend: {
                data: ['日检测终端数量']
            },
            xAxis: {
                data: tableStore.table.data.dateStatistics.map(item => item.statisticsDate)
            },
            yAxis: {
                name: '台'
            },
            series: [
                {
                    name: '日检测终端数量',
                    type: 'bar',

                    data: tableStore.table.data.dateStatistics.map(item => item.count)
                }
            ]
        }
        options2.value = {
            legend: {
                data: ['检测终端数量']
            },
            xAxis: {
                data: tableStore.table.data.orgStatistics.map(item => item.orgName)
            },
            yAxis: {
                name: '台'
            },
            series: [
                {
                    name: '检测终端数量',
                    type: 'bar',

                    data: tableStore.table.data.orgStatistics.map(item => item.count)
                }
            ]
        }
    }
})
provide('tableStore', tableStore)

const height = mainHeight(160).height
onMounted(() => {
    tableStore.index()
})
</script>
<style lang="scss" scoped></style>
