<template>
    <div>
        <div style="display: flex">
            <van-field name="checkboxGroup" label="省市区">
                <template #input>
                    <select id='province' @change='_locSearch'></select>
                </template>
            </van-field>
            <van-field name="checkboxGroup" label="地级市">
                <template #input>
                    <select id='city' @change='_locSearch'></select>
                </template>
            </van-field>
            <van-field name="checkboxGroup" label="区县">
                <template #input>
                    <select id='district' @change='_locSearch'></select>
                </template>
            </van-field>
        </div>
        <div style="display: flex;">
            <div style="width:50%;">
                <van-field
                        v-model="formObj.key"
                        label="关键字"
                        placeholder="关键字"
                ></van-field>
            </div>
            <div style="width:50%;display: flex;background: #ffffff">
                <van-button type="primary" block style="margin:0 20px" @click="_areaSearch">搜索</van-button>
                <van-button type="danger" block style="margin:0 20px" @click="_clear">清空</van-button>
            </div>
        </div>

        <div class="layout-cont-s" style="height: calc(100% - 150px);margin-bottom: 10px">
            <van-checkbox-group v-model="checkListValue" ref="checkboxGroup">
                <div class="result-item" v-for="(item,index) in resultList" :key="index" @click="_tapItem(item)">
                    <div>
                        <van-checkbox :name="item" shape="square">名称：{{item.name}}</van-checkbox>
                    </div>
                    <div>地址：{{item.address}}</div>
                    <div>经度：{{item.longitude}}</div>
                    <div>纬度：{{item.latitude}}</div>
                </div>
            </van-checkbox-group>
        </div>
        <div id='areaContainer' style="width: 100%;height: 50%;margin-top: 100px" v-show="false"></div>
        <div id="areaPanel" v-show="false"></div>
        <div class="bottom-btn">
            <van-button type="info" block @click="_add">添加</van-button>
        </div>
    </div>
</template>

