<template>
  <view class="travel-detail-page">
    <!-- 头部导航 -->
    <view class="header">
      <view class="back-btn" @click="goBack">
        <uni-icons type="arrowleft" size="24" color="#333"></uni-icons>
      </view>
      <text class="title">旅行详情</text>
      <view class="more-btn" @click="showActionSheet">
        <uni-icons type="more" size="24" color="#333"></uni-icons>
      </view>
    </view>

    <!-- 内容区域 -->
    <scroll-view class="content" scroll-y>
      <!-- 封面图片 -->
      <view class="cover-section">
        <image :src="plan.coverImage" class="cover-image" mode="aspectFill"></image>
        <view class="cover-overlay">
          <text class="travel-title">{{ plan.title || plan.destination }}</text>
          <text class="travel-destination">{{ plan.destination }}</text>
        </view>
      </view>

      <!-- 基本信息 -->
      <view class="info-section">
        <view class="info-item">
          <uni-icons type="calendar" size="20" color="#007aff"></uni-icons>
          <text class="info-text">{{ plan.startDate }} - {{ plan.endDate }}</text>
        </view>

        <view class="info-item">
          <uni-icons type="wallet" size="20" color="#007aff"></uni-icons>
          <text class="info-text">预算: ¥{{ plan.budget }}</text>
        </view>

        <view class="info-item">
          <uni-icons type="person" size="20" color="#007aff"></uni-icons>
          <text class="info-text">{{ plan.currentMembers || 0 }}/{{ plan.maxMembers || 4 }}人</text>
        </view>

        <view class="info-item">
          <uni-icons type="flag" size="20" color="#007aff"></uni-icons>
          <text class="info-text">{{ getStatusText(plan.status) }}</text>
        </view>
      </view>

      <!-- 发布者信息 -->
      <view class="publisher-section">
        <view class="publisher-header">
          <image :src="plan.publisher?.avatar || '/static/avatar/default.png'" class="avatar" mode="aspectFill"></image>
          <view class="publisher-info">
            <text class="nickname">{{ plan.publisher?.nickname || '匿名用户' }}</text>
            <text class="level">Lv.{{ plan.publisher?.level || 1 }}</text>
          </view>
          <view class="rating">
            <uni-rate :value="plan.publisher?.rating || 5" size="14" readonly></uni-rate>
            <text class="rating-text">{{ plan.publisher?.rating || 5.0 }}</text>
          </view>
        </view>
      </view>

      <!-- 行程详情 -->
      <view class="description-section">
        <text class="section-title">行程安排</text>
        <view class="schedule" v-for="(day, index) in plan.schedule" :key="index">
          <text class="day">第{{ index + 1 }}天</text>
          <text class="content">{{ day }}</text>
        </view>
      </view>

      <!-- 同行要求 -->
      <view class="description-section">
        <text class="section-title">同行要求</text>
        <text class="description">{{ plan.requirements || '无特殊要求' }}</text>
      </view>

      <!-- 兴趣标签 -->
      <view class="tags-section" v-if="plan.tags && plan.tags.length > 0">
        <text class="section-title">兴趣标签</text>
        <view class="tags-container">
          <view v-for="tag in plan.tags" :key="tag" class="tag">
            <text>{{ tag }}</text>
          </view>
        </view>
      </view>

      <!-- 参与者列表 -->
      <view class="members-section" v-if="plan.members && plan.members.length > 0">
        <text class="section-title">参与者 ({{ plan.members.length }})</text>
        <scroll-view class="members-list" scroll-x>
          <view v-for="member in plan.members" :key="member.id" class="member-item">
            <image :src="member.avatar || '/static/avatar/default.png'" class="member-avatar" mode="aspectFill"></image>
            <text class="member-name">{{ member.nickname }}</text>
          </view>
        </scroll-view>
      </view>

      <!-- 评论区域 -->
      <view class="comments-section">
        <text class="section-title">评论 ({{ plan.commentCount || 0 }})</text>
        <view class="comment-list">
          <view v-for="comment in plan.comments" :key="comment.id" class="comment-item">
            <image :src="comment.user.avatar || '/static/avatar/default.png'" class="comment-avatar" mode="aspectFill"></image>
            <view class="comment-content">
              <text class="comment-user">{{ comment.user.nickname }}</text>
              <text class="comment-text">{{ comment.content }}</text>
              <text class="comment-time">{{ comment.createTime }}</text>
            </view>
          </view>
        </view>
        <view class="view-all-comments" @click="viewAllComments" v-if="plan.commentCount > 2">
          <text>查看全部{{ plan.commentCount }}条评论</text>
          <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
        </view>
      </view>
    </scroll-view>

    <!-- 底部操作栏 -->
    <view class="footer">
      <view class="action-btn" @click="navigateToChat">
        <uni-icons type="chat" size="20" color="#666"></uni-icons>
        <text>私信</text>
      </view>
      
      <view class="action-btn" @click="toggleLike" :class="{ liked: plan.isLiked }">
        <uni-icons :type="plan.isLiked ? 'heart-filled' : 'heart'" size="20" :color="plan.isLiked ? '#ff4757' : '#666'"></uni-icons>
        <text>{{ plan.likeCount || 0 }}</text>
      </view>

      <view class="action-btn" @click="focusCommentInput">
        <uni-icons type="chatboxes" size="20" color="#666"></uni-icons>
        <text>评论</text>
      </view>

      <view class="join-btn" @click="handleJoin" :class="{ joined: plan.isJoined }">
        <text>{{ plan.isJoined ? '已加入' : '立即加入' }}</text>
      </view>
    </view>

    <!-- 评论输入框 -->
    <view class="comment-input-container" v-if="showCommentInput">
      <input 
        v-model="commentText" 
        class="comment-input" 
        placeholder="说点什么..."
        @confirm="submitComment"
      />
      <view class="send-btn" @click="submitComment">
        <text>发送</text>
      </view>
    </view>

    <!-- 操作菜单 -->
    <uni-popup ref="actionSheet" type="bottom">
      <view class="action-sheet">
        <view class="action-item" @click="shareTravel">
          <uni-icons type="share" size="20" color="#333"></uni-icons>
          <text>分享</text>
        </view>
        <view class="action-item" @click="reportTravel" v-if="!isPublisher">
          <uni-icons type="flag" size="20" color="#333"></uni-icons>
          <text>举报</text>
        </view>
        <view class="action-item" @click="editTravel" v-if="isPublisher">
          <uni-icons type="compose" size="20" color="#333"></uni-icons>
          <text>编辑</text>
        </view>
        <view class="action-item" @click="deleteTravel" v-if="isPublisher">
          <uni-icons type="trash" size="20" color="#ff4757"></uni-icons>
          <text style="color: #ff4757;">删除</text>
        </view>
        <view class="cancel-btn" @click="closeActionSheet">
          <text>取消</text>
        </view>
      </view>
    </uni-popup>

    <!-- 加载中 -->
    <view v-if="loading" class="loading-mask">
      <uni-loading size="32" color="#007aff"></uni-loading>
    </view>
  </view>
