<template>
  <el-tooltip effect="dark" content="查看详情" placement="top">
    <i class="el-icon-info hand" @click="open"></i>
  </el-tooltip>
</template>

<script>
import { getCommunityId } from '@/api/community/communityApi'
import { queryRooms } from '@/api/fee/propertyFeeApi'

export default {
  name: 'ViewRoomData',
  data() {
    return {
      roomId: '',
      communityId: ''
    }
  },
  created() {
    this.communityId = getCommunityId()
  },
  methods: {
    open(params) {
      this.roomId = params.roomId
      this._loadViewRoomData()
    },
    async _loadViewRoomData() {
      try {
        const res = await queryRooms({
          page: 1,
          row: 1,
          communityId: this.communityId,
          roomId: this.roomId
        })
        
        if (res.data && res.data.length > 0) {
          const room = res.data[0]
          const roomData = {
            "房屋": `${room.floorNum}-${room.unitNum}-${room.roomNum}`,
            "楼层": room.layer,
            "业主": room.ownerName || '-',
            "电话": room.link || '-',
            "类型": room.roomSubTypeName,
            "建筑面积": room.builtUpArea,
            "室内面积": room.roomArea,
            "租金": room.roomRent,
            "房屋状态": room.stateName,
            "入住时间": room.startTime
          }
          
          if (room.roomAttrDto) {
            room.roomAttrDto.forEach(attr => {
              roomData[attr.specName] = attr.valueName
            })
          }
          
          this.$emit('openViewDataModal', {
            title: `${room.floorNum}-${room.unitNum}-${room.roomNum} 详情`,
            data: roomData
          })
        }
      } catch (error) {
        console.error('加载房间数据失败:', error)
      }
    }
  }
}
</script>

<style scoped>
.hand {
  cursor: pointer;
  color: #409EFF;
  margin-left: 5px;
}
</style>