<template>
  <view class="page" :style="themeColor">
    <view class="flex flex-direction flex-wrap align-stretch benben-position-layout flex selectlocationAddress_flex_0"
      :style="{height:(200+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
      <view class='flex flex-wrap align-center justify-between selectlocationAddress_fd0_0'>
        <view class='flex flex-wrap align-center selectlocationAddress_fd0_0_c0' @tap.stop="handleJumpDiy"
          data-type="back" data-url="1">
          <text class='fu-iconfont2  selectlocationAddress_fd0_0_c0_c0'>&#xE794;</text>
        </view>
        <view class='flex flex-wrap align-center'>
          <text class='selectlocationAddress_fd0_0_c1_c0'>选择收货地址</text>
        </view>
        <!-- #ifndef MP-WEIXIN -->
        <view class='flex flex-wrap align-center justify-end selectlocationAddress_fd0_0_c2' @tap.stop="handleJumpDiy"
          data-type="navigateTo" :data-url="`/pages/my/addAddress/addAddress`">
          <text class='selectlocationAddress_fd0_0_c2_c0'>新增地址</text>
        </view>
        <!-- #endif -->
        <!-- #ifdef MP-WEIXIN -->
        <view class='flex flex-wrap align-center justify-end selectlocationAddress_fd0_0_c2'>
        </view>
        <!-- #endif -->
      </view>
      <view class='flex align-center selectlocationAddress_fd0_1'>
        <view class='flex flex-wrap align-center' @tap.stop="handleChooseCity" data-type="navigateTo"
          :data-url="`/pages/sy/citySelection/citySelection`">
          <image class='selectlocationAddress_fd0_1_c0_c0' mode="aspectFit" :src='STATIC_URL+"52.png"'></image>
          <text class='selectlocationAddress_fd0_1_c0_c1'>{{city || '定位中'}}</text>
        </view>
        <view class='flex align-center flex-sub selectlocationAddress_fd0_1_c1'>
          <image class='selectlocationAddress_fd0_1_c1_c0' mode="aspectFill" :src='STATIC_URL+"53.png"'></image>
          <input style="margin-left: 24rpx;" type="text" placeholder="搜索地点" confirm-type="done" :maxlength="-1" @input="handleInput"
						@confirm="handleSearch" placeholder-style="color:rgba(153, 153, 153, 1);font-size:28rpx" v-model="keyword" />
        </view>
      </view>

    </view>
    <view :style="{height: (200+StatusBarRpx)+'rpx'}"></view>
    <!---flex布局flex布局开始-->
    <view class="flex flex-wrap align-center justify-between benben-flex-layout selectlocationAddress_flex_1">
      <view class='selectlocationAddress_fd1_0 text-cut'>{{addr || '定位中'}}</view>
      <image class='selectlocationAddress_fd1_1' mode="aspectFill" @click="getLocation" :src='STATIC_URL+"54.png"'></image>
    </view>

    <!---flex布局flex布局结束-->
    <!---flex布局flex布局开始-->
    <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout selectlocationAddress_flex_2">
      <view class='flex flex-wrap align-center justify-between selectlocationAddress_fd2_0'>
        <view class="flex align-center">
          <image class='selectlocationAddress_fd2_0_c0' mode="aspectFit" :src='STATIC_URL+"55.png"'></image>
          <text class='selectlocationAddress_fd2_0_c1'>我的收货地址</text>
        </view>
        <text class='selectlocationAddress_fd2_0_c1' @tap.stop="handleJumpDiy"
          data-type="navigateTo" :data-url="`/pages/my/addAddress/addAddress`">新增地址</text>
      </view>
      <fu-empty-ui v-if="address_list.length === 0 && isInit"></fu-empty-ui>
      <view class='flex flex-direction flex-wrap align-stretch selectlocationAddress_fd2_1' @click="handleSelectAddress(item)" v-for="(item, index) in address_list" :key="index">
        <view class='flex flex-wrap align-center'>
          <text class='selectlocationAddress_fd2_1_c0_c0'>{{item.real_name}}</text>
          <text class='selectlocationAddress_fd2_1_c0_c1'>(</text>
          <text class='selectlocationAddress_fd2_1_c0_c2'>{{item.sex == 1 ? '先生' : '女士'}}</text>
          <text class='selectlocationAddress_fd2_1_c0_c3'>)</text>
          <text class='selectlocationAddress_fd2_1_c0_c4'>{{item.mobile}}</text>
        </view>
        <view class='flex flex-wrap align-center selectlocationAddress_fd2_1_c1'>
          <text class='selectlocationAddress_fd2_1_c1_c0'>{{item.probince || ''}}{{item.city || ''}}{{item.district || ''}}{{item.detail}}</text>
        </view>
      </view>
      <view v-if="address_list.length != allAddressList.length" class='flex flex-wrap align-center justify-center selectlocationAddress_fd2_3' @click="handleShowAll">
        <text class='selectlocationAddress_fd2_3_c0'>展开全部地址</text>
        <image class='selectlocationAddress_fd2_3_c1' mode="aspectFit" :src='STATIC_URL+"56.png"'></image>
      </view>
    </view>

    <!---flex布局flex布局结束-->
    <!---flex布局flex布局开始-->
    <view class="flex benben-flex-layout flex-wrap align-center selectlocationAddress_flex_3">
    </view>

    <!---flex布局flex布局结束-->
    <!---flex布局flex布局开始-->
    <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout selectlocationAddress_flex_4">
      <view class='flex flex-wrap align-center selectlocationAddress_fd4_0'>
        <image class='selectlocationAddress_fd4_0_c0' mode="aspectFit" :src='STATIC_URL+"55.png"'></image>
        <text class='selectlocationAddress_fd4_0_c1'>附近地址</text>
      </view>
      <view class='flex flex-direction flex-wrap align-stretch selectlocationAddress_fd4_1' @click="handleSelectPoi(item)" v-for="(item, index) in poiList" :key="index">
        <view class='flex flex-wrap align-center'>
          <text class='selectlocationAddress_fd4_1_c0_c0'>{{item.name}}</text>
        </view>
      </view>
    </view>

    <!---flex布局flex布局结束-->


  </view>
