<template>
  <div>
    <PageTitle :title="pageTitle">
      <el-button type="primary" @click="submit(ruleFormRef)">保存</el-button>
      <el-button @click="black">关闭</el-button>
    </PageTitle>
    <div class="Box">
      <el-collapse v-model="activeNames">
        <el-collapse-item title="应急预案修订计划" name="1">
          <div style="
                  display: flex;
                  justify-content: center;
                  width: calc(100%-40px);
                  margin-left: 20px;
                ">
            <el-form ref="ruleFormRef" :model="data.formData" :rules="rules" label-width="120px" class="demo-ruleForm"
              status-icon :inline="true" label-position="top">
              <el-row :gutter="80">
                <el-col :span="18">
                  <el-form-item label="预案名称">
                    <el-input v-model="data.formData.yaName" placeholder="请输入预案名称" style="width: 100%"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="18">
                  <el-form-item label="年份" prop="nf">
                    <el-date-picker v-model="data.formData.nf" type="year" placeholder="请选择修订年份" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="修订开始时间" prop="xdkssj">
                    <el-date-picker v-model="data.formData.xdkssj" type="date" placeholder="请选择修订开始时间"
                      style="width: 100%" value-format="YYYY-MM-DD" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="修订结束时间" prop="xdjssj">
                    <el-date-picker v-model="data.formData.xdjssj" type="date" placeholder="请选择修订结束时间"
                      style="width: 100%" value-format="YYYY-MM-DD" />
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="修订依据">
                    <el-input v-model="data.formData.xdyj" type="textarea" :rows="6" show-word-limit maxlength="200" />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </el-collapse-item>
        <el-collapse-item title="附件" name="2">
          <div style="
              margin-top: 10px;
              margin-left: 100px;
              width: calc(100% - 650px);
            ">
            <el-form ref="ruleFormRef" :model="data.formData" :rules="rules" label-width="120px" class="demo-ruleForm"
              status-icon :inline="true" label-position="top">
              <el-row :gutter="80">
                <el-col :span="18">
                  <el-form-item label="附件">
                    <el-input v-model="data.formData.fj" placeholder="请选择附件" style="width: 100%"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script setup>
import {
  reactive,
  ref,
  watchEffect,
  getCurrentInstance,
  watch,
  nextTick
} from "vue";
import PageTitle from "@/components/PageTitle/PageTitle.vue";
import * as rule from "@/utils/rules.js";
const { proxy } = getCurrentInstance();

const props = defineProps({
  editObj: {
    type: Object,
    default: () => { }
  }
});
const activeNames = ref(["1"]);
const emit = defineEmits("changePage");
const ruleFormRef = ref();
let pageTitle = ref("应急预案编制详情");
const data = reactive({
  formData: {
    yaName: "", //修订预案名称
    xdyj: "", //修订依据
    nf: "", //年份
    xdkssj: "", //修订开始时间
    xdjssj: "", //修订结束时间
    fujian: "" //附件
  }
});

const rules = reactive({
  // yalx: [{ required: true, message: "请选择类别", trigger: "change" }],
  // yt: [{ required: true, message: "请选择用途", trigger: "change" }],
  // yaName: [
  //   {
  //     required: true,
  //     message: "请输入预案名称",
  //     trigger: "blur"
  //   }
  // ],
  // bzxzmc: [
  //   {
  //     required: true,
  //     message: "请输入名称",
  //     trigger: "input"
  //   }
  // ]
});

// 保存
const submit = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      // let attr = JSON.parse(JSON.stringify(data.formData));
      // const fnName = pageTitle == "修改" ? "userUpdate" : "userSave";
      // fns[fnName](attr).then((res) => {
      //   const message = pageTitle == "修改" ? "修改成功" : "添加成功";
      //   proxy.$message({
      //     message,
      //     type: "success"
      //   });
      //   emit("changePage", "Main");
      // });
    }
  });
};

const black = () => {
  proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
    .then(() => {
      emit("changePage", "Main");
    })
    .catch(() => {
      // catch error
    })

};

watchEffect(() => {
  if (props.editObj) {
    data.formData = JSON.parse(JSON.stringify(props.editObj));
  }
});
</script>

<style lang="scss" scoped>
::v-deep .el-cascader,
::v-deep .el-select {
  width: 100%;
}

.Box {
  border: 1px solid var(--el-color-primary);
  margin-left: 150px;
  width: calc(100% - 300px);
  color: black;
  font-size: 20px;
}
</style>