<template>
    <div class="w-full h-full flex bussinessbg">
        <div class="flex flex-col flex-shrink-0" :style="{ width: '420px' }">
            <div style="height: 36%">
                <way-filter :level="0" dimension="CN" ref="wayfilter" class="selectBox" />
                <!-- <menu-module class="meneModulewrapper"></menu-module> -->
                <base-struct />
            </div>
            <base-struct-list />
            <!-- <eqNums /> -->
            <total-tollflow />
        </div>
        <div class="flex flex-col" :style="{ width: 'calc(100% - 840px)' }">
            <div class="bussoutmapbox">
                <base-info />
                <!-- <map-left></map-left> -->
                <map-view v-show="isPngMap" position="center" @provinceClick="provinceClick"></map-view>
                <div v-show="!isPngMap" class="bussgismap">
                    <gis-map :config="mapConfig" :center="center" :zoom="5.5" @load="handleLoad">
                        <span></span>
                    </gis-map>
                    <div v-if="isclick" class="backbtn" @click="goBack">返回上一级</div>
                </div>
            </div>
        </div>
        <div class="flex flex-col" :style="{ width: '420px' }">
            <operating-mileage style="height: 34%"></operating-mileage>
            <employee style="height: 28%" />
            <employeeList style="height: 31%" />
            <!-- <toll-employee class="h-1/3" /> -->
        </div>
    </div>
</template>

<script>
// import totaltollflowNew from './totaltollflowNew.vue'
import eqDetailsNew from "./eqDetailsNew2.vue";
import WayFilter from "@/components/wayFilter/index.vue";
import menuModule from "@/components/menuModule/index.vue";
import baseStruct from "./baseStructNew.vue";
import baseStructList from "./baseStructListNew.vue";
import eqNums from "./eqNums2.vue";
import eqDetails from "./eqDetails.vue";
import baseInfo from "./baseInfo.vue";
import mapView from "@/components/MapView.vue";
import employee from "./employee2.vue";
import tollEmployee from "./tollEmployee.vue";
import employeeList from "./employeeList.vue";
import tollRevenue from "./tollrevenue.vue";
import totalTollflow from "./totaltollflow.vue";
import MapLeft from "./MapLeft.vue";
import GisMap from "@/components/GisMap/index.vue";
import { mapState } from "vuex";
import center from "@turf/center";
import operatingMileage from "./operatingMileage.vue";
export default {
    components: {
        WayFilter,
        menuModule,
        baseStruct,
        baseStructList,
        eqNums,
        eqDetails,
        baseInfo,
        mapView,
        employee,
        tollEmployee,
        employeeList,
        tollRevenue,
        totalTollflow,
        MapLeft,
        GisMap,
        eqDetailsNew,
        operatingMileage
    },
    computed: {
        ...mapState({
            map: (state) => state.map.map,
            boundaryLineFace: (state) => state.map.boundaryLineFace,
        }),
        maps() {
            return this.$store.state.map.config;
        },
        selectRoadId() {
            return this.$store.state.road.selectRoadId;
        },
    },
    watch: {
        maps(nval) {
            this.mapConfig = nval;
        },
        map() {
            this.map.setZoom(5);
            const qmz = JSON.parse(localStorage.getItem("mapCLkmz"));
            this.map.setLayoutProperty(qmz.ROUTE, "visibility", "none"); //隐藏所有路段
            const orgId = localStorage.getItem("orgId");
            this.defaultCQ(orgId || this.selectRoadId?.[0]);
            if (this.selectRoadId?.length > 0) {
                this.provinceClick(this.selectRoadId[0]);
            }
        },
        selectRoadId(nval) {
            // 默认展示全国
            nval[0] ? this.provinceClick(nval[0]) : (this.isPngMap = true);
            // 以前的逻辑orglen < 5时 组织默认选第一个
            // const orglen = localStorage.getItem("orglen");
            // if (orglen < 5) {
            //   this.provinceClick(nval[0]);
            //   this.isPngMap = false;
            //   this.isclick = false;
            // } else {
            //   nval[0] ? this.provinceClick(nval[0]) : (this.isPngMap = true);
            // }
        },
    },
    data() {
        return {
            mapConfig: {},
            isPngMap: true,
            isclick: true,
            center: [106.55, 29.57],
            provinceMarker: [
                {
                    zb: [107.569855, 30.367095],
                    id: "CQ",
                    zoom: 6.5,
                },
                {
                    zb: [102.928995, 30.52487],
                    id: "SC",
                    zoom: 5.4,
                },
                {
                    zb: [101.593103, 25.353375],
                    id: "YN",
                    zoom: 5.5,
                },
                {
                    zb: [106.641243, 27.10797],
                    id: "GZ",
                    zoom: 6.3,
                },
                {
                    zb: [117.229929, 32.325398],
                    id: "AH",
                    zoom: 6,
                },
                {
                    zb: [78.617733, 42.992818],
                    id: "XJ",
                    zoom: 4.2,
                },
                {
                    zb: [111.099999, 27.40097],
                    id: "HN",
                    zoom: 6,
                },
            ],
            isFrist: true, //是否为首次调用，因为首次selectRoadId会变化两次，这样的话provinceClick就会重复调用两次，导致地图渲染出错，所以如果是首次的话就selectRoadId就不调用provinceClick
        };
    },
    created() {
        this.$store.dispatch("map/getMapConfig");
    },
    mounted() {
        // this.mapConfig = this.$store.state.map?.config
    },
    methods: {
        // 选中图片上的省展示真实的gis地图 并高亮选中的省份
        provinceClick(name, type) {
            if (this.map) {
                if (type) {
                    // 如果是静态地图上的点击事件，就去改变组织树
                    this.$refs.wayfilter.changeProvince(name);
                }
                this.isPngMap = false;
                this.provinceMarker.forEach((el) => {
                    if (name === el.id) {
                        this.isPngMap = false;
                        this.center = el.zb;
                        this.$nextTick(() => {
                            console.log(159, el.zb);
                            console.log(160, el.zoom);
                            this.map.setCenter(el.zb);
                            this.map.setZoom(el.zoom);
                        });
                    }
                });
                this.boundaryLineFace.forEach((el) => {
                    this.map.setLayoutProperty(el.layerIdl, "visibility", "none");
                    this.map.setLayoutProperty(el.layerIdf, "visibility", "none");
                });
                this.boundaryLineFace.forEach((el) => {
                    if (name == el.code) {
                        this.map.setLayoutProperty(el.layerIdl, "visibility", "visible");
                        this.map.setLayoutProperty(el.layerIdf, "visibility", "visible");
                    }
                });
            }
        },
        //如果默认展示哪个省
        defaultCQ(name) {
            this.provinceMarker.forEach((el) => {
                if (el.id == name) {
                    this.map.setCenter(el.zb);
                    this.map.setZoom(el.zoom);
                }
            });

            this.boundaryLineFace.forEach((el) => {
                this.map.setLayoutProperty(el.layerIdl, "visibility", "none");
                this.map.setLayoutProperty(el.layerIdf, "visibility", "none");
            });
            this.boundaryLineFace.forEach((el) => {
                if (name == el.code) {
                    this.map.setLayoutProperty(el.layerIdl, "visibility", "visible");
                    this.map.setLayoutProperty(el.layerIdf, "visibility", "visible");
                }
            });
            setTimeout(() => {
                this.isFrist = false;
            }, 2000);
        },
        goBack() {
            this.$refs.wayfilter.changeProvince("");
            this.isPngMap = true;
        },
        // gis地图加载
        handleLoad(data) {
            this.$store.commit("map/setMap", data.map);
            // this.doMarkers()
        },
        // gis地图上的几个省添加明显的marker
        doMarkers() {
            this.provinceMarker.forEach((item) => {
                var el = document.createElement("div");
                el.id = item.id;
                el.className = "gisripple";
                new minemap.Marker(el, { offset: [-20, -20] })
                    .setLngLat(item.zb)
                    .addTo(this.map);
            });
        },
    },
};
</script>

