<template>
  <div>
    <div class="bigBox">
      <MOSTY.FromPage :title="props.title" @closeDialog="CloseEvent">
        <template #content>
          <MOSTY.Assort :title="'基本信息'" />
          <div style="
                display: flex;
                justify-content: center;
                width: calc(100%-40px);
                margin-left: 20px;
                margin-top: 20px;
              ">
            <el-form ref="ruleFormRef" :model="Fromdata" :rules="rules" :disabled="!props.saveBtnShow"
              label-width="120px" class="demo-ruleForm" status-icon :inline="true" label-position="right">
              <el-form-item label="文件名称：" prop="filename" style="width: 100%">
                <el-input v-model="Fromdata.filename" placeholder="不能超过100个字" type="textarea" autosize show-word-limit
                  maxlength="100"></el-input>
              </el-form-item>
              <el-form-item label="文件编号：" prop="shortid" style="width: 100%">
                <el-input v-model="Fromdata.shortid" placeholder="不能超过100个字" type="textarea" autosize show-word-limit
                  maxlength="100" style="width: 100%"></el-input>
              </el-form-item>
              <el-form-item label="引用文件：" prop="quotefile" style="width: 100%">
                <el-input v-model="Fromdata.quotefile" placeholder="不能超过100个字" type="textarea" autosize show-word-limit
                  maxlength="100" style="width: 100%"></el-input>
              </el-form-item>
              <el-form-item label="归口部门：" prop="depid">
                <MOSTY.Department :searchType="'04'" placeholder="请选择部门" clearable v-model="Fromdata.depid"
                  @depitem="depitem" style="width: 310px" />
              </el-form-item>
              <el-form-item label="实施时间：" prop="implementtime">
                <el-date-picker v-model="Fromdata.implementtime" type="date" placeholder="实施时间" format="YYYY/MM/DD"
                  value-format="YYYY-MM-DD" style="width: 310px" />
              </el-form-item>
              <el-form-item label="修订时间：" prop="revisetime">
                <el-date-picker v-model="Fromdata.revisetime" type="date" placeholder="修订时间" format="YYYY/MM/DD"
                  value-format="YYYY-MM-DD" style="width: 310px" />
              </el-form-item>
              <el-form-item label="文件描述：" style="width: 100%">
                <el-input v-model="Fromdata.filedescribe" type="textarea" show-word-limit maxlength="200" />
              </el-form-item>
              <el-form-item label="制度修订情况：" style="width: 100%">
                <el-input v-model="Fromdata.revise" type="textarea" show-word-limit maxlength="500" />
              </el-form-item>
              <el-form-item label="备注：" style="width: 100%">
                <el-input v-model="Fromdata.bz" type="textarea" show-word-limit maxlength="500" />
              </el-form-item>
              <el-form-item label="附件上传：" style="display: flex; width: 100%">
                <MOSTY.Upload :isAutoWidth="true" v-model="Fromdata.fileid" :limit="1" :delrow="delrow"
                  :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'xls', 'xlsx', 'wps']" :disabled="!props.saveBtnShow"
                  :isEdit="fileEdit" :ShowfileList="true" @filehandleChange="changeFile" :isImg="false"
                  :showinput="true" :nopicer="true" />
              </el-form-item>
            </el-form>
          </div>
        </template>
        <template #footer>

          <el-button type="primary" v-loading='loading' @click="save(ruleFormRef)" v-if="props.saveBtnShow">
            <el-icon>
              <DocumentChecked />
            </el-icon>
            <span>保存</span>
          </el-button>
          <el-button type="primary" @click="CloseEvent">
            <el-icon>
              <DocumentDelete />
            </el-icon>
            <span>关闭</span>
          </el-button>
        </template>
      </MOSTY.FromPage>
    </div>
  </div>
</template>

<script setup>
// 引入
import { reactive, onMounted, ref, defineProps, watch, getCurrentInstance } from "vue";
import { filterYear } from "@/utils/auth.js";
import { ElMessage } from "element-plus";
import { getApi, deleteApi, putApi, postApi } from "@/api/tobAcco_api.js";
import * as MOSTY from "@/components/MyComponents/index";
import { createAndClickLink } from "@/utils/tools.js";
const { proxy } = getCurrentInstance();
const emits = defineEmits(["close"]);
//规则校验
const rules = reactive({
  filename: [{ required: true, message: "文件名称不能为空", trigger: "blur" }],
  shortid: [{ required: true, message: "文件编号不能为空", trigger: "blur" }],
  quotefile: [{ required: true, message: "引用文件不能为空", trigger: "blur" }],
  depid: [{ required: true, message: "归口部门不能为空", trigger: "blur" }],
  implementtime: [
    { required: true, message: "实施时间不能为空", trigger: "blur" }
  ],
  revisetime: [
    { required: true, message: "修订时间不能为空", trigger: "blur" }
  ]
});
const props = defineProps({
  saveBtnShow: {
    default: true,
    type: Boolean
  },
  title: String,
  //id
  id: {
    default: null,
    type: String
  },
  gzzdType: {
    default: '',
    type: String
  },
});
// 数据
const ShowfileList = ref(true); //是否展示文件列表
const fjtableData = ref([]); //新增文件表格数据
const key = ref(1)
const ruleFormRef = ref();
const Fromdata = ref({});
const loading = ref(false); //新增保存按钮截流
watch(
  () => props.id,
  (val) => {
    if (val) {
      getxqData(val);
    }
  },
  { deep: true, immediate: true }
);
watch(
  () => props.title,
  (val) => {
    if (val == "规章制度新增" || val === "规章制度修改") {
      Fromdata.value.type = "1";
    }
    if (val == "操作规程新增" || val === "操作规程修改") {
      Fromdata.value.type = "2";
    }
  },
  { deep: true, immediate: true }
);
//获取详情
function getxqData(id) {
  getApi({}, `/mosty-jcgl/gzzdlibrary/getGzzdlibraryById/${id}`).then((res) => {
    Fromdata.value = res;
    ShowfileList.value = false;
  }
  );

}

const save = async (ruleFormRef) => {
  if (!ruleFormRef) return;
  await ruleFormRef.validate((valid) => {
    if (valid) {
      loading.value = true;
      Fromdata.value.fileid = Fromdata.value.fileid ? Fromdata.value.fileid.toString() : null;
      Fromdata.value.gzzdType = props.gzzdType
      postApi(Fromdata.value, "/mosty-jcgl/gzzdlibrary/updateOrAdd").then((res) => {

        if (!Fromdata.value.id) {
          ElMessage.success("新增成功");
        } else {
          ElMessage.success("修改成功");
        }
        emits("close");
      }).finally(() => {
        loading.value = false;
      })
    } else {
      ElMessage.error("请输入必填项!");
    }
  });
};
//获取部门信息
const depitem = (val) => {
  Fromdata.value.depid = val.orgCode;
  Fromdata.value.depname = val.orgName;
};
//关闭
const CloseEvent = () => {
  if (props.saveBtnShow) {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        // 关闭上一次的表单校验
        ruleFormRef.value.clearValidate();
        emits("close");
      })
      .catch(() => {
        // catch error
      })
  } else {
    // 关闭上一次的表单校验
    ruleFormRef.value.clearValidate();
    emits("close");
  }

};

onMounted(() => {
});



</script>

<style lang="scss" scoped>
.el-form {
  width: 80%;
  display: flex !important;
  justify-content: start;
  flex-wrap: wrap;
  margin: auto;
}

.bigBox {
  display: flex;

  .right {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
  }


}



::v-deep .el-collapse {
  padding: 20px !important;
}
</style>