<template>
  <div class="app-container">
    <!-- 统计数据展示区域 -->
    <!-- <el-row :gutter="20" class="statistics-row">
      <el-col :span="4">
        <div class="stat-card">
          <div class="stat-label">管理面积</div>
          <div class="stat-value">{{ statistics.managementArea }} m²</div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="stat-card">
          <div class="stat-label">可招商面积</div>
          <div class="stat-value">{{ statistics.availableArea }} m²</div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="stat-card">
          <div class="stat-label">可招商占比</div>
          <div class="stat-value">{{ statistics.availableRatio }}%</div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="stat-card">
          <div class="stat-label">总房源数量</div>
          <div class="stat-value">{{ statistics.totalRooms }} 间</div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="stat-card">
          <div class="stat-label">可招商房源数量</div>
          <div class="stat-value">{{ statistics.availableRooms }} 间</div>
        </div>
      </el-col>
    </el-row> ..>

    <!-- 搜索区域 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>项目列表</span>
        <el-button 
          style="float: right;" 
          type="primary" 
          icon="el-icon-plus" 
          size="mini" 
          @click="handleAdd">新增项目</el-button>
      </div>
      
      <!-- 搜索表单 -->
      <el-form :inline="true" :model="queryParams" class="demo-form-inline">
        <el-form-item label="项目名称">
          <el-input v-model="queryParams.projectName" placeholder="请输入项目名称" clearable size="small" />
        </el-form-item>
        <el-form-item label="项目类型">
          <el-select v-model="queryParams.projectType" placeholder="请选择项目类型" clearable size="small">
            <el-option label="写字楼" value="写字楼" />
            <el-option label="产业园区" value="产业园区" />
            <el-option label="商场" value="商场" />
            <el-option label="联合办公" value="联合办公" />
            <el-option label="公寓" value="公寓" />
            <el-option label="小区" value="小区" />
            <el-option label="社区养老" value="社区养老" />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="所属地区">
          <region-selector v-model="queryParams.region" :value="queryParams.region" placeholder="请选择所属地区" size="small" @change="handleRegionChange" />
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 表格区域 -->
      <el-table v-loading="loading" :data="projectList" border style="width: 100%">
        <el-table-column prop="projectName" label="项目名称" />
        <el-table-column prop="projectType" label="项目类型" />
        <el-table-column prop="region" label="所属地区" />
        <el-table-column prop="manageArea" label="管理面积(㎡)" />
        <el-table-column prop="availableArea" label="可招商面积(㎡)" />
        <el-table-column prop="totalRooms" label="总房源数量" />
        <el-table-column prop="availableRooms" label="可招商房源数量" />
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleDetail(scope.row)">详情</el-button>
            <el-button size="mini" type="text" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" type="text" style="color: #F56C6C" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryParams.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        class="pagination">
      </el-pagination>
    </el-card>

    <!-- 新增/编辑对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="50%" @open="onDialogOpen" @close="onDialogClose">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="项目类型" prop="projectType">
              <el-select v-model="form.projectType" placeholder="请选择项目类型" :disabled="form.id !== undefined">
                <el-option label="写字楼" value="写字楼" />
                <el-option label="产业园区" value="产业园区" />
                <el-option label="商场" value="商场" />
                <el-option label="联合办公" value="联合办公" />
                <el-option label="公寓" value="公寓" />
                <el-option label="小区" value="小区" />
                <el-option label="社区养老" value="社区养老" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目名称" prop="projectName">
              <el-input v-model="form.projectName" placeholder="请输入项目名称" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="项目简称" prop="projectShortName">
              <el-input v-model="form.projectShortName" placeholder="请输入项目简称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属地区" prop="region">
              <region-selector v-model="form.region" placeholder="请选择所属地区" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-form-item label="详细地址" prop="address">
          <el-input v-model="form.address" type="textarea" placeholder="请输入详细地址" />
        </el-form-item>
        
        <el-form-item label="项目标签" prop="projectTags">
          <el-select v-model="form.projectTags" multiple placeholder="请选择项目标签">
            <el-option
              v-for="tag in tagOptions"
              :key="tag.id"
              :label="tag.tagName"
              :value="tag.id">
            </el-option>
          </el-select>
        </el-form-item>
        
        <el-form-item label="项目简介" prop="projectDesc">
          <el-input v-model="form.projectDesc" type="textarea" :rows="4" placeholder="请输入项目简介" />
        </el-form-item>
        
        <el-form-item label="项目图片" prop="projectImage">
          <el-upload
            class="avatar-uploader"
            action="/api/upload"
            :show-file-list="false"
            :on-success="handleImageSuccess"
            :before-upload="beforeImageUpload">
            <img v-if="form.projectImage" :src="form.projectImage" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 详情对话框 -->
    <el-dialog title="项目详情" :visible.sync="detailVisible" width="50%">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="项目名称">{{ detail.projectName }}</el-descriptions-item>
        <el-descriptions-item label="项目简称">{{ detail.projectShortName }}</el-descriptions-item>
        <el-descriptions-item label="项目类型">{{ detail.projectType }}</el-descriptions-item>
        <el-descriptions-item label="所属地区">{{ detail.region }}</el-descriptions-item>
        <el-descriptions-item label="详细地址">{{ detail.address }}</el-descriptions-item>
        <el-descriptions-item label="管理面积">{{ detail.manageArea }}㎡</el-descriptions-item>
        <el-descriptions-item label="可招商面积">{{ detail.availableArea }}㎡</el-descriptions-item>
        <el-descriptions-item label="总房源数量">{{ detail.totalRooms }}</el-descriptions-item>
        <el-descriptions-item label="可招商房源数量">{{ detail.availableRooms }}</el-descriptions-item>
        <el-descriptions-item label="项目标签" :span="2">
          <el-tag 
            v-for="tag in projectTagList" 
            :key="tag.id" 
            type="success" 
            size="medium" 
            style="margin-right: 8px; margin-bottom: 5px;">
            {{ tag.tagName }}
          </el-tag>
          <span v-if="!projectTagList || projectTagList.length === 0">暂无标签</span>
        </el-descriptions-item>
        <!-- <el-descriptions-item label="排序值">{{ detail.sort }}</el-descriptions-item> -->
        <!-- <el-descriptions-item label="竣工时间">{{ detail.completionTime }}</el-descriptions-item> -->
        <!-- <el-descriptions-item label="标准层高">{{ detail.standardHeight }}m</el-descriptions-item> -->
        <!-- <el-descriptions-item label="物业">{{ detail.property }}</el-descriptions-item> -->
        <!-- <el-descriptions-item label="物业费">{{ detail.propertyFee }}元/㎡·月</el-descriptions-item> -->
        <!-- <el-descriptions-item label="车位数量">{{ detail.parkingSpaces }}</el-descriptions-item> -->
        <!-- <el-descriptions-item label="车位月租金">{{ detail.parkingFee }}元/月</el-descriptions-item> -->
        <!-- <el-descriptions-item label="空调">{{ detail.airConditioning }}</el-descriptions-item> -->
        <!-- <el-descriptions-item label="空调费">{{ detail.airConditioningFee }}元/㎡·月</el-descriptions-item> -->
        <!-- <el-descriptions-item label="空调开放时间">{{ detail.airConditioningTime }}</el-descriptions-item> -->
        <!-- <el-descriptions-item label="电梯">{{ detail.elevator }}</el-descriptions-item> -->
        <!-- <el-descriptions-item label="网络">{{ detail.network }}</el-descriptions-item> -->
        <!-- <el-descriptions-item label="入驻企业">{{ detail.enterprises }}</el-descriptions-item> -->
        <!-- <el-descriptions-item label="招商岗位">{{ detail.recruitmentPosition }}</el-descriptions-item> -->
        <!-- <el-descriptions-item label="招商部门">{{ detail.recruitmentDepartment }}</el-descriptions-item> -->
        <!-- <el-descriptions-item label="VR链接">{{ detail.vrLink }}</el-descriptions-item> -->
        <!-- <el-descriptions-item label="招商时间">{{ detail.recruitmentTime }}</el-descriptions-item> -->
        <el-descriptions-item label="项目图片" :span="2">
          <el-image 
            v-if="detail.projectImage"
            :src="detail.projectImage"
            :preview-src-list="[detail.projectImage]"
            fit="cover"
            style="width: 200px; height: 200px">
          </el-image>
        </el-descriptions-item>
      </el-descriptions>
      <div slot="footer" class="dialog-footer">
        <el-button @click="detailVisible = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getProjectList, getProjectDetail, addProject, updateProject, deleteProject, getAllProjectStatistics, getTagByType } from '@/api/project'
