<template>
    <view>
        <view class="newLetter">
            <text>黑龙江省</text>
            <text>{{ address.cityName }}</text>
            <text class="active">{{ address.districtName ? address.districtName : '请选择区域' }}</text>
        </view>
        
        <!-- 市级选择 -->
        <scroll-view class="scrollLeft" scroll-y="true" :scroll-into-view="scrollTopId"
            :scroll-top="scrollTop">
            <view class="selection" :class="{active : address.cityCode == item.code}" v-for="(item,index) in cityList" :key="index" @click="bindCity(item.code, item.name)">
                <view class="item_city">
                    {{ item.name }}<image class="checkImg" :class="{active : address.cityCode == item.code}" src="/static/icon/Check.png"></image>
                </view>
            </view>
        </scroll-view>
        
        <!-- 区域选择 -->
        <view class="region">
            <scroll-view scroll-y="true" :scroll-into-view="scrollTopId" :scroll-top="scrollTop">
                <view class="selection" :class="{active : address.provinceCode == item.code}" v-for="(item,index) in regiList" :key="index" @click="regionOpt(item.name)">
                    <view class="item_city">
                        {{ item.name }}<image class="checkImg" :class="{active : address.provinceCode == item.code}" src="/static/icon/Check.png"></image>
                    </view>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script>
    import QQMapWX from '@/utils/qqmap-wx-jssdk.min.js'
    import { newCity, newidxCity } from '@/apis/interfaces/index'
    export default {
    	data() {
    		return {
                scrollTop   : 0,    // 置顶高度
                scrollTopId : '',   // 置顶id
                winHeight   : 0,    //可视高度
                location: {
                    defaultcity: '', // 定位区域名称
                    defaultregi: ''  // 区域名称
                },
                address : {
                    cityName       : "",  // 市名称
                    districtName   : "",  // 区名称
                    cityCode       : "",  // 市编号
                    provinceCode   : ""   // 区编号
                },
                cityList     : [],   // 城市列表
                regiList     : [],    //区域列表
                qqMap: new QQMapWX({
                    key: '4KYBZ-LCAKF-QWOJN-NIDNZ-FZHLZ-2XFW7',
                    vm: this
                }),
            }
        },
        onLoad(e) {
            // 获取定位 - 使用腾讯地图sdk
            uni.getLocation({
                success: res => {
                    // 调用接口
                    this.qqMap.reverseGeocoder({
                        location: {
                            latitude: res.latitude,
                            longitude: res.longitude
                        },
                        success: locatRes => {
                            if(res.message == "query ok"){
                                this.location.defaultcity = locatRes.result.ad_info.city
                                this.location.defaultregi = locatRes.result.ad_info.district
                            }else{
                                uni.showToast({
                                    title: res.message,
                                    icon : 'none'
                                })
                            }
                        },
                        fail: res => {},
                        complete: res => {}
                    });
                }
            })
            if(e.area == '' ) e.area_code = '0'
            this.address.cityName      = e.city
            this.address.districtName  = e.area
            this.address.cityCode      = e.city_code
            this.address.provinceCode  = e.area_code
            
            // 获取全部城市
            this.local();
        },
        onShow() {
        },
        methods:{
            // 全部城市
            local() {
                newCity().then(res => {
                    this.cityList = res
                    // 获取区级列表
                    this.regilist(this.address.cityCode)
                }).catch(err => {
                    uni.showToast({
                        icon: 'none',
                        title: err.message
                    })
                })
            },
            
            // 地区列表
            regilist(areaCode) {
                newidxCity({
                    code: areaCode
                }).then(res=>{
                    res.unshift({ code: '0', name:'全部'})
                    this.regiList = res
                })
            },
            
            // 选择城市
            bindCity(code, name) {
                this.address.cityCode = code,
                this.address.cityName = name
                // 获取区级列表
                this.regilist(code)
            },
            
            // 选择市区返回
            regionOpt (name) {
                let pages = getCurrentPages()
                let nowPage = pages[ pages.length - 1]   // 当前页页面实例
                let prevPage = pages[ pages.length - 2 ] // 上一页页面实例
                prevPage.$vm.address.cityName = name     // 修改上一页data里面的brandName参数值为 item.name
                uni.navigateBack({
                    delta: 1
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    // 省份
    .newLetter {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 90rpx;
        line-height: 90rpx;
        background-color: #fff;
        z-index: 1001;
        font-size: 28rpx;
        padding: 0 20rpx;
        box-sizing: border-box;
        &::before {
            position: absolute;
            content: '';
            left: 0;
            bottom: 0;
            width: 100%;
            height: 2rpx;
            background: #f1f1f1;
        }
        &::after {
            position: absolute;
            content: '';
            left: 0;
            top: 0;
            width: 100%;
            height: 2rpx;
            background: #f1f1f1;
        }
        text {
            display: inline-block;
            position: relative;
            margin-right: 20rpx;
            padding: 0 10rpx;
            &.active {
                color: #e83339;
            }
            &.active::before {
                position: absolute;
                content: '';
                left: 0;
                bottom: -2rpx;
                width: 100%;
                height: 4rpx;
                background: #e83339;
            }
        }
    }
    
    // 市级选择
    .scrollLeft {
        position: fixed;
        top: 90rpx;
        height: calc(100% - 178rpx);
        left: 0;
        width: 260rpx;
        z-index: 1001;
        border-right: 1rpx solid #f1f1f1;
        background-color: #fff;
        .selection {
            display: flex;
            width: 100%;
            flex-direction: column;
            .item_city {
                position: relative;
                display: flex;
                height: 100rpx;
                padding-left: 34rpx;
                align-items: center;
                border-bottom: 1rpx solid #eaeaea;
                font-size: 26rpx;
                color: #666;
                .checkImg {
                    width: 28rpx;
                    height: 28rpx;
                    position: absolute;
                    right: 20rpx;
                    top: 38rpx;
                    display: none;
                    &.active {
                        display: block;
                    }
                }
            }
            &.active .item_city {
                color: #e83339;
            }
        }
    }
    
    // 区域选择
    .region {
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 90rpx;
        width: 100%;
        height: calc(100% - 178rpx);
        padding-left: 280rpx;
        box-sizing: border-box;
        background: #f5f5f5;
        .selection {
            display: flex;
            width: 100%;
            flex-direction: column;
            .item_city {
                padding: 0 0 0 20rpx;
                box-sizing: border-box;
                font-weight: normal;
                font-size: 24rpx;
                height: 102rpx;
                position: relative;
                display: flex;
                padding-left: 34rpx;
                align-items: center;
                border-bottom: 1rpx solid #eaeaea;
                font-size: 26rpx;
                color: #666;
                .checkImg {
                    width: 28rpx;
                    height: 28rpx;
                    position: absolute;
                    right: 20rpx;
                    top: 38rpx;
                    display: none;
                    &.active {
                        display: block;
                    }
                }
            }
            &.active .item_city {
                color: #e83339;
            }
        }
    }
</style>
