<template>
  <page-container>
    <div class="building-list">
      <div class="table-header">
        <h1>楼栋列表</h1>
        <a-button type="primary" @click="showAddModal">批量添加楼栋</a-button>
      </div>
      
      <!-- 添加筛选区域 -->
      <div class="table-filter">
        <a-form layout="inline">
          <a-form-item label="所属小区">
            <a-select
              v-model:value="filterForm.community_id"
              placeholder="请选择小区"
              style="width: 200px; height: 32px"
              allowClear
              @change="handleFilter"
            >
              <a-select-option :value="undefined">全部</a-select-option>
              <a-select-option 
                v-for="item in communityOptions" 
                :key="item.id" 
                :value="item.id"
              >
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-form>
      </div>
      
      <!-- 使用分组展示楼栋数据 -->
      <div v-if="!loading" class="community-building-list">
        <div v-for="community in groupedData" :key="community.community_id" class="community-card">
          <div class="community-header">
            <h3>{{ community.community_name }}</h3>
            <span class="building-count">共 {{ community.buildings.length }} 栋</span>
          </div>
          <div class="building-grid">
            <div 
              v-for="building in community.buildings" 
              :key="building.building_id"
              class="building-item"
              @click="showEditModal(building, community)"
            >
              <div class="building-content">
                <div class="building-name">{{ building.building_name }}</div>
                <div class="building-id">ID: {{ building.building_id }}</div>
              </div>
              <div class="building-edit-icon">
                <edit-outlined />
              </div>
            </div>
          </div>
        </div>
        
        <!-- 无数据时显示 -->
        <a-empty v-if="groupedData.length === 0" description="暂无楼栋数据" />
      </div>
      
      <!-- 加载中状态 -->
      <div v-else class="loading-container">
        <a-spin tip="加载中..."></a-spin>
      </div>

      <!-- 批量添加楼栋模态框 -->
      <a-modal
        v-model:visible="addModalVisible"
        title="批量添加楼栋"
        @cancel="handleCancel"
        :confirmLoading="confirmLoading"
        width="500px"
      >
        <template #footer>
          <a-space>
            <a-button @click="handleCancel">取消</a-button>
            <a-button type="primary" :loading="confirmLoading" @click="handleAdd">
              保存
            </a-button>
          </a-space>
        </template>

        <a-form
          ref="formRef"
          :model="formState"
          :rules="rules"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 16 }"
          class="building-form"
        >
          <a-form-item label="所属小区" name="community_id" required>
            <a-select
              v-model:value="formState.community_id"
              placeholder="请选择小区"
              :options="communityOptions"
              :field-names="{ label: 'name', value: 'id' }"
              style="height: 32px"
            />
          </a-form-item>

          <a-form-item label="起始楼栋号" name="from_number" required>
            <a-input-number 
              v-model:value="formState.from_number" 
              :min="1" 
              :precision="0"
              style="width: 100%"
              placeholder="请输入起始楼栋号" 
            />
          </a-form-item>
          
          <a-form-item label="结束楼栋号" name="to_number" required>
            <a-input-number 
              v-model:value="formState.to_number" 
              :min="1" 
              :precision="0"
              style="width: 100%"
              placeholder="请输入结束楼栋号" 
            />
            <div class="form-item-tip">
              将批量创建从起始楼栋号到结束楼栋号的所有楼栋
            </div>
          </a-form-item>
        </a-form>
      </a-modal>

      <!-- 编辑楼栋模态框 -->
      <a-modal
        v-model:visible="editModalVisible"
        title="编辑楼栋"
        @cancel="handleEditCancel"
        :confirmLoading="editConfirmLoading"
        width="500px"
      >
        <template #footer>
          <div class="modal-footer-with-delete">
            <a-popconfirm
              title="确定要删除该楼栋吗？"
              ok-text="确定"
              cancel-text="取消"
              @confirm="handleDeleteBuilding"
              :disabled="deleteLoading"
            >
              <a-button danger :loading="deleteLoading">删除楼栋</a-button>
            </a-popconfirm>
            <a-space>
              <a-button @click="handleEditCancel">取消</a-button>
              <a-button type="primary" :loading="editConfirmLoading" @click="handleEditSave">
                保存
              </a-button>
            </a-space>
          </div>
        </template>

        <a-form
          ref="editFormRef"
          :model="editFormState"
          :rules="editRules"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 16 }"
          class="building-form"
        >
          <a-form-item label="所属小区" required>
            <a-input 
              v-model:value="currentCommunityName" 
              disabled 
              style="width: 100%"
            />
          </a-form-item>

          <a-form-item label="楼栋名称" name="building_name" required>
            <a-input 
              v-model:value="editFormState.building_name" 
              placeholder="请输入楼栋名称" 
              style="width: 100%"
            />
          </a-form-item>
        </a-form>
      </a-modal>
    </div>
  </page-container>
