<template>
  <div class="add-project-container">
    <div class="add-project-content" v-loading="loading">
      <routerBack
        :show-save="!loading && !isPreview"
        :loading="loading"
        @save="saveClick"
      />

      <div class="tabs-content">
        <div class="project-tab-content">
          <div class="tab-content">
            <el-form :model="formData" label-width="100" :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.registrationNo"
                          placeholder="输入登记编号"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="登记日期">
                        <el-date-picker
                          v-model="formData.registrationDate"
                          type="date"
                          placeholder="选择登记日期"
                          format="YYYY-MM-DD"
                          value-format="YYYY-MM-DD"
                        />
                      </el-form-item>
                    </el-col>

                    <el-col :span="8">
                      <el-form-item label="项目信息" required>
                        <el-select
                          v-model="formData.projectId"
                          placeholder="请选择项目信息"
                          no-data-text="暂无数据"
                          @change="changeProject"
                        >
                          <el-option
                            v-for="item in projectList"
                            :key="item.id"
                            :label="item.projectName"
                            :value="item.id"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>

                    <el-col :span="8">
                      <el-form-item label="抵扣类型">
                        <el-radio-group v-model="formData.deductionType">
                          <el-radio label="工程款">工程款</el-radio>
                          <el-radio label="材料款">材料款</el-radio>
                          <el-radio label="其他">其他</el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="合同金额">
                        <el-input
                          v-model="formData.contractAmount"
                          placeholder="输入合同金额"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="抵扣比例">
                        <el-input
                          v-model="formData.deductionRate"
                          placeholder="输入抵扣比例"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="抵扣金额">
                        <el-input
                          v-model="formData.deductionAmount"
                          placeholder="输入抵扣金额"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="合同编号">
                        <el-input
                          v-model="formData.contractNo"
                          placeholder="输入合同编号"
                        />
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <el-row :gutter="20">
                    <el-col :span="24">
                      <el-form-item label="合同扫描件">
                        <FileUploader
                          v-model="formData.contractScanFiles"
                          :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.offsetSigningDate"
                          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.handlerName"
                          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.partyAName"
                          placeholder="输入甲方名称"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="甲方联系人">
                        <el-input
                          v-model="formData.partyAContact"
                          placeholder="输入甲方联系人"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="甲方联系方式">
                        <el-input
                          v-model="formData.partyAPhone"
                          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.partyBName"
                          placeholder="输入乙方名称"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="乙方联系人">
                        <el-input
                          v-model="formData.partyBContact"
                          placeholder="输入乙方联系人"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="乙方联系方式">
                        <el-input
                          v-model="formData.partyBPhone"
                          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.partyCName"
                          placeholder="输入丙方名称"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="丙方联系人">
                        <el-input
                          v-model="formData.partyCContact"
                          placeholder="输入丙联系人"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="丙方联系方式">
                        <el-input
                          v-model="formData.partyCPhone"
                          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.projectName"
                          placeholder="输入项目名称"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="项目地址">
                        <el-input
                          v-model="formData.projectAddress"
                          placeholder="输入项目地址"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="项目公司">
                        <el-input
                          v-model="formData.projectCompany"
                          placeholder="输入项目公司"
                        />
                      </el-form-item>
                    </el-col>

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

                    <el-col :span="8">
                      <el-form-item label="楼栋信息">
                        <el-input
                          v-model="formData.buildingInfo"
                          placeholder="输入楼栋信息"
                        />
                      </el-form-item>
                    </el-col>

                    <el-col :span="8">
                      <el-form-item label="房源类型">
                        <el-radio-group v-model="formData.propertyType">
                          <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.buildingArea"
                          placeholder="输入建筑面积(㎡)"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="单价(元/㎡)">
                        <el-input
                          v-model="formData.unitPrice"
                          placeholder="输入单价(元/㎡)"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="总金额(元)">
                        <el-input
                          v-model="formData.totalAmount"
                          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.attachments"
                          :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({
  projectId: "",
  projectName: "",
});

// 项目列表
const projectList = ref([]);

// 获取项目列表数据
const getProjectData = (params = {}) => {
  proxy.$post({
    url: "/api/project/listProject",
    data: {
      page: 1,
      pagesize: 1000,
      attributes: [],
      menuType: "xmjc",
      ...params,
    },
    callback: (data) => {
      projectList.value = data.rows || [];
    },
  });
};

// 选择项目同步名称
const changeProject = (val) => {
  const selectItem = projectList.value.find((item) => item.id === val);
  if (selectItem) formData.projectName = selectItem.projectName;
};

// 加载状态
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;
  proxy.$post({
    url: "/api/project/getGdf",
    data: { id: recordId.value },
    callback: (data) => {
      loading.value = false;
      Object.assign(formData, data);
    },
  });
};

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

// 保存/提交表单
const saveClick = () => {
  if (!formData.projectId) {
    ElMessage.warning("请选择项目信息");
    return;
  }

  loading.value = true;
  // 区分新增/编辑
  const url = recordId.value
    ? "/api/project/updateGdf"
    : "/api/project/createGdf";

  proxy.$post({
    url: url,
    data: formData,
    callback: () => {
      loading.value = false;
      ElMessage.success("保存成功");
    },
  });
};

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

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