<template>
    <div>
        <VanField :value="value && value.detail" :label="label" :rules="requireRule(required, label, type)" :is-link="isIink" readonly :placeholder="`请选择${label}`" :clearable="clearable" :disabled="disabled" :required="required" :maxlength="100" @click="showMap" />
        <overlay :show="visible">
            <div id="container"></div>
            <input v-model="keyword" id="tipinput" autocomplete="off" placeholder="请输入地址">
            <Button id="btn" type="primary" @click="handleConfirm" native-type="button">确定</Button>
        </overlay>
    </div>
</template>

<script>
import mixin from "./mixin";
import { Field as VanField, Overlay, Button } from "vant";

/**
 * 地图选择组件
 */
export default {
    name: "Amap",
    components: { VanField, Overlay, Button },
    mixins: [mixin],
    model: {
        prop: "value",
        event: "change",
    },
    props: {
        isIink: {
            type: Boolean,
            default: true,
        },
        type: {
            type: String,
        },
        maxlength: {
            type: Number,
            default: 20,
        },
    },
    data() {
        return {
            visible: false,
            keyword: "",
            lat: null,
            lng: null,
            map: null,
        };
    },
    methods: {
        showMap() {
            this.visible = true;
            this.$nextTick(this.initMap);
        },
        handleConfirm(){
          const { lat, lng } = this
          this.$emit('change', {detail: this.keyword, latitude: lat, longitude: lng})
          this.visible = false
        },
        initMap() {
            if (this.map) {
                return;
            }
            const map = new AMap.Map("container", {
                resizeEnable: true,
                zoom: 10,
            });
            this.map = map;
            AMap.plugin(
                ["AMap.Scale", "AMap.PlaceSearch", "AMap.AutoComplete"],
                () => {
                    map.addControl(new AMap.Scale());
                    const auto = new AMap.AutoComplete({ input: "tipinput" });
                    auto.on("select", (e) => {
                        this.keyword = e.poi.name;
                        map.setZoomAndCenter(20, e.poi.location);
                        const { lat, lng } = e.poi.location;
                        this.lat = lat
                        this.lng = lng
                    });
                }
            );

            AMapUI.loadUI(["misc/PositionPicker"], (PositionPicker) => {
                this.positionPicker = new PositionPicker({
                    mode: "dragMap",
                    map: map,
                    iconStyle: {
                        //自定义外观
                        url: "//webapi.amap.com/ui/1.0/assets/position-picker2.png", //图片地址
                        size: [48, 48], //要显示的点大小，将缩放图片
                        ancher: [24, 40], //锚点的位置，即被size缩放之后，图片的什么位置作为选中的位置
                    },
                });
                this.positionPicker.on('success', res => {
                  const {position: {lat, lng}} = res
                  this.lat = lat
                  this.lng = lng
                })
                this.positionPicker.start(map.getCenter());
            });
        },
    },
    watch: {
        value(value, oldValue) {
            if (!oldValue && value) {
                const { detail, latitude, longitude } = value;
                this.keyword = detail
                this.lat = latitude
                this.lnt = longitude
                this.map.setZoomAndCenter(20, [longitude, latitude]);
                this.positionPicker.start(this.map.getCenter());
            }
        },
    },
};
</script>

<style>
#container {
    width: 100%;
    height: 100%;
}
#tipinput {
    position: absolute;
    top: 0;
    width: 80%;
    height: 42px;
    border: none;
    color: #08080a;
    text-indent: 1em;
}
#btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 20%;
}
.amap-sug-result {
    z-index: 99999;
}
</style>