<template>
  <el-dialog 
    :title="dialogTitle" 
    v-model="visible" 
    :width="1000" 
    :close-on-click-modal="false" 
    draggable>
    <el-table 
      :data="tableData" 
      v-loading="loading" 
      border 
      style="width: 100%">
      <!-- 空宿舍列表：序号、宿舍、几人间、是否有空调 -->
      <template v-if="roomType === 'all'">
        <el-table-column type="index" label="序号" width="60" align="center" />
        <el-table-column prop="roomNo" label="宿舍" show-overflow-tooltip align="center" />
        <el-table-column prop="bedNum" label="几人间" show-overflow-tooltip align="center" />
        <el-table-column prop="isHaveAir" label="是否有空调" show-overflow-tooltip align="center">
          <template #default="scope">
            <span>{{ scope.row.isHaveAir === '1' || scope.row.isHaveAir === 1 ? '已安装' : '未安装' }}</span>
          </template>
        </el-table-column>
      </template>
      
      <!-- 空几人宿舍列表：宿舍、床位1-6、是否有空调 -->
      <template v-else>
        <el-table-column prop="roomNo" label="宿舍" show-overflow-tooltip align="center" />
        <el-table-column prop="bedNo1" label="床位1" show-overflow-tooltip align="center">
          <template #default="scope">
            <span>{{ scope.row.bedNo1 || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="bedNo2" label="床位2" show-overflow-tooltip align="center">
          <template #default="scope">
            <span>{{ scope.row.bedNo2 || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="bedNo3" label="床位3" show-overflow-tooltip align="center">
          <template #default="scope">
            <span>{{ scope.row.bedNo3 || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="bedNo4" label="床位4" show-overflow-tooltip align="center">
          <template #default="scope">
            <span>{{ scope.row.bedNo4 || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="bedNo5" label="床位5" show-overflow-tooltip align="center">
          <template #default="scope">
            <span>{{ scope.row.bedNo5 || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="bedNo6" label="床位6" show-overflow-tooltip align="center">
          <template #default="scope">
            <span>{{ scope.row.bedNo6 || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="isHaveAir" label="是否有空调" show-overflow-tooltip align="center">
          <template #default="scope">
            <span>{{ scope.row.isHaveAir === '1' || scope.row.isHaveAir === 1 ? '已安装' : '未安装' }}</span>
          </template>
        </el-table-column>
      </template>
    </el-table>
    
    <!-- 分页 -->
    <pagination 
      v-if="isPage"
      @size-change="sizeChangeHandle" 
      @current-change="currentChangeHandle" 
      v-bind="pagination" />
    
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">关 闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="EmptyRoomDialog">
import { ref, reactive, computed } from 'vue'
import { queryEmptyRoomWithBuildingNo, queryEmtryRoomDetail } from '/@/api/stuwork/dormroomstudent'
import { useMessage } from '/@/hooks/message'

// 定义变量内容
const visible = ref(false)
const loading = ref(false)
const buildingNo = ref('')
const roomType = ref('')
const tableData = ref<any[]>([])
const isPage = ref(false)
const pagination = reactive({
  current: 1,
  size: 10,
  total: 0,
  pageSizes: [10, 20, 50, 100],
  layout: 'total, sizes, prev, pager, next, jumper'
})

// 对话框标题
const dialogTitle = computed(() => {
  if (roomType.value === 'all') {
    return `空宿舍列表 - ${buildingNo.value}号楼`
  } else {
    return `空${roomType.value}人宿舍列表 - ${buildingNo.value}号楼`
  }
})

// 打开对话框
const openDialog = async (building: string, type: string) => {
  visible.value = true
  buildingNo.value = building
  roomType.value = type
  tableData.value = []
  pagination.current = 1
  pagination.total = 0
  
  await loadData()
}

// 加载数据
const loadData = async () => {
  loading.value = true
  try {
    let res: any
    if (roomType.value === 'all') {
      // 查询所有空宿舍
      res = await queryEmptyRoomWithBuildingNo(buildingNo.value)
    } else {
      // 查询空几人宿舍
      res = await queryEmtryRoomDetail(buildingNo.value, roomType.value)
    }
    
    // 处理返回数据
    if (res.data) {
      if (Array.isArray(res.data)) {
        tableData.value = res.data
        isPage.value = false
      } else if (res.data.records && Array.isArray(res.data.records)) {
        tableData.value = res.data.records
        pagination.total = res.data.total || 0
        isPage.value = true
      } else if (res.data.list && Array.isArray(res.data.list)) {
        tableData.value = res.data.list
        isPage.value = false
      } else {
        tableData.value = []
        isPage.value = false
      }
    } else {
      tableData.value = []
      isPage.value = false
    }
  } catch (err: any) {
    useMessage().error(err.msg || '加载失败')
    tableData.value = []
  } finally {
    loading.value = false
  }
}

// 分页大小改变
const sizeChangeHandle = (val: number) => {
  pagination.size = val
  pagination.current = 1
  loadData()
}

// 当前页改变
const currentChangeHandle = (val: number) => {
  pagination.current = val
  loadData()
}

// 暴露方法给父组件
defineExpose({
  openDialog
})
</script>

