<template>
  <div class="app-container">
    <el-card class="add-project-card">
      <template #header>
        <span class="card-title">新建项目</span>
      </template>

      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px" style="max-width: 600px">
        <el-form-item label="项目类型" prop="zggcPrarms">
          <el-select v-model="form.zggcPrarms" placeholder="请选择项目类型" style="width: 100%">
            <el-option label="直管工程" value="1" />
            <el-option label="重点工程" value="2" />
            <el-option label="规章制度" value="3" />
          </el-select>
        </el-form-item>

        <el-form-item label="所属文件夹" prop="folderId">
          <el-tree-select
            v-model="form.folderId"
            :data="folderOptions"
            :props="{ value: 'id', label: 'name', children: 'children' }"
            value-key="id"
            placeholder="请选择父级文件夹（项目存放位置）"
            check-strictly
            style="width: 100%"
          />
        </el-form-item>

        <el-form-item label="项目名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入项目名称" maxlength="24" show-word-limit />
        </el-form-item>

        <el-form-item label="项目描述" prop="note">
          <el-input v-model="form.note" type="textarea" placeholder="请输入项目描述" maxlength="200" show-word-limit :rows="3" />
        </el-form-item>

        <el-form-item v-if="form.zggcPrarms === '1'" label="计划进度" prop="planValue">
          <el-input-number v-model="form.planValue" :min="0" :max="100" controls-position="right" style="width: 200px" />
          <span style="margin-left: 8px; color: #999">%</span>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" :loading="submitting" @click="submitForm">立即提交</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup name="AddProject">
import { addProject } from "@/api/pms/addProject"
import { folderList } from "@/api/efinder/finder"

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

const submitting = ref(false)
const folderOptions = ref([])

const data = reactive({
  form: {
    zggcPrarms: "",
    folderId: undefined,
    name: "",
    note: "",
    planValue: 0
  },
  rules: {
    zggcPrarms: [{ required: true, message: "请选择项目类型", trigger: "change" }],
    folderId: [{ required: true, message: "请选择所属文件夹", trigger: "change" }],
    name: [
      { required: true, message: "项目名称不能为空", trigger: "blur" },
      { validator: (rule, value, callback) => {
        if (data.form.zggcPrarms === "1" && value && value.length > 12) {
          callback(new Error("直管工程项目名称最长为12个汉字"))
        } else {
          callback()
        }
      }, trigger: "blur" }
    ]
  }
})

const { form, rules } = toRefs(data)

function initPage() {
  // 从 URL 参数获取预设值
  if (route.query.folderId) {
    form.value.folderId = Number(route.query.folderId)
  }
  if (route.query.zggcPrarms) {
    form.value.zggcPrarms = route.query.zggcPrarms
  }
  loadFolderTree()
}

function loadFolderTree() {
  folderList({ pageSize: 999 }).then(response => {
    const list = response.rows || response.data || []
    folderOptions.value = proxy.handleTree(list, "pid")
  })
}

function submitForm() {
  proxy.$refs["formRef"].validate(valid => {
    if (valid) {
      submitting.value = true
      const params = {
        folderId: form.value.folderId,
        name: form.value.name,
        note: form.value.note,
        zggcPrarms: form.value.zggcPrarms,
        planValues: form.value.zggcPrarms === "1" ? String(form.value.planValue) : ""
      }
      addProject(params).then(() => {
        proxy.$modal.msgSuccess("新建成功")
        submitting.value = false
        router.back()
      }).catch(() => {
        submitting.value = false
      })
    }
  })
}

function resetForm() {
  proxy.resetForm("formRef")
  form.value.planValue = 0
}

onMounted(() => {
  initPage()
})
</script>

<style lang="scss" scoped>
.add-project-card {
  max-width: 680px;
  margin: 0 auto;
}
.card-title {
  font-size: 16px;
  font-weight: 600;
}
</style>