</template>

<script>
import travelService from '@/api/services'

export default {
  data() {
    return {
      plan: {
        id: null,
        title: '',
        destination: '',
        coverImage: '',
        startDate: '',
        endDate: '',
        budget: 0,
        schedule: [],
        requirements: '',
        tags: [],
        status: 1,
        currentMembers: 0,
        maxMembers: 4,
        publisher: {},
        members: [],
        comments: [],
        commentCount: 0,
        likeCount: 0,
        isLiked: false,
        isJoined: false
      },
      planId: null,
      loading: false,
      showCommentInput: false,
      commentText: '',
      isPublisher: false
    }
  },
  onLoad(options) {
    this.planId = options.id
    this.loadPlanDetail()
  },
  methods: {
    async loadPlanDetail() {
      this.loading = true
      try {
        const res = await travelService.getDetail(this.planId)
        this.plan = { ...this.plan, ...res.data }
        this.checkUserStatus()
      } catch (error) {
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },
    
    checkUserStatus() {
      // 检查当前用户是否是发布者或已加入
      const userInfo = uni.getStorageSync('userInfo')
      if (userInfo && userInfo.id) {
        this.isPublisher = this.plan.publisher?.id === userInfo.id
        this.plan.isJoined = this.plan.members?.some(member => member.id === userInfo.id)
      }
    },
    
    goBack() {
      uni.navigateBack()
    },
    
    showActionSheet() {
      this.$refs.actionSheet.open()
    },
    
    closeActionSheet() {
      this.$refs.actionSheet.close()
    },
    
    async handleJoin() {
      if (this.plan.isJoined) {
        uni.showToast({
          title: '您已加入该计划',
          icon: 'none'
        })
        return
      }
      
      if (this.plan.currentMembers >= this.plan.maxMembers) {
        uni.showToast({
          title: '该计划人数已满',
          icon: 'none'
        })
        return
      }
      
      try {
        await travelService.joinPlan(this.planId)
        uni.showToast({
          title: '加入成功',
          icon: 'success'
        })
        this.plan.isJoined = true
        this.plan.currentMembers += 1
      } catch (error) {
        uni.showToast({
          title: error.message || '加入失败',
          icon: 'none'
        })
      }
    },
    
    navigateToChat() {
      uni.navigateTo({
        url: `/pages/chat/chat?id=${this.plan.publisher?.id}&name=${this.plan.publisher?.nickname}`
      })
    },
    
    async toggleLike() {
      try {
        if (this.plan.isLiked) {
          await travelService.unlikePlan(this.planId)
          this.plan.likeCount -= 1
        } else {
          await travelService.likePlan(this.planId)
          this.plan.likeCount += 1
        }
        this.plan.isLiked = !this.plan.isLiked
      } catch (error) {
        uni.showToast({
          title: error.message || '操作失败',
          icon: 'none'
        })
      }
    },
    
    focusCommentInput() {
      this.showCommentInput = true
    },
    
    async submitComment() {
      if (!this.commentText.trim()) {
        uni.showToast({
          title: '评论内容不能为空',
          icon: 'none'
        })
        return
      }
      
      try {
        await travelService.addComment(this.planId, {
          content: this.commentText.trim()
        })
        
        uni.showToast({
          title: '评论成功',
          icon: 'success'
        })
        
        this.commentText = ''
        this.showCommentInput = false
        this.loadPlanDetail()
      } catch (error) {
        uni.showToast({
          title: error.message || '评论失败',
          icon: 'none'
        })
      }
    },
    
    viewAllComments() {
      uni.navigateTo({
        url: `/pages/travel/comments?id=${this.planId}`
      })
    },
    
    shareTravel() {
      uni.share({
        provider: 'weixin',
        scene: 'WXSceneSession',
        type: 0,
        href: `https://jiebanke.com/travel/${this.planId}`,
        title: this.plan.title || this.plan.destination,
        summary: this.plan.requirements || '一起来结伴旅行吧！',
        imageUrl: this.plan.coverImage,
        success: () => {
          uni.showToast({
            title: '分享成功',
            icon: 'success'
          })
        }
      })
    },
    
    reportTravel() {
      uni.navigateTo({
        url: `/pages/report/report?type=travel&id=${this.planId}`
      })
    },
    
    editTravel() {
      uni.navigateTo({
        url: `/pages/travel/publish?id=${this.planId}`
      })
    },
    
    async deleteTravel() {
      uni.showModal({
        title: '确认删除',
        content: '确定要删除这个旅行计划吗？此操作不可恢复。',
        success: async (res) => {
          if (res.confirm) {
            try {
              await travelService.deletePlan(this.planId)
              uni.showToast({
                title: '删除成功',
                icon: 'success'
              })
              setTimeout(() => {
                uni.navigateBack()
              }, 1500)
            } catch (error) {
              uni.showToast({
                title: error.message || '删除失败',
                icon: 'none'
              })
            }
          }
        }
      })
    },
    
    getStatusText(status) {
      const statusMap = {
        1: '招募中',
        2: '进行中',
        3: '已结束',
        4: '已取消'
      }
      return statusMap[status] || '未知状态'
    }
  }
}
</script>

<style scoped>
.travel-detail-page {
  height: 100vh;
  background: #f8f8f8;
  display: flex;
  flex-direction: column;
}

/* 头部导航 */
.header {
  height: 88rpx;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32rpx;
  border-bottom: 1rpx solid #eee;
  position: relative;
  z-index: 10;
}

.back-btn,
.more-btn {
  padding: 16rpx;
}

.title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
}

