<template>
  <view class="">
    <u-sticky customNavHeight="0">
      <view class="head_top">
        <u-search placeholder="搜索小区、办公楼等" :showAction="false"></u-search>
        <view style="height: 20rpx;"></view>
        <u-tabs 
          :list="tabsList" itemStyle="font-size: 32rpx;height: 74rpx;" 
          :current="current"
          @change="changeCurrent"
          lineColor="#FF6D20"
          lineWidth="105rpx"
          height="7rpx"
          ></u-tabs>
        </u-tabs>
      </view>
    </u-sticky>
    <view style="background-color: #f4f4f4;height: 30rpx;"></view>
    <view class="address-box" v-if="current==0">
      <view class="head_item">
        <view class="re-location">
          <view class="re-title">当前位置: </view>
          <view>{{street}}</view>
        </view>
        <view class="re-btn" @click="reGetLocation"><image class="re-address-img" src="@/static/images/re_address.png"></image>重新定位</view>
      </view>
      <view class="head_item_tips">
        <view>附近地址</view>
      </view>
      <view class="address-list">商业宾馆（春雨路二段）</view>
      <view class="address-list">商业宾馆（春雨路二段）</view>
      <view class="address-list">商业宾馆（春雨路二段）</view>
    </view>
    <view class="address-box" v-if="current==1">
      <view class="head_item_tips">
        <view>泸州区县</view>
      </view>
      <view class="area">
        <view class="area-item" 
          :class="{'area-item-on': item.code==area_change}" 
          v-for="(item, index) in areaList" 
          :key="index"
          @click="changeArea(item)"
        >
          {{item.name}}
        </view>
      </view>
      <view class="head_item_tips">
        <view>选择街道/镇</view>
      </view>
      <view class="street">
        <view class="letter-item">
          <view class="letter">A</view>
          <view class="item-box">
            <view class="street-item" v-for="item in streetList.slice(0, 3)">
              {{item.name}}
            </view>
          </view>
        </view>
        <view class="letter-item">
          <view class="letter">B</view>
          <view class="item-box">
            <view class="street-item" v-for="item in streetList.slice(3,5)">
              {{item.name}}
            </view>
          </view>
        </view>
        <view class="letter-item">
          <view class="letter">D</view>
          <view class="item-box">
            <view class="street-item" v-for="item in streetList.slice(5,10)">
              {{item.name}}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
  	getGeocoder,
  	merClassifly,
    getProductslist
  } from '@/api/store.js';
  import {
    getArea,
    getStreet
  } from "@/api/article.js";
  export default {
    data() {
      return {
        tabsList: [{
          name: '附近地址',
        }, {
          name: '泸州区县',
        }, ],
        current: 1,
        latitude: '',
        longitude: '',
        town: '',
        street_id: '',
        street: '',
        areaList: [],
        streetList: [],
        area_change: '',
        street_change: '',
      }
    },
    onLoad() {
      this.getLoaction();
      this.loadArea();
    },
    onShow() {},
    methods: {
      changeCurrent(e){
        this.current = e.index;
      },
      getLoaction(){
        this.street = '定位中'
        uni.getLocation({
        	type: 'wgs84',
        	timeout: '10',
        	success: (res) => {
        		let latitude, longitude;
        		latitude = res.latitude.toString();
        		longitude = res.longitude.toString();
        		this.latitude = res.latitude.toFixed(6);
        		this.longitude = res.longitude.toFixed(6);
            this.$store.commit('setLocation', {
              lat: res.latitude.toFixed(6), 
              long: res.longitude.toFixed(6),
            });
        		getGeocoder({
        			lat: latitude,
        			long: longitude
        		}).then(res => {
        			this.town = res.data.address_reference.town.title
        			this.street_id = res.data.address_reference.town.id
        			this.street = res.data.address_reference.town.title;
        
        		}).catch(err => {
        			uni.showToast({
        				title: err,
        				icon: 'none'
        			})
              this.street = '定位失败'
        		})
        	},
        	fail: (err) => {
            console.log('定位失败');
        		this.isshow = false
            uni.setStorageSync("RejectTarget", true)
            Toast('定位失败,请检查定位权限是否开启')
            this.street = '定位失败'
            
        		// uni.showToast({
        		// 	title: "获取定位超时",
        		// 	icon: 'none',
        		// 	duration: 2000
        		// });
        	}
        });
      },
      reGetLocation(){
        this.getLoaction()
      },
      loadArea(){
        getArea({
          city_code: 510500
        }).then((res)=>{
          this.areaList = res.data;
          this.changeArea(this.areaList[0]);
        })
      },
      loadStreet(area_code){
        this.street_change = '';
        getStreet({
          area_code
        }).then((res)=>{
          this.streetList = res.data;
        })
      },
      changeArea(item){
        this.area_change = item.code;
        this.loadStreet(this.area_change);
      }
    },
    onPullDownRefresh() {
      uni.stopPullDownRefresh()
    }
  }
</script>

<style lang="scss">
  page{
    background-color: #fff;
  }
  .head_top {
    background-color: #fff;
    padding: 28rpx;
  }
  .address-box{
    // background-color: red;
    border-radius: 21rpx 21rpx 0rpx 0rpx;
    padding: 30rpx 28rpx;
    .head_item{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 28rpx;
      font-size: 28rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      .re-location{
        display: flex;
        .re-title{
          flex-shrink: 0;
          padding-right: 14rpx;
        }
      }
      .re-address-img{
        width: 38.55rpx;
        height: 38.55rpx;
        margin-right: 14rpx;
      }
      .re-btn{
        display: flex;
        align-items: center;
        flex-shrink: 0;
        padding-left: 14rpx;
      }
    }
    .head_item_tips{
      height: 44rpx;
      font-size: 32rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #737373;
    }
    .address-list{
      font-size: 28rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      height: 80rpx;
      line-height: 75rpx;
      border-bottom: 1rpx solid rgba(0,0,0,0.1);
    }
    
    .area{
      display: flex;
      flex-wrap: wrap;
      padding-top: 30rpx;
      .area-item{
        // width: 158rpx;
        height: 64rpx;
        // background: #F4F4F4;
        background-color: #fff;
        border-radius: 11rpx 11rpx 11rpx 11rpx;
        border: 2rpx solid #B3B3B3;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 20rpx;
        font-size: 28rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #737373;
        margin-bottom: 22rpx;
        margin-right: 22rpx;
      }
      .area-item-on{
        // background-color: #F4F4F4;
        color: #ff6d20;
        // font-weight: bold;
        border: 2rpx solid #ff6d20;
      }
    }
    
    .street{
      padding-top: 28rpx;
      .letter-item{
        display: flex;
        .letter{
          flex-shrink: 0;
          margin-right: 28rpx;
          font-size: 25rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          color: #737373;
        }
        .street-item{
          padding-bottom: 28rpx;
          font-size: 28rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          color: #333333;
        }
      }
    }
  }
</style>