<template>
  <view class="gg u-p-20">
    <PickUpLocationHeader @getSearchLeader="getSearchLeader"/>
    <view v-if="leaderAddressVo" class="gg-current-location-container u-m-t-20">
      <PickUpLocationItem :isCurrent="checkIsCurrent(leaderAddressVo.leaderId)"
                          :location="leaderAddressVo"></PickUpLocationItem>
    </view>

    <scroll-view class="gg-location-sv-container" scroll-y @scrolltolower="loadMore">
      <block v-if="searchResult.content.length > 0">
        <view v-for="(item, index) in searchResult.content" :key="item.id" class="u-m-b-20">
          <PickUpLocationItem :isCurrent="checkIsCurrent(item.id)" :location="item"
                              @selectPickUpLocation="selectPickUpLocation"></PickUpLocationItem>
        </view>
      </block>
      <u-empty v-else mode="list"></u-empty>
    </scroll-view>

    <u-button type="warning" @click="choosePickUpLocation">搜索并选择其它提货点</u-button>
  </view>
</template>

<script>
import {mapState, mapGetters, mapActions} from 'vuex';

export default {
  data() {
    return {
      filter: {
        page: 1, // 当前页码
        limit: 5, // 每页记录数
        latitude: '', // 经度
        longitude: '' // 纬度
      },
      searchResult: {
        content: [], // 搜索的结果
        last: false // 是否已经最后
      }
    };
  },
  computed: {
    ...mapState('pickUpLocationModule', ['leaderAddressVo']),
    ...mapGetters('pickUpLocationModule', ['checkIsCurrent'])
  },
  methods: {
    ...mapActions('pickUpLocationModule', ['selectLeaderAddressVoAction']),
    async getSearchLeader(data) {
      if (data) {
        Object.assign(this.$data.searchResult, this.$options.data().searchResult); // 这里重置 searchResult 下的所有数据
        Object.assign(this.$data.filter, this.$options.data().filter); // 这里重置 filter 下的所有数据
      }

      this.filter.latitude = data ? data.latitude : this.filter.latitude;
      this.filter.longitude = data ? data.longitude : this.filter.longitude;

      const o = {
        limit: this.filter.limit,
        page: this.filter.page,
        longitude: this.filter.longitude,
        latitude: this.filter.latitude
      };

      let result = await this.$u.api.getSearchLeader(o);
      this.searchResult = {...result, content: [...this.searchResult.content, ...result.content]};
    },
    // 加载更多数据
    loadMore() {
      if (!this.searchResult.last) {
        this.filter.page = this.filter.page + 1;
        this.getSearchLeader();
      }
    },
    // 选择提货点
    selectPickUpLocation(leaderId) {
      if (leaderId) this.selectLeaderAddressVoAction({leaderId});
    },
    // 选择其它提货点
    choosePickUpLocation() {
      this.$u.route('/pagesLocation/choosePickUpLocation/choosePickUpLocation');
    },
  }
};
</script>

<style lang="scss" scoped>
.gg {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;

  &-current-location-container {
    flex: 1;
  }

  &-location-sv-container {
    height: calc(100vh - 450rpx);
  }
}
</style>
