<template>
<div>
    <div class="funBox">
        <div class="funBox-item ser">
            <input type="text" placeholder="输入地址" v-model="serVal" /><button @click="mapSearch()"></button>
            <div class="serTip" v-if="tipsShow">
                <div class="aimAdone">
                    <p>您可以尝试：</p>
                    <p>1、检查输入是否正确</p>
                    <p>2、输入其他关键字进行搜索</p>
                </div>
            </div>
            <!-- 目标地点 -->
            <div class="serTip" v-if="aimAdrsArr.length > 0">
                <div v-for="(i, inde) in aimAdrsArr" :key="inde" class="aimAdone" @click="mapSetView(i.lonlat)">
                    <p>{{ inde + 1 + ". " + i.name }}</p>
                    <p class="grey">地址：{{ i.address }}</p>
                </div>
            </div>
            <div class="serTip" v-if="serTipArr.length > 0">
                <!-- 建议地点 -->
                <ul>
                    <li v-for="(i, ind) in serTipArr" :key="ind" @click="toAimAdress(i.name)">
                        {{ i.name }}<span class="addressTxt">{{ i.address }}</span>
                    </li>
                </ul>
            </div>
        </div>
        <!-- <div
        class="funBox-item btn"
        v-for="(i, index) in mapStyleArr"
        @click="changeMapStyle(index), (actInde = index)"
        :key="index"
        :class="{ atc: actInde == index }"
      >
        {{ i.word }}
      </div> -->
    </div>
</div>
</template>

<script>
import {
    Component,
    Vue,
    Provide,
    Watch
} from "vue-property-decorator";
import {
    fromLonLat,
    toLonLat
} from "ol/proj";
import {
    Prop
} from "vue-property-decorator";
// import Mutil from "@/utils/mapUtil.js";
import axios from "axios";
@Component({
    components: {},
})
export default class search extends Vue {
    @Prop(Object) MAP;
    @Prop(Object) Mutil;
    @Provide() serVal = "";
    @Provide() Mutil;
    @Provide() mapStyleArr = [{
            key: "gooleSatellite",
            word: "谷歌卫星地图",
        },
        {
            key: "amapSatellite",
            word: "高德卫星地图",
        },
        {
            key: "amapCity",
            word: "高德城市地图",
        },
        // {
        //     key: "amapCity",
        //     word: "天地图",
        // },
    ];
    @Provide() serTipArr = [];
    @Provide() aimAdrsArr = [];
    @Provide() actInde = 0;
    @Provide() tipsShow = false;
    /*
      调用高德api 搜索位置
    */
    @Watch("serVal") change(newVal) {
        if (newVal == "") {
            this.Mutil.removeSearchm('searchM');
            this.tipsShow = false;
            this.serTipArr = [];
            return;
        }
        this.searchFun("4", newVal);
    }
    searchFun(type, newVal) {
        let that = this,
            url = "http://api.tianditu.gov.cn/search";
        that.serTipArr = [];
        that.aimAdrsArr = [];
        that.tipsShow = false;
        axios
            .get(url, {
                params: {
                    type: "query",
                    postStr: {
                        // specifyAdminCode: "130100000000",
                        keyWord: newVal,
                        mapBound: "114.34193,37.92687,114.63753,38.16345",
                        level: "12",
                        queryType: type, //4：普通建议词搜索， 1：普通搜索，
                        start: "0",
                        count: 10,
                    },
                    tk: "c8df739f047ce17cfe41b63cbeae6997",
                },
            })
            .then((res) => {
                if (type == 4 && res.status == 200) {
                    if (res.data.suggests) {
                        that.tipsShow = false;
                        let {
                            suggests: tipsData
                        } = res.data;
                        that.serTipArr = tipsData;
                    } else {
                        that.serTipArr = [];
                        that.tipsShow = true;
                    }
                }
                if (type == 1 && res.status == 200) {
                    if (res.data.pois) {
                        that.tipsShow = false;
                        let {
                            pois: aimsData
                        } = res.data;
                        that.aimAdrsArr = aimsData;
                        that.Mutil.removeSearchm('searchM');
                        //标注到地图
                        that.aimAdrsArr.forEach((ele, inde) => {
                            let lnglat = ele.lonlat.split(" ");
                            that.Mutil.addMarkerToMap(
                                'searchM',
                                ele.name,
                                require("@/assets/mark/pick.png"),
                                [Number(lnglat[0]), Number(lnglat[1])],
                                0.5
                            );
                            if (inde == 0) {
                                that.MAP.getView().animate({
                                    center: fromLonLat([Number(lnglat[0]), Number(lnglat[1])]),
                                    zoom: 17,
                                    duration: 1000,
                                });
                            }
                        });
                    } else {
                        that.aimAdrsArr = [];
                        that.tipsShow = true;
                    }
                }
            })
            .catch((err) => {
                that.$message.error(err);
            });
    }
    mapSetView(lnglat) {
        let that = this,
            lonlat = lnglat.split(" ");
        that.MAP.getView().animate({
            center: fromLonLat([Number(lonlat[0]), Number(lonlat[1])]),
            zoom: 17,
            duration: 1000,
        });
    }
    mapSearch() {
        let that = this,
            url = "https://restapi.amap.com/v3/place/text";
        that.$axios
            .get(
                url +
                `?key=a827e19b0efcc8bf58afb4f23de188d9&keywords=${that.serVal}?city='河北省'`
            )
            .then((res) => {
                console.log(res);
            })
            .catch((err) => console.log(err));
    }
    toAimAdress(name) {
        this.serTipArr = [];
        this.searchFun("1", name);
    }
    changeMapStyle(inde) {
        let that = this,
            arr = [0, 1, 2, 3];
        console.log(inde);
        arr.forEach((ele) => {
            if (ele != inde) that.MAP.getLayers().getArray()[ele].setVisible(false);
        });
        that.MAP.getLayers().getArray()[inde].setVisible(true);
    }
    created() {

    }
}
</script>