/* 内容区域 */
.content {
  flex: 1;
  background: #fff;
}

/* 封面区域 */
.cover-section {
  position: relative;
  height: 400rpx;
}

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

.cover-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  padding: 32rpx;
  color: #fff;
}

.travel-title {
  font-size: 40rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 8rpx;
}

.travel-destination {
  font-size: 28rpx;
  opacity: 0.9;
}

/* 信息区域 */
.info-section {
  padding: 32rpx;
  background: #fff;
  border-bottom: 1rpx solid #f0f0f0;
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;
}

.info-item:last-child {
  margin-bottom: 0;
}

.info-text {
  font-size: 28rpx;
  color: #333;
  margin-left: 16rpx;
}

/* 发布者信息 */
.publisher-section {
  padding: 32rpx;
  background: #fff;
  border-bottom: 1rpx solid #f0f0f0;
}

.publisher-header {
  display: flex;
  align-items: center;
}

.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.publisher-info {
  flex: 1;
}

.nickname {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  display: block;
  margin-bottom: 4rpx;
}

.level {
  font-size: 24rpx;
  color: #999;
}

.rating {
  display: flex;
  align-items: center;
}

.rating-text {
  font-size: 24rpx;
  color: #ff9500;
  margin-left: 8rpx;
}

/* 描述区域 */
.description-section {
  padding: 32rpx;
  background: #fff;
  border-bottom: 1rpx solid #f0f0f0;
}

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

