<template>
    <div style='position: relative; height: 100%' v-loading='loading'>
        <div style='display: none'>
            <DatePicker ref='datePickerRef'></DatePicker>
        </div>
        <div class='iconBox'>
            <div class='div'>
                <img src='@/assets/jcd.png' alt='' />
                <span>变电站</span>
            </div>
            <div class='div'>
                <img src='@/assets/rby.png' alt='' />
                <span>热备用</span>
            </div>
            <div class='div'>
                <img src='@/assets/ty.png' alt='' />
                <span>停运</span>
            </div>
            <div class='div'>投运</div>
            <div class='div' style='padding-left: 10px'>
                <span>通讯正常</span>
            </div>
            <div class='div' style='padding-left: 20px'>
                <img src='@/assets/txzcyzj.gif' alt='' />
                <span>有暂降</span>
            </div>
            <div class='div' style='padding-left: 20px'>
                <img src='@/assets/txzcwzj.png' alt='' />
                <span>无暂降</span>
            </div>
            <div class='div' style='padding-left: 10px'>
                <span>通讯异常</span>
            </div>
            <div class='div' style='padding-left: 20px'>
                <img src='@/assets/txycyzj.gif' alt='' />
                <span>有暂降</span>
            </div>
            <div class='div' style='padding-left: 20px'>
                <img src='@/assets/txzdwzj.png' alt='' />
                <span>无暂降</span>
            </div>
        </div>
        <baidu-map
            class='bm-view'
            :zoom='zoom'
            :map-click='false'
            :scroll-wheel-zoom='true'
            :center='center'
            @ready='handler'
            @zoomend='syncCenterAndZoom'
        >
            <bm-map-type
                :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
                anchor='BMAP_ANCHOR_TOP_RIGHT'
            ></bm-map-type>
            <!--  线-->
            <bm-polyline :path='path' v-for='(path, index) in polyline' :key='index'></bm-polyline>
            <!-- 变电站-->
            <template v-if='zoom > 12'>
                <bm-marker
                    :position='path'
                    v-for='path in siteList'
                    :key='path.subId'
                    :icon='path.icon'
                    @click='markerClick(path)'
                ></bm-marker>
            </template>
            <!-- 点 -->
            <BmlMarkerClusterer>
                <bm-marker
                    :position='path'
                    v-for='path in areaLineInfo'
                    :key='path.lineId'
                    :icon='path.icon'
                    @click='markerClick(path)'
                ></bm-marker>
            </BmlMarkerClusterer>
            <bm-marker :position='infoWindowPoint' :icon="{ url: '1', size: { width: 0, height: 0 } }">
                <bm-info-window :show='infoWindowPoint.show' @close='infoWindowPoint.show = false'>
                    <el-descriptions :title='infoWindowPoint.lineName' :column='1' v-if='infoWindowPoint.lineId'>
                        <el-descriptions-item label='供电公司'>{{ infoWindowPoint.gdName }}</el-descriptions-item>
                        <el-descriptions-item label='变电站'>{{ infoWindowPoint.subName }}</el-descriptions-item>
                        <el-descriptions-item label='母线'>{{ infoWindowPoint.voltageName }}</el-descriptions-item>
                        <el-descriptions-item label='网络参数'>
                            {{ infoWindowPoint.ip }}
                        </el-descriptions-item>
                        <el-descriptions-item label='PT变化'>{{ infoWindowPoint.pt2 }}</el-descriptions-item>
                        <el-descriptions-item label='CT变化'>{{ infoWindowPoint.ct2 }}</el-descriptions-item>
                        <el-descriptions-item label='生产厂家'>
                            {{ infoWindowPoint.manufacturer }}
                        </el-descriptions-item>
                        <el-descriptions-item label='终端状态'>
                            {{
                                infoWindowPoint.runFlag == 0 ? '投运' : infoWindowPoint.runFlag == 1 ? '热备用' : '停运'
                            }}
                        </el-descriptions-item>
                        <el-descriptions-item label='通讯状态'>
                            {{ infoWindowPoint.comFlag == 0 ? '中断' : '正常' }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <el-button type='primary' size='small' @click='changeTab("2")'>事件统计</el-button>
                            <el-button type='primary' size='small' @click='changeTab("3")'>事件分析</el-button>
                            <el-button type='primary' size='small' @click='changeTab("4")'>运行情况</el-button>
                        </el-descriptions-item>
                    </el-descriptions>
                    <el-descriptions
                        :title='infoWindowPoint.subName'
                        :column='1'
                        v-else-if='infoWindowPoint.subId'
                        style='padding-top: 10px'
                    ></el-descriptions>
                </bm-info-window>
            </bm-marker>
        </baidu-map>
    </div>
</template>

<script setup lang='ts'>
import { BmlMarkerClusterer } from 'vue-baidu-map-3x'
import { nextTick, ref, watch } from 'vue'
import { getAreaLineInfo } from '@/api/event-boot/areaInfo'
import DatePicker from '@/components/form/datePicker/index.vue'
import { useAdminInfo } from '@/stores/adminInfo'
import { useMonitoringPoint } from '@/stores/monitoringPoint'

const emit = defineEmits(['changeTab'])
const monitoringPoint = useMonitoringPoint()
const adminInfo = useAdminInfo()
const datePickerRef = ref()
const zoom = ref(11)
const loading = ref(true)
const params = ref({
    deptIndex: '',
    monitorFlag: 2,
    powerFlag: 2,
    searchBeginTime: '',
    searchEndTime: '',
    serverName: 'event-boot',
    statisticalType: {}
})
const center = ref({
    lng: 0,
    lat: 0
})
const infoWindowPoint = ref<anyObj>({
    lng: 0,
    lat: 0,
    show: false
})
const areaLineInfo = ref<any>([])
const siteList = ref<any>([])
const polyline = ref<any>([])
const lineId = ref('')
const handler = async ({ BMap, map }: any) => {
    params.value.deptIndex = adminInfo.$state.deptId
    params.value.searchBeginTime = datePickerRef.value.timeValue[0]
    params.value.searchEndTime = datePickerRef.value.timeValue[1]
    let { data } = await getAreaLineInfo(params.value)
    let r = 0.0035
    data.forEach((item: any) => {
        // 变电站图标
        item.icon = {
            url: new URL('@/assets/jcd.png', import.meta.url).href,
            size: {
                width: 40,
                height: 40
            }
        }
        if (item.children.length > 10 && item.children.length < 100) {
            r = 0.0055
        } else if (item.children.length >= 100) {
            r = 0.01055
        }
        item.children.forEach((val: any, i: number) => {
            val.lng = item.lng + r * Math.cos((2 * Math.PI * i) / item.children.length)
            val.lat = item.lat + r * Math.sin((2 * Math.PI * i) / item.children.length)
            // 监测点图标
            val.icon = {
                url: '',
                size: {
                    width: 40,
                    height: 40
                }
            }
            switch (val.runFlag) {
                case 0:
                    // 投运
                    if (val.comFlag == 0) {
                        // 异常
                        if (val.noDealCount > 0) {
                            // 异常有暂降
                            val.icon.url = new URL('@/assets/txycyzj.gif', import.meta.url).href
                        } else if (val.noDealCount == 0) {
                            // 异常无暂降
                            val.icon.url = new URL('@/assets/txzdwzj.png', import.meta.url).href
                        }
                    } else if (val.comFlag == 1) {
                        // 正常
                        if (val.noDealCount > 0) {
                            // 正常有暂降
                            val.icon.url = new URL('@/assets/txzcyzj.gif', import.meta.url).href
                        } else if (val.noDealCount == 0) {
                            // 正常无暂降
                            val.icon.url = new URL('@/assets/txzcwzj.png', import.meta.url).href
                        }
                    }
                    break
                case 1:
                    val.icon.url = new URL('@/assets/rby.png', import.meta.url).href
                    break
                case 2:
                    val.icon.url = new URL('@/assets/ty.png', import.meta.url).href
                    break
                default:
                    break
            }
            polyline.value.push([
                {
                    lng: item.lng,
                    lat: item.lat
                },
                {
                    lng: val.lng,
                    lat: val.lat
                }
            ])
        })

        areaLineInfo.value.push(...item.children)
    })
    siteList.value = data
    watch(
        () => monitoringPoint.state.lineId,
        (newLineId, oldLineId) => {
            let value = areaLineInfo.value.find((item: any) => item.lineId == newLineId)
            center.value.lng = value.lng
            center.value.lat = value.lat
            infoWindowPoint.value = value
            infoWindowPoint.value.show = true
            monitoringPoint.setValue('lineName', value.manufacturer + '>' + value.gdName + '>' + value.subName + '>' + value.lineName)
        },
        { immediate: true }
    )
    zoom.value = 15
    setTimeout(() => {
        loading.value = false
    }, 1500)
}

const syncCenterAndZoom = (e: any) => {
    zoom.value = e.target.getZoom()
}
const markerClick = (e: any) => {
    infoWindowPoint.value = e
    infoWindowPoint.value.show = true
}
const changeTab = (e: string) => {
    emit('changeTab', e)
}
</script>
<style lang='scss' scoped>
.bm-view {
    width: 100%;
    height: 100%;
}

.selectBox {
    position: absolute;
    top: 16px;
    left: 165px;
    z-index: 2000;
    width: 240px;
}

.iconBox {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 2000;
    width: 150px;
    height: 260px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.75) !important;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    font-size: 12px;

    .div {
        display: flex;
        margin-bottom: 5px;

        img {
            height: 20px;
            margin-right: 5px;
        }
    }
}
</style>
