<script setup lang="ts">
    import { ref, reactive, watch } from 'vue'
    import * as LinghuoyonggongAPI from '@/api/model/linghuoyonggong'

    const props = defineProps({
        show: { type: Boolean, default: false },
        title: { type: String, default: '选择所在地区' },
        layer: { type: Number, default: 3 }, // 1-5 层
        rootCode: { type: [String, Number], default: 0 }, // 湖南省代码是 43，默认 0 为全国
    })

    const emit = defineEmits(['update:show', 'confirm', 'cancel'])

    const cascaderRef = ref(null)
    const state = reactive({
        options: [],
        value: [],
    })

    // 监听显示状态
    watch(() => props.show, (val) => {
        if (val && state.options.length === 0) {
            fetchSubData(props.rootCode, null)
        }
    })

    function fetchSubData(parentCode, e) {
        LinghuoyonggongAPI.queryConditions({ parentCode }).then((res) => {
            if (res && res.length) {
                const dataArr = res.map(i => ({ text: i.name, value: i.code }))
                if (!state.options.length) {
                    state.options = dataArr
                } else {
                    cascaderRef.value.setRequestData(dataArr, e.layer)
                }
            } else {
                if (cascaderRef.value) cascaderRef.value.end()
            }
        })
    }

    function handleChange(e) {
        // e.layer 从 1 开始
        if (e.layer < props.layer) {
            fetchSubData(e.value, e)
        } else {
            if (cascaderRef.value) cascaderRef.value.end()
        }
    }

    function handleComplete(e) {
        emit('confirm', {
            text: e.text,
            value: e.value,
            fullText: e.text.join(' / '),
            fullCode: e.value.join(',')
        })
        emit('update:show', false)
    }

    function handleClose() {
        emit('update:show', false)
        emit('cancel')
    }
</script>

<template>
    <fui-bottom-popup :show="show" @close="handleClose">
        <view class="area-picker-wrap">
            <view class="area-header">
                <text class="area-title">{{ title }}</text>
                <view class="close-icon" @click="handleClose">
                    <fui-icon name="close" :size="44" color="#ccc"></fui-icon>
                </view>
            </view>
            <view class="area-body">
                <fui-cascader
                    ref="cascaderRef"
                    :value="state.value"
                    stepLoading
                    @change="handleChange"
                    @complete="handleComplete"
                    :options="state.options"
                />
            </view>
        </view>
    </fui-bottom-popup>
</template>

<style lang="scss" scoped>
    .area-picker-wrap {
        background-color: #fff;
        border-radius: 32rpx 32rpx 0 0;
        display: flex;
        flex-direction: column;
        height: 60vh;
        font-family: 'DingTalk Sans', sans-serif;
    }

    .area-header {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40rpx 30rpx;
        position: relative;
        border-bottom: 1rpx solid #f5f5f5;
        .area-title {
            font-size: 32rpx;
            font-weight: bold;
            color: #333;
        }
        .close-icon {
            position: absolute;
            right: 30rpx;
            top: 50%;
            transform: translateY(-50%);
            padding: 10rpx;
        }
    }

    .area-body {
        flex: 1;
        overflow: hidden;
    }

    /* 统一字体穿透 */
    :deep(.fui-cascader__item) {
        font-family: 'DingTalk Sans' !important;
    }
</style>
