<template>
  <view class="pick-list">
    <view class="cell-group-title">我的地址</view>
    <u-cell-group>
      <u-cell-item :title="chooseAddr" @click="chooseLocation"></u-cell-item>
    </u-cell-group>
    <view class="cell-group-title">选择门店</view>
    <u-cell-group>
      <u-cell-item
        v-for="item in pickList"
        :key="item.pid"
        :title="item.name"
        :label="item.address + item.location"
        :value="'距离' + item.distance + 'm'"
        @click="handleSelectPick(item)"
      ></u-cell-item>
    </u-cell-group>
  </view>
</template>

<script>
import { queryPickList } from '../../mall/api';
export default {
  name: 'yi-pick-list',
  data() {
    return {
      pickList: [],
      latitude: null,
      longitude: null,
      chooseAddr: '请选择位置',
    };
  },
  mounted() {
    this.getPickList();
  },
  methods: {
    async getPickList(page = 0) {
      const params = {
        query: {
          limit: 100,
          page,
        },
      };
      if (this.latitude && this.longitude) {
        params.location = {
          latitude: this.latitude,
          longitude: this.longitude,
        };
      }
      const { data, meta } = await queryPickList(params);
      console.log('%c [queryPickList]: ', 'color:#1989fa;', data, meta);
      this.pickList = data;
    },
    chooseLocation() {
      let _this = this;
      uni.chooseLocation({
        success(res) {
          console.log('%c [chooseLocation success]: ', 'color:#1989fa;', res);
          const { latitude, longitude, address, name } = res;
          _this.latitude = latitude;
          _this.longitude = longitude;
          _this.getPickList();
          _this.chooseAddr = address + name;
        },
        fail(res) {
          console.log('%c [chooseLocation fail]: ', 'color:#1989fa;', res);
        },
      });
    },
    handleSelectPick(pick) {
      console.log('%c [handleSelectPick]: ', 'color:#1989fa;', pick);
      this.$emit('handleSelectPick', pick);
    },
  },
};
</script>

<style scoped lang="scss">
.pick-list {
  min-height: 100vh;
  background-color: #fafafa;
  .cell-group-title {
    padding: 20rpx;
  }
}
</style>
