<template>
    <view
        class="px-[20rpx] h-[90rpx] text-sm flex items-center justify-between bg-white"
    >
        <view class="flex">
            <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.is_member && userInfo.member_expired !== 1
                            ? userInfo.member_package_name
                            : '开通会员'
                    }}
                </router-navigate>
            </u-button>
        </view>

        <view>
            <view v-if="plugin.key" class="text-muted mr-2 text-xs">
                <text v-if="!plugin.member_free">
                    <template v-if="plugin.balance > 0">
                        <text>消耗</text>
                        <text class="text-primary">
                            {{ plugin.balance }}
                        </text>
                        <text>条对话次数</text>
                    </template>
                    <template v-else> 免费 </template>
                </text>
                <text v-else> 会员免费 </text>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { useAppStore } from '@/stores/app'
import { useUserStore } from '@/stores/user'
import { storeToRefs } from 'pinia'
const props = withDefaults(
    defineProps<{
        plugin: Record<string, any>
    }>(),
    {
        plugin: () => ({})
    }
)
const userStore = useUserStore()
const appStore = useAppStore()
const { userInfo } = storeToRefs(userStore)
</script>
