<template>
    <div class="default-main">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="区域">
                <el-input v-model="deptIndex" placeholder="请选择区域" clearable />
            </el-form-item>
            <el-form-item label="统计类型:">
                <el-select
                    v-model="formInline.statisticalType"
                    value-key="id"
                    placeholder="请选择统计类型"
                    size="large"
                >
                    <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item" />
                </el-select>
                <!-- <el-input v-model="formInline.statisticalType" placeholder="请选择区域" clearable /> -->
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>
        <div>
            <el-row :gutter="20">
                <el-col :span="12">
                    <MyEchartMap class="map" :datas="[]" />
                </el-col>
                <el-col :span="12">1231</el-col>
            </el-row>
        </div>
    </div>
</template>
<script setup lang="ts">
import { getAreaLineDetail } from '@/api/Region'
import { useDictData } from '@/stores/dictData'
import MyEchartMap from '@/components/echarts/MyEchartMap.vue'
import { ref, reactive, onMounted, provide } from 'vue'
const options = ref<object[]>([])
const deptIndex = ref<string>('')
const DictData = useDictData()
const formInline = reactive({
    deptIndex: '5699e5916a18a6381e1ac92da5bd2628',
    monitorFlag: 2,
    powerFlag: 2,
    serverName: 'event-boot',
    statisticalType: {}
})
const info = () => {
    options.value = DictData.getBasicData('Statistical_Type')
    formInline.statisticalType = options.value[0]
}

const onSubmit = () => {
    getAreaLineDetail(formInline)
        .then(res => {})
        .catch(err => {})
}

onMounted(() => {
    info()
    onSubmit()
})
</script>
<style lang="scss" scoped>
.map {
    height: calc(100vh - 120px);
}
</style>
