<template>
  <layout-card>
    <el-form
      ref="formRef"
      :model="data.form"
      :rules="rules"
      label-width="175px"
    >
      <!-- 承运信息 -->
      <el-divider content-position="left">承运信息</el-divider>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item prop="DEPARTMENT_ID" label="部门">
            <layout-department
              v-model="data.form.DEPARTMENT_ID"
              @update:model-value="fnDepartmentChange"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item v-if="!LISTMANAGER_ID" label="调度人" prop="USER_IDS">
            <el-select v-model="data.form.USER_IDS" multiple>
              <el-option
                v-for="item in data.userList"
                :key="item.USER_ID"
                :label="item.NAME"
                :value="item.USER_ID"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="承运日期" prop="SHIPPINGDATE">
            <el-date-picker
              v-model="data.form.SHIPPINGDATE"
              type="date"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              placeholder="选择时间"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="运输车辆" prop="TRANSPORTVEHICLE">
            <el-select
              v-model="data.form.TRANSPORTVEHICLE"
              placeholder="请选择运输车辆"
            >
              <el-option
                v-for="item in data.OperationVehicle"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="从业人员" prop="PRACTITIONER">
            <el-select
              v-model="data.form.PRACTITIONER"
              placeholder="请选择从业人员"
            >
              <el-option
                v-for="item in PRACTITIONERMENU"
                :key="item.id"
                :label="item.id"
                :value="item.name"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="货运挂车" prop="TRUCKCART">
            <el-select
              v-model="data.form.TRUCKCART"
              placeholder="请选择货运挂车"
            >
              <el-option
                v-for="item in TRUCKMENU"
                :key="item.id"
                :label="item.id"
                :value="item.name"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="人员电话" prop="EMPLOYEEPHONE">
            <el-input
              v-model="data.form.EMPLOYEEPHONE"
              placeholder="请输入人员电话"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="人员类型" prop="PRACTITIONERTYPE">
            <el-select
              v-model="data.form.PRACTITIONERTYPE"
              placeholder="请选择人员类型"
            >
              <el-option
                v-for="item in PERSONTYPEMENU"
                :key="item.id"
                :label="item.id"
                :value="item.name"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="身份证号" prop="IDENTITYID">
            <el-input
              v-model="data.form.IDENTITYID"
              placeholder="请输入身份证号"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 客户信息 -->
      <el-divider content-position="left">客户信息</el-divider>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="委托方" prop="CLIENT">
            <el-select v-model="data.form.CLIENT" placeholder="请选择委托方">
              <el-option
                v-for="item in data.clientOptions"
                :key="item.CONTACT"
                :label="item.COMP_NAME"
                :value="item.CONTACT"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系人" prop="CLIENTCONTACTPERSON">
            <el-input
              v-model="data.form.CLIENTCONTACTPERSON"
              placeholder="请输入联系人"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系电话" prop="CLIENTCONTACTPHONE">
            <el-input
              v-model="data.form.CLIENTCONTACTPHONE"
              placeholder="请输入联系电话"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="确认方" prop="CONFIRMER">
            <el-select v-model="data.form.CONFIRMER" placeholder="请选择确认方">
              <el-option
                v-for="item in data.confirmerOptions"
                :key="item.CONTACT"
                :label="item.COMP_NAME"
                :value="item.CONTACT"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系人" prop="CONFIRMINGPERSON">
            <el-input
              v-model="data.form.CONFIRMINGPERSON"
              placeholder="请输入联系人"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系电话" prop="CONFIRMINGPHONE">
            <el-input
              v-model="data.form.CONFIRMINGPHONE"
              placeholder="请输入联系电话"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 地点信息 -->
      <el-divider content-position="left">地点信息</el-divider>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="起运地点" prop="ORIGIN">
            <el-select v-model="data.form.ORIGIN" placeholder="请选择起运地点">
              <el-option
                v-for="item in data.StartOptions"
                :key="item.LOCATIONMANAGEMENT_ID"
                :label="item.LOCATIONNAME"
                :value="item.LOCATIONMANAGEMENT_ID"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="起运地址" prop="SHIPPINGADDRESS">
            <el-input
              v-model="data.form.SHIPPINGADDRESS"
              placeholder="请输入起运地址"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="行政区域" prop="STARTADMINISTRATIVEAREA">
            <el-input
              v-model="data.form.STARTADMINISTRATIVEAREA"
              placeholder="请输入行政区域"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="目的地点" prop="DESTINATION">
            <el-select
              v-model="data.form.DESTINATION"
              placeholder="请选择目的地点"
            >
              <el-option
                v-for="item in data.EndOptions"
                :key="item.LOCATIONMANAGEMENT_ID"
                :label="item.LOCATIONNAME"
                :value="item.LOCATIONMANAGEMENT_ID"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="目的地址" prop="DESTINATIONADDRESS">
            <el-input
              v-model="data.form.DESTINATIONADDRESS"
              placeholder="请输入目的地址"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="行政区域" prop="ENDDMINISTRATIVEAREA">
            <el-input
              v-model="data.form.ENDDMINISTRATIVEAREA"
              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 } from "@/request/safety_production_related.js";
