<template>
  <view class="container">
    <!-- 动物图片轮播 -->
    <swiper class="animal-swiper" :indicator-dots="true">
      <swiper-item v-for="(img, index) in animal.images" :key="index">
        <image :src="img" mode="aspectFill" class="swiper-image"></image>
      </swiper-item>
    </swiper>

    <!-- 动物基本信息 -->
    <view class="animal-info">
      <text class="name">{{ animal.name }}</text>
      <view class="meta">
        <text class="species">{{ animal.species }}</text>
        <text class="price">¥{{ animal.price }}</text>
      </view>
      <text class="location">{{ animal.location }}</text>
    </view>

    <!-- 动物详情 -->
    <view class="section">
      <text class="section-title">动物介绍</text>
      <text class="description">{{ animal.description }}</text>
    </view>

    <!-- 认养信息 -->
    <view class="section">
      <text class="section-title">认养说明</text>
      <text class="adoption-info">{{ animal.adoptionInfo }}</text>
    </view>

    <!-- 操作按钮 -->
    <view class="action-bar">
      <button class="btn adopt" @click="handleAdopt">立即认养</button>
      <button class="btn contact" @click="handleContact">联系管理员</button>
    </view>
  </view>
</template>

<script>
import { animalService } from '../../api/services.js'

export default {
  data() {
    return {
      animal: {
        id: null,
        name: '',
        species: '',
        price: 0,
        location: '',
        images: [],
        description: '',
        adoptionInfo: ''
      }
    }
  },
  
  onLoad(options) {
    const id = options.id
    if (id) {
      this.loadAnimalDetail(id)
    }
  },
  
  methods: {
    async loadAnimalDetail(id) {
      try {
        const data = await animalService.getDetail(id)
        this.animal = data
      } catch (error) {
        console.error('获取动物详情失败:', error)
        uni.showToast({
          title: '获取数据失败',
          icon: 'none'
        })
      }
    },
    
    async handleAdopt() {
      uni.showModal({
        title: '确认认养',
        content: '确定要认养这只可爱的' + this.animal.name + '吗？',
        success: async (res) => {
          if (res.confirm) {
            try {
              await animalService.adopt(this.animal.id, {})
              uni.showToast({
                title: '认养成功',
                icon: 'success'
              })
            } catch (error) {
              console.error('认养失败:', error)
              uni.showToast({
                title: '认养失败',
                icon: 'none'
              })
            }
          }
        }
      })
    },
    
    handleContact() {
      uni.makePhoneCall({
        phoneNumber: '13800138000'
      })
    }
  }
}
</script>

<style scoped>
.container {
  padding-bottom: 120rpx;
}

.animal-swiper {
  height: 400rpx;
}

.swiper-image {
  width: 100%;
  height: 100%;
}

.animal-info {
  padding: 30rpx;
}

.name {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.meta {
  display: flex;
  justify-content: space-between;
  margin: 20rpx 0;
}

.species {
  color: #666;
}

.price {
  color: #ff6b35;
  font-weight: bold;
}

.location {
  color: #999;
  font-size: 28rpx;
}

.section {
  padding: 30rpx;
  background: #fff;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}

.description, .adoption-info {
  color: #666;
  line-height: 1.6;
  font-size: 28rpx;
}

.action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120rpx;
  background: #fff;
  display: flex;
  border-top: 1rpx solid #eee;
}

.btn {
  flex: 1;
  border: none;
  font-size: 32rpx;
}

.adopt {
  background: #ff6b35;
  color: #fff;
}

.contact {
  background: #007aff;
  color: #fff;
}
</style>