<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="MEETING_TITLE">
            <el-input
              v-model="data.form.MEETING_TITLE"
              placeholder="请输入会议标题"
            />
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="会议类型" prop="MEETING_TYPE">
            <el-select
              v-model="data.form.MEETING_TYPE"
              placeholder="请选择会议类型"
              @change="handleMeetingTypeChange"
            >
              <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="TRANSPORTATIONCOMPANY">
            <el-input
              v-model="data.form.TRANSPORTATIONCOMPANY"
              placeholder="请输入运输企业"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="会议地点" prop="MEETING_ADDRESS">
            <el-input
              v-model="data.form.MEETING_ADDRESS"
              placeholder="请输入会议地点"
            />
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item prop="MEETING_DATE" label="会议时间">
            <el-date-picker
              type="daterange"
              v-model="data.form.MEETING_DATE"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="主持人" prop="HOST_PERSON">
            <el-input
              v-model="data.form.HOST_PERSON"
              placeholder="请输入主持人"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="记录人" prop="RECORDER">
            <el-input v-model="data.form.RECORDER" placeholder="请输入记录人" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="从业身份" prop="PRACTITIONER_TYPE">
            <el-checkbox-group
              v-model="data.form.PRACTITIONER_TYPE"
              @change="handleCheckedCitiesChange"
            >
              <el-checkbox v-for="city in cities" :key="city" :label="city">{{
                city
              }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="会议附件" prop="fileList">
            <layout-upload
              v-model:file-list="data.form.fileList"
              accept=".pdf,.mp4"
              delete-to-server
              :limit="9"
            />
          </el-form-item>
        </el-col>
        <el-col :span="50">
          <el-form-item label="会议记要" prop="MEETING_CONTENT">
            <layout-editor
              v-model="data.form.MEETING_CONTENT"
              placeholder="请输入内容"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="tc mt-10">
      <el-button type="primary" @click="fnSubmit"> 确定 </el-button>
    </div>
  </layout-card>
</template>

<script setup>
import {
  layoutFnGetMEETINGTYPEClassification,
  getUserListAll,
} from "@/request/safety_production_related.js";
import { addSafetyMeetingView } from "@/request/traffic_safety_meeting.js";
import { reactive, ref } from "vue";
import LayoutUpload from "@/components/upload/index.vue";
import LayoutEditor from "@/components/editor/index.vue";
import useFormValidate from "@/assets/js/useFormValidate.js";
import { ElMessage } from "element-plus";
const formRef = ref(null);
const cities = [
  "驾驶员",
  "押运员",
  "安全管理员",
  "装卸员",
  "安全负责人",
  "其他",
  "监控员",
];
const handleCheckedCitiesChange = () => {};
const rules = {
  MEETING_TITLE: [
    { required: true, message: "请输入会议标题", trigger: "blur" },
  ],
  MEETING_TYPE: [
    { required: true, message: "请选择会议类型", trigger: "change" },
  ],
  TRANSPORTATIONCOMPANY: [
    { required: true, message: "请输入运输企业", trigger: "blur" },
  ],
  MEETING_ADDRESS: [
    { required: true, message: "请输入会议地点", trigger: "blur" },
  ],
  MEETING_DATE: [
    { required: true, message: "请选择会议时间", trigger: "change" },
  ],
  HOST_PERSON: [{ required: true, message: "请输入主持人", trigger: "blur" }],
  RECORDER: [{ required: true, message: "请输入记录人", trigger: "blur" }],
  MEETING_CONTENT: [
    { required: true, message: "请输入会议记要", trigger: "blur" },
  ],
};

const fnGetUnitsList = async () => {
  const resData = await getUserListAll({});
  data.unitsList = resData.varList;
};
fnGetUnitsList();
const relatedClassificationTempList =
  await layoutFnGetMEETINGTYPEClassification();
const relatedClassificationList = [];
JSON.parse(relatedClassificationTempList.value.zTreeNodes).forEach((e) => {
  relatedClassificationList.push({ name: e.id, BIANMA: e.name });
});

const data = reactive({
  form: {
    MEETING_TITLE: "",
    MEETING_TYPE: "",
    TRANSPORTATIONCOMPANY: "",
    MEETING_ADDRESS: "",
    MEETING_DATE: "",
    HOST_PERSON: "",
    RECORDER: "",
    fileList: [],
    PRACTITIONER_TYPE: [],
    NOTIFICATIONCONTENT: "",
  },
});
const handleMeetingTypeChange = (value) => {
  data.form.MEETING_TYPE = value;
};
const fnSubmit = async () => {
  await useFormValidate(formRef);
  const formData = new FormData();

  Object.keys(data.form).forEach((key) => {
    formData.append(key, data.form[key]);
  });

  formData.delete("fileList");

  for (let i = 0; i < data.form.fileList.length; i++) {
    if (data.form.fileList[i].raw)
      formData.append("FFILE", data.form.fileList[i].raw);
  }

  try {
    await addSafetyMeetingView(formData);
    ElMessage.success("添加成功");
    Object.keys(data.form).forEach((key) => {
      if (Array.isArray(data.form[key])) {
        data.form[key] = [];
      } else {
        data.form[key] = "";
      }
    });
  } catch (error) {
    ElMessage.error("添加失败");
  }
};
</script>

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

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