</template>

<script>
import { defineComponent, ref, onMounted, computed } from 'vue'
import { message } from 'ant-design-vue'
import { getCommunityList } from '@/api/community'
import request from '@/utils/request'
import PageContainer from '@/components/PageContainer.vue'
import { EditOutlined } from '@ant-design/icons-vue'

export default defineComponent({
  components: {
    PageContainer,
    EditOutlined
  },
  setup() {
    const loading = ref(false)
    const groupedData = ref([])
    const communityOptions = ref([])
    
    // 添加筛选表单数据
    const filterForm = ref({
      community_id: undefined
    })

    // 修改获取楼栋列表数据的方法，使用新接口
    const fetchData = async () => {
      try {
        loading.value = true
        
        // 使用新的接口获取按小区分组的楼栋数据
        const res = await request.get('/api/community/building/group_by_community')
        
        if (res.code === 200) {
          // 如果有小区筛选，则过滤数据
          if (filterForm.value.community_id) {
            groupedData.value = res.data.filter(
              item => item.community_id === filterForm.value.community_id
            )
          } else {
            groupedData.value = res.data
          }
        } else {
          message.error(res.message || '获取数据失败')
        }
      } catch (error) {
        console.error('获取楼栋列表失败:', error)
        message.error('获取数据失败')
      } finally {
        loading.value = false
      }
    }

    // 筛选变化处理
    const handleFilter = () => {
      fetchData()
    }

    // 获取小区选项
    const fetchCommunityOptions = async () => {
      try {
        const res = await getCommunityList({
          skip: 0,
          limit: 1000 // 获取所有小区
        })
        if (res.code === 200) {
          communityOptions.value = res.data.items
        }
      } catch (error) {
        console.error('获取小区列表失败:', error)
        message.error('获取小区列表失败')
      }
    }

    // 批量添加楼栋相关
    const addModalVisible = ref(false)
    const confirmLoading = ref(false)
    const formRef = ref(null)
    
    const formState = ref({
      community_id: undefined,
      from_number: 1,
      to_number: 1
    })

    const rules = {
      community_id: [{ required: true, message: '请选择所属小区' }],
      from_number: [
        { required: true, message: '请输入起始楼栋号' },
        { type: 'number', min: 1, message: '起始楼栋号必须大于等于1' }
      ],
      to_number: [
        { required: true, message: '请输入结束楼栋号' },
        { type: 'number', min: 1, message: '结束楼栋号必须大于等于1' },
        { validator: (rule, value) => {
            if (value < formState.value.from_number) {
              return Promise.reject('结束楼栋号必须大于等于起始楼栋号');
            }
            return Promise.resolve();
          }
        }
      ]
    }

    // 显示添加模态框
    const showAddModal = () => {
      addModalVisible.value = true
      fetchCommunityOptions()
    }

    // 提交表单 - 批量添加楼栋
    const handleAdd = () => {
      formRef.value.validate().then(async () => {
        try {
          confirmLoading.value = true
          
          // 修改请求格式，生成楼栋名称数组
          const buildingNames = [];
          for (let i = formState.value.from_number; i <= formState.value.to_number; i++) {
            buildingNames.push(`${i} 栋`);
          }
          
          // 使用新的批量创建接口，传入楼栋名称数组
          const res = await request.post('/api/community/building/batch', {
            community_id: formState.value.community_id,
            building_names: buildingNames
          })
          
          if (res.code === 200) {
            message.success('批量添加成功')
            addModalVisible.value = false
            fetchData() // 刷新列表
          } else {
            message.error(res.message || '添加失败')
          }
        } catch (error) {
          console.error('批量添加楼栋失败:', error)
          message.error('添加失败')
        } finally {
          confirmLoading.value = false
        }
      })
    }

    // 取消添加
    const handleCancel = () => {
      formRef.value?.resetFields()
      addModalVisible.value = false
    }

    // 编辑楼栋相关
    const editModalVisible = ref(false)
    const editConfirmLoading = ref(false)
    const deleteLoading = ref(false)
    const editFormRef = ref(null)
    const currentBuildingId = ref(null)
    const currentCommunityName = ref('')
    
    const editFormState = ref({
      building_name: ''
    })

    const editRules = {
      building_name: [{ required: true, message: '请输入楼栋名称' }]
    }

    // 显示编辑模态框
    const showEditModal = (building, community) => {
      currentBuildingId.value = building.building_id
      currentCommunityName.value = community.community_name
      editFormState.value.building_name = building.building_name
      editModalVisible.value = true
    }

    // 保存编辑
    const handleEditSave = () => {
      editFormRef.value.validate().then(async () => {
        try {
          editConfirmLoading.value = true
          
          // 使用编辑楼栋接口
          const res = await request.put(`/api/community/building/${currentBuildingId.value}`, {
            building_name: editFormState.value.building_name
          })
          
          if (res.code === 200) {
            message.success('修改成功')
            editModalVisible.value = false
            fetchData() // 刷新列表
          } else {
            message.error(res.message || '修改失败')
          }
        } catch (error) {
          console.error('修改楼栋失败:', error)
          message.error('修改失败')
        } finally {
          editConfirmLoading.value = false
        }
      })
    }

    // 删除楼栋
    const handleDeleteBuilding = async () => {
      try {
        deleteLoading.value = true
        
        // 使用删除楼栋接口
        const res = await request.delete(`/api/community/building/${currentBuildingId.value}`)
        
        if (res.code === 200) {
          message.success('删除成功')
          editModalVisible.value = false
          fetchData() // 刷新列表
        } else {
          message.error(res.message || '删除失败')
        }
      } catch (error) {
        console.error('删除楼栋失败:', error)
        message.error('删除失败')
      } finally {
        deleteLoading.value = false
      }
    }

    // 取消编辑
    const handleEditCancel = () => {
      editFormRef.value?.resetFields()
      editModalVisible.value = false
    }

    onMounted(() => {
      fetchData()
      fetchCommunityOptions() // 页面加载时获取小区选项
    })

    return {
      loading,
      groupedData,
      handleFilter,
      addModalVisible,
      confirmLoading,
      formState,
      formRef,
      rules,
      communityOptions,
      showAddModal,
      handleAdd,
      handleCancel,
      filterForm,
      // 编辑相关
      editModalVisible,
      editConfirmLoading,
      deleteLoading,
      editFormState,
      editFormRef,
      editRules,
      currentCommunityName,
      showEditModal,
      handleEditSave,
      handleEditCancel,
      handleDeleteBuilding
    }
  }
})
</script>