.schedule {
  margin-bottom: 20rpx;
  padding-left: 20rpx;
  border-left: 4rpx solid #007aff;
}

.day {
  font-size: 28rpx;
  font-weight: 600;
  color: #007aff;
  display: block;
  margin-bottom: 8rpx;
}

.content {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
}

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

/* 标签区域 */
.tags-section {
  padding: 32rpx;
  background: #fff;
  border-bottom: 1rpx solid #f0f0f0;
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}

.tag {
  background: #f0f6ff;
  padding: 8rpx 20rpx;
  border-radius: 24rpx;
  font-size: 24rpx;
  color: #007aff;
}

/* 参与者区域 */
.members-section {
  padding: 32rpx;
  background: #fff;
  border-bottom: 1rpx solid #f0f0f0;
}

.members-list {
  display: flex;
  gap: 24rpx;
  padding: 16rpx 0;
}

.member-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 100rpx;
}

.member-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-bottom: 8rpx;
}

.member-name {
  font-size: 24rpx;
  color: #666;
  text-align: center;
}

/* 评论区域 */
.comments-section {
  padding: 32rpx;
  background: #fff;
  margin-bottom: 120rpx;
}

.comment-list {
  margin-bottom: 24rpx;
}

.comment-item {
  display: flex;
  margin-bottom: 32rpx;
}

.comment-avatar {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  margin-right: 20rpx;
  flex-shrink: 0;
}

.comment-content {
  flex: 1;
}

.comment-user {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
  display: block;
  margin-bottom: 8rpx;
}

.comment-text {
  font-size: 28rpx;
  color: #333;
  line-height: 1.5;
  display: block;
  margin-bottom: 8rpx;
}

.comment-time {
  font-size: 24rpx;
  color: #999;
}

.view-all-comments {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24rpx;
  color: #999;
  font-size: 28rpx;
}

/* 底部操作栏 */
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1rpx solid #eee;
  padding: 20rpx 32rpx;
  display: flex;
  align-items: center;
  z-index: 100;
}

.action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 40rpx;
  padding: 16rpx;
}

.action-btn.liked {
  color: #ff4757;
}

.action-btn text {
  font-size: 20rpx;
  color: #666;
  margin-top: 4rpx;
}

.action-btn.liked text {
  color: #ff4757;
}

.join-btn {
  flex: 1;
  background: #007aff;
  color: #fff;
  height: 80rpx;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  font-weight: 600;
  margin-left: auto;
}

.join-btn.joined {
  background: #34c759;
}

/* 评论输入框 */
.comment-input-container {
  position: fixed;
  bottom: 120rpx;
  left: 0;
  right: 0;
  background: #fff;
  padding: 20rpx 32rpx;
  border-top: 1rpx solid #eee;
  display: flex;
  align-items: center;
  z-index: 100;
}

.comment-input {
  flex: 1;
  height: 80rpx;
  background: #f8f8f8;
  border-radius: 40rpx;
  padding: 0 32rpx;
  font-size: 28rpx;
  margin-right: 20rpx;
}

.send-btn {
  background: #007aff;
  color: #fff;
  padding: 16rpx 32rpx;
  border-radius: 32rpx;
  font-size: 28rpx;
  font-weight: 600;
}

/* 操作菜单 */
.action-sheet {
  background: #fff;
  border-radius: 24rpx 24rpx 0 0;
  padding: 32rpx 0;
}

.action-item {
  display: flex;
  align-items: center;
  padding: 32rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.action-item:last-child {
  border-bottom: none;
}

.action-item text {
  font-size: 32rpx;
  margin-left: 20rpx;
}

.cancel-btn {
  margin-top: 16rpx;
  padding: 32rpx;
  text-align: center;
  border-top: 1rpx solid #f0f0f0;
  font-size: 32rpx;
  font-weight: 600;
}

/* 加载中 */
.loading-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
</style>