<template>
  <div class="detail-container" v-loading="loading">
    <el-tabs v-model="activeTab">
      <el-tab-pane label="基础信息" name="basic">
        <el-descriptions class="margin-top" title="房源基础信息" :column="3" border>
          <el-descriptions-item label="项目名称">{{ roomDetail.projectName }}</el-descriptions-item>
          <el-descriptions-item label="楼宇">{{ roomDetail.buildingName }}</el-descriptions-item>
          <el-descriptions-item label="楼层">{{ roomDetail.floorName }}</el-descriptions-item>
          <el-descriptions-item label="房号">{{ roomDetail.roomNumber }}</el-descriptions-item>
          <el-descriptions-item label="房间数字编号">{{ roomDetail.roomDigitalNumber }}</el-descriptions-item>
          <el-descriptions-item label="房源管理编号">{{ roomDetail.roomManageNumber }}</el-descriptions-item>
          <el-descriptions-item label="建筑面积">{{ roomDetail.buildingArea }} m²</el-descriptions-item>
          <el-descriptions-item label="计租面积">{{ roomDetail.rentalArea }} m²</el-descriptions-item>
          <el-descriptions-item label="计费面积">{{ roomDetail.billingArea }} m²</el-descriptions-item>
          <el-descriptions-item label="套内面积">{{ roomDetail.innerArea }} m²</el-descriptions-item>
          <el-descriptions-item label="虚拟房源">{{ roomDetail.isVirtual === '1' ? '是' : '否' }}</el-descriptions-item>
          <el-descriptions-item label="房源交付时间">{{ roomDetail.deliveryTime }}</el-descriptions-item>
          <el-descriptions-item label="绑定业主">{{ roomDetail.ownerName }}</el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>

      <el-tab-pane label="招商信息" name="merchant">
        <el-descriptions class="margin-top" title="招商信息" :column="3" border>
          <el-descriptions-item label="产权性质">
            <el-tag :type="roomPropertyTypeTagType">{{ roomPropertyTypeText }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="租赁状态">
            <el-tag :type="leaseStatusTagType">{{ leaseStatusText }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="房源状态">{{ roomStatusText }}</el-descriptions-item>
          <el-descriptions-item label="房源类型">{{ roomTypeText }}</el-descriptions-item>
          <el-descriptions-item label="房源备案号">{{ roomDetail.roomRecordNumber }}</el-descriptions-item>
          <el-descriptions-item label="层高">{{ roomDetail.height }} m</el-descriptions-item>
          <el-descriptions-item label="荷载值">{{ roomDetail.loadValue }}</el-descriptions-item>
          <el-descriptions-item label="装修情况">{{ decorationStatusText }}</el-descriptions-item>
          <el-descriptions-item label="标签">
            <el-tag v-for="tag in roomDetail.tagList" :key="tag.id" size="mini" style="margin-right: 5px">
              {{ tag.tagName }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="招商状态">
            <el-tag :type="roomDetail.businessStatus === '1' ? 'primary' : 'info'">
              {{ roomDetail.businessStatus === '1' ? '招商' : '不招商' }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="可租日期">{{ roomDetail.availableDate }}</el-descriptions-item>
          <el-descriptions-item label="报价">
            {{ roomDetail.price }} {{ priceUnitText }}
          </el-descriptions-item>
          <el-descriptions-item label="底价">
            {{ roomDetail.floorPrice }} {{ floorPriceUnitText }}
          </el-descriptions-item>
          <el-descriptions-item label="房源招商编号">{{ roomDetail.businessNumber }}</el-descriptions-item>
          <el-descriptions-item label="招商条件">{{ roomDetail.businessCondition || '-' }}</el-descriptions-item>
          
        </el-descriptions>

        <div class="image-section" v-if="roomDetail.imageUrls && roomDetail.imageUrls.length > 0">
          <div class="section-title">房源图片</div>
          <el-carousel :interval="4000" type="card" height="200px">
            <el-carousel-item v-for="(item, index) in roomDetail.imageUrls" :key="index">
              <img :src="item" class="carousel-image" />
            </el-carousel-item>
          </el-carousel>
        </div>
      </el-tab-pane>

      <el-tab-pane label="拓展信息" name="extension">
        <el-descriptions class="margin-top" title="拓展信息" :column="3" border>
          <el-descriptions-item label="使用率">{{ roomDetail.usageRate || '-' }}</el-descriptions-item>
          <el-descriptions-item label="办公格局">{{ roomDetail.officeLayout || '-' }}</el-descriptions-item>
          <el-descriptions-item label="窗面朝向">{{ roomDetail.windowOrientation || '-' }}</el-descriptions-item>
          <el-descriptions-item label="免租期">{{ roomDetail.rentFreePeriod || '-' }}</el-descriptions-item>
          <el-descriptions-item label="最短租期">{{ roomDetail.minLeaseTerm || '-' }}</el-descriptions-item>
          <el-descriptions-item label="工位数量">{{ workstationCountRange }}</el-descriptions-item>
        </el-descriptions>

        <div class="image-section" v-if="roomDetail.floorPlanImageUrls && roomDetail.floorPlanImageUrls.length > 0">
          <div class="section-title">户型图</div>
          <el-carousel :interval="4000" type="card" height="200px">
            <el-carousel-item v-for="(item, index) in roomDetail.floorPlanImageUrls" :key="index">
              <img :src="item" class="carousel-image" />
            </el-carousel-item>
          </el-carousel>
          <div class="floor-plan-description" v-if="roomDetail.floorPlanDesc">
            <div class="section-title">户型图说明</div>
            <p>{{ roomDetail.floorPlanDesc }}</p>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getRoom } from '@/api/room'

export default {
  name: 'DetailView',
  props: {
    roomId: {
      type: [String, Number],
      required: true
    }
  },
  data() {
    return {
      loading: false,
      activeTab: 'basic',
      roomDetail: {}
    }
  },
  computed: {
    roomPropertyTypeText() {
      const typeMap = {
        '1': '自持',
        '2': '承租',
        '3': '自持+承租'
      }
      return typeMap[this.roomDetail.propertyNature] || '-'
    },
    roomPropertyTypeTagType() {
      const typeMap = {
        '1': 'success',
        '2': 'primary',
        '3': 'warning'
      }
      return typeMap[this.roomDetail.propertyNature] || 'info'
    },
    leaseStatusText() {
      const statusMap = {
        '0': '待租',
        '1': '已租',
        '2': '预订'
      }
      return statusMap[this.roomDetail.rentalStatus] || '-'
    },
    leaseStatusTagType() {
      const statusMap = {
        '0': 'success',
        '1': 'danger',
        '2': 'warning'
      }
      return statusMap[this.roomDetail.rentalStatus] || 'info'
    },
    decorationStatusText() {
      const statusMap = {
        '1': '精装',
        '2': '简装',
        '3': '毛坯',
        '4': '标准交付',
        '5': '豪装'
      }
      return statusMap[this.roomDetail.decorationStatus] || '-'
    },
    roomStatusText() {
      const statusMap = {
        '1': '公开',
        '2': '关闭',
        '3': '私密'
      }
      return statusMap[this.roomDetail.roomStatus] || '-'
    },
    roomTypeText() {
      const typeMap = {
        '1': '办公',
        '2': '商业',
        '3': '仓储',
        '4': '厂房',
        '5': '多经',
        '6': '公寓',
        '7': '住宅',
        '8': '其它'
      }
      return typeMap[this.roomDetail.roomType] || '-'
    },
    priceUnitText() {
      const unitMap = {
        '1': '元/㎡·天',
        '2': '元/㎡·月',
        '3': '元/月',
        '4': '元/天',
        '5': '元/年'
      }
      return unitMap[this.roomDetail.priceUnit] || ''
    },
    floorPriceUnitText() {
      const unitMap = {
        '1': '元/㎡·天',
        '2': '元/㎡·月',
        '3': '元/月',
        '4': '元/天',
        '5': '元/年'
      }
      return unitMap[this.roomDetail.floorPriceUnit] || ''
    },
    workstationCountRange() {
      if (!this.roomDetail.workstationMin && !this.roomDetail.workstationMax) {
        return '-'
      }
      if (this.roomDetail.workstationMin && !this.roomDetail.workstationMax) {
        return this.roomDetail.workstationMin + '个'
      }
      if (!this.roomDetail.workstationMin && this.roomDetail.workstationMax) {
        return '不超过' + this.roomDetail.workstationMax + '个'
      }
      return this.roomDetail.workstationMin + '~' + this.roomDetail.workstationMax + '个'
    }
  },
  mounted() {
    this.getRoomDetail()
  },
  methods: {
    getRoomDetail() {
      if (!this.roomId) return
      
      this.loading = true
      getRoom(this.roomId).then(response => {
        if (response.code === '0000000000000000') {
          this.roomDetail = response.data
          
          // 处理业务信息
          if (response.data.businessInfo) {
            Object.assign(this.roomDetail, response.data.businessInfo)
          }
          
          // 处理扩展信息
          if (response.data.extendInfo) {
            Object.assign(this.roomDetail, response.data.extendInfo)
          }
          
          // 处理图片
          if (response.data.roomImages && Array.isArray(response.data.roomImages)) {
            this.roomDetail.imageUrls = response.data.roomImages.map(item => item.imageUrl)
          }
          
          // 处理户型图
          if (response.data.floorPlanImages && Array.isArray(response.data.floorPlanImages)) {
            this.roomDetail.floorPlanImageUrls = response.data.floorPlanImages.map(item => item.imageUrl)
          }
        } else {
          this.$message.error(response.msg || '获取房源详情失败')
        }
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.detail-container {
  padding: 10px;
  
  .margin-top {
    margin-top: 15px;
  }
  
  .section-title {
    font-size: 16px;
    font-weight: 500;
    margin: 20px 0 15px;
    padding-left: 10px;
    border-left: 3px solid #409EFF;
  }
  
  .image-section {
    margin-top: 20px;
  }
  
  .carousel-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .floor-plan-description {
    margin-top: 20px;
    
    p {
      padding: 0 15px;
      line-height: 1.6;
      color: #606266;
    }
  }
}
</style> 