<template>
  <view class="book-card" @click="handleClick">
    <image :src="book.images" class="cover" mode="aspectFill" />
    <view class="info">
      <text class="title">{{ book.name }}</text>
      <view class="actions">
        <view 
          class="action-btn read" 
          :style="isIOS ? 'width: 100px' : ''"
          @click.stop="handleRead"
        >
          <view class="btn-icon read-icon">
            <image src="@/static/icon/icon_look.png" mode="aspectFit" />
          </view>
          <text>{{ $t('book.read') }}</text>
        </view>
        
        <view 
          class="action-btn listen" 
          :style="isIOS ? 'width: 100px' : ''"
          @click.stop="handleListen"
        >
          <view class="btn-icon listen-icon">
            <image src="@/static/icon/icon_listen.png" mode="aspectFit" />
          </view>
          <text>{{ $t('book.listen') }}</text>
        </view>
        
        <!-- <view 
          v-if="!isIOS" 
          class="action-btn review" 
          @click.stop="handleReview"
        >
          <view class="btn-icon review-icon">
            <image src="@/static/icon/icon_pl.png" mode="aspectFit" />
          </view>
          <text>{{ $t('book.comment') }}</text>
        </view> -->
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { IBook } from '@/types/book'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

interface Props {
  book: IBook
}

const props = defineProps<Props>()
const emit = defineEmits<{
  click: []
  read: []
  listen: []
  review: []
}>()

const isIOS = computed(() => {
  // #ifdef APP-PLUS
  return uni.getSystemInfoSync().platform === 'ios'
  // #endif
  // #ifndef APP-PLUS
  return false
  // #endif
})

const handleClick = () => emit('click')
const handleRead = () => emit('read')
const handleListen = () => emit('listen')
const handleReview = () => emit('review')
</script>

<style lang="scss" scoped>
.book-card {
  display: flex;
  background: #fff;
  border-radius: 15rpx;
  padding: 30rpx 0 30rpx 30rpx;
  margin-top: 20rpx;
  
  .cover {
    width: 210rpx;
    height: 270rpx;
    border-radius: 10rpx;
    flex-shrink: 0;
  }
  
  .info {
    flex: 1;
    width: calc(100% - 210rpx);
    padding-left: 40rpx;
    display: flex;
    flex-direction: column;
    
    .title {
      padding-top: 40rpx;
      display: block;
      width: 95%;
      font-size: 38rpx;
      font-weight: bold;
      color: #333;
      line-height: 40rpx;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    
    .actions {
      margin-top: 50rpx;
      margin-left: -15rpx;
      display: flex;
      
      .action-btn {
        width: 135rpx;
        text-align: center;
        
        .btn-icon {
          border-radius: 50%;
          width: 85rpx;
          height: 85rpx;
          margin: 0 auto;
          display: flex;
          align-items: center;
          justify-content: center;
          
          image {
            width: 40rpx;
            height: 40rpx;
          }
        }
        
        .read-icon {
          background: #6bba6b;
          box-shadow: 0 0 10px rgba(107, 186, 107, 0.5);
        }
        
        .listen-icon {
          background: #f7cb5e;
          box-shadow: 0 0 10px rgba(247, 203, 94, 0.5);
        }
        
        .review-icon {
          background: #888888;
          box-shadow: 0 0 10px rgba(136, 136, 136, 0.5);
        }
        
        text {
          display: block;
          font-size: 26rpx;
          text-align: center;
          line-height: 44rpx;
          padding-top: 10rpx;
          color: #999;
        }
      }
      
      .action-btn:last-child {
        margin-right: 0;
      }
    }
  }
}
</style>
