<template>
  <el-drawer
      v-model="props.visible"
      :title="props.noticeId?'编辑':'新增'"
      direction="rtl"
      :size="size"
      :close-on-click-modal="false"
      :before-close="dialogClose"
  >
    <el-form
        class="ls-form"
        ref="formRef"
        :model="formData"
        label-width="80px"
    >
      <el-form-item
          label="通知标题"
          prop="title"
          :rules="{ required: true, message: '请输入通知标题', trigger: 'blur' }"
      >
        <el-input
            class="ls-input"
            v-model="formData.title"
            placeholder="通知标题"
            clearable
        />
      </el-form-item>
        <el-form-item label="通知类型">
          <el-select
              v-model="formData.type"
              placeholder="请选择通知类型"
          >
            <el-option label="通知" :value="1"></el-option>
            <el-option label="公告" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="通知状态" prop="status">
          <el-radio-group v-model="formData.status" name="status">
            <el-radio :value="1">正常</el-radio>
            <el-radio :value="2">关闭</el-radio>
          </el-radio-group>
        </el-form-item>
        <div class="flex">
          <el-form-item
          class="flex-1"
            label="内容"
            prop="content"
            :rules="{ required: true, message: '请输入通知内容', trigger: 'blur' }"
        >
          <Editor ref="editorRef" :height="fwbHeight" class="flex-1" name="data"/>
        </el-form-item>
    </div>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogClose">取消</el-button>
        <el-button :loading="subLoading" type="primary" @click="submit">
          确定
        </el-button>
      </span>
    </template>
  </el-drawer>
</template>
<script lang="ts" setup>
import type {FormInstance} from "element-plus";
import {getNoticeDetail,noticeAdd,noticeUpdate} from "@/api/data/notice";
import {onMounted, reactive, shallowRef,ref} from "vue";
import Editor from '@/components/Editor/tinymce.vue'
import {message} from "@/utils/auth";
import {useLockFn} from "@/utils/useLockFn";

const size = document.body.clientWidth - 500;
const emit = defineEmits(["success", "update:visible"]);
const formRef = shallowRef<FormInstance>();
  const editorRef=ref()
const formData = reactive({
  id: "",
  title: "",
  status: 1,
  type: 1,
  content:''
});

const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
    default: false
  },
  noticeId: {
    type: Number,
    required: true,
    default: 0
  }
});
const fwbHeight=document.body.clientHeight -400
const handleSubmit = async () => {
    formData.content=editorRef.value.myValue
    await formRef.value?.validate();
    let ruleForm = JSON.parse(JSON.stringify(formData));
    ruleForm.content=editorRef.value.myValue
    props.noticeId ? await noticeUpdate(ruleForm) : await noticeAdd(ruleForm);
    message("操作成功");
    emit("update:visible", false);
    emit("success");
};

const dialogClose = () => {
  emit("update:visible", false);
};

const { isLock:subLoading,lockFn: submit } = useLockFn(handleSubmit);


const setFormData = async () => {
  const data = await getNoticeDetail(props.noticeId);
  for (const key in formData) {
    if (data[key] != null && data[key] != undefined) {
      //@ts-ignore
      formData[key] = data[key];
    }
  }
  editorRef.value.myValue=formData.content
};

onMounted(() => {
  if (props.noticeId) {
    setFormData();
  }
 
});

</script>