<script>
    import {samplingPlace} from '../../../api'

    let that = {}
    export default {
        data() {
            return {
                map: {},
                district: {},
                placeSearch: {},
                polygons: [],
                adcode: '',

                provinceSelect: {},
                citySelect: {},
                districtSelect: {},

                completeData: {},
                formObj: {
                    key: ''
                },
                isSearch: false,

                planId: '',
                resultList: [],
                checkListValue: []
            }
        },
        mounted() {
            this.planId = this.$route.query.planId
            this._open()
        },
        methods: {
            _tapItem(item) {
                if (this.checkListValue.indexOf(item) === -1) {
                    this.checkListValue.push(item);
                } else {
                    this.checkListValue.splice(this.checkListValue.indexOf(item), 1);
                }
            },
            _add() {
                if (this.checkListValue.length === 0) {
                    this.$toast('请至少选择一条数据！')
                } else {
                    this._addOk()
                }
            },
            _addOk: async function () {
                let data = {
                    places: this.checkListValue.map(item => {
                        return {
                            name: item.name,
                            address: item.address,
                            latitude: item.latitude,
                            longitude: item.longitude
                        }
                    }),
                    planId: this.planId
                }
                let result = await samplingPlace.savePlaces(data)
                if (result) {
                    this.$toast('操作成功')
                    this.$router.go(-1)
                }
            },
            _open() {
                that = this
                this.isSearch = false
                this.map = new AMap.Map('areaContainer', {
                    zoom: 14
                });
                this.provinceSelect = document.getElementById('province');
                this.citySelect = document.getElementById('city');
                this.districtSelect = document.getElementById('district');
                //行政区划查询
                let opts = {
                    subdistrict: 1,   //返回下一级行政区
                    showbiz: false  //最后一级返回街道信息
                };
                this.district = new AMap.DistrictSearch(opts);//注意：需要使用插件同步下发功能才能这样直接使用
                this.district.search('中国', function (status, result) {
                    if (status === 'complete') {
                        that.completeData = result.districtList[0]
                        that._getData(result.districtList[0]);
                    }
                });
            },
            _areaSearch() {
                this._clearSearch()
                this.$nextTick(function () {
                    if (!this.adcode) {
                        this.$toast('请输入关键字！')
                        return
                    }
                    if (this.formObj.key) {
                        //构造地点查询类
                        this.placeSearch = new AMap.PlaceSearch({
                            pageSize: 50, // 单页显示结果条数
                            pageIndex: 1, // 页码
                            city: that.adcode, // 兴趣点城市
                            citylimit: true,  //是否强制限制在设置的城市内搜索
                            map: that.map, // 展现结果的地图实例
                            panel: "areaPanel", // 结果列表将在此容器中进行展示。
                            // showCover: false,
                            autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
                        });
                        this.placeSearch.search(that.formObj.key, function (status, result) {
                            that.isSearch = true
                            that.resultList = result.poiList.pois.map(item => {
                                return {
                                    name: item.name,
                                    address: item.address,
                                    latitude: item.location.lat,
                                    longitude: item.location.lng
                                }
                            })
                            console.log(result, 'result')
                        });
                    } else {
                        this.$toast('请输入关键字！')
                    }
                })
            },
            _clearSearch() {
                if (this.isSearch) {
                    this.placeSearch.clear()
                }
            },
            _clear() {
                this.map.clearMap();
                //行政区划的去空
                for (let i = 0, l = this.polygons.length; i < l; i++) {
                    this.polygons[i].setMap(null);
                }
                this._clearSearch()

                this.formObj.key = ''
                this.adcode = ''

                this.provinceSelect.innerHTML = '';
                this.citySelect.innerHTML = '';
                this.districtSelect.innerHTML = '';
                this._getData(this.completeData)
            },
            _getData(data, level) {
                this.map.clearMap();
                let bounds = data.boundaries;
                if (bounds) {
                    for (let i = 0, l = bounds.length; i < l; i++) {
                        let polygon = new AMap.Polygon({
                            map: that.map,
                            strokeWeight: 1,
                            strokeColor: '#0091ea',
                            fillColor: '#80d8ff',
                            fillOpacity: 0.2,
                            path: bounds[i]
                        });
                        that.polygons.push(polygon);
                    }
                    // this.map.setFitView();//地图自适应  app端报错
                }

                //清空下一级别的下拉列表
                if (level === 'province') {
                    this.citySelect.innerHTML = '';
                    this.districtSelect.innerHTML = '';
                } else if (level === 'city') {
                    this.districtSelect.innerHTML = '';
                }

                if (level !== 'district') {
                    //获取全国的省份list[] {adcode,level:'province',name:'山东省'}
                    let subList = data.districtList;
                    if (subList) {
                        let contentSub = new Option('--请选择--');
                        //获取下拉项的等级 province
                        let curlevel = subList[0].level;
                        //获取id 为curlevel的元素select
                        let curList = document.querySelector('#' + curlevel);
                        //添加一项option
                        curList.add(contentSub);
                        //遍历省份添加option到select下
                        for (let i = 0, l = subList.length; i < l; i++) {
                            contentSub = new Option(subList[i].name);
                            contentSub.setAttribute("value", subList[i].level);
                            contentSub.center = subList[i].center;
                            contentSub.adcode = subList[i].adcode;
                            contentSub.cityCode = subList[i].cityCode;
                            curList.add(contentSub);
                        }
                    }
                }
            },
            _locSearch(obj) {
                //清除地图上所有覆盖物
                for (let i = 0, l = this.polygons.length; i < l; i++) {
                    this.polygons[i].setMap(null);
                }
                let option = obj.srcElement[obj.srcElement.options.selectedIndex];
                that.adcode = option.adcode
                //如果没有选择 则清空下级下拉
                if (option.adcode) {
                    this.district.setLevel(option.value); //行政区级别
                    this.district.setExtensions('all');
                    //行政区查询
                    //按照adcode进行查询可以保证数据返回的唯一性
                    this.district.search(option.adcode, function (status, result) {
                        if (status === 'complete') {
                            that._getData(result.districtList[0], obj.srcElement.id);
                        }
                    });
                } else {
                    //省份未选择时 清空市区
                    if (obj.srcElement.id === 'province') {
                        this.citySelect.innerHTML = '';
                        this.districtSelect.innerHTML = '';
                    }
                    //市未选择时 清空区
                    if (obj.srcElement.id === 'city') {
                        this.districtSelect.innerHTML = '';
                    }

                    //市 区未选择时的处理
                    let option1 = document.querySelector('#province')[document.querySelector('#province').options.selectedIndex]
                    let option2 = document.querySelector('#city')[document.querySelector('#city').options.selectedIndex]
                    let option3 = document.querySelector('#district')[document.querySelector('#district').options.selectedIndex]

                    let id = ''
                    if (option3 && option3.adcode) {
                        that.adcode = option3.adcode
                        this.district.setLevel(option3.value); //行政区级别
                        id = 'district'
                    } else if (option2 && option2.adcode) {
                        that.adcode = option2.adcode
                        this.district.setLevel(option2.value); //行政区级别
                        id = 'city'
                    } else {
                        that.adcode = option1.adcode
                        this.district.setLevel(option1.value); //行政区级别
                        id = 'province'
                    }
                    this.district.setExtensions('all');
                    //行政区查询
                    //按照adcode进行查询可以保证数据返回的唯一性
                    this.district.search(that.adcode, function (status, result) {
                        if (status === 'complete') {
                            that._getData(result.districtList[0], id);
                        }
                    });
                }
            },
        }
    }
</script>


<style scoped lang="less">
    #areaPanel {
        position: fixed;
        background-color: white;
        max-height: 90%;
        overflow-y: auto;
        top: 10px;
        right: 10px;
        width: 280px;
    }

    select {
        position: relative;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        margin-bottom: 0;
        display: inline-block;
        height: 32px;
        padding: .375rem 1.75rem .375rem .75rem;
        line-height: 1.5;
        color: #495057;
        vertical-align: middle;
        background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .75rem center;
        background-size: 8px 10px;
        border: 1px solid #ced4da;
        border-radius: 4px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none
    }

    select:not(:last-child) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0
    }

    select:not(:first-child) {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0
    }

    select:focus {
        border-color: #80bdff;
        outline: 0;
        box-shadow: 0 0 0 .1rem rgba(128, 189, 255, .1)
    }

    select:focus::-ms-value {
        color: #495057;
        background-color: #fff
    }

</style>

