<template>
  <layout-card>
    <el-form
      ref="formRef"
      :model="data.form"
      :rules="rules"
      label-width="175px"
    >
      <el-divider content-position="left">添加</el-divider>
      <el-row>
        <el-col :span="8">
          <el-form-item label="通知标题" prop="TITLE">
            <el-input v-model="data.form.TITLE" placeholder="请输入内容" />
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="通知等级" prop="LEVEL">
            <el-select v-model="data.form.LEVEL" placeholder="请选择通知等级">
              <el-option
                v-for="item in relatedClassificationList"
                :key="item.BIANMA"
                :label="item.NAME"
                :value="item.BIANMA"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="人员选择" prop="PERSON">
            <div class="flexBox">
              <el-input
                v-model="data.form.PERSON"
                type="textarea"
                placeholder="请选择人员"
                disabled
              ></el-input>
              <el-button
                class="addBtn"
                type="primary"
                @click="data.SelectPersonDialogVisible = true"
              >
                选择
              </el-button>
            </div>
          </el-form-item>
        </el-col>
        <el-row>
          <el-col :span="12">
            <el-form-item label="通知附件" prop="fileList">
              <layout-upload
                v-model:file-list="data.form.fileList"
                accept=".pdf"
                delete-to-server
                :limit="9"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="通知视频" prop="videoList">
              <layout-upload
                v-model:file-list="data.form.videoList"
                accept=".mp4"
                delete-to-server
                :limit="9"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="回复状态" prop="REPLYSTATUS">
              <el-switch
                v-model="data.form.REPLYSTATUS"
                active-value="1"
                inactive-value="0"
                active-color="#13ce66"
                inactive-color="#ff4949"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-col :span="50">
          <el-form-item label="通知内容" prop="NOTIFICATIONCONTENT">
            <layout-editor
              v-model="data.form.NOTIFICATIONCONTENT"
              placeholder="请输入内容"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="tc mt-10">
      <el-button type="primary" @click="fnSubmit"> 确定 </el-button>
    </div>
    <select-person
      v-model:visible="data.SelectPersonDialogVisible"
      :list-data="data.listAll"
      @submit="fnSelectPersonSubmit"
      @submitall="fnSelectAllRiskSubmit"
    />
  </layout-card>
</template>

<script setup>
import {
  layoutFnGetNotificationsClassification,
  getUserListAll,
  addSecurityNotice,
} from "@/request/safety_production_related.js";
import { onMounted, reactive, ref } from "vue";
import LayoutUpload from "@/components/upload/index.vue";
import LayoutEditor from "@/components/editor/index.vue";
import SelectPerson from "./components/select_person.vue";
import useFormValidate from "@/assets/js/useFormValidate.js";
import { ElMessage } from "element-plus";
import { getSecurityPerson } from "@/request/waybill_registration.js";
import { useRouter } from "vue-router";
const formRef = ref(null);
const rules = {
  TITLE: [{ required: true, message: "请输入通知标题", trigger: "blur" }],
  LEVEL: [{ required: true, message: "请选择通知等级", trigger: "blur" }],
  PERSON: [{ required: true, message: "请选择通知人员", trigger: "blur" }],
  NOTIFICATIONCONTENT: [
    { required: true, message: "请输入通知内容", trigger: "blur" },
  ],
};
const relatedClassificationTempList =
  await layoutFnGetNotificationsClassification();
const relatedClassificationList = [];
JSON.parse(relatedClassificationTempList.value.zTreeNodes).forEach((e) => {
  relatedClassificationList.push({ name: e.id, BIANMA: e.name });
});
const router = useRouter();
const data = reactive({
  form: {
    TITLE: "",
    TRANSPORTATIONCOMPANY: "",
    LEVEL: "",
    PERSON: "",
    fileList: [],
    videoList: [],
    NOTIFICATIONCONTENT: "",
    allStatus: 0, // 是否全选
    REPLYSTATUS: "",
    personList: [],
  },
});

onMounted(async () => {
  await fnPerson();
});
const fnPerson = async () => {
  const resData = await getSecurityPerson({});
  data.personList = [resData.pd];
};

const fnGetUnitsList = async () => {
  const resData = await getUserListAll({});
  data.unitsList = resData.varList;
};
fnGetUnitsList();
const fnSubmit = async () => {
  await useFormValidate(formRef);
  const formData = new FormData();

  Object.keys(data.form).forEach((key) => {
    if (key !== "fileList" && key !== "videoList" && key !== "PERSON") {
      formData.append(key, data.form[key]);
    }
  });
  formData.append("PERSON_ID", data.form.PERSON_ID);

  data.form.fileList.forEach((file) => {
    if (file.raw) {
      formData.append("fileList", file.raw);
    }
  });

  data.form.videoList.forEach((file) => {
    if (file.raw) {
      formData.append("videoList", file.raw);
    }
  });

  await addSecurityNotice(formData);
  ElMessage({
    message: "添加成功",
    type: "success",
    duration: 3000,
  });
  router.push("/safety_production_related/security_notice");
};

const fnSelectPersonSubmit = (selectionData) => {
  const userIds = selectionData.map((item) => item.USER_ID).join(", ");
  const names = selectionData.map((item) => item.NAME).join(", ");
  data.form.PERSON_ID = userIds;
  data.form.PERSON = names;
};

const fnSelectAllRiskSubmit = (allData) => {
  const dataList = allData.value;

  const userIds = dataList.map((item) => item.USER_ID).join(", ");
  const names = dataList.map((item) => item.NAME).join(", ");

  data.form.PERSON_ID = userIds;
  data.form.PERSON = names;

  data.form.allStatus = 1;
  data.form.PERSON = "已全部选择";
};
</script>

<style scoped lang="scss">
.flexBox {
  display: flex;
  align-items: flex-end;

  .addBtn {
    margin-left: 12px;
  }
}
</style>