</template>
<script>
  import amap from '@/common/amap-wx.js';
  export default {
    components: {},


    data() {
      return {
        "keyword": "",
        city: '',
        isInit: false,
        address_list: [],
        allAddressList: [],
        addr: '',
        amapPlugin: null, //new地图
        key: '886bfe2d6c32bd8eac97c2e6d821ed0b',
        poiList: [],
        latitude: '',
        longitude: ''
      };
    },
    computed: {
      themeColor() {
        return this.$store.getters.themeColor
      },

    },
    watch: {},
    onLoad(options) {
      this.city = options.city || '';
      this.addr = options.addr || '';
      if (!this.addr || !this.city) {
        this.getLocation()
      }
      this.amapPlugin = new amap.AMapWX({
        key: this.key
      });
      this.getPoiList();

    },
    onUnload() {

    },
    onReady() {

    },
    onShow() {
      this.getAddressList();
    },
    onHide() {

    },
    onResize() {

    },
    onPullDownRefresh() {

    },
    onReachBottom(e) {

    },
    onPageScroll(e) {

    },
    methods: {
      handleSelectAddress(item) {
        let params = {
          city: item.city,
          lat: item.lat,
          lng: item.lng,
          address: item.detail
        }
        uni.$emit('SELECT_ADDRESS', params)
        uni.navigateBack({
          delta: 1
        });
      },
      handleSelectPoi(item) {
        let params = {
          city: item.cityname || this.city,
          lat: item.location.split(',')[1],
          lng: item.location.split(',')[0],
          address: item.name
        }
        uni.$emit('SELECT_ADDRESS', params)
        uni.navigateBack({
          delta: 1
        });
      },
      getLocation() {
      	this.city = '定位中'
      	this.addr = '定位中'
      	this.amapPlugin.getRegeo({
      		success: (data) => {
      			//成功回调
      			console.log('地理位置' + JSON.stringify(data[0].regeocodeData.pois));
      			let addr = data[0].regeocodeData.pois.length ? data[0].regeocodeData.pois[0].name :
      				data[0].regeocodeData.addressComponent.district;
      			global.city = data[0].regeocodeData.addressComponent.city
      			global.addr = addr
      			this.city = global.city
      			this.addr = global.addr
      		},
      		fail: (err) => {
      			this.city = '定位失败，请选择'
      			console.error(err)
      		}
      	})
      },
      handleChooseCity() {
        uni.$once('CHOOSE_CITY', data => {
          console.log('监听到的数据', data)
          this.city = data.name;
          this.latitude = data.lat;
          this.longitude = data.lng;
          // this.getTipsList();
        })
        uni.navigateTo({
          url: '/pages/sy/citySelection/citySelection?city=' + this.city
        })
      },
      handleInput(e) {
      	this.getTipsList()
      },
      // 去搜索
      handleSearch(e, text) {
      	this.getTipsList()
      },
      _getPOIAroundList() {
        this.amapPlugin.getPoiAround({
          keywords: this.keyword,
          location: `${this.longitude},${this.latitude}`,
          success: (res) => {
            console.log('poi周边列表', res)
            if (res && res.poisData) {
            	this.poiList = res.poisData
            }
          },
          fail: (err) => {

          }
        });
      },
      handleShowAll() {
        this.address_list = this.allAddressList;
      },
      getPoiList() {
        console.log(123)
      	this.amapPlugin.getPoiAround({
      		// location: `${this.lng},${this.lat}`,
      		success: (data) => {
      			console.log('poi周边列表', data)
      			if (data && data.poisData) {
      				this.poiList = data.poisData
      			}
      		}
      	})
      },
      getTipsList() {
      	if (!this.keyword) {
      		this.$Common.toast('请先选择当前城市')
      		return
      	}
        console.log(123)
      	this.amapPlugin.getInputtips({
      		keywords: this.keyword,
      		city: this.city,
      		success: (data) => {
      			console.log('tips周边列表', data)
      			if (data && data.tips) {
      				this.poiList = data.tips
      			}
      		}
      	})
      },
      /**
       * @func 获取地址列表
       */
      getAddressList() {
        this.$api.post(global.apiUrls.post636f7683cf195, {list_rows: 1000})
          .then((res) => {
            console.log("地址列表", res);
            if (res.data.code == 1) {
              this.address_list = res.data.data.data.slice(0, 2);
              this.allAddressList = res.data.data.data;
              this.isInit = true;
            } else {
              this.$message.info(res.data.msg);
              this.address_list = [];
              this.allAddressList = [];
              this.backData = null;
            }
            this.$nextTick(function () {
              uni.stopPullDownRefresh();
            });
          });
      },
    }
  };
