<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="TRANSPORTATIONCOMPANY">-->
        <!--            <el-select-->
        <!--              v-model="data.form.TRANSPORTATIONCOMPANY"-->
        <!--              placeholder="请选择运输企业"-->
        <!--            >-->
        <!--              <el-option-->
        <!--                v-for="item in data.unitsList"-->
        <!--                :key="item.CORPINFO_ID"-->
        <!--                :label="item.CORP_NAME"-->
        <!--                :value="item.CORP_NAME"-->
        <!--              />-->
        <!--            </el-select>-->
        <!--          </el-form-item>-->
        <!--        </el-col>-->
        <el-col :span="8">
          <el-form-item label="地点类型" prop="LOCATIONTYPE">
            <el-select
              v-model="data.form.LOCATIONTYPE"
              placeholder="请选择地点类型"
            >
              <el-option
                v-for="item in LOCATIONTYPEMENU"
                :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="LOCATIONNAME">
            <el-input
              v-model="data.form.LOCATIONNAME"
              placeholder="请输入地点名称"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="行政区域" prop="POSSESSION">
            <layout-territory
              ref="territoryCascaderRef"
              v-model="data.form.ADMINISTRATIVEREGIONS"
              :level="2"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="地址详情" prop="ADDRESSDETAILS">
            <el-input
              v-model="data.form.ADDRESSDETAILS"
              placeholder="请输入地址详情"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="经度/纬度" prop="LONGITUDE">
            <div style="flex: 1; display: flex">
              <el-input
                :model-value="
                  (data.form.LONGITUDE ?? '') + '-' + (data.form.LATITUDE ?? '')
                "
                disabled
                style="flex: 1"
              />
              <el-button
                type="primary"
                class="ml-10"
                @click="data.mapDialogVisible = true"
              >
                地图定位
              </el-button>
            </div>
          </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>
  <map-dialog
    v-model:visible="data.mapDialogVisible"
    v-model:latitude="data.form.LATITUDE"
    v-model:longitude="data.form.LONGITUDE"
  />
</template>

<script setup>
import { LOCATIONTYPEMENU } from "@/assets/js/constant";
import LayoutTerritory from "@/components/territory/index.vue";
import { getSecurityPerson } from "@/request/waybill_registration.js";
import { reactive, ref, onMounted } from "vue";
import useFormValidate from "@/assets/js/useFormValidate.js";
import { ElMessage } from "element-plus";
import { addSafetyLocationView } from "@/request/location_management.js";
import MapDialog from "@/views/enterprise_management/information/components/map.vue";
import { useRouter } from "vue-router";

const formRef = ref(null);
const rules = {
  TRANSPORTATIONCOMPANY: [
    { required: true, message: "请输入运输企业名称", trigger: "blur" },
  ],
  LOCATIONTYPE: [
    { required: true, message: "请输入地点类型", trigger: "blur" },
  ],
  LOCATIONNAME: [
    { required: true, message: "请选择地点名称", trigger: "change" },
  ],
  ADMINISTRATIVEREGIONS: [
    { required: true, message: "请选择行政区域", trigger: "change" },
  ],
  ADDRESSDETAILS: [
    { required: true, message: "请输入行政区域", trigger: "change" },
  ],
  LONGITUDE: [{ required: true, message: "请选择经度", trigger: "change" }],
  LATITUDE: [{ required: true, message: "请选择维度", trigger: "change" }],
};

const data = reactive({
  mapDialogVisible: false,
  form: {
    TRANSPORTATIONCOMPANY: "",
    LOCATIONTYPE: "",
    LOCATIONNAME: "",
    ADMINISTRATIVEREGIONS: "",
    ADDRESSDETAILS: "",
    LONGITUDE: "",
    LATITUDE: "",
    unitsList: [],
    territoryCascaderRef: "",
  },
});
const router = useRouter();
onMounted(async () => {
  await fnPerson();
});
const fnPerson = async () => {
  const resData = await getSecurityPerson({});
  data.unitsList = [resData.pd];
};
const fnSubmit = async () => {
  await useFormValidate(formRef);
  await addSafetyLocationView(data.form);
  ElMessage.success("添加成功");
  router.push("/electronic_waybill_management/location_managemen");
  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>
