<script lang="ts" setup>
import { ref } from "vue";
import RegionalMap from "@/views/component/RegionalMap/RegionalMap.vue";
import { deepClone } from "@/utils";

const props = defineProps({
  operatorList: {
    type: Array,
    default: () => []
  }
});
const addFormRef = ref<any>();
const operatorAllList = ref<any>([]);
const addForm = reactive<any>({
  regionId: "",
  operatorId: "",
  regionName: "",
  regionSimpleName: "",
  coordinates: []
});
const rules = {
  operatorId: [{ required: true, message: "请选择运营商", trigger: "change" }],
  regionName: [{ required: true, message: "请输入运营区名称", trigger: "blur" }],
  coordinates: [
    {
      required: true,
      validator: (value: any, cb: any) => {
        console.log(value);
        if (value.length === 0) {
          cb("请编辑区域电子围栏");
        } else {
          cb();
        }
      }
    }
  ]
};
const RegionalMapRef = ref();
const handleOpenMap = () => {
  const path = addForm.coordinates.length === 0 ? null : { points: deepClone(addForm.coordinates) };
  RegionalMapRef.value?.openMap(path);
};

const updateForm = (data: any) => {
  addForm.regionId = data.regionId;
  addForm.operatorId = data.operatorId;
  addForm.regionName = data.regionName;
  addForm.regionSimpleName = data.regionSimpleName;
  addForm.coordinates = data.coordinates || [];
};

//获取地图点位
const getPoint = (paths: any[]) => {
  addForm.coordinates = paths;
};

// 提交表单
const submit = () => {
  return new Promise(async resolve => {
    let status = await addFormRef.value.validate();
    return resolve({
      status,
      data: deepClone(addForm)
    });
  });
};

const resetForm = () => {
  addForm.regionId = "";
  addForm.operatorId = "";
  addForm.regionName = "";
  addForm.regionSimpleName = "";
  addForm.coordinates = [];
  if (addFormRef.value) {
    addFormRef.value.resetFields();
  }
};

watch(
  () => props.operatorList,
  val => {
    operatorAllList.value = val;
  },
  { immediate: true }
);

defineExpose({
  submit,
  resetForm,
  updateForm
});
</script>

<template>
  <a-form ref="addFormRef" :model="addForm" :rules="rules">
    <a-form-item field="operatorId" label="运营商" validate-trigger="blur">
      <a-select v-model="addForm.operatorId" placeholder="请选择运营商" validate-trigger="change">
        <a-option v-for="it in operatorAllList" :key="it.operatorId" :value="it.operatorId">{{ it.operatorName }}</a-option>
      </a-select>
    </a-form-item>
    <a-form-item label="运营区名称" field="regionName" validate-trigger="blur">
      <a-input placeholder="请输入运营区名称" allow-clear v-model="addForm.regionName" />
    </a-form-item>
    <a-form-item label="简称" field="regionSimpleName">
      <a-input placeholder="请输入简称" allow-clear v-model="addForm.regionSimpleName" />
    </a-form-item>
    <a-form-item label="区域电子围栏" field="coordinates" validate-trigger="blur">
      <a-tag bordered color="orange" v-if="addForm.coordinates.length === 0">未绘制</a-tag>
      <a-tag bordered color="green" v-else>已绘制</a-tag>
      <a-link @click="handleOpenMap" style="margin-left: 15px">编辑地图</a-link>
    </a-form-item>
  </a-form>
  <RegionalMap ref="RegionalMapRef" @ok="getPoint" />
</template>

<style scoped lang="scss"></style>