</script>
<style lang="scss" scoped>
  .page {
    width: 100vw;
    overflow-x: hidden;
    min-height: calc(100vh - var(--window-bottom));
    background: rgba(255, 255, 255, 1);
    background-size: 100% auto !important;
  }

  .selectlocationAddress_flex_0 {
    background: #fff;
    width: 750rpx;
    height: 200rpx;
    overflow: hidden;
    z-index: 10;
    top: 0rpx;
    background-size: 100% auto !important;
  }

  .selectlocationAddress_fd0_1_c1_c1 {
    margin: 0rpx 0rpx 0rpx 16rpx;
  }

  .selectlocationAddress_fd0_1_c1_c0 {
    width: 28rpx;
    height: 28rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }

  .selectlocationAddress_fd0_1_c1 {
    flex: 1;
    background:rgba(246, 247, 249, 1);
    margin: 0rpx 0rpx 0rpx 32rpx;
    border-radius: 32rpx 32rpx 32rpx 32rpx;
    padding: 0 24rpx;
    height: 64rpx;
  }

  .selectlocationAddress_fd0_1_c0_c1 {
    color: #666666;
    font-size: 32rpx;
    font-weight: 500;
    line-height: 32rpx;
  }

  .selectlocationAddress_fd0_1_c0_c0 {
    width: 28rpx;
    height: 34rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    margin: 0rpx 16rpx 0rpx 0rpx;
  }

  .selectlocationAddress_fd0_1 {
    margin: 34rpx 32rpx 0rpx 24rpx;
  }

  .selectlocationAddress_fd0_0_c2_c0 {
    line-height: 35rpx;
    font-size: 32rpx;
    font-weight: 400;
    color: #000000;
  }

  .selectlocationAddress_fd0_0_c2 {
    width: 150rpx;
  }

  .selectlocationAddress_fd0_0_c1_c0 {
    font-size: 36rpx;
    font-weight: 500;
    color: #333;
    line-height: 36rpx;
  }

  .selectlocationAddress_fd0_0_c0_c0 {
    font-size: 36rpx;
    font-weight: 500;
    color: #333;
    line-height: 36rpx;
  }

  .selectlocationAddress_fd0_0_c0 {
    width: 150rpx;
  }

  .selectlocationAddress_fd0_0 {
    margin: 42rpx 32rpx 0rpx 32rpx;
  }

  .selectlocationAddress_flex_1 {
    background: rgba(246, 247, 249, 1);
    height: 88rpx;
    background-size: 100% auto !important;
    padding: 0rpx 32rpx 0rpx 32rpx;
  }

  .selectlocationAddress_fd1_1 {
    width: 38rpx;
    height: 38rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }

  .selectlocationAddress_fd1_0 {
    width: 500rpx;
    color: #333333;
    font-size: 32rpx;
    font-weight: 400;
    line-height: 32rpx;
  }

  .selectlocationAddress_flex_2 {
    padding: 32rpx 0rpx 32rpx 0rpx;
  }

  .selectlocationAddress_fd2_3_c1 {
    width: 28rpx;
    height: 28rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    margin: 0rpx 0rpx 0rpx 12rpx;
  }

  .selectlocationAddress_fd2_3_c0 {
    color: #333333;
    font-size: 28rpx;
    font-weight: 400;
    line-height: 32rpx;
  }

  .selectlocationAddress_fd2_3 {
    margin: 24rpx 0rpx 0rpx 0rpx;
  }

  .selectlocationAddress_fd2_2_c1_c0 {
    color: #666666;
    font-size: 28rpx;
    font-weight: 400;
    line-height: 32rpx;
  }

  .selectlocationAddress_fd2_2_c1 {
    margin: 16rpx 0rpx 0rpx 0rpx;
  }

  .selectlocationAddress_fd2_2_c0_c4 {
    margin: 0rpx 0rpx 0rpx 40rpx;
    color: #1A1A1A;
    font-size: 28rpx;
    font-weight: 500;
    line-height: 32rpx;
  }

  .selectlocationAddress_fd2_2_c0_c3 {
    color: #1A1A1A;
    font-size: 28rpx;
    font-weight: 500;
    line-height: 32rpx;
  }

  .selectlocationAddress_fd2_2_c0_c2 {
    color: #1A1A1A;
    font-size: 28rpx;
    font-weight: 500;
    line-height: 32rpx;
  }

  .selectlocationAddress_fd2_2_c0_c1 {
    color: #1A1A1A;
    font-size: 28rpx;
    font-weight: 500;
    line-height: 32rpx;
  }

  .selectlocationAddress_fd2_2_c0_c0 {
    color: #1A1A1A;
    font-size: 28rpx;
    font-weight: 500;
    line-height: 32rpx;
  }

  .selectlocationAddress_fd2_2 {
    border-bottom: 1px solid #eee;
    margin: 0rpx 0rpx 0rpx 54rpx;
    padding: 24rpx 0rpx 24rpx 0rpx;
  }

  .selectlocationAddress_fd2_1_c1_c0 {
    color: #666666;
    font-size: 28rpx;
    font-weight: 400;
    line-height: 32rpx;
  }

  .selectlocationAddress_fd2_1_c1 {
    margin: 16rpx 0rpx 0rpx 0rpx;
  }

  .selectlocationAddress_fd2_1_c0_c4 {
    margin: 0rpx 0rpx 0rpx 40rpx;
    color: #1A1A1A;
    font-size: 28rpx;
    font-weight: 500;
    line-height: 32rpx;
  }

  .selectlocationAddress_fd2_1_c0_c3 {
    color: #1A1A1A;
    font-size: 28rpx;
    font-weight: 500;
    line-height: 32rpx;
  }

  .selectlocationAddress_fd2_1_c0_c2 {
    color: #1A1A1A;
    font-size: 28rpx;
    font-weight: 500;
    line-height: 32rpx;
  }

  .selectlocationAddress_fd2_1_c0_c1 {
    color: #1A1A1A;
    font-size: 28rpx;
    font-weight: 500;
    line-height: 32rpx;
  }

  .selectlocationAddress_fd2_1_c0_c0 {
    color: #1A1A1A;
    font-size: 28rpx;
    font-weight: 500;
    line-height: 32rpx;
  }

  .selectlocationAddress_fd2_1 {
    border-bottom: 1px solid #eee;
    margin: 0rpx 24rpx 0rpx 54rpx;
    padding: 24rpx 0rpx 24rpx 0rpx;
  }

  .selectlocationAddress_fd2_0_c1 {
    color: #333333;
    font-size: 28rpx;
    font-weight: 500;
    line-height: 30rpx;
  }

  .selectlocationAddress_fd2_0_c0 {
    width: 6rpx;
    height: 32rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    margin: 0rpx 16rpx 0rpx 0rpx;
  }

  .selectlocationAddress_fd2_0 {
    margin: 0rpx 32rpx 8rpx 32rpx;
  }

  .selectlocationAddress_flex_3 {
    background: rgba(246, 247, 249, 1);
    height: 20rpx;
    background-size: 100% auto !important;
  }

  .selectlocationAddress_flex_4 {
    padding: 32rpx 0rpx 32rpx 0rpx;
  }

  .selectlocationAddress_fd4_2_c0_c0 {
    color: #666666;
    font-size: 28rpx;
    font-weight: 400;
    line-height: 32rpx;
  }

  .selectlocationAddress_fd4_2 {
    border-bottom: 1px solid #eee;
    margin: 0rpx 0rpx 0rpx 54rpx;
    padding: 24rpx 0rpx 24rpx 0rpx;
  }

  .selectlocationAddress_fd4_1_c0_c0 {
    color: #666666;
    font-size: 28rpx;
    font-weight: 400;
    line-height: 32rpx;
  }

  .selectlocationAddress_fd4_1 {
    border-bottom: 1px solid #eee;
    margin: 0rpx 0rpx 0rpx 54rpx;
    padding: 24rpx 0rpx 24rpx 0rpx;
  }

  .selectlocationAddress_fd4_0_c1 {
    color: #333333;
    font-size: 28rpx;
    font-weight: 500;
    line-height: 30rpx;
  }

  .selectlocationAddress_fd4_0_c0 {
    width: 6rpx;
    height: 32rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    margin: 0rpx 16rpx 0rpx 0rpx;
  }

  .selectlocationAddress_fd4_0 {
    margin: 0rpx 0rpx 8rpx 32rpx;
  }
</style>
