<template>
  <div class="system-project-container">
    <el-dialog v-model="state.isShowDialog" width="769px" center>
      <template #title>
        <div style="font-size: large" v-drag="['.system-project-container .el-dialog', '.system-project-container .el-dialog__header']">{{title}}</div>
      </template>
      <el-form
          :model="state.ruleForm"
          :rules="state.ruleRules"
          ref="ruleFormRef"
          label-width="80px"
      >
        <el-form-item label="项目编号" prop="id">
          <el-input v-model="state.ruleForm.id" placeholder="请输入项目编号" />
        </el-form-item>
        <el-form-item label="项目模式" prop="moshi">
          <el-input v-model="state.ruleForm.moshi" placeholder="请输入项目模式" />
        </el-form-item>
        <el-form-item label="研发状态" prop="status">
          <el-input v-model="state.ruleForm.status" placeholder="请输入研发状态" />
        </el-form-item>
        <el-form-item label="开始时间" prop="startDate">
          <el-date-picker clearable style="width: 200px"
                          v-model="state.ruleForm.startDate"
                          type="date" value-format="YYYY-MM-DD"
                          placeholder="选择开始时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="endDate">
          <el-date-picker clearable style="width: 200px"
                          v-model="state.ruleForm.endDate"
                          type="date" value-format="YYYY-MM-DD"
                          placeholder="选择结束时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="伙伴名称" prop="partnerName">
          <el-input v-model="state.ruleForm.partnerName" placeholder="请输入伙伴名称" />
        </el-form-item>
        <el-form-item label="项目经理编号" prop="managerId">
          <el-input v-model="state.ruleForm.managerId" placeholder="请输入项目经理编号" />
        </el-form-item>
        <el-form-item label="立项决议书（附件）" prop="resolutionFile">
          <el-input v-model="state.ruleForm.resolutionFile" placeholder="请输入立项决议书（附件）" />
        </el-form-item>
        <el-form-item label="项目预算" prop="budget">
          <el-input v-model="state.ruleForm.budget" placeholder="请输入项目预算" />
        </el-form-item>
        <el-form-item label="项目名称" prop="name">
          <el-input v-model="state.ruleForm.name" placeholder="请输入项目名称" />
        </el-form-item>
        <el-form-item label="津贴金额" prop="subsidy">
          <el-input v-model="state.ruleForm.subsidy" placeholder="请输入津贴金额" />
        </el-form-item>
        <el-form-item label="研究内容" prop="content">
          <el-input v-model="state.ruleForm.content" placeholder="请输入研究内容" />
        </el-form-item>
        <el-form-item label="创建用户" prop="proprietorId">
          <el-input v-model="state.ruleForm.proprietorId" placeholder="请输入创建用户" />
        </el-form-item>
        <el-form-item label="立项日期" prop="determineDate">
          <el-date-picker clearable style="width: 200px"
                          v-model="state.ruleForm.determineDate"
                          type="date" value-format="YYYY-MM-DD"
                          placeholder="选择立项日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="技术领域" prop="industry">
          <el-input v-model="state.ruleForm.industry" placeholder="请输入技术领域" />
        </el-form-item>
        <el-form-item label="项目目标" prop="target">
          <el-input v-model="state.ruleForm.target" placeholder="请输入项目目标" />
        </el-form-item>
        <el-form-item label="结项日期" prop="harvestDate">
          <el-date-picker clearable style="width: 200px"
                          v-model="state.ruleForm.harvestDate"
                          type="date" value-format="YYYY-MM-DD"
                          placeholder="选择结项日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="执行日期" prop="executeDate">
          <el-date-picker clearable style="width: 200px"
                          v-model="state.ruleForm.executeDate"
                          type="date" value-format="YYYY-MM-DD"
                          placeholder="选择执行日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="项目来源" prop="source">
          <el-input v-model="state.ruleForm.source" placeholder="请输入项目来源" />
        </el-form-item>
        <el-form-item label="项目经理名字" prop="managerName">
          <el-input v-model="state.ruleForm.managerName" placeholder="请输入项目经理名字" />
        </el-form-item>
        <el-form-item label="伙伴类型" prop="partnerType">
          <el-input v-model="state.ruleForm.partnerType" placeholder="请输入伙伴类型" />
        </el-form-item>
        <el-form-item label="项目预期" prop="expect">
          <el-input v-model="state.ruleForm.expect" placeholder="请输入项目预期" />
        </el-form-item>
        <el-form-item label="项目类型" prop="type">
          <el-input v-model="state.ruleForm.type" placeholder="请输入项目类型" />
        </el-form-item>
        <el-form-item label="用户名称" prop="proprietorName">
          <el-input v-model="state.ruleForm.proprietorName" placeholder="请输入用户名称" />
        </el-form-item>
        <el-form-item label="项目计划书（附件）" prop="planFile">
          <el-input v-model="state.ruleForm.planFile" placeholder="请输入项目计划书（附件）" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="onCancel">取 消</el-button>
          <el-button type="primary" @click="onSubmit" :loading="state.loading">编 辑</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup name="editProject">
