<template>
    <div>
        <el-card>
            <div style="display: flex;flex-direction: row;align-items: center;">
                <div>选择区县：</div>
                <el-select size="default"
                           v-model="state.radio"
                           style="width: 100px"
                           @change="rangeChange">
                    <el-option
                            v-for="(item, index) in state.county"
                            :key="index"
                            :value="item.value"
                            :label="item.label"/>
                </el-select>
                <el-input size="default" style="width: 200px;margin: 0 10px;" v-model="state.inputs"
                          placeholder="请输入项目名称"></el-input>
                <el-button size="default" type="primary" @click="rangeChange">
                    <el-icon><ele-Search/></el-icon>查询
                </el-button>
                <el-button size="default" type="primary"
                           @click="state.inputs = '',state.radio = 370783,rangeChange()">
                    <el-icon><ele-RefreshRight/></el-icon>重置
                </el-button>
            </div>
        </el-card>
        <div id="tdtMapDivID" v-show="state.mapIf" class="divTdtMap"></div>
    </div>
</template>

<script setup lang="ts" name="mapIndex">
    import { reactive, onMounted, ref, watch, nextTick, onActivated, markRaw } from "vue";
    import { mapApi } from "/@/api/map/index";
    import { useRouter } from "vue-router";
    import { useRoute } from "vue-router";
    import {entApi} from "/@/api/ent";
    const router = useRouter();
    const route = useRoute()
    const state = reactive<any>({
        radio:370783,
        county:[] as any,
        inputs:"",
        tdtMap: {
            centerAndZoom:"",
        } as any,
        marker:{
            openInfoWindow:""
        } as any,
        longitude:"119.2583502" as string,
        latitude:"36.7259922" as string,
        mapList:[] as any,
        mapIf:true,
    });
    //经度119.2583502°，纬度36.7259922
    onMounted(() => {
        /*state.longitude = route.query.lon?route.query.lon:'118.7546248173'
        state.latitude = route.query.lat?route.query.lat:'36.8926730734'*/
        let T = window.T;
        state.tdtMap = new T.Map(document.getElementById('tdtMapDivID'));
        state.tdtMap.enableInertia()//允许鼠标地图惯性拖拽
        state.tdtMap.centerAndZoom(new T.LngLat(state.longitude,state.latitude), 16);
        //添加比例尺控件
        var scale = new T.Control.Scale();
        state.tdtMap.addControl(scale);
        countyIndex()
        ApiIndex()
        // addMapMoveend()
        window.openPage= openPage;
    });
    const countyIndex = async () => {
        let itemQx = await entApi().typeApi(); //区县数据
        state.county = itemQx.data;
    };
    const ApiIndex = async () => {

        let item = await mapApi().mapList({
            meter:20000,
            areaCode:state.radio,
            projectName:state.inputs,
            longitude:state.longitude,
            latitude:state.latitude
        });
        state.mapList = item.data
        state.mapIf = true
        initTdtMap();
    };
    const openPage = (e) =>{
        router.push({
            path:'/projectQuery/details',
            query:{
                type:e
            }
        });
    }
    const rangeChange = () =>{
        state.mapIf = false
        state.mapList = ''
        let T = window.T;
        state.tdtMap.clearOverLays();
        ApiIndex()
    }
    const initTdtMap = () =>{
        let T = window.T;
        //设置显示地图的中心点和级别
        let icon = new T.Icon({
            iconUrl: "http://api.tianditu.gov.cn/img/map/markerA.png",
            iconSize: new T.Point(19, 27),
            iconAnchor: new T.Point(10, 25)
        });
        //信息窗口
        state.mapList.forEach((item)=>{
            let point = new T.LngLat(item.longitude,item.latitude);
            let marker = new T.Marker(point,{icon:icon});// 创建标注
            state.tdtMap.addOverLay(marker);


            let label = new T.Label({//创建地图文本对象
                text: item.projectName,
                position: point,
                offset: new T.Point(-45, 20),
            });
            label.setBackgroundColor('#00a8ff');//边框背景
            label.setFontColor('#f8f8f8');//边框字体
            label.setBorderLine(0)//边框线条
            state.tdtMap.addOverLay(label);

            let infoWin1 = new T.InfoWindow();
            let sContent =
                "<div style='margin:0px;'>" +
                    "<div>项目名称:"+item.projectName+"</div>"+
                    "<div style='margin: 5px 0px'>项目地址:"+item.address+"</div>"+
                    "<button style='font-size: 11px;padding: 3px 4px;' onclick='openPage("+item.projectOriginalId+")'>查看详情</button>"+
                "</div>";
            infoWin1.setContent(sContent);
            marker.addEventListener("click", function (res) {

                marker.openInfoWindow(infoWin1);
            });

        })

        /*let circle = new T.Circle(new T.LngLat(state.longitude,state.latitude),state.radio,{color:"blue",weight:1,opacity:0.5,fillColor:"#FFFFFF",fillOpacity:0.5,lineStyle:"solid"});
        //向地图上添加圆
        state.tdtMap.addOverLay(circle);*/

    }

    /*function addMapMoveend() {
        //移除地图的移动停止事件
        removeMapMoveend();
        state.tdtMap.addEventListener("moveend", MapMoveend);
    }

    function removeMapMoveend() {
        //移除地图的移动停止事件
        state.tdtMap.removeEventListener("moveend", MapMoveend);
    }
    function MapMoveend(e) {
        state.longitude=e.target.getCenter().getLng()
        state.latitude=e.target.getCenter().getLat()
        rangeChange()
    }*/
</script>

<style scoped>
    .divTdtMap {
        margin: 0px;
        padding: 0px;
        width: 100%;
        height: 80vh;
        z-index: 0;
    }
    .btn{

    }
</style>
