<template>
  <view class="book-price-container">
    <view v-if="data.isBuy" class="book-flag">已购买</view>
    <view v-else-if="data.isVip == '0'" class="book-flag">免费</view>
    <view v-else-if="userHasVip && data.isVip == '1'" class="book-price">VIP免费</view>
    <view v-else class="book-price">{{ data.minPrice }} {{ $t('global.coin') }}</view>
    <view>
      <text v-if="data.readCount" class="book-flag">{{ `${data.readCount}${$t('bookHome.readingCount')}` }}</text>
      <text v-else-if="data.buyCount" class="book-flag">{{ `${data.buyCount}${$t('bookHome.purchased')}` }}</text>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import type { IBook } from '@/types/book'
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()

// 检查用户是否为VIP
const userHasVip = computed(() => userStore.userInfo?.userEbookVip?.length > 0)

const props = defineProps({
  data: {
    type: Object as () => IBook,
    default: () => ({})
  }
})
</script>

<style lang="scss" scoped>
.book-price-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.book-price {
  font-size: 28rpx;
  color: #ff4703;
}

.book-flag {
  font-size: 26rpx;
  color: #999;
}

</style>