import RegionSelector from '@/components/RegionSelector'

export default {
  name: 'ProjectList',
  components: {
    RegionSelector
  },
  data() {
    return {
      // 遮罩层
      loading: false,
      // 总条数
      total: 0,
      // 项目列表
      projectList: [],
      // 弹出层标题
      dialogTitle: '',
      // 是否显示弹出层
      dialogVisible: false,
      // 是否显示详情弹出层
      detailVisible: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        projectName: undefined,
        projectType: undefined,
        region: undefined
      },
      // 表单参数
      form: {},
      // 详情数据
      detail: {},
      // 标签选项
      tagOptions: [],
      // 表单校验
      rules: {
        projectType: [
          { required: true, message: '请选择项目类型', trigger: 'change' }
        ],
        projectName: [
          { required: true, message: '请输入项目名称', trigger: 'blur' }
        ],
        projectShortName: [
          { required: true, message: '请输入项目简称', trigger: 'blur' }
        ],
        region: [
          { required: true, message: '请输入所属地区', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入详细地址', trigger: 'blur' }
        ]
      },
      // 统计数据
      statistics: {
        managementArea: '37,234.52',
        availableArea: '20,916.2',
        availableRatio: '56.17',
        totalRooms: '637',
        availableRooms: '51'
      }
    }
  },
  computed: {
    // 项目标签列表，用于在详情页展示
    projectTagList() {
      if (!this.detail.projectTags || !this.tagOptions || this.tagOptions.length === 0) {
        return [];
      }
      
      // 将逗号分隔的标签ID字符串转为数组
      const tagIds = typeof this.detail.projectTags === 'string' 
        ? this.detail.projectTags.split(',') 
        : this.detail.projectTags;
      
      // 根据ID查找标签对象
      return tagIds.map(tagId => {
        const tag = this.tagOptions.find(t => t.id === tagId);
        return tag || { id: tagId, tagName: `标签${tagId}` };
      });
    }
  },
  created() {
    this.getList()
    this.getTagOptions()
    this.fetchStatistics()
  },
  methods: {
    /** 查询项目列表 */
    getList() {
      this.loading = true
      const params = {
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
        projectName: this.queryParams.projectName,
        projectType: this.queryParams.projectType,
        region: this.queryParams.region
      }
      
      getProjectList(params).then(res => {
        this.projectList = res.data.list
        this.total = res.data.total
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    /** 获取标签选项 */
    getTagOptions() {
      return new Promise((resolve) => {
        getTagByType({ tagType: '项目标签',tagName: '项目标签' }).then(res => {
          this.tagOptions = res.data || [];
          resolve(this.tagOptions);
        }).catch(() => {
          this.tagOptions = [
            { id: '1', tagName: '标签1' },
            { id: '2', tagName: '标签2' }
          ];
          resolve(this.tagOptions);
        });
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        projectName: undefined,
        projectType: undefined,
        region: undefined
      }
      this.handleQuery()
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.dialogTitle = '新增项目'
      // 完全重置表单数据
      this.form = {
        region: '' // 初始化region为空字符串以确保组件正确绑定
      }
      this.dialogVisible = true
    },
    /** 修改按钮操作 */
    handleEdit(row) {
      this.dialogTitle = '编辑项目'
      getProjectDetail(row.id).then(res => {
        // 处理从后端返回的项目标签，将逗号分隔的字符串转为数组
        const projectData = { ...res.data };
        
        if (typeof projectData.projectTags === 'string' && projectData.projectTags) {
          projectData.projectTags = projectData.projectTags.split(',');
        } else if (!projectData.projectTags) {
          projectData.projectTags = [];
        }
        
        this.form = projectData;
        this.dialogVisible = true;
      })
    },
    /** 详情按钮操作 */
    async handleDetail(row) {
      // 确保标签选项已加载
      if (this.tagOptions.length === 0) {
        await this.getTagOptions();
      }
      
      getProjectDetail(row.id).then(res => {
        // 处理项目详情数据，确保标签显示友好
        const detailData = { ...res.data };
        
        // 如果标签是字符串，则保持原样，用于显示
        if (typeof detailData.projectTags === 'string' && detailData.projectTags) {
          // 可以在这里处理标签的显示格式，如果需要的话
        } else if (Array.isArray(detailData.projectTags)) {
          // 如果是数组，转为逗号分隔的字符串
          detailData.projectTags = detailData.projectTags.join(',');
        }
        
        this.detail = detailData;
        this.detailVisible = true;
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$confirm('是否确认删除该项目?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteProject(row.id).then(() => {
          this.getList()
        })
      }).catch(() => {})
    },
    /** 表单提交 */
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          // 处理项目标签，将数组转为逗号分隔的字符串
          const formData = { ...this.form };
          if (Array.isArray(formData.projectTags)) {
            formData.projectTags = formData.projectTags.join(',');
          }
          
          // 如果表单有ID则为编辑操作，否则为新增操作
          const isEdit = formData.id !== undefined;
          const method = isEdit ? updateProject(formData.id, formData) : addProject(formData);
          
          method.then(() => {
            this.dialogVisible = false;
            this.getList();
          });
        }
      });
    },
    /** 图片上传成功处理 */
    handleImageSuccess(res, file) {
      // 假设后端返回了图片URL
      this.form.projectImage = res.data
    },
    /** 图片上传前处理 */
    beforeImageUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG/PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    /** 分页大小改变 */
    handleSizeChange(val) {
      this.queryParams.pageSize = val
      this.getList()
    },
    /** 分页页码改变 */
    handleCurrentChange(val) {
      this.queryParams.pageNum = val
      this.getList()
    },
    /** 获取统计数据 */
    async fetchStatistics() {
      try {
        const res = await getAllProjectStatistics()
        this.statistics = {
          managementArea: res.data.manageArea || '0',
          availableArea: res.data.availableArea || '0',
          availableRatio: res.data.availableArea && res.data.manageArea 
            ? ((res.data.availableArea / res.data.manageArea) * 100).toFixed(2) 
            : '0',
          totalRooms: res.data.totalRooms || '0',
          availableRooms: res.data.availableRooms || '0'
        }
      } catch (error) {
        console.error('获取统计数据失败:', error)
        // 使用默认数据
        this.statistics = {
          managementArea: '37,234.52',
          availableArea: '20,916.2',
          availableRatio: '56.17',
          totalRooms: '637',
          availableRooms: '51'
        }
      }
    },
    /** 对话框打开时处理 */
    onDialogOpen() {
      // 只重置校验状态，不清空表单数据
      this.$nextTick(() => {
        this.$refs['form'] && this.$refs['form'].clearValidate()
      })
    },
    /** 对话框关闭时处理 */
    onDialogClose() {
      // 重置表单和校验状态
      this.form = {}
      this.$refs['form'].clearValidate()
    },
    handleRegionChange(regionText) {
      
      this.queryParams.region = regionText
    }
  }
}
</script>

<style lang="scss" scoped>
.statistics-row {
  margin-bottom: 20px;
  
  .stat-card {
    background: #fff;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    text-align: center;

    .stat-label {
      color: #606266;
      font-size: 14px;
      margin-bottom: 10px;
    }

    .stat-value {
      color: #303133;
      font-size: 20px;
      font-weight: bold;
    }
  }
}

/* 确保下拉框和输入框宽度一致 */
::v-deep .el-form-item {
  .el-select {
    width: 100%;
  }
  .el-input {
    width: 100%;
  }
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.pagination {
    margin-top: 15px;
    text-align: right;
  }
</style> 