<template>
    <my-echart class="tall" :options="echartList" :style="{ width: prop.width, height: prop.height }" />
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, provide } from 'vue'
import MyEchart from '@/components/echarts/MyEchart.vue'
import TableStore from '@/utils/tableStore'
const echartList = ref({})
import { useDictData } from '@/stores/dictData'
const prop = defineProps({
    width: { type: String },
    height: { type: String }
})
const dictData = useDictData()
const distributionData: any = ref([])
const tableStore = new TableStore({
    url: '/event-boot/area/getAreaLineDetail',
    method: 'POST',
    column: [],
    loadCallback: () => {
        tabulation(tableStore.table.data)
        histogram(tableStore.table.data)
    }
})
provide('tableStore', tableStore)
tableStore.table.params.deptIndex = dictData.state.area[0].id
tableStore.table.params.statisticalType = dictData.getBasicData('Statistical_Type', ['Report_Type'])[0]
tableStore.table.params.monitorFlag = 2
tableStore.table.params.powerFlag = 2
tableStore.table.params.serverName = 'event-boot'
// 表格数据处理
const tabulation = (res: any) => {
    distributionData.value = []
    for (var i = 0; i < res.areaValue.length; i++) {
        distributionData.value.push({
            qy: res.areaValue[i][0],
            jcd: res.areaValue[i][1],
            zc: res.areaValue[i][2],
            zd: res.areaValue[i][3]
        })
    }
}
// 柱状图数据处理
const histogram = (res: any) => {
    echartList.value = {
        title: {
            text: '区域'
        },
        tooltip: {
            formatter: function (params: any) {
                // console.log(params);
                var tips = ''
                for (var i = 0; i < params.length; i++) {
                    tips += params[i].name + '</br/>'
                    tips += '监测点数' + ':' + '&nbsp' + '&nbsp' + params[i].value + '</br/>'
                }
                return tips
            }
        },

        xAxis: {
            name: '(区域)',
            data: distributionData.value.map((item: any) => item.qy)
        },
        yAxis: {
            name: '监测点数（个）' // 给X轴加单位
        },
        options: {
            series: [
                {
                    //   name: '暂降次数',
                    type: 'bar',
                    data: distributionData.value.map((item: any) => item.jcd),
                    barMaxWidth: 30,
                    itemStyle: {
                        normal: {
                            color: '#07CCCA'
                        }
                    },
                    label: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            //数值样式
                            color: '#000'
                        },
                        fontSize: 12
                    }
                }
            ]
        }
    }
}
onMounted(() => {
    tableStore.index()
})
</script>
<style lang="scss" scoped></style>
