<template>
    <view class="address-container">
        <view class="select-address">
            <view :class="{
                'select-address-item': true,
                'select--active': currentIndex == idx
            }" v-for="(item, idx) in addressData" :key="idx" @click="changeCurrentIndex(idx)">{{item}}</view>
        </view>
        <view class="address-list-label">{{addressLabel}}</view>
        <scroll-view scroll-y class="address-list">
            <view v-for="item in addressTree" :key="item.id" @click="changeAddress(item)"
                :class="{'address-item':true,'select--active':item.label == addressData[currentIndex]}">
                {{item.label}}
            </view>
        </scroll-view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                addressTreeHistory: [],
                addressTree: [],
                addressData: ['請(qǐng)選擇省份/地區(qū)'],
                currentIndex: 0,
            }
        },
        onLoad() {
            uni.request({
                url: 'https://static.yipintemian.com/json/region2.json',
                success: (res) => {
                    this.addressTree = res.data;
                    this.addressTreeHistory.push(this.addressTree)
                }
            })
        },
        computed: {
            addressLabel() {
                switch (this.currentIndex) {
                    case 0:
                        return '請(qǐng)選擇省份/地區(qū)'
                    case 1:
                        return '請(qǐng)選擇城市'
                    case 2:
                        return '請(qǐng)選擇區(qū)/縣'
                    default:
                        return ''
                }
            }
        },
        methods: {
            changeCurrentIndex(idx) {
                this.currentIndex = idx;
                this.addressTree = this.addressTreeHistory[idx];
            },
            changeAddress(value) {
                this.addressData.splice(this.currentIndex, this.addressData.length - this.currentIndex, value.label);
                if (this.currentIndex < 2) {
                    this.currentIndex++;
                    this.addressTree = value.children;
                    this.addressTreeHistory.splice(this.currentIndex, this.addressTreeHistory.length - this.currentIndex, value.children); // 清空當(dāng)前級(jí)以及之后的歷史棧
                    this.addressData.push(this.addressLabel);
                }
            }
        }
    }
</script>

<style scoped>
    .address-container {
        width: 100%;
        height: 100vh;
        display: flex;
        flex-direction: column;
    }

    .select-address {
        margin-bottom: 30rpx;
    }

    .select-address-item {
        padding: 10rpx 20rpx;
        color: #333;
        font-size: 26rpx;
    }

    .select--active {
        color: #2F5FC8 !important;
    }

    .address-list-label {
        color: #ccc;
        font-size: 24rpx;
        padding: 20rpx;
    }

    .address-list {
        flex: 1;
        overflow: hidden;
    }

    .address-item {
        padding: 20rpx;
        color: #333;
        font-size: 26rpx;
    }
</style>