<style scoped>
.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.table-header h1 {
  margin: 0;
}

.table-filter {
  margin-bottom: 16px;
  padding: 16px 24px;
  background: #fff;
  border-radius: 2px;
}

:deep(.ant-form-item) {
  margin-bottom: 16px;
  
  &:last-child {
    margin-bottom: 0;
  }
}

/* 社区楼栋列表样式 */
.community-building-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.community-card {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s;
}

.community-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.community-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.community-header h3 {
  margin: 0;
  font-size: 18px;
  color: #1890ff;
  font-weight: 500;
}

.building-count {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.45);
  background: #f5f5f5;
  padding: 4px 10px;
  border-radius: 12px;
}

.building-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}

.building-item {
  background-color: #f0f7ff;
  border-radius: 6px;
  transition: all 0.3s;
  cursor: pointer;
  border: 1px solid #d9e8ff;
  position: relative;
  overflow: hidden;
}

.building-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 6px rgba(24, 144, 255, 0.15);
  background-color: #e6f7ff;
}

.building-item:hover .building-edit-icon {
  opacity: 1;
}

.building-content {
  padding: 12px;
  text-align: center;
}

.building-name {
  font-size: 16px;
  font-weight: 500;
  color: #1890ff;
  margin-bottom: 4px;
}

.building-id {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.45);
}

.building-edit-icon {
  position: absolute;
  top: 0;
  right: 0;
  background-color: rgba(24, 144, 255, 0.1);
  color: #1890ff;
  padding: 4px;
  border-bottom-left-radius: 6px;
  opacity: 0;
  transition: opacity 0.3s;
}

/* 移除旧的标签样式 */
.building-tags {
  display: none;
}

.building-tag {
  display: none;
}

/* 加载状态容器 */
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

/* 调整表单样式 */
.building-form {
  padding: 20px 0;
}

:deep(.ant-form-item) {
  margin-bottom: 32px;

  &:last-child {
    margin-bottom: 0;
  }
}

:deep(.ant-form-item-label) {
  text-align: right;
  padding-right: 12px;
  
  /* 调整必填星号的样式 */
  > label.ant-form-item-required:not(.ant-form-item-required-mark-optional)::before {
    color: #ff4d4f;
    font-size: 14px;
    margin-right: 4px;
  }
}

:deep(.ant-input),
:deep(.ant-select),
:deep(.ant-input-number) {
  height: 32px !important;
}

:deep(.ant-select-selector) {
  height: 32px !important;
  padding: 0 11px !important;
}

:deep(.ant-select-selection-search-input) {
  height: 30px !important;
}

:deep(.ant-select-selection-item) {
  line-height: 30px !important;
}

:deep(.ant-input::placeholder),
:deep(.ant-select-selection-placeholder) {
  color: #bfbfbf;
}

:deep(.ant-modal-body) {
  padding: 24px;
}

:deep(.ant-modal-footer) {
  border-top: 1px solid #f0f0f0;
  padding: 16px 24px;
}

.form-item-tip {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.45);
  margin-top: 4px;
}

/* 带删除按钮的模态框底部样式 */
.modal-footer-with-delete {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
</style> 