<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,
});
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;
    state.radio = state.county[0].value
};
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: any, id: any) => {

    router.push({
        path: '/projectQuery/details',
        query: {
            id: id,
            type: e
        }
    });
}
const rangeChange = () => {
    state.mapIf = false
    state.mapList = ''
    state.tdtMap.clearOverLays();
    ApiIndex()
}
const initTdtMap = () => {
    let T = window.T;
    //信息窗口
    if (state.mapList[0].longitude) {
        state.tdtMap.centerAndZoom(new T.LngLat(state.mapList[0].longitude, state.mapList[0].latitude), 16);
    }
    state.mapList.forEach((item: any) => {
        let point = new T.LngLat(item.longitude, item.latitude);
        //创建地图文本对象
        let label = new T.Label({//创建地图文本对象
            text: '<div style="height: 40px"><div style="border-radius: 3px;border: 1px solid #3072f6;padding: 0px 10px;background-color:#3072f6">' + item.projectName + '</div></div>',
            position: point,
            offset: new T.Point(-45, 20),
        });
        label.setBackgroundColor('rgba(255,255,255,0)');//边框背景
        label.setFontColor('#f8f8f8');//边框字体
        label.setBorderLine(0)//边框线条
        state.tdtMap.addOverLay(label);

        label.addEventListener("click", function () {
            let ints = item.projectNumber
            openPage(ints, item.originalId)
        });

    })

    /*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>