<style lang="postcss" scoped>
.bussinessbg {
    background: url("@/assets/images/app-bg.jpg");
    background-size: 100% 100%;
    padding-top: 50px;
}

.bussoutmapbox {
    height: 100%;
    position: relative;
}

.bussgismap {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.backbtn {
    position: absolute;
    right: 10px;
    top: 140px;
    width: 100px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 14px;
    font-weight: bold;
    color: #f5f5f5;
    border: 1px solid rgb(238, 168, 56);
    border-radius: 4px;
    box-shadow: rgb(238, 168, 56) 0 0 30px inset;
    /* background: rgba(236, 166, 56, 0.6) */
    /* background: linear-gradient(transparent, rgba(236, 166, 56, 0.6)); */
}

/* 涟漪效果 */
::v-deep(.gisripple) {
    position: relative;
    width: 26px;
    height: 26px;
    background-color: rgba(255, 154, 0, 1);
    border-radius: 50%;
    display: inline-block;
}

::v-deep(.gisripple::before) {
    content: "";
    width: 44px;
    height: 44px;
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    animation: rippleDot 1.5s ease-out 0s infinite;
    background-color: rgba(108, 181, 82, 0.5);
}

.selectBox {
    position: absolute;
    top: 10px;
    z-index: 99;
}

.meneModulewrapper {
    position: absolute;
    top: 10px;
    left: 388px;
    z-index: 99;
}
</style>
