<template>
    <wd-tabs v-model="tab" style="height: 400px">
        <wd-tab :title="provinceText || '省'">
            <wd-picker-view
                :columns="provinceOptions"
                v-model="provinceValue"
                value-key="code"
                label-key="name"
                @change="provinceChange"
            />
        </wd-tab>
        <wd-tab :title="cityText || '市'">
            <wd-picker-view
                v-if="tab == 1"
                :columns="cityOptions"
                v-model="cityValue"
                value-key="code"
                label-key="name"
                @change="cityChange"
            />
        </wd-tab>
        <wd-tab :title="districtText || '区/县'">
            <wd-picker-view
                v-if="tab == 2"
                :columns="districtOptions"
                v-model="districtValue"
                value-key="code"
                label-key="name"
                @change="districtChange"
            />
        </wd-tab>
        <wd-tab title="详细地址">
            <view class="content">详细地址</view>
        </wd-tab>
    </wd-tabs>
</template>

<script setup>
import { getTreeListApi } from "@/api/common";
// 获取数据
const getData = () => {
    getTreeListApi().then(res => {
        console.log(res);
        provinceOptions.value = res.data;
    });
};
// 激活标签索引
const tab = ref(0);
// 省
const provinceOptions = ref([]);
const provinceValue = ref("");
const provinceText = ref("");
getData();
const provinceChange = e => {
    const { children, name } = e.picker.getSelects();
    provinceText.value = name;
    // 重置选项
    districtValue.value = "";
    cityValue.value = "";

    districtText.value = "";
    cityText.value = "";

    cityOptions.value = children;
    districtOptions.value = [];

    /* 如果只有一个子选项，则直接选中 */
    if (children.length == 1) {
        cityChange({ picker: { getSelects: () => ({ children, name }) } });
        cityValue.value = children[0].code;
    }
};
// 市
const cityOptions = ref([]);
const cityValue = ref("");
const cityText = ref("");
const cityChange = e => {
    const { children, name } = e.picker.getSelects();
    cityText.value = name;
    // 重置选项
    districtValue.value = "";
    districtText.value = "";
    districtOptions.value = children;
};
// 地区
const districtOptions = ref([]);
const districtValue = ref("");
const districtText = ref("");
const districtChange = e => {
    const { children, name } = e.picker.getSelects();
    districtText.value = name;
    // 重置选项
};
</script>

<style lang="scss" scoped></style>
