<template>
    <div class="default-main" :style="height">
        <div class="box">
            <el-form :inline="true" :model="form" class="demo-form-inline">
                <el-form-item>
                    <el-input v-model="form.name" placeholder="请输入设备名称" :suffix-icon="Search">
                        <template #prefix>
                            <img style="width: 30px" src="@/assets//img/GJDW.png" alt="" />
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <Area
                        ref="areaRef"
                        :show-all-levels="false"
                        v-model="form.orgNo"
                        style="width: 100px"
                        @changeName="changeName"
                    />
                </el-form-item>
                <el-form-item>
                    <el-select v-model="form.isUpToGrid" style="width: 100px" @change="info">
                        <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button icon="el-icon-Refresh" @click="reset"></el-button>
                </el-form-item>
            </el-form>
        </div>

        <!-- 地图 -->
        <!-- <Map /> -->

        <!-- 左边 -->
        <mapL ref="mapLRef" class="mapL" />

        <!-- 右边 -->
        <mapR ref="mapRRef" class="mapR" />
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, provide } from 'vue'
import Area from '@/components/form/area/index.vue'
// import Map from './components/map.vue'
import { useDictData } from '@/stores/dictData'
import { mainHeight } from '@/utils/layout'
import { Search, Refresh } from '@element-plus/icons-vue'
import mapL from './components/mapL.vue'
import mapR from './components/mapR.vue'
const dictData = useDictData()
defineOptions({
    name: '/panorama'
})

const areaRef = ref()
const mapLRef = ref()
const mapRRef = ref()
const options: any = ref([
    {
        name: dictData.state.area[0].name,
        id: 0
    },
    {
        name: '上送国网',
        id: 1
    }
])
const form = ref({
    name: '',
    orgNo: dictData.state.area[0].id,
    isUpToGrid: 0
})

const height = mainHeight(10)
const changeName = (e: any) => {
    options.value[0].name = e

    info()
}
const reset = () => {
    form.value = {
        name: '',
        orgNo: dictData.state.area[0].id,
        isUpToGrid: 0
    }
    info()
}
const info = () => {
    mapLRef.value.info(form.value)
    mapRRef.value.info(form.value)
}
onMounted(() => {
    info()
})
</script>

<style lang="scss" scoped>
:deep(.box) {
    position: absolute;
    top: 10px;
    left: 30%;
    z-index: 1;
    .el-select {
        min-width: 100px;
    }
    .el-form-item {
        margin-right: 15px;
    }
}
.mapL {
    position: absolute;
    top: 10px;
    left: 10px;
}
.mapR {
    position: absolute;
    top: 10px;
    right: 10px;
}
.default-main {
    margin: 10px 0 0 0;
}
.el-button:focus {
    color: var(--color);
    background-color: #fff;
}
.el-button:hover {
    color: var(--el-color-white);
    border-color: var(--el-button-hover-bg-color);
    background-color: var(--el-button-hover-bg-color);
    outline: 0;
}
</style>
