<template>
    <view @click="showPart = true">
        <slot></slot>
    </view>
    <up-popup v-model:show="showPart" mode="right" @close="close" a>
        <view class="w-700 d-flex flex-cln" style="height: 100vh">
            <up-navbar :fixed="false" border>
                <template #left>
                    <view class="f-s-34 c-#333 f-w-500">{{ title }}</view>
                </template>
            </up-navbar>
            <view class="d-flex pd-20">
                <view class="f-s-26 w-90 h-54 radius-100 bg-#f7f7f7 d-flex a-c j-c mr-20 c-#333" @click="changeSelect(0)" :style="{ backgroundColor: activeSelect == 0 ? '#37A954' : '', color: activeSelect == 0 ? '#FFF' : '' }">全部</view>
                <view class="f-s-26 w-90 h-54 radius-100 bg-#f7f7f7 d-flex a-c j-c mr-20 c-#333" @click="changeSelect(1)" :style="{ backgroundColor: activeSelect == 1 ? '#37A954' : '', color: activeSelect == 1 ? '#FFF' : '' }">动物</view>
                <view class="f-s-26 w-90 h-54 radius-100 bg-#f7f7f7 d-flex a-c j-c mr-20 c-#333" @click="changeSelect(2)" :style="{ backgroundColor: activeSelect == 2 ? '#37A954' : '', color: activeSelect == 2 ? '#FFF' : '' }">植物</view>
            </view>
            <view class="flex1 ov-hd d-flex">
                <scroll-view class="w-330 bg-#f7f7f7" scroll-y style="height: 100%; border-right: 1rpx solid #e6e6e6">
                    <template v-for="group in groups" :key="group.partCode">
                        <view v-if="activeSelect !== +group?.type" class="pd-24 tabs-group" @click="groupId = group.partCode" :class="{ active: group?.partCode === groupId }">{{ group?.partName }}</view>
                    </template>
                </scroll-view>
                <scroll-view class="flex1" scroll-y style="height: 100%">
                    <view class="pd2-12-24">
                        <up-radio-group v-model="value" iconPlacement="right" placement="column">
                            <template v-for="son in mapGroupSons[groupId]" :key="son.partCode">
                                <up-radio activeColor="#37A954" :name="son.partCode">
                                    <template #label>
                                        <span class="f-s-24 c-#333" :class="{ 'c-primary': value === son.partCode }">{{ son.partName }}</span>
                                    </template>
                                </up-radio>
                            </template>
                        </up-radio-group>
                    </view>
                </scroll-view>
            </view>
            <view class="pd-24 bg-#fff d-flex">
                <up-button @click="close" class="mr-30" color="#F2F2F2" style="color: #333">取消</up-button>
                <up-button @click="confirmSelection" type="primary">确认选择</up-button>
            </view>
            <!-- 底部安全区域适配 -->
            <view class="safe-area-bottom"></view>
        </view>
    </up-popup>
</template>
<script setup lang="ts">
import { useClientRequest } from '@/utils/request';
const showPart = ref(false);
const props = defineProps({
    modelValue: {
        type: String,
        default: '',
    },
    title: {
        type: String,
        default: '选择药用部位/对象',
    },
    params: {
        type: Object,
        default: () => ({}),
    },
    valueName: {
        type: String,
        default: '',
    },
});
const emit = defineEmits(['update:modelValue', 'update:valueName']);
// 获取药用部位信息
const groups = ref<any[]>([]);
const mapGroupSons = reactive<any>({});
const mapValueName = reactive<any>({});
const getGroupList = async () => {
    const res = await useClientRequest.get<any>('/plt-api/app/harvestPartInfo/groupList', props.params);
    if (!res || res.code !== 200) return;
    groups.value = res.data || [];
    groups.value.forEach((group: any) => {
        mapGroupSons[group.partCode] = group.children || [];
        mapValueName[group.partCode] = group.partName;
        (group.children || []).forEach((son: any) => {
            mapValueName[son.partCode] = son.partName;
        });
    });
    groupId.value = groups.value?.[0]?.partCode || '';
};
const close = () => {
    showPart.value = false;
};
const groupId = ref('');
const value = ref();
const confirmSelection = () => {
    emit('update:valueName', mapValueName[value.value] || '');
    emit('update:modelValue', value.value);
    close();
};
// 如果props.modelValue
onMounted(() => {
    getGroupList();
});
// 如果有传入value，则设置默认选中
watch(
    () => props.modelValue,
    (newVal) => {
        value.value = newVal;
        // 分组高亮
        if (newVal) {
            // 分隔
            const parts = newVal.split('-');
            // 去掉最后一项再合并回去，得到分组code
            const groupCode = parts.slice(0, -1).join('-');
            groupId.value = groupCode;
        }
    },
    { immediate: true },
);
const activeSelect = ref(0);
const changeSelect = (index: number) => {
    activeSelect.value = index;
    groupId.value = '';
};
</script>
<style lang="scss" scoped>
.tabs-group {
    font-size: 28rpx;
    color: #333;
    background-color: #f7f7f7;
    border-bottom: 1rpx solid #e6e6e6;

    &.active {
        font-weight: 500;
        color: #fff;
        background-color: $up-primary;
    }
}
.c-primary {
    color: $up-primary;
}
.safe-area-bottom {
    height: env(safe-area-inset-bottom);
}
</style>