import {
  PRACTITIONERMENU,
  TRUCKMENU,
  PERSONTYPEMENU,
} from "@/assets/js/constant";
import {
  addSafetyThingsChecView,
  getSecurityPerson,
} from "@/request/waybill_registration.js";
import { onMounted, reactive, ref, watchEffect } from "vue";
import useFormValidate from "@/assets/js/useFormValidate.js";
import { ElMessage } from "element-plus";
import LayoutDepartment from "@/components/department/index.vue";
import { getPostListAll, getUserListAll } from "@/request/data_dictionary.js";
import { getSecurityCustomerList } from "@/request/customer_management.js";
import { getSecurityLocationList } from "@/request/location_management.js";
import { getOperationVehicleList } from "@/request/operation_vehicle.js";

const formRef = ref(null);
const rules = {
  TRANSPORTATIONCOMPANY: [
    { required: true, message: "请输入运输企业名称", trigger: "blur" },
  ],
  DISPATCHER: [
    { required: true, message: "请输入调度人姓名", trigger: "blur" },
  ],
  SHIPPINGDATE: [
    { required: true, message: "请选择承运日期", trigger: "change" },
  ],
  CLIENT: [{ required: true, message: "请选择委托方名称", trigger: "change" }],
  CLIENTCONTACTPERSON: [
    { required: true, message: "请输入联系人姓名", trigger: "blur" },
  ],
  CLIENTCONTACTPHONE: [
    { required: true, message: "请输入联系电话", trigger: "blur" },
  ],
  CONFIRMER: [
    { required: true, message: "请选择确认方名称", trigger: "change" },
  ],
  ORIGIN: [{ required: true, message: "请选择起运地点", trigger: "change" }],
  SHIPPINGADDRESS: [
    { required: true, message: "请输入起运地址", trigger: "blur" },
  ],
  DESTINATION: [
    { required: true, message: "请选择目的地点", trigger: "change" },
  ],
  DESTINATIONADDRESS: [
    { required: true, message: "请输入目的地址", trigger: "blur" },
  ],
};

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: {
    TRANSPORTATIONCOMPANY: "",
    DISPATCHER: "",
    DEPARTMENT_ID: "",
    POST_ID: "",
    USER_IDS: [],
    USER_ID: "",
    SHIPPINGDATE: "",
    IDENTITYID: "",
    TRUCKCART: "",
    EMPLOYEEPHONE: "",
    PRACTITIONER: "",
    TRANSPORTVEHICLE: "",
    CLIENT: "",
    CLIENTCONTACTPERSON: "",
    CLIENTCONTACTPHONE: "",
    CONFIRMER: "",
    CONFIRMINGPERSON: "",
    CONFIRMINGPHONE: "",
    ORIGIN: "",
    SHIPPINGADDRESS: "",
    STARTADMINISTRATIVEAREA: "",
    DESTINATION: "",
    DESTINATIONADDRESS: "",
    ENDDMINISTRATIVEAREA: "",
  },
  clientOptions: [], // 委托方选项
  confirmerOptions: [], // 确认方选项
  StartOptions: [], // 起始地
  EndOptions: [], // 目的地
  OperationVehicle: [], // 运输车辆
});
const fnVehicle = async () => {
  const res = await getOperationVehicleList();
  const varList = res.varList || [];
  data.OperationVehicle = varList.map((item) => item.PLATE_NUMBER);
};

const fnCustomerType = async () => {
  const res = await getSecurityCustomerList();
  const varList = res.varList || [];
  data.clientOptions = varList.filter((item) => item.CUSTOMERTYPE === "1");
  data.confirmerOptions = varList.filter((item) => item.CUSTOMERTYPE === "2");
};

const fnLocation = async () => {
  const res = await getSecurityLocationList();
  const varList = res.varList || [];
  data.StartOptions = varList.filter((item) => item.LOCATIONTYPE === "1");
  data.EndOptions = varList.filter((item) => item.LOCATIONTYPE === "2");
};
const fnDepartmentChange = async () => {
  data.userList = [];
  data.form.USER_IDS = [];
  data.form.USER_ID = "";
  await fnGetUser(data.form.DEPARTMENT_ID);
};
const fnGetPost = async (DEPARTMENT_ID) => {
  const resData = await getPostListAll({ DEPARTMENT_ID });
  data.postList = resData.postList;
};
const fnGetUser = async (DEPARTMENT_ID) => {
  const resData = await getUserListAll({ DEPARTMENT_ID });
  data.userList = resData.userList;
};
watchEffect(() => {
  if (data.form.DEPARTMENT_ID) fnGetPost(data.form.DEPARTMENT_ID);
});

onMounted(async () => {
  await fnPerson();
  await fnCustomerType();
  await fnLocation();
  await fnVehicle();
});
const fnPerson = async () => {
  const resData = await getSecurityPerson({});
  data.unitsList = [resData.pd];
};

const fnSubmit = async () => {
  await useFormValidate(formRef);
  const formData = new FormData();

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

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

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

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