<template>
  <div>
    <div class="bigBox">
      <MOSTY.FromPage :title="props.title" @closeDialog="closeDialog">
        <template #content>
          <MOSTY.Assort :title="'基础信息'" />
          <div class='fromboxs'>
            <el-form ref="ruleFormRef" :model="formData" :rules="rules" label-width="160px" style="display: block;"
              :disabled="isShow">
              <el-form-item label="安全方针：" prop="policy">
                <el-input v-model="formData.policy" placeholder="请输入安全方针" />
              </el-form-item>
              <el-form-item label="安全滚动标语：" prop="slogan">
                <el-input v-model="formData.slogan" type="textarea" :autosize="{ minRows: 3, maxRows: 10 }" />
              </el-form-item>
              <el-form-item label="更新时间：" prop="slogan" v-if="props.isHistory">
                <el-input v-model="formData.updateTime" />
              </el-form-item>
              <el-form-item label="评审记录附件：">
                <MOSTY.Upload :isAutoWidth="true" :nopicer="true" :isImg="false" :ShowfileList="true"
                  :placeholder="'请上传pdf,ofd, doc,docx, png, jpg,wps格式文件'"
                  :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'png', 'jpg', 'wps']" v-model="formData.files"
                  :showinput="true" />
              </el-form-item>
            </el-form>
          </div>
        </template>
        <template #footer>

          <el-button type="primary" @click="handleSave(ruleFormRef, '01')" v-if="!isShow">
            <el-icon>
              <DocumentChecked />
            </el-icon>
            <span>保存</span>
          </el-button>
          <el-button type="primary" @click="handleSave(ruleFormRef, '02')" v-if="!isShow">
            <el-icon>
              <DocumentChecked />
            </el-icon>
            <span>发布</span>
          </el-button>
          <el-button @click="closeDialog" type="primary">
            <el-icon>
              <DocumentDelete />
            </el-icon>
            <span>关闭</span>
          </el-button>
        </template>
      </MOSTY.FromPage>
    </div>
  </div>
</template>

<script setup>
// 引入
import { reactive, onMounted, ref, defineProps, getCurrentInstance, watch } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { postApi } from "@/api/tobAcco_api.js";
import * as MOSTY from "@/components/MyComponents/index";
const { proxy } = getCurrentInstance();
const emits = defineEmits(["close"]);
const props = defineProps({
  isShow: {
    type: Boolean,
    default: true
  },
  obj: Object,
  title: String,
  isHistory: Boolean
});
const ruleFormRef = ref();
const formData = ref({});
const rules = reactive({
  policy: [{ required: true, message: "请输入安全方针", trigger: "blur" }],
  slogan: [{ required: true, message: "请输入安全滚动标语", trigger: "blur" }]
})

// 初始化
onMounted(() => {
});
watch(
  () => props.obj,
  (val) => {
    if (val) {
      formData.value = val
    }
  },
  { deep: true, immediate: true }
);
//关闭综合配置表
const closeDialog = () => {
  if (!props.isShow) {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        // 关闭上一次的表单校验
        ruleFormRef.value.clearValidate();
        emits("close");
      })
      .catch(() => {
        // catch error
      })
  } else {
    // 关闭上一次的表单校验
    ruleFormRef.value.clearValidate();
    emits("close");
  }

};

//保存
const handleSave = async (formEl, state) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    formData.value.files = formData.value.files ? formData.value.files.toString() : null
    formData.value.state = state
    if (valid) {
      postApi(formData.value, "/mosty-jcgl/safetyPolicy/updatePolicyAndSlogan").then(() => {
        ElMessage.success("更新成功");
        emits("close");
      })
    } else {
      ElMessage.warning("请输入必填项!");
    }
  });
};
</script>

<style lang="scss" scoped>
.bigBox {
  display: black;
}

.Box {
  margin: 10px auto;
  width: 65%;
  color: black;
  font-size: 20px;
}

.first {
  display: flex;
  align-items: center;

  .el-form-item {
    width: 100%;
    display: flex;
    align-items: center;

    .el-input {
      width: 98%;
    }
  }
}

.el-form {
  width: 100%;
  align-items: center;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.ld_box {
  display: flex;
  margin-right: 30px;
}

.el-collapse {
  padding: 10px;
}

.fromboxs {
  display: flex;
  justify-content: center;
  padding: 10px 20px;
  overflow: auto;
  margin: 0 auto;
}
</style>