<template>
  <view class="container">
    <view class="detail-card" v-if="detail">
      <u-cell-group :border="false">
        <u-cell title="小区名称" :value="detail.name"></u-cell>
        <u-cell title="联系电话" :value="detail.contactPhone || detail.tel || '暂无'"></u-cell>
        <u-cell title="服务等级" :value="[ '一级', '二级', '三级', '四级', '五级' ][detail.level] || detail.serviceLevel || '暂无'"></u-cell>
        <u-cell title="物业费单价" :value="detail.feeItem || '暂无'"></u-cell>
      </u-cell-group>

      <view class="intro-section" v-if="detail.intro">
        <view class="section-title">小区介绍</view>
        <view class="intro-content">
          {{ detail.intro }}
        </view>
      </view>
    </view>

    <u-empty v-else text="加载中..." />
  </view>
</template>

<script>
import {communityDetailReq} from "@/api/common";

export default {
  data() {
    return {
      id: null,
      detail: null
    }
  },
  methods: {
    async getCommunityDetail() {
      try {
        // 显示加载提示
        uni.showLoading({
          title: '加载中...'
        })

        const {data} = await communityDetailReq(this.id)
        this.detail = data

        // 添加调试信息
        console.log('获取到的小区详情:', data)
      } catch (error) {
        console.error('获取小区详情失败:', error)
        uni.showToast({
          title: '获取数据失败',
          icon: 'none',
          duration: 2000
        })
      } finally {
        // 隐藏加载提示
        uni.hideLoading()
      }
    }
  },
  onLoad(options) {
    console.log('页面加载参数:', options)
    this.id = options.id

    // 检查ID是否存在
    if (this.id) {
      this.getCommunityDetail()
    } else {
      console.error('缺少小区ID参数')
      uni.showToast({
        title: '参数错误',
        icon: 'none',
        duration: 2000
      })
    }
  }
}
</script>

<style scoped>
.container {
  padding: 20rpx;
}

.detail-card {
  background-color: #fff;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  margin: 30rpx 0 20rpx 0;
  color: #333;
}

.intro-content {
  font-size: 28rpx;
  line-height: 1.6;
  color: #666;
  padding: 20rpx;
  background-color: #f9f9f9;
  border-radius: 10rpx;
}
</style>
