<template>
    <view class="chat-plugins mr-2" v-if="plugins.length">
        <drop-down mode="up">
            <template v-slot="{ show }">
                <view
                    class="flex items-center"
                    :class="{ 'text-primary': show }"
                >
                    <image
                        src="@/static/images/chat_plugins/plugins.png"
                        class="w-[30rpx] h-[30rpx] flex-none"
                    />
                    <text class="ml-1 line-clamp-1">
                        {{
                            currentPlugin.key ? currentPlugin.name : '插件管理'
                        }}
                    </text>
                </view>
            </template>

            <template #menu>
                <view class="w-[400rpx] px-[24rpx] pt-[24rpx]">
                    <view
                        v-for="item in plugins"
                        :key="item.key"
                        class="flex items-center justify-between mb-[30rpx]"
                        @click="handleClick(item)"
                    >
                        <view>
                            <view class="flex items-center">
                                <image
                                    :src="item.icon"
                                    class="w-[30rpx] h-[30rpx] mr-2 flex-none"
                                />
                                <text>{{ item.name }}</text>
                            </view>
                        </view>

                        <view
                            v-if="item.key === currentId"
                            class="text-primary mt-[3px]"
                        >
                            <u-icon
                                name="checkmark-circle-fill"
                                size="40rpx"
                            ></u-icon>
                        </view>
                        <image
                            v-else
                            :src="iconUnSelect"
                            class="w-[32rpx] h-[32rpx] mr-[2px] flex-none"
                        />
                    </view>
                </view>
            </template>
        </drop-down>
    </view>
</template>
<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { useVModel } from '@vueuse/core'
import cache from '@/utils/cache'
import { PLUGIN_MODEL_KEY } from '@/enums/constantEnums'

// icon
import iconUnUse from '@/static/images/chat_plugins/unuse.png'
import iconUnSelect from '@/static/images/icon/icon_unselect.png'

// com
import DropDown from '@/components/drop-down/drop-down.vue'
import { getPlugLists } from '@/api/chat'
import { onShow } from '@dcloudio/uni-app'

const props = withDefaults(
    defineProps<{
        modelValue: number | string
        current?: Record<string, any>
    }>(),
    {
        modelValue: '',
        current: () => ({})
    }
)

const emit = defineEmits<{
    (event: 'update:modelValue', id: number | string): void
    (event: 'update:current', value: any): void
}>()
const plugins = ref<any[]>([])
const currentId = useVModel(props, 'modelValue', emit)
const handleClick = (row: { key: string }) => {
    currentId.value = row.key
}

const currentPlugin = computed(() => {
    return plugins.value.find((item) => item.key === currentId.value) || {}
})

const getData = async () => {
    const data = await getPlugLists()
    if (data.length) {
        plugins.value = [
            {
                name: '不使用插件',
                key: '',
                icon: iconUnUse,
                balance: 0
            },
            ...data
        ]
    }
    currentId.value = cache.get(PLUGIN_MODEL_KEY) || ''
}
onShow(() => {
    getData()
})

watch(currentId, () => {
    emit('update:current', currentPlugin.value)
})
</script>

<style lang="scss" scoped>
.chat-plugins {
    position: relative;
    flex: 1;
    width: auto;

    &__content {
        inset: auto auto 130% 0%;
        position: absolute;
        left: 0;
        flex: 1;
        width: 100vw;
        white-space: pre;
        z-index: 999;
        @apply bg-white;
    }
}
</style>