import { reactive, ref, unref, getCurrentInstance } from "vue";
import { get,add, update } from "@/api/public/basic";
import { ElMessage } from "element-plus";

const props = defineProps({
  title: {
    type: String,
    default: () => "",
  },
})

const { proxy } = getCurrentInstance() as any;
const ruleFormRef = ref<HTMLElement | null>(null);
const state = reactive({
  // 是否显示弹出层
  isShowDialog: false,
  loading: false,
  ruleForm: {idx: undefined,id: undefined,moshi: undefined,status: undefined,startDate: undefined,endDate: undefined,partnerName: undefined,managerId: undefined,resolutionFile: undefined,budget: undefined,name: undefined,subsidy: undefined,content: undefined,proprietorId: undefined,determineDate: undefined,industry: undefined,target: undefined,harvestDate: undefined,executeDate: undefined,source: undefined,updateTime: undefined,managerName: undefined,partnerType: undefined,expect: undefined,type: undefined,createTime: undefined,proprietorName: undefined,planFile: undefined,deleteTime: undefined,completion: undefined,relationship: undefined,
  },
  // 表单校验
  ruleRules: {
    id: [
      { required: true, message: "项目编号不能为空", trigger: "blur" }
    ],
    createTime: [
      { required: true, message: "创建时间不能为空", trigger: "blur" }
    ],
  },
});
// 打开弹窗
const openDialog = (row: any) => {
  get(row.idx, 'i1XuaQDK9zw').then((response) => {
    state.ruleForm = response.data?.length ? response.data[0] : {};
  });

  state.isShowDialog = true;
  state.loading = false;
}

// 关闭弹窗
const closeDialog = (row?: object) => {
  proxy.mittBus.emit("onEditProjectModule", row);
  state.isShowDialog = false;
};
// 取消
const onCancel = () => {
  closeDialog();
};

// 保存
const onSubmit = () => {
  const formWrap = unref(ruleFormRef) as any;
  if (!formWrap) return;
  formWrap.validate((valid: boolean) => {
    if (valid) {
      state.loading = true;
      if (state.ruleForm?.flowId) {
        update(state.ruleForm.idx, state.ruleForm, 'i1XuaQDK9zw').then((response) => {
          ElMessage.success('修改成功');
          state.loading = false;
          closeDialog(state.ruleForm); // 关闭弹窗
        });
      } else {
        //state.ruleForm.createTime=new Date().toISOString().split('T')[0];
        add(state.ruleForm, 'i1XuaQDK9zw').then((response) => {
          ElMessage.success('新增成功');
          closeDialog(state.ruleForm); // 关闭弹窗
        });
      }
    }
  });
};

defineExpose({
  openDialog,
});
</script>
