<template>
  <div class="building-list-container">
    <vab-card>
      <vab-query-form>
        <vab-query-form-left-panel>
          <el-form :inline="true" :model="queryForm" @submit.prevent>
            <el-form-item label="楼宇名称">
              <el-input v-model="queryForm.keyword" placeholder="请输入楼宇名称" clearable prefix-icon="search-line" />
            </el-form-item>
            <el-form-item label="楼宇类型">
              <el-select v-model="queryForm.type" placeholder="全部类型" clearable style="width: 140px">
                <el-option label="本科生公寓" value="undergraduate" />
                <el-option label="研究生公寓" value="graduate" />
                <el-option label="留学生公寓" value="international" />
                <el-option label="教工公寓" value="staff" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleQuery">
                <vab-icon icon="search-line" class="icon-btn" /> 查询
              </el-button>
            </el-form-item>
          </el-form>
        </vab-query-form-left-panel>
        <vab-query-form-right-panel>
          <el-button type="primary" @click="handleAdd">
            <vab-icon icon="add-line" class="icon-btn" /> 新增楼宇
          </el-button>
        </vab-query-form-right-panel>
      </vab-query-form>

      <el-table v-loading="loading" :data="tableData" border stripe>
        <el-table-column prop="id" label="编号" width="80" align="center" />
        <el-table-column prop="name" label="楼宇名称" min-width="150" show-overflow-tooltip>
          <template #default="{ row }">
            <span class="font-bold text-primary cursor-pointer" @click="handleViewDetail(row)">{{ row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="类型" width="120">
          <template #default="{ row }">
            <el-tag :type="getTypeTag(row.type)">{{ getTypeLabel(row.type) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="floors" label="楼层数" width="100" align="center" />
        <el-table-column prop="rooms" label="房间数" width="100" align="center" />
        <el-table-column prop="capacity" label="总床位" width="100" align="center" />
        <el-table-column prop="manager" label="宿管负责人" width="120" />
        <el-table-column prop="phone" label="联系电话" width="140" />
        <el-table-column prop="status" label="状态" width="100" align="center">
          <template #default="{ row }">
            <el-switch v-model="row.status" active-value="active" inactive-value="maintenance" @change="handleStatusChange(row)" />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="220" fixed="right" align="center">
          <template #default="{ row }">
            <el-button type="primary" style="margin-right: 5px" text size="small" @click="handleEdit(row)">
              <vab-icon icon="edit-line" class="icon-sm" /> 编辑
            </el-button>
            <el-button type="primary" text size="small" @click="handleViewLayout(row)">
              <vab-icon icon="layout-line" class="icon-sm" /> 房态
            </el-button>
            <el-popconfirm title="确定删除该楼宇吗？" @confirm="handleDelete(row)">
              <template #reference>
                <el-button type="danger" text size="small">
                  <vab-icon icon="delete-bin-line" class="icon-sm" /> 删除
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

      <vab-pagination
        :current-page="queryForm.pageNo"
        :page-size="queryForm.pageSize"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </vab-card>

    <!-- 编辑/新增弹窗 -->
    <building-edit-dialog 
      ref="buildingEditDialogRef"
      @success="handleQuery"
    />
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import BuildingEditDialog from '../components/BuildingEditDialog.vue'

defineOptions({
  name: 'BuildingList',
})

const router = useRouter()
const loading = ref(false)
const total = ref(100)
const tableData = ref([])
const buildingEditDialogRef = ref()

const queryForm = reactive({
  keyword: '',
  type: '',
  pageNo: 1,
  pageSize: 10,
})

// --- Helpers ---
const getTypeLabel = (type) => {
  const map = { undergraduate: '本科生', graduate: '研究生', international: '留学生', staff: '教工' }
  return map[type] || type
}
const getTypeTag = (type) => {
  const map = { undergraduate: '', graduate: 'success', international: 'warning', staff: 'info' }
  return map[type]
}

// --- Mock Data ---
const generateMockData = () => {
  return [
    {
      id: 1,
      name: '一号书院',
      type: 'undergraduate',
      floors: 6,
      rooms: 144,
      capacity: 576,
      manager: '王宿管',
      phone: '13800138000',
      status: 'active'
    },
    {
      id: 2,
      name: '二号书院',
      type: 'undergraduate',
      floors: 6,
      rooms: 144,
      capacity: 576,
      manager: '张宿管',
      phone: '13800138001',
      status: 'active'
    },
    {
      id: 3,
      name: '三号书院',
      type: 'international',
      floors: 12,
      rooms: 240,
      capacity: 240,
      manager: '陈主管',
      phone: '13800138002',
      status: 'active'
    },
    {
      id: 4,
      name: '四号书院',
      type: 'graduate',
      floors: 12,
      rooms: 240,
      capacity: 480,
      manager: '李主管',
      phone: '13800138003',
      status: 'maintenance'
    },
    {
      id: 5,
      name: '五号书院',
      type: 'staff',
      floors: 8,
      rooms: 64,
      capacity: 64,
      manager: '后勤处',
      phone: '0571-87572222',
      status: 'active'
    }
  ]
}

// --- Methods ---
const handleQuery = () => {
  loading.value = true
  setTimeout(() => {
    tableData.value = generateMockData()
    loading.value = false
  }, 500)
}

const handleAdd = () => {
  buildingEditDialogRef.value.open()
}

const handleEdit = (row) => {
  buildingEditDialogRef.value.open(row)
}

const handleDelete = (row) => {
  ElMessage.success('删除成功')
  handleQuery()
}

const handleStatusChange = (row) => {
  ElMessage.success(`楼宇状态已更新为：${row.status === 'active' ? '正常' : '维护中'}`)
}

const handleViewDetail = (row) => {
  ElMessage.info(`查看 ${row.name} 详情`)
}

const handleViewLayout = (row) => {
  router.push({ name: 'VisualManagement', query: { buildingId: row.id } })
}

const handleCurrentChange = (val) => {
  queryForm.pageNo = val
  handleQuery()
}
const handleSizeChange = (val) => {
  queryForm.pageSize = val
  handleQuery()
}

handleQuery()
</script>

<style lang="scss" scoped>
.building-list-container {
  .text-primary { color: var(--el-color-primary); }
  .font-bold { font-weight: bold; }
  .cursor-pointer { cursor: pointer; }
  
  .icon-btn {
    margin-right: 6px;
    font-size: 16px;
    vertical-align: middle;
  }
  
  .icon-sm {
    margin-right: 4px;
    font-size: 14px;
    vertical-align: middle;
  }
}
</style>