<script setup lang="ts">
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import { onBeforeUnmount, ref, shallowRef, nextTick } from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { ElForm } from "element-plus";

const emit = defineEmits(["create", "update"]);

defineProps<{
  loading: boolean;
}>();

const mode = "default";
const type = ref<any>("create");
const visible = ref(false);
const editorRef = shallowRef();
const formRef = ref<InstanceType<typeof ElForm>>();
const id = ref("");

const editorConfig = { placeholder: "请输入内容..." };
const formData = ref({
  module: "",
  system: "",
  sys_type: "",
  version: "",
  addtime: ""
});

const createRequiredRule = message => ({
  message,
  required: true,
  trigger: "change"
});

const rules = {
  module: [createRequiredRule("标题不能为空")],
  system: [createRequiredRule("内容不能为空")],
  sys_type: [createRequiredRule("请选择一个类型")],
  version: [createRequiredRule("版本号不能为空")],
  addtime: [createRequiredRule("时间不能为空")]
};

onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});

const handleCreated = editor => {
  editorRef.value = editor;
};

function handleClose() {
  formData.value = {
    module: "",
    system: "",
    sys_type: "",
    version: "",
    addtime: ""
  };

  nextTick(() => {
    Object.keys(formData.value).forEach(key =>
      formRef.value.clearValidate(key)
    );
  });
}

function handleConfirm() {
  formRef.value.validate(isValid => {
    isValid &&
      emit(type.value, {
        ...formData.value,
        ...(type.value === "update" ? { id: id.value } : {})
      });
  });
}

defineExpose({
  onDisplay: (_data?: any) => {
    visible.value = true;
    type.value = _data ? "update" : "create";
    const { module, system, sys_type, version, addtime, id: _id } = _data;
    id.value = _id;
    formData.value = {
      module,
      system,
      sys_type,
      version,
      addtime
    };
  },
  onHidden: () => (visible.value = false)
});
</script>
<template>
  <ElDialog
    v-model="visible"
    :title="type === 'create' ? '添加版本信息' : '修改版本信息'"
    @close="handleClose"
    width="1040px"
    destroy-on-close
    :close-on-click-modal="false"
    center
    top="10vh"
  >
    <ElForm label-width="80px" :model="formData" :rules="rules" ref="formRef">
      <ElRow :gutter="10">
        <ElCol :span="12">
          <ElFormItem label="类型" prop="sys_type">
            <ElSelect style="width: 100%" v-model="formData.sys_type">
              <ElOption value="MSG" label="公告" />
              <ElOption value="VER" label="版本" />
            </ElSelect>
          </ElFormItem>
        </ElCol>
        <ElCol :span="12">
          <ElFormItem label="版本号" prop="version">
            <ElInput placeholder="版本号" v-model="formData.version" />
          </ElFormItem>
        </ElCol>
      </ElRow>
      <ElRow :gutter="10">
        <ElCol :span="12">
          <ElFormItem label="标题" prop="module">
            <ElInput placeholder="标题" v-model="formData.module" />
          </ElFormItem>
        </ElCol>
        <ElCol :span="12">
          <ElFormItem label="时间" prop="addtime">
            <ElDatePicker
              value-format="YYYY-MM-DD HH:mm:ss"
              v-model="formData.addtime"
              type="datetime"
              style="width: 100%"
              placeholder="时间"
            />
          </ElFormItem>
        </ElCol>
      </ElRow>
      <ElFormItem label="内容" prop="system">
        <div style="border: 1px solid #ccc">
          <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editorRef"
            :mode="mode"
          />
          <Editor
            style="height: 400px; overflow-y: hidden"
            v-model="formData.system"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="handleCreated"
          />
        </div>
      </ElFormItem>

      <ElFormItem>
        <div class="flex w-full justify-end">
          <ElButton type="primary" @click="handleConfirm" :loading="loading"
            >保存</ElButton
          >
        </div>
      </ElFormItem>
    </ElForm>
  </ElDialog>
</template>
