<template>
  <div class="add-project-container">
    <div class="add-project-content" v-loading="loading">
      <routerBack />

      <div class="tabs-content">
        <div class="project-tab-content">
          <div class="tab-content">
            <el-form :model="formData" label-width="150" :disabled="isPreview">
              <el-collapse v-model="activeCollapse">
                <!-- 步骤1:合同基本信息 -->
                <el-collapse-item title="合同基本信息" name="合同基本信息">
                  <el-row :gutter="20">
                    <el-col :span="12">
                      <el-form-item label="登记编号">
                        <el-input
                          v-model="formData.djbh"
                          placeholder="输入登记编号"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="登记日期">
                        <el-date-picker
                          v-model="formData.djrq"
                          type="date"
                          placeholder="选择登记日期"
                          format="YYYY-MM-DD"
                          value-format="YYYY-MM-DD"
                        />
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <el-row :gutter="20">
                    <el-col :span="24">
                      <el-form-item label="项目名称">
                        <el-input
                          v-model="formData.xmmc"
                          placeholder="输入项目名称"
                        />
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <el-row :gutter="20">
                    <el-col :span="24">
                      <el-form-item label="抵扣类型">
                        <el-radio-group v-model="formData.kklx">
                          <el-radio label="工程款">工程款</el-radio>
                          <el-radio label="材料款">材料款</el-radio>
                          <el-radio label="其他">其他</el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <el-row :gutter="20">
                    <el-col :span="8">
                      <el-form-item label="合同金额">
                        <el-input
                          v-model="formData.htje"
                          placeholder="输入合同金额"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="抵扣比例">
                        <el-input
                          v-model="formData.dkbl"
                          placeholder="输入抵扣比例"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="抵扣金额">
                        <el-input
                          v-model="formData.dkje"
                          placeholder="输入抵扣金额"
                        />
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <el-row :gutter="20">
                    <el-col :span="24">
                      <el-form-item label="合同编号">
                        <el-input
                          v-model="formData.htbh"
                          placeholder="输入合同编号"
                        />
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <el-row :gutter="20">
                    <el-col :span="24">
                      <el-form-item label="合同扫描件">
                        <FileUploader
                          v-model="formData.htsmj"
                          :disabled="isPreview"
                        />
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <el-row :gutter="20">
                    <el-col :span="12">
                      <el-form-item label="工抵签订时间">
                        <el-date-picker
                          v-model="formData.gdqdsj"
                          type="date"
                          placeholder="选择工抵签订时间"
                          format="YYYY-MM-DD"
                          value-format="YYYY-MM-DD"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="经办人">
                        <el-input
                          v-model="formData.jbr"
                          placeholder="输入经办人"
                        />
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-collapse-item>

                <!-- 步骤2:合同主体信息 -->
                <el-collapse-item title="合同主体信息" name="合同主体信息">
                  <el-row :gutter="20">
                    <el-col :span="8">
                      <el-form-item label="甲方名称">
                        <el-input
                          v-model="formData.jfmc"
                          placeholder="输入甲方名称"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="甲方联系人">
                        <el-input
                          v-model="formData.jflxr"
                          placeholder="输入甲方联系人"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="甲方联系方式">
                        <el-input
                          v-model="formData.jflxfs"
                          placeholder="输入甲方联系方式"
                        />
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <el-row :gutter="20">
                    <el-col :span="8">
                      <el-form-item label="乙方名称">
                        <el-input
                          v-model="formData.yfmc"
                          placeholder="输入乙方名称"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="乙方联系人">
                        <el-input
                          v-model="formData.yflxr"
                          placeholder="输入乙方联系人"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="乙方联系方式">
                        <el-input
                          v-model="formData.yflxfs"
                          placeholder="输入乙方联系方式"
                        />
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <el-row :gutter="20">
                    <el-col :span="8">
                      <el-form-item label="丙方名称">
                        <el-input
                          v-model="formData.bfmc"
                          placeholder="输入丙方名称"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="丙方联系人">
                        <el-input
                          v-model="formData.bflxr"
                          placeholder="输入丙方联系人"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="丙方联系方式">
                        <el-input
                          v-model="formData.bflxfs"
                          placeholder="输入丙方联系方式"
                        />
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-collapse-item>

                <!-- 步骤3:房源信息 -->
                <el-collapse-item title="房源信息" name="房源信息">
                  <el-row :gutter="20">
                    <el-col :span="8">
                      <el-form-item label="项目名称">
                        <el-input
                          v-model="formData.fy_xmmc"
                          placeholder="输入项目名称"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="项目地址">
                        <el-input
                          v-model="formData.xmdz"
                          placeholder="输入项目地址"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="项目公司">
                        <el-input
                          v-model="formData.xmgs"
                          placeholder="输入项目公司"
                        />
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <el-row :gutter="20">
                    <el-col :span="24">
                      <el-form-item label="项目状态">
                        <el-radio-group v-model="formData.xmzt">
                          <el-radio label="在建">在建</el-radio>
                          <el-radio label="已竣工">已竣工</el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <el-row :gutter="20">
                    <el-col :span="24">
                      <el-form-item label="楼栋信息">
                        <el-input
                          v-model="formData.ldxx"
                          placeholder="输入楼栋信息"
                        />
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <el-row :gutter="20">
                    <el-col :span="24">
                      <el-form-item label="房源类型">
                        <el-radio-group v-model="formData.fylx">
                          <el-radio label="住宅">住宅</el-radio>
                          <el-radio label="公寓">公寓</el-radio>
                          <el-radio label="商铺">商铺</el-radio>
                          <el-radio label="车位">车位</el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <el-row :gutter="20">
                    <el-col :span="8">
                      <el-form-item label="建筑面积(㎡)">
                        <el-input
                          v-model="formData.jzmj"
                          placeholder="输入建筑面积(㎡)"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="单价(元/㎡)">
                        <el-input
                          v-model="formData.dj"
                          placeholder="输入单价(元/㎡)"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="总金额(元)">
                        <el-input
                          v-model="formData.zje"
                          placeholder="输入总金额(元)"
                        />
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-collapse-item>

                <!-- 步骤4:相关附件 -->
                <el-collapse-item title="相关附件" name="相关附件">
                  <el-row :gutter="20">
                    <el-col :span="24">
                      <el-form-item label="附件上传">
                        <FileUploader
                          v-model="formData.fjsc"
                          :disabled="isPreview"
                        />
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-collapse-item>
              </el-collapse>
            </el-form>
          </div>
        </div>
      </div>
      <div class="add-project-header">
        <div class="header-left"></div>
        <div class="header-right">
          <el-button type="default" @click="backClick">返回</el-button>
          <template v-if="!loading && !isPreview">
            <el-button type="primary" @click="saveClick">保存</el-button>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import routerBack from "@/components/common/routerBack.vue";
