<template>
  <view class="gg-header">
    <view class="gg-header-location u-p-r-50" @click="show = true">
      <text class="u-p-r-10">{{ currentPickUpArea }}</text>
      <u-icon color="gray" name="arrow-down-fill" size="20"></u-icon>
    </view>
    <!-- 如果利用v-model操作，会造成searchKeyword对于父组件的二次重渲染问题，所以将value与blur拆分，
    并且利用update:searchKeyword的方式将数据传递到父组件，并进行本组件的数据搜索操作 -->
    <u-search
        :clearabled="false"
        :show-action="true"
        :value="searchKeyword"
        class="gg-header-search"
        height="70"
        input-align="left"
        @blur="onBlurSearch"
        @custom="searchLocation"
        @search="searchLocation"
    ></u-search>
    <u-picker v-model="show" :default-selector="[0]" :range="findAllList" mode="selector" range-key="regionName"
              @confirm="findAllListConfirm"></u-picker>
  </view>
</template>

<script>
import {mapState, mapMutations, mapActions} from 'vuex';
import {BAIDU_MAP_AK} from '../../common/const.js';
// 百度地址资料：https://lbsyun.baidu.com/index.php?title=wxjsapi/guide/geocoding
const bmap = require('../../common/bmap-wx.min.js');
const BMap = new bmap.BMapWX({
  ak: BAIDU_MAP_AK
});

export default {
  name: 'PickUpLocationHeader',
  props: ['searchKeyword'],
  data() {
    return {
      show: false,
      latitude: '',
      longitude: ''
    };
  },
  computed: {
    ...mapState('pickUpLocationModule', ['findAllList', 'currentPickUpArea'])
  },
  methods: {
    ...mapMutations('pickUpLocationModule', ['setCurrentPickUpAreaMutation']),
    ...mapActions('pickUpLocationModule', ['getSysRegionFindAllListAction']),
    findAllListConfirm(index) {
      // 通过百度地图进行地址解析，返回经纬度，并通知父组件进行列表显示处理
      // 发起geocoding检索请求
      BMap.geocoding({
        address: this.findAllList[index],
        fail: e => {
          console.log(e);
        },
        success: data => {
          let wxMarkerData = data.wxMarkerData;
          this.latitude = wxMarkerData[0].latitude;
          this.longitude = wxMarkerData[0].longitude;
          // 通过父组件查询数据
          this.$emit('getSearchLeader', {
            latitude: this.latitude,
            longitude: this.longitude
          });

          this.setCurrentPickUpAreaMutation(this.findAllList[index])
        }
      });
    },
    searchLocation(value) {
      if (value && value.trim().length > 0) {
        BMap.geocoding({
          address: value,
          fail: e => {
            console.log(e);
          },
          success: data => {
            let wxMarkerData = data.wxMarkerData;
            this.latitude = wxMarkerData[0].latitude;
            this.longitude = wxMarkerData[0].longitude;

            // 通过父组件查询数据
            this.$emit('getSearchLeader', {
              latitude: this.latitude,
              longitude: this.longitude
            });
          }
        });
      }
    },
    onBlurSearch(value) {
      this.$emit('update:searchKeyword', value);
    }
  },
  watch: {
    searchKeyword: {
      handler(newVal, oldVal) {
        console.log(newVal, oldVal)
        this.searchLocation(newVal);
      },
      immediate: true
    }
  },
  mounted() {
    this.getSysRegionFindAllListAction();
  }
};
</script>

<style lang="scss" scoped>
.gg {
  &-header {
    display: flex;
    justify-content: center;
    align-items: center;

    &-location {
      text {
        color: gray;
      }
    }

    &-search {
      flex: 1;
    }
  }
}
</style>
