<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 label="客户类型" prop="CUSTOMERTYPE">
            <el-select
              v-model="data.form.CUSTOMERTYPE"
              placeholder="请选择客户类型"
            >
              <el-option
                v-for="item in CUSTOMERTYPEMENU"
                :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="CUSTOMERNAME">
            <el-input
              v-model="data.form.CUSTOMERNAME"
              placeholder="请输入客户名称"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系人" prop="CONTACT">
            <el-input v-model="data.form.CONTACT" placeholder="请输入联系人" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系电话" prop="CONTACTPHONE">
            <el-input
              v-model="data.form.CONTACTPHONE"
              placeholder="请输入联系电话"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="客户地址" prop="CUSTOMERADDRESS">
            <el-input
              v-model="data.form.CUSTOMERADDRESS"
              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 { CUSTOMERTYPEMENU } from "@/assets/js/constant";
import { getSecurityPerson } from "@/request/waybill_registration.js";
import { onMounted, reactive, ref } from "vue";
import useFormValidate from "@/assets/js/useFormValidate.js";
import { ElMessage } from "element-plus";
import { addSafetyCustomerView } from "@/request/customer_management.js";
import { useRouter } from "vue-router";

const formRef = ref(null);
const rules = {
  TRANSPORTATIONCOMPANY: [
    { required: true, message: "请输入运输企业名称", trigger: "blur" },
  ],
  CUSTOMERTYPE: [
    { required: true, message: "请输入客户类型", trigger: "blur" },
  ],
  CUSTOMERNAME: [
    { required: true, message: "请选择客户名称", trigger: "change" },
  ],
};

const data = reactive({
  form: {
    TRANSPORTATIONCOMPANY: "",
    CUSTOMERTYPE: "",
    CUSTOMERNAME: "",
    CONTACT: "",
    CONTACTPHONE: "",
    CUSTOMERADDRESS: "",
    unitsList: [],
  },
});
const router = useRouter();
onMounted(async () => {
  await fnPerson();
});
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 addSafetyCustomerView(formData);
  ElMessage.success("添加成功");
  router.push("/electronic_waybill_management/customer_management");
  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>
