<template>
    <view v-if="userStore.isLogin && !chatModel.loading"
        class="px-[20rpx] py-[15rpx] text-sm flex items-center justify-between bg-white">
        <view class="flex-none mr-[20rpx]">
            <view class="flex items-center">
                <!-- <u-button
                    type="primary"
                    plain
                    size="medium"
                    :custom-style="{
                        background: 'transparent !important'
                    }"
                    v-if="appStore.getIsShowVip"
                >
                    <router-navigate class="text-primary" to="/packages/pages/open_vip/open_vip">
                        {{
                            userInfo.isMember && userInfo.memberExpired !== 1
                                ? userInfo.memberPackageName
                                : '开通会员'
                        }}
                    </router-navigate>
                </u-button> -->
                <view class="ml-[20rpx]" v-if="!chatModel.modelList.length">
                    <text v-if="userInfo.isMember && userInfo.memberExpired !== 1" class="flex-1 min-w-0">
                        已开通会员，不消耗次数
                    </text>
                    <text v-else>
                        <text>消耗</text>
                        <text class="text-primary"> 1 </text>
                        <text> 条对话次数</text>
                    </text>
                </view>
            </view>
        </view>
        <view v-if="chatModel.billing_is_open * 1" @click="chatModel.show = true"
            class="flex ml-auto justify-center items-center rounded-[30px] h-[60rpx]">
            <text class="text-[#415058] mr-[6px] flex">
                <text class="line-clamp-1">
                    {{ chatModel.current.alias }} /

                    <text v-if="
                        chatModel?.current?.member_free &&
                        chatModel?.current?.is_member
                    " class="text-muted">
                        会员免费
                    </text>
                    <text v-else class="flex-1 min-w-0 text-muted">
                        <template v-if="chatModel?.current?.balance * 1">
                            <text>消耗</text>
                            <text class="text-primary">
                                {{ chatModel?.current?.balance }}
                            </text>
                            <text>条对话次数</text>
                        </template>
                        <template v-else> 免费 </template>
                    </text>
                </text>
            </text>
            <u-icon name="arrow-down" size="24rpx"></u-icon>
        </view>
        <view v-else class="text-[#415058]">
            <template v-if="chatModel?.current?.balance * 1">
                <text>消耗</text>
                <text class="text-primary">
                    {{ chatModel?.current?.balance }}
                </text>
                <text>条对话次数</text>
            </template>
            <template v-else> 免费 </template>
        </view>
    </view>
    <u-popup v-model="chatModel.show" mode="bottom" border-radius="14" :safe-area-inset-bottom="true" height="980rpx"
        closeable>
        <view class="p-[20rpx] text-xl font-bold"> 切换模型通道 </view>
        <scroll-view class="h-[890rpx] box-border" scroll-y>
            <view class="pb-[200rpx] px-[30rpx]">
                <view class="model-card" v-for="(item, index) in chatModel.modelList" :key="item.key" :class="{
                    'model-card__active': chatModel.currentIndex === index
                }" @click="chatModel.currentIndex = index">
                    <view>
                        <view class="flex items-center">
                            <view class="mr-2" v-if="item.image">
                                <u-image :src="item.image" width="40rpx" height="40rpx"></u-image>
                            </view>
                            <view class="text-lg font-bold">{{ item.alias || item.name }}</view>
                        </view>
                        <view v-if="item.describe" class="text-base text-muted mt-2">
                            {{ item.describe }}
                        </view>
                    </view>
                    <view class="mt-4">
                        <view class="mt-[20rpx] min-h-[50rpx] flex items-center justify-between"
                            v-for="citem in item.model_list" :key="citem.key" @click="handleChoiceModel(citem)">
                            <view class="mr-[6px] flex-1 min-w-0">
                                {{ citem.alias }}
                            </view>
                            <view class="ml-[10rpx] flex items-center">
                                <view class="text-muted mr-2" :class="{
                                    '!text-primary': modelKey === citem.key && chatModel.currentIndex === index
                                }">
                                    <text v-if="
                                        citem.member_free &&
                                        citem.is_member
                                    ">
                                        会员免费
                                    </text>
                                    <text v-else>
                                        <template v-if="citem.balance * 1">
                                            <text>消耗</text>
                                            <text class="text-primary">
                                                {{ citem.balance }}
                                            </text>
                                            <text>条对话次数</text>
                                        </template>
                                        <template v-else> 免费 </template>
                                    </text>
                                </view>
                                <view class="text-muted ml-1 mr-[2px]"
                                    v-if="modelKey !== citem.key || chatModel.currentIndex !== index">
                                    <u-image :src="IconUnSelect" width="32rpx" height="32rpx"></u-image>
                                </view>
                                <view class="text-primary mt-[3px]"
                                    v-if="modelKey === citem.key && chatModel.currentIndex === index">
                                    <u-icon name="checkmark-circle-fill" size="40rpx"></u-icon>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </scroll-view>
    </u-popup>
</template>
<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { getChatModelApi } from '@/api/chat'
import { useUserStore } from '@/stores/user'
import { useAppStore } from '@/stores/app'
import { reactive, watch } from 'vue'
import { computed } from 'vue'
import IconUnSelect from '@/static/images/icon/icon_unselect.png'
import { onShow } from '@dcloudio/uni-app'

const userStore = useUserStore()
const appStore = useAppStore()
const { userInfo } = storeToRefs(userStore)

const props = defineProps<{
    chatKey: any
    modelKey: any
}>()

const emit = defineEmits<{
    (event: 'update:chatKey', value: any): void
    (event: 'update:modelKey', value: any): void
}>()

const chatKey = computed({
    get() {
        return props.chatKey
    },
    set(value) {
        emit('update:chatKey', value)
    }
})

const modelKey = computed({
    get() {
        return props.modelKey
    },
    set(value) {
        emit('update:modelKey', value)
    }
})

// 聊天模型数据
const chatModel = reactive({
    billing_is_open: 0,
    loading: true,
    show: false,
    current: {
        balance: 1,
        key: '',
        member_free: true,
        model: '',
        default: false
    } as any,
    currentIndex: 0,
    modelList: [] as any[]
})

// 获取聊天模型数据
const getChatModelFunc = async () => {
    try {
        const { billing_is_open, list: data } = await getChatModelApi()
        chatModel.billing_is_open = billing_is_open
        chatModel.modelList = data
        const first = data.find((item: any) => item.default) || data[0]
        chatModel.currentIndex = data.findIndex((item: any) => item.default) || 0
        chatModel.current =
            first.model_list.find((item: any) => item.default) || first.model_list[0]
    } catch (error) {
        console.log('获取聊天模型数据错误=>', error)
    } finally {
        chatModel.loading = false
    }
}

onShow(() => {
    getChatModelFunc()
})

// 选择聊天模型
const handleChoiceModel = (item: any) => {
    chatModel.current = item
    chatModel.show = false
}

watch(
    () => chatModel.current,
    (value) => {
        console.log('选择聊天模型=>', value)
        chatKey.value = value?.chat_key
        modelKey.value = value?.key
    }
)
</script>

<style lang="scss" scoped>
.model-card {
    margin-top: 20rpx;
    padding: 30rpx;
    border-radius: 16rpx;
    border-width: 1px;
    border-style: solid;
    border-color: transparent;
    box-shadow: 0px 1px 6px 0px rgba(230, 233, 237, 1);
}

.model-card__active {
    border-width: 1px;
    border-style: solid;
    @apply border-primary bg-primary-light-9;
}
</style>
