<template>
  <div class="get-address-map">
    <van-search
      v-model="addressWord"
      show-action
      label="地址"
      placeholder="请输入搜索关键词"
      @search="onSearch"
    >
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
    </van-search>
    <TengXunMap
      ref="TengXunMap"
      @click="clickMap"
      :point="point"
      class="tengxun-box"
    ></TengXunMap>
    <div class="list-box bg-white">
      <div class="box-content">
        <van-empty
          image-size="40%"
          v-if="addressList.length === 0"
          color="#fff"
          description="暂无地点"
        ></van-empty>
        <div
          v-for="(item, index) in addressList"
          :key="index"
          @click="selectPoint(item)"
          class="address-list py-1unit"
        >
          {{ item.title }}
          <div class="desc mt-1unit">
            {{ item.address }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import TengXunMap from '../components/Map/TengXunMap.vue'
import { jsBridge } from '../../utils/jsbridge'
// import { Toast } from "vant";
import { Field, Button, CellGroup, Form, Popup, Picker, Icon, Search, Empty } from "vant";
Vue.use(Field).use(Button).use(CellGroup).use(Form).use(Popup).use(Picker).use(Icon).use(Search).use(Empty);
import { searchArea, getGeocoder, zhuanhuan } from '../../utils/tengxun'
export default {
  name: 'map',
  components: {
    TengXunMap
  },
  data () {
    return {
      latitude: '',
      longitude: '',
      map: null,
      marker: null,
      geocoder: null,
      address: '',
      addressWord: '',
      addressList: [],
      point: {
        lat: 32.188478,
        lng: 119.425722
      }
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    clickMap (evt) {
      this.latitude = evt.lat
      this.longitude = evt.lng
      this.point = {
        lat: evt.lat,
        lng: evt.lng
      }
      const _that = this
      const toast1 = this.$toast.loading({
        message: '加载中',
        forbidClick: true,
        duration: 0
      })
      getGeocoder(`${evt.lat},${evt.lng}`)
        .then((res) => {
          if (res.statusText === 'OK' && res.data.status === 0) {
            _that.addressList = res.data.result.pois
          }
        })
        .finally(() => {
          toast1.clear()
        })
    },
    init () {
      const _that = this
      jsBridge.getPoint().then((res) => {
        if (res?.type === 'gcj02') {
          _that.latitude = res.lat
          _that.longitude = res.lng
          this.clickMap({
            lat: res.lat,
            lng: res.lng
          })
        } else {
          // 非国标 - 镇合意
          const toast1 = this.$toast.loading({
            message: '加载中',
            forbidClick: true,
            duration: 0
          })
          zhuanhuan(`${res.lat},${res.lng}`)
            .then((res) => {
              if (res.statusText === 'OK' && res.data.status === 0) {
                _that.latitude = res.data.locations[0].lat
                _that.longitude = res.data.locations[0].lng
                _that.clickMap({
                  lat: res.data.locations[0].lat,
                  lng: res.data.locations[0].lng
                })
              }
            })
            .finally(() => {
              toast1.clear()
            })
        }
      })
      if (!this.map) {
        this.map = _that.$refs.TengXunMap.map
      }
    },
    // 选择一个point
    selectPoint (item) {
      sessionStorage.setItem(
        'location',
        JSON.stringify(item)
      )
      this.$router.back()
    },
    // 搜索字符
    onSearch () {
      if (this.addressWord) {
        const toast1 = this.$toast.loading({
          message: '加载中',
          forbidClick: true,
          duration: 0
        })
        searchArea(this.addressWord)
          .then((res) => {
            if (res.statusText === 'OK' && res.data.status === 0) {
              if (res.data.data.length > 0) {
                this.addressList = res.data.data
                this.latitude = res.data.data[0].location.lat
                this.longitude = res.data.data[0].location.lng
                this.point = {
                  lat: res.data.data[0].location.lat,
                  lng: res.data.data[0].location.lng
                }
              }
            }
          })
          .finally(() => {
            toast1.clear()
          })
      }
    }
  },
}
</script>
<style lang="stylus" scoped>
.get-address-map {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100vh;
  .search-address {
    height: 10vh !important;
  }

  .tengxun-box {
    flex-grow: 1;
  }

  .list-box {
    max-height: 600px;
    box-sizing: border-box;
    .box-content {
      height: 100%;
      overflow-y: scroll;
    }
  }

  .address-list {
    padding: 24px 20px;
    border-bottom: 1px solid #eee;
    font-size: 36px;
    background-color: #fff;
    font-family: PingFangSC-Regular, PingFang SC;
    .desc {
      margin-top: 20px;
      font-size: 28px;
      color: #858585;
    }
  }
  .van-empty {
    background-color: #fff;
  }
}
</style>
