<template>
    <view class="chat-plugins mr-2" v-if="plugins.length">
        <view
            class="flex items-center"
            :class="{ 'text-primary': show }"
            @click.stop="togglePopup"
        >
            <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>

        <u-popup
            v-model="show"
            mode="bottom"
            height="900"
            :closeable="true"
            border-radius="20"
            closeIconColor="#5b5b5b"
            closeIconSize="28"
        >
            <view
                class="text-xl font-medium text-black py-[26rpx] mx-[30rpx]"
                style="border-bottom: 1px solid #f3f3f3"
            >
                插件管理
            </view>
            <view class="px-[30rpx] pt-[30rpx]">
                <view
                    v-for="item in plugins"
                    :key="item.key"
                    class="flex items-center justify-between mb-[30rpx] rounded-lg bg-page-base p-[30rpx] border border-solid border-page-base"
                    :class="{
                        'bg-primary-light-9 !border-primary': item.key === currentId
                    }"
                    @click="handleClick(item)"
                >
                    <view>
                        <view class="flex items-center">
                            <image
                                :src="item.icon"
                                class="w-[34rpx] h-[34rpx] mr-2 flex-none"
                            />
                            <text class="text-base">{{ item.name }}</text>
                        </view>
                    </view>

                    <view
                        v-if="item.key === currentId"
                        class="text-primary"
                    >
                        <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>
        </u-popup>
    </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 { 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
    (event: 'change', value: any): void
}>()
const show = ref<boolean>(false)
const plugins = ref<any[]>([])
const currentId = useVModel(props, 'modelValue', emit)

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

const togglePopup = () => {
    show.value = !show.value
}

const handleClick = (row: { key: string }) => {
    currentId.value = row.key
    togglePopup()
}

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

watch(currentId, (value) => {
    emit('change', value)
    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>