import FileUploader from "@/components/FileUploader/index.vue";

const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance();

// 折叠面板默认展开项
const activeCollapse = ref([
  "合同基本信息",
  "合同主体信息",
  "房源信息",
  "相关附件",
]);

// 表单数据
const formData = reactive({});

// 加载状态
const loading = ref(false);
// 是否预览模式
const isPreview = ref(!!route.query.isPreview);
// 当前编辑的记录ID
const recordId = ref(route.query.id || "");

// 获取单条记录详情(编辑/预览)
const getRecordDetail = () => {
  if (!recordId.value) return;

  loading.value = true;
  // TODO: 替换为实际的后端接口
  // proxy.$post({
  //   url: "/api/workForHousing/getDetail",
  //   data: { id: recordId.value },
  //   callback: (data) => {
  //     loading.value = false;
  //     Object.assign(formData, data);
  //   },
  // });

  // 临时模拟数据
  setTimeout(() => {
    loading.value = false;
    // 编辑时回显数据
  }, 500);
};

// 返回按钮
const backClick = () => {
  router.back(-1);
};

// 保存/提交表单
const saveClick = () => {
  // TODO: 添加表单验证

  loading.value = true;
  // 区分新增/编辑
  // TODO: 替换为实际的后端接口
  // const url = recordId.value
  //   ? "/api/workForHousing/update"
  //   : "/api/workForHousing/create";

  // TODO: 替换为实际的后端接口调用
  // proxy.$post({
  //   url: url,
  //   data: formData,
  //   callback: (res) => {
  //     loading.value = false;
  //     ElMessage.success(recordId.value ? "编辑成功" : "新增成功");
  //     router.back(-1);
  //   },
  // });

  // 临时模拟保存
  setTimeout(() => {
    loading.value = false;
    ElMessage.success(recordId.value ? "编辑成功" : "新增成功");
    router.back(-1);
  }, 500);
};

// 页面初始化
onMounted(() => {
  // 如果有ID则加载详情
  if (recordId.value) {
    getRecordDetail();
  }
});
</script>

<style scoped lang="less">
.tab-handle {
  margin-bottom: 10px;
}
</style>
