<template>
    <div style="padding: 10px; display: flex; height: 100%" v-loading="loading">
        <div style="position: relative; flex: 1">
            <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>
            <div class="selectBox">
                <el-select @change="pointChange" filterable clearable v-model="lineId" placeholder="输入监测点名称查询" >
                    <el-option
                        v-for="item in areaLineInfo"
                        :key="item.lineId"
                        :label="item.lineName"
                        :value="item.lineId"
                    ></el-option>
                </el-select>
            </div>
            <!-- v-if="hackReset" -->
            <baidu-map
                class="bm-view"
                v-if="hackReset"
                :zoom="zoom"
                :map-click="false"
                :scroll-wheel-zoom="true"
                :center="center"
                @ready="handler"
                :dragging="true"
                @zoomend="syncCenterAndZoom"
            >
                <!-- <bm-map-type
                    :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
                    anchor="BMAP_ANCHOR_TOP_RIGHT"
                ></bm-map-type> -->
                <!--  线-->
                <div v-if="zoom > 13">
                    <bm-polyline :path="path" v-for="(path, index) in polyline" :key="index"></bm-polyline>
                </div>
                <!-- 变电站-->
                <template v-if="zoom > 13">
                    <bm-marker
                        :position="path"
                        v-for="path in siteList"
                        :key="path.subId"
                        :icon="path.icon"
                        @click="markerClick(path)"
                    ></bm-marker>
                </template>
                <!-- 点 -->
                <BmlMarkerClusterer maxZoom="12" :styles="styles">
                    <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.pt1 }}/{{ infoWindowPoint.pt2 }}
                            </el-descriptions-item>
                            <el-descriptions-item label="CT变比">
                                {{ infoWindowPoint.ct1 }}/{{ 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="lookPoint">查看监测点</el-button> -->
                                <el-button type="primary" size="small" @click="lookEvent">
                                    暂态事件({{ infoWindowPoint.noDealCount }})
                                </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>
        <div style="width: 600px; height: 100%">
            <Right :params="params" v-if="params.deptIndex"></Right>
        </div>
        <PopupEvent ref="popupEvent"></PopupEvent>
    </div>
</template>

<script setup lang="ts">
import { BmlMarkerClusterer } from 'vue-baidu-map-3x'
import { ref, onMounted } from 'vue'
import { mainHeight } from '@/utils/layout'
import { getAreaLineInfo } from '@/api/event-boot/areaInfo'
import DatePicker from '@/components/form/datePicker/index.vue'
import { useAdminInfo } from '@/stores/adminInfo'
import Right from './right.vue'
import PopupEvent from './popupEvent.vue'
import router from '@/router'

defineOptions({
    name: 'Descentsystem/overview'
}) // 添加响应式变量

const height = mainHeight(20)
const adminInfo = useAdminInfo()
const datePickerRef = ref()
const hackReset = ref(true)
const zoom = ref(13)
const loading = ref(true)
const popupEvent = ref()
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 imageUrl = new URL('@/assets/imgs/m0.png', import.meta.url).href
const imageUrl1 = new URL('@/assets/imgs/m1.png', import.meta.url).href
const imageUrl2 = new URL('@/assets/imgs/m3.png', import.meta.url).href
const imageUrl3 = new URL('@/assets/imgs/m4.png', import.meta.url).href
const styles = [
    {
        url: imageUrl,
        size: {
            width: 53,
            height: 52
        },
        opt_textSize: 10
    },
    {
        url: imageUrl1,
        size: {
            width: 56,
            height: 55
        },
        opt_textSize: 12
    },
    {
        url: imageUrl2,
        size: {
            width: 78,
            height: 77
        },
        opt_textSize: 14
    },
    {
        url: imageUrl3,
        size: {
            width: 90,
            height: 89
        },
        opt_textSize: 14
    },
]
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
    let list = data//.filter((item: any) => item.lng != 0)
    list.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)
    })
    setTimeout(() => {
        loading.value = false
    }, 0)
    siteList.value = list
    center.value.lng = areaLineInfo.value[0]?.lng || 0
    center.value.lat = areaLineInfo.value[0]?.lat + 0.04 || 0

    infoWindowPoint.value = areaLineInfo.value[0] || {}
    infoWindowPoint.value.show = true
    zoom.value = 13
    setTimeout(() => {
        loading.value = false
    }, 1500)
}

const syncCenterAndZoom = (e: any) => {
    zoom.value = e.target.getZoom()
}
const pointChange = (val: string) => {
    if (!val) return
    let data = areaLineInfo.value.find((item: any) => item.lineId == val)

    center.value.lng = data.lng
    center.value.lat = data.lat 
    infoWindowPoint.value = data
    infoWindowPoint.value.show = true
    zoom.value = 13
}
const markerClick = (e: any) => {
    infoWindowPoint.value = e
    infoWindowPoint.value.show = true
}
const lookEvent = (e: any) => {
    popupEvent.value.open({
        id: infoWindowPoint.value.lineId,
        searchBeginTime: datePickerRef.value.timeValue[0],
        searchEndTime: datePickerRef.value.timeValue[1]
    })
}
const lookPoint = () => {
    console.log(infoWindowPoint.value)
    router.replace({
        name: 'Descentsystem/monitoringpoint',
        query: {
            lineId: infoWindowPoint.value.lineId,
            lineName:
                infoWindowPoint.value.manufacturer +
                '>' +
                infoWindowPoint.value.gdName +
                '>' +
                infoWindowPoint.value.subName +
                '>' +
                infoWindowPoint.value.lineName
        }
    })
}
onMounted(() => {
    if (siteList.value.length == 0) {
        setTimeout(() => {
            if (window.localStorage.getItem('BMAP_SECKEY') == null) {
                hackReset.value = false
            }
        }, 100)
        setTimeout(() => {
            hackReset.value = true
        }, 1000)
    }
})
</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;
    top: 10px;
    left: 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;
        }
    }
}
:deep(.el-descriptions__cell) {
    white-space: nowrap;
}
</style>