<style>
.funBox {
    position: absolute;
    top: 10px;
    left: 41px;
    z-index: 2;
}

.funBox-item {
    float: left;
    background: #fff;
    padding: 5px;
}

.funBox .ser {
    width: 265px;
    height: 45px;
    box-sizing: border-box;
    z-index: 2202;
    border-radius: 2px;
    position: relative;
}

.funBox .ser input {
    position: absolute;
    top: 12.5px;
    box-sizing: border-box;
    text-indent: 2px;
    z-index: 2200;
    border: none;
    width: 219px;
    height: 20px;
    line-height: 20px;
    padding: 0;
    letter-spacing: 0.5px;
    font-size: 14px;
}

.funBox .ser input:focus {
    border: none;
    outline: none;
}

.funBox button {
    background: url("https://g.csdnimg.cn/common/csdn-toolbar/images/csdn-black-search.png") no-repeat center;
    background-size: 80%;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 9308;
    box-sizing: border-box;
    width: 45px;
    height: 45px;
    outline: none;
    border: none;
    border-left: #eee 1px solid;
}

.funBox .btn {
    line-height: 25px;
    padding: 10px 8px;
    border-right: #afc5ee 1px dashed;
    font-size: 14px;
    cursor: pointer;
}

.funBox .btn:last-child {
    border: none;
}

.serTip {
    overflow: hidden;
    position: absolute;
    top: 47px;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 9;
    background: #fff;
}

.serTip ul {
    margin: 0;
    padding: 0;
}

.serTip li {
    line-height: 2;
    list-style: none;
    font-size: 14px;
    color: black;
    padding: 0 10px;
    width: 100%;
    overflow: hidden;
    height: 2em;
    cursor: pointer;
}

.serTip li:hover {
    background: #eee;
}

.aimAdone {
    padding: 0 10px;
    cursor: pointer;
}

.aimAdone:hover {
    background: burlywood;
}

.addressTxt {
    margin-left: 10px;
    margin-right: 5px;
    color: #999;
    font-size: 12px;
}

.grey {
    font-size: 12px;
    color: #999;
}

.atc {
    color: blue;
}
</style>
