<template>
  <layout-card>
    <el-form ref="formRef" :rules="rules" :model="form" label-width="110px">
      <el-form-item label="公告简介" prop="SYNOPSIS">
        <el-input v-model="form.SYNOPSIS" />
      </el-form-item>
      <el-form-item label="是否全部通知" prop="ISALL">
        <el-radio-group v-model="form.ISALL">
          <el-radio :label="'yes'">全部通知</el-radio>
          <el-radio :label="'no'">部分通知</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        v-if="form.ISALL === 'no'"
        label="选择通知人"
        prop="userNames"
      >
        <div style="flex: 1; display: flex; justify-content: space-between">
          <el-input
            :model-value="form.userNames.split(',').join('、')"
            disabled
            style="flex: 1"
          />
          <el-button
            type="primary"
            class="ml-10"
            @click="selectNotifierDialogVisible = true"
          >
            请选择
          </el-button>
        </div>
      </el-form-item>
      <el-form-item label="内容" prop="CONTENT">
        <layout-editor v-model="form.CONTENT" />
      </el-form-item>
      <el-form-item label="附件路径">
        <layout-upload v-model:file-list="form.fileList" />
      </el-form-item>
    </el-form>
    <div class="mt-10 tc">
      <el-button type="primary" @click="fnSubmit">保存</el-button>
    </div>
    <select-notifier
      v-model:visible="selectNotifierDialogVisible"
      @confirm="fnSelectNotifierConfirm"
    />
  </layout-card>
</template>

<script setup>
import LayoutEditor from "@/components/editor/index.vue";
import LayoutUpload from "@/components/upload/index.vue";
import { ref } from "vue";
import { debounce } from "throttle-debounce";
import useFormValidate from "@/assets/js/useFormValidate.js";
import { setNotificationAnnouncementAdd } from "@/request/notification_announcement.js";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import SelectNotifier from "./components/select_notifier.vue";

const router = useRouter();
const rules = {
  SYNOPSIS: [{ required: true, message: "公告简介不能为空", trigger: "blur" }],
  CONTENT: [{ required: true, message: "内容不能为空", trigger: "blur" }],
  userNames: [{ required: true, message: "请选择通知人", trigger: "blur" }],
};
const form = ref({
  SYNOPSIS: "",
  ISALL: "yes",
  CONTENT: "",
  userIds: "",
  userNames: "",
  fileList: [],
});
const formRef = ref(null);
const selectNotifierDialogVisible = ref(false);
const fnSelectNotifierConfirm = (userIds, userNames) => {
  form.value.userIds = userIds;
  form.value.userNames = userNames;
};
const fnSubmit = debounce(
  1000,
  async () => {
    await useFormValidate(formRef);
    const formData = new FormData();
    Object.keys(form.value).forEach((key) => {
      formData.append(key, form.value[key]);
    });
    formData.delete("fileList");
    for (let i = 0; i < form.value.fileList.length; i++) {
      formData.append("file", form.value.fileList[i].raw);
      formData.append("fileName", form.value.fileList[i].name);
    }
    await setNotificationAnnouncementAdd(formData);
    ElMessage.success("添加成功");
    router.back();
  },
  { atBegin: true }
);
</script>

<style scoped lang="scss"></style>
