<template>
    <div class="screen-wrapper">
        <div class="map-module">
            <div v-loading="loading" element-loading-text="地图加载中.." element-loading-background="rgba(11, 23, 49, 1)"
                class="patrol-and-rescue">
                <MainMap ref="mainMap" :defaultOptions="defaultOptions" @onLoad="mapLoad" @markerClick="markerClick" />
            </div>
        </div>
        <div class="screen-mask"></div>
        <template v-if="login">
            <div class="section-left-wrapper">
                <road-conditions class="road-conditions"></road-conditions>
                <road-weather class="road-weather"></road-weather>
                <warning-info class="warning-info"></warning-info>
            </div>
            <div class="section-right-wrapper">
                <event-overview class="event-overview"></event-overview>
                <regulatory-situation class="regulatory-situation"></regulatory-situation>
            </div>
            <div class="query-filter-wrapper">
                <query-filter :getOrgId="true" :searchCompany="false" @fullPath="changeOrg" />
            </div>
            <map-control class="map-control"></map-control>
        </template>
        <marker-dialog ref="infoDialog"></marker-dialog>
    </div>
</template>

<script>
import MainMap from '@/components/common/MineMap/index.vue'
import queryFilter from '@/components/queryFilter/index.vue'
import roadConditions from './components/roadConditions.vue'
import roadWeather from './components/roadWeather.vue'
import warningInfo from './components/warningInfo.vue'
import eventOverview from './components/eventOverview.vue'
import regulatorySituation from './components/regulatorySituation.vue'
import mapControl from './components/mapControl.vue'
import markerDialog from './components/markerDialog.vue'
import SparkMD5 from 'spark-md5'
import { Base64 } from 'js-base64'
import { getXCJYTK } from "@/api/patrolAndRescue.js"
const mapProvice = {
    "1766017472697475072": "CQ",
    "1766019322897244160": "SC",
    "1867050112732372992": "GZ",
    "1766017976202698752": "YN",
}
const proviceId = ['1766017472697475072', '1766019322897244160', '1867050112732372992', '1766017976202698752']
export default {
    components: {
        queryFilter,
        MainMap,
        roadConditions,
        roadWeather,
        warningInfo,
        eventOverview,
        regulatorySituation,
        mapControl,
        markerDialog
    },
    data() {
        return {
            login: false,
            fullPath: ['1766017468444450816'], // 路段级联数据
            loading: true,
            map: null,
            defaultOptions: {
                center: [105.869855, 28.067095] /*地图中心点*/,
            },
            currentProvice: ''
        }
    },
    created() {
        this.getXCJYAuth()
    },
    methods: {
        async getXCJYAuth() {
            const xcjyToken = sessionStorage.getItem('xcjyToken')
            if (!xcjyToken) {
                const account = sessionStorage.getItem('TYAccount') || 'admin'
                if (!account) {
                    this.$message.error('请先登录')
                    return
                }
                const key = "Artfess@024"
                const token = this.decodeToken(account + key)
                this.login = await getXCJYTK({
                    username: account,
                    token: token,
                    password: '',
                })
            } else {
                this.login = true
            }
        },
        decodeToken(key) {
            let sparkStr = ''
            let spark = new SparkMD5()
            spark.append(key)
            sparkStr = spark.end()

            console.log('sparkStr', sparkStr)

            let token = Base64.encode(sparkStr);

            return token
        },
        changeOrg(value) {
            let Provice = ''
            if (value.length > 1) {
                // 部分区域
                const provideId = this.findProviceId(value)
                Provice = mapProvice[provideId]
            }
            if (this.currentProvice !== Provice) {
                this.setProvice(Provice)
            }
        },
        setProvice(Provice) {
            this.currentProvice = Provice
            this.$refs.mainMap.setProvice(Provice)
        },
        findProviceId(orgs) {
            const originOrgs = new Set(proviceId)
            const target = orgs.filter(org => originOrgs.has(org))
            return target.length ? target[0] : ''
        },
        // 地图挂载后
        mapLoad(map) {
            this.map = map
            this.loading = false
        },
        markerClick(marker) {
            const { type, data } = marker
            this.$nextTick(() => {
                this.$refs.infoDialog.show(type, data)
            })
        },
    },
    beforeDestroy() {
    },
}
</script>

<style scoped lang="scss">
@import './css/operationOverview.scss';
</style>