<script setup lang="ts">
import { reactive, watch } from 'vue';
import useI18n from '@/hooks/useI18n';
import {
  graphEvent,
  selectSourceTargetOptions,
  selectComboOptions,
} from '../hooks/useGraph';
import useEdge from '../hooks/useEdge';
import useNode from '../hooks/useNode';
import useCombo from '../hooks/useCombo';

const { t } = useI18n();
const {
  comboTypeOptions,
  comboLabelPositionOptions,
  comboState,
  comboStateForm,
  handleComboTypeChange,
  handleOkcombo,
  handleCancelcombo,
} = useCombo();
const {
  edgeTypeOptions,
  edgeLabelPositionOptions,
  edgeState,
  edgeStateForm,
  handleOkEdge,
  handleCancelEdge,
} = useEdge();
const {
  nodeTypeOptions,
  nodeLabelPositionOptions,
  nodeDirectionOptions,
  nodeImageClipCfgOptions,
  nodeImageOptions,
  nodeState,
  nodeStateForm,
  handleNodeTypeChange,
  handleOkNode,
  handleCancelNode,
} = useNode();

/**图监听事件变更 */
watch(graphEvent, v => {
  if (!v) return;
  const { type, target, item } = v;
  // console.log(type, target, item);

  // 画布
  if (type === 'canvas-create-edge') {
    edgeState.origin = {};
    edgeState.form.id = '#';
    modalState.title = t('views.monitor.topologyBuild.edgeTitleAdd');
    modalState.formType = 'edge';
    modalState.visible = true;
  }
  if (type === 'canvas-create-node') {
    nodeState.origin = {};
    nodeState.form.id = '';
    modalState.title = t('views.monitor.topologyBuild.nodeTitleAdd');
    modalState.formType = 'node';
    modalState.visible = true;
  }
  if (type === 'canvas-create-combo') {
    comboState.origin = {};
    comboState.form.id = '';
    modalState.title = t('views.monitor.topologyBuild.comboTitleAdd');
    modalState.formType = 'combo';
    modalState.visible = true;
  }
  // 边
  if (type === 'edge-edit' && item) {
    const edge = item.getModel();
    edgeState.origin = JSON.parse(JSON.stringify(edge));
    edgeState.form = Object.assign(edgeState.form, edge);
    modalState.title = t('views.monitor.topologyBuild.edgeTitleEdit');
    modalState.formType = 'edge';
    modalState.visible = true;
  }
  // 节点
  if (type === 'node-edit' && item) {
    const node = item.getModel();
    nodeState.origin = JSON.parse(JSON.stringify(node));
    nodeState.form = Object.assign(nodeState.form, node);
    modalState.title = t('views.monitor.topologyBuild.nodeTitleEdit');
    modalState.formType = 'node';
    modalState.visible = true;
  }
  // 分组
  if (type === 'combo-edit' && item) {
    const combo = item.getModel();
    comboState.origin = JSON.parse(JSON.stringify(combo));
    comboState.form = Object.assign(comboState.form, combo);
    // 分组内元素
    if (Array.isArray(combo.children)) {
      comboState.form.children = combo.children.map(item => item.id);
    }
    modalState.title = t('views.monitor.topologyBuild.comboTitleEdit');
    modalState.formType = 'combo';
    modalState.visible = true;
  }
});

/**对话框对象信息状态类型 */
type ModalStateType = {
  /**对话框是否显示 */
  visible: boolean;
  /**标题 */
  title: string;
  /**图元素表单类型 */
  formType: 'edge' | 'node' | 'combo';
  /**确定按钮 loading */
  confirmLoading: boolean;
};

/**对话框对象信息状态 */
let modalState: ModalStateType = reactive({
  visible: false,
  title: '图信息',
  formType: 'edge',
  confirmLoading: false,
});

/**
 * 对话框弹出确认执行函数
 * 进行表达规则校验
 */
function fnModalOk() {
  modalState.confirmLoading = true;
  const type = modalState.formType;
  // 边编辑确认
  if (type === 'edge') {
    handleOkEdge().then(result => {
      modalState.visible = !result;
      modalState.confirmLoading = false;
    });
  }
  // 节点编辑确认
  if (type === 'node') {
    handleOkNode().then(result => {
      modalState.visible = !result;
      modalState.confirmLoading = false;
    });
  }
  // 分租编辑确认
  if (type === 'combo') {
    handleOkcombo().then(result => {
      modalState.visible = !result;
      modalState.confirmLoading = false;
    });
  }
}

/**
 * 对话框弹出关闭执行函数
 * 进行表达规则校验
 */
function fnModalCancel() {
  modalState.visible = false;
  const type = modalState.formType;
  // 边编辑还原
  if (type === 'edge') {
    handleCancelEdge();
  }
  // 节点编辑还原
  if (type === 'node') {
    handleCancelNode();
  }
  // 分租编辑还原
  if (type === 'combo') {
    handleCancelcombo();
  }
}
</script>

<template>
  <DraggableModal
    width="800px"
    :body-style="{ maxHeight: '650px', 'overflow-y': 'auto' }"
    :keyboard="false"
    :mask-closable="false"
    :visible="modalState.visible"
    :title="modalState.title"
    :confirm-loading="modalState.confirmLoading"
    @ok="fnModalOk"
    @cancel="fnModalCancel"
  >
    <!-- 分组排版 -->
    <a-form
      v-if="modalState.formType === 'combo'"
      name="modalStateFromCombo"
      layout="horizontal"
      :label-col="{ span: 6 }"
      :labelWrap="true"
    >
      <a-form-item
        :label="t('views.monitor.topologyBuild.comboFormParentId')"
        name="parentId"
        :help="t('views.monitor.topologyBuild.comboFormParentIdTip')"
        :label-col="{ span: 3 }"
      >
        <a-select
          v-model:value="comboState.form.parentId"
          :options="selectComboOptions"
          :placeholder="t('common.selectPlease')"
        >
        </a-select>
      </a-form-item>

      <a-form-item
        :label="t('views.monitor.topologyBuild.comboFormId')"
        name="type"
        :label-col="{ span: 3 }"
        v-bind="comboStateForm.validateInfos.id"
      >
        <a-input
          v-model:value="comboState.form.id"
          allow-clear
          :placeholder="t('common.inputPlease')"
          :disabled="comboState.form.id === comboState.origin.id"
        ></a-input>
      </a-form-item>

      <a-form-item
        :label="t('views.monitor.topologyBuild.comboFormType')"
        name="type"
        :label-col="{ span: 3 }"
        v-bind="comboStateForm.validateInfos.type"
      >
        <a-select
          v-model:value="comboState.form.type"
          :options="comboTypeOptions"
          @change="handleComboTypeChange"
          :placeholder="t('common.selectPlease')"
        >
        </a-select>
      </a-form-item>

      <!-- 圆形尺寸 -->
      <a-row :gutter="16" v-if="comboState.form.type.startsWith('circle')">
        <a-col :lg="12" :md="12" :xs="24">
          <a-form-item
            :label="t('views.monitor.topologyBuild.comboFormSize')"
            name="size"
            :help="t('views.monitor.topologyBuild.comboFormSizeCircle')"
          >
            <a-input-number
              :min="0"
              :max="300"
              v-model:value="comboState.form.size"
            ></a-input-number>
          </a-form-item>
        </a-col>
        <a-col :lg="12" :md="12" :xs="24">
          <a-form-item
            :label="t('views.monitor.topologyBuild.comboFormPadding')"
            name="padding"
          >
            <a-input-number
              :min="0"
              :max="300"
              v-model:value="comboState.form.padding"
            ></a-input-number>
          </a-form-item>
        </a-col>
      </a-row>

      <!-- 矩形尺寸 -->
      <a-row :gutter="16" v-if="comboState.form.type.startsWith('rect')">
        <a-col :lg="12" :md="12" :xs="24">
          <a-form-item
            :label="t('views.monitor.topologyBuild.comboFormSize')"
            name="size"
            :help="t('views.monitor.topologyBuild.comboFormSizeRect')"
          >
            <a-input-group compact>
              <a-input-number
                v-for="(_, i) in comboState.form.size"
                :key="i"
                style="width: calc(100% / 2)"
                :min="0"
                :max="99"
                v-model:value="comboState.form.size[i]"
              ></a-input-number>
            </a-input-group>
          </a-form-item>
        </a-col>
        <a-col :lg="12" :md="12" :xs="24">
          <a-form-item
            :label="t('views.monitor.topologyBuild.comboFormPadding')"
            name="padding"
            :help="t('views.monitor.topologyBuild.comboFormPaddingRect')"
          >
            <a-input-group compact>
              <a-input-number
                v-for="(_, i) in comboState.form.padding"
                :key="i"
                style="width: calc(100% / 4)"
                :min="0"
                :max="99"
                v-model:value="comboState.form.padding[i]"
              ></a-input-number>
            </a-input-group>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="16">
        <a-col :lg="12" :md="12" :xs="24">
          <a-form-item
            :label="t('views.monitor.topologyBuild.formStyleFill')"
            name="fill"
          >
            <a-input
              v-model:value="comboState.form.style.fill"
              type="color"
            ></a-input>
          </a-form-item>
        </a-col>
        <a-col :lg="12" :md="12" :xs="24">
          <a-form-item
            :label="t('views.monitor.topologyBuild.formStyleFillOpacity')"
            name="fillOpacity"
          >
            <a-input-number
              v-model:value="comboState.form.style.fillOpacity"
              style="width: 100%"
              :min="0"
              :max="1"
              :step="0.1"
              placeholder="<=1"
            ></a-input-number>
          </a-form-item>
        </a-col>
        <a-col :lg="12" :md="12" :xs="24">
          <a-form-item
            :label="t('views.monitor.topologyBuild.formStyleStroke')"
            name="stroke"
          >
            <a-input
              v-model:value="comboState.form.style.stroke"
              type="color"
            ></a-input>
          </a-form-item>
        </a-col>
        <a-col :lg="12" :md="12" :xs="24">
          <a-form-item
            :label="t('views.monitor.topologyBuild.formStyleLineWidth')"
            name="lineWidth"
          >
            <a-input-number
              v-model:value="comboState.form.style.lineWidth"
              style="width: 100%"
              :min="1"
              :max="100"
              placeholder="<=100"
            ></a-input-number>
          </a-form-item>
        </a-col>
      </a-row>

      <a-form-item
        :label="t('views.monitor.topologyBuild.comboFormChildren')"
        name="children"
        :help="t('views.monitor.topologyBuild.comboFormChildrenTip')"
        :label-col="{ span: 3 }"
        v-if="comboState.form.id !== comboState.origin.id"
      >
        <a-select
          v-model:value="comboState.form.children"
          mode="tags"
          style="width: 100%"
          :options="selectSourceTargetOptions"
          :placeholder="t('common.selectPlease')"
        ></a-select>
      </a-form-item>

      <a-divider orientation="left">
        {{ t('views.monitor.topologyBuild.label') }}
      </a-divider>

      <a-form-item
        :label="t('views.monitor.topologyBuild.formLabel')"
        name="label"
        :label-col="{ span: 3 }"
        :help="t('views.monitor.topologyBuild.formLabelTip')"
      >
        <a-input
          v-model:value="comboState.form.label"
          allow-clear
          :placeholder="t('common.inputPlease')"
        >
        </a-input>
      </a-form-item>

      <a-row :gutter="16">
        <a-col :lg="12" :md="12" :xs="24">
          <a-form-item
            :label="t('views.monitor.topologyBuild.formLabelStyleFill')"
            name="fill"
          >
            <a-input
              v-model:value="comboState.form.labelCfg.style.fill"
              type="color"
            ></a-input>
          </a-form-item>
        </a-col>
        <a-col :lg="12" :md="12" :xs="24">
          <a-form-item
            :label="t('views.monitor.topologyBuild.formLabelStyleFontSize')"
            name="fontSize"
          >
            <a-input-number
              v-model:value="comboState.form.labelCfg.style.fontSize"
              style="width: 100%"
              :min="10"
              :max="100"
              placeholder="<=100"
            ></a-input-number>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="16">
        <a-col :lg="12" :md="12" :xs="24">
          <a-form-item
            :label="t('views.monitor.topologyBuild.formLabelRefX')"
            name="labelCfg.refX"
            :help="t('views.monitor.topologyBuild.formLabelRefXTip')"
          >
            <a-input-number
              v-model:value="comboState.form.labelCfg.refX"
              style="width: 100%"
              :min="-100"
              :max="100"
              placeholder="<=100"
            ></a-input-number>
          </a-form-item>
        </a-col>
        <a-col :lg="12" :md="12" :xs="24">
          <a-form-item
            :label="t('views.monitor.topologyBuild.formLabelRefY')"
            name="labelCfg.refY"
            :help="t('views.monitor.topologyBuild.formLabelRefYTip')"
          >
            <a-input-number
              v-model:value="comboState.form.labelCfg.refY"
              style="width: 100%"
              :min="-100"
              :max="100"
              placeholder="<=100"
            ></a-input-number>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="16">
        <a-col :lg="12" :md="12" :xs="24">
          <a-form-item
            :label="t('views.monitor.topologyBuild.formLabelPosition')"
            name="labelCfg.position"
            :help="t('views.monitor.topologyBuild.comboFormLabelPosition')"
          >
            <a-select
              v-model:value="comboState.form.labelCfg.position"
              :options="comboLabelPositionOptions"
            >
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>

    <!-- 节点排版 -->
    <a-form
      v-if="modalState.formType === 'node'"
      name="modalStateFromNode"
      layout="horizontal"
      :label-col="{ span: 6 }"
      :labelWrap="true"
    >
      <a-form-item
        :label="t('views.monitor.topologyBuild.nodeFormComboId')"
        name="comboId"
        :help="t('views.monitor.topologyBuild.nodeFormComboIdTip')"
        :label-col="{ span: 3 }"
      >
        <a-select
          v-model:value="nodeState.form.comboId"
          :options="selectComboOptions"
          :placeholder="t('common.selectPlease')"
        >
        </a-select>
      </a-form-item>

      <a-form-item
        :label="t('views.monitor.topologyBuild.nodeFormId')"
        name="type"
        :label-col="{ span: 3 }"
        v-bind="nodeStateForm.validateInfos.id"
      >
        <a-input
          v-model:value="nodeState.form.id"
          allow-clear
          :placeholder="t('common.inputPlease')"
          :disabled="nodeState.form.id === nodeState.origin.id"
        ></a-input>
      </a-form-item>

      <a-form-item
        :label="t('views.monitor.topologyBuild.nodeFormType')"
        name="type"
        :label-col="{ span: 3 }"
        v-bind="nodeStateForm.validateInfos.type"
      >
        <a-select
          v-model:value="nodeState.form.type"
          :options="nodeTypeOptions"
          @change="handleNodeTypeChange"
          :placeholder="t('common.selectPlease')"
        >
        </a-select>
      </a-form-item>

      <a-row :gutter="16">
        <a-col :lg="12" :md="12" :xs="24">
          <a-form-item
            :label="t('views.monitor.topologyBuild.nodeFormX')"
            name="x"
          >
            <a-input-number
              v-model:value="nodeState.form.x"
              style="width: 100%"
              :placeholder="t('common.inputPlease')"
            ></a-input-number>
          </a-form-item>
        </a-col>
        <a-col :lg="12" :md="12" :xs="24">
          <a-form-item
            :label="t('views.monitor.topologyBuild.nodeFormY')"
            name="y"
          >
            <a-input-number
              v-model:value="nodeState.form.y"
              style="width: 100%"
              :placeholder="t('common.inputPlease')"
            ></a-input-number>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="16">
        <a-col
          :lg="12"
          :md="12"
          :xs="24"
          v-if="nodeState.form.type.startsWith('circle')"
        >
          <a-form-item
            :label="t('views.monitor.topologyBuild.nodeFormSize')"
            name="size"
            :help="t('views.monitor.topologyBuild.nodeFormSizeCircle')"
          >
            <a-input-number
              v-model:value="nodeState.form.size"
              style="width: 100%"
              :placeholder="t('common.inputPlease')"
            ></a-input-number>
          </a-form-item>
        </a-col>
        <a-col
          :lg="12"
          :md="12"
          :xs="24"
          v-else-if="nodeState.form.type.startsWith('star')"
        >
          <a-form-item
            :label="t('views.monitor.topologyBuild.nodeFormSize')"
            name="size"
            :help="t('views.monitor.topologyBuild.nodeFormSizeStar')"
          >
            <a-input-number
              v-model:value="nodeState.form.size"
              style="width: 100%"
              :placeholder="t('common.inputPlease')"
            ></a-input-number>
          </a-form-item>
        </a-col>
        <a-col
          :lg="12"
          :md="12"
          :xs="24"
          v-else-if="nodeState.form.type === 'donut'"
        >
          <a-form-item
            :label="t('views.monitor.topologyBuild.nodeFormSize')"
            name="size"
            :help="t('views.monitor.topologyBuild.nodeFormSizeDonut')"
          >
            <a-input-number
              v-model:value="nodeState.form.size"
              style="width: 100%"
              :placeholder="t('common.inputPlease')"
            ></a-input-number>
          </a-form-item>
        </a-col>
        <a-col
          :lg="12"
          :md="12"
          :xs="24"
          v-else-if="nodeState.form.type === 'triangle'"
        >
          <a-form-item
            :label="t('views.monitor.topologyBuild.nodeFormSize')"
            name="size"
            :help="t('views.monitor.topologyBuild.nodeFormSizeTriangle')"
          >
            <a-input-number
              :min="0"
              :max="1000"
              v-model:value="nodeState.form.size"
              style="width: 100%"
              :placeholder="t('common.inputPlease')"
            ></a-input-number>
          </a-form-item>
        </a-col>
        <a-col :lg="12" :md="12" :xs="24" v-else>
          <a-form-item
            :label="t('views.monitor.topologyBuild.nodeFormSize')"
            name="size"
            :help="
              nodeState.form.type === 'ellipse'
                ? t('views.monitor.topologyBuild.nodeFormSizeEllipse')
                : t('views.monitor.topologyBuild.nodeFormSizeOhter')
            "
          >
            <a-input-group compact>
              <a-input-number
                v-for="(_, i) in nodeState.form.size"
                :key="i"
                style="width: calc(100% / 2)"
                :min="0"
                :max="1000"
                v-model:value="nodeState.form.size[i]"
                placeholder="0 ~ 1000"
              ></a-input-number>
            </a-input-group>
          </a-form-item>
        </a-col>
      </a-row>

      <template v-if="!nodeState.form.type.startsWith('image')">
        <a-row :gutter="16">
          <a-col :lg="12" :md="12" :xs="24">
            <a-form-item
              :label="t('views.monitor.topologyBuild.formStyleStroke')"
              name="stroke"
            >
              <a-input
                v-model:value="nodeState.form.style.stroke"
                type="color"
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col :lg="12" :md="12" :xs="24">
            <a-form-item
              :label="t('views.monitor.topologyBuild.formStyleLineWidth')"
              name="lineWidth"
            >
              <a-input-number
                v-model:value="nodeState.form.style.lineWidth"
                style="width: 100%"
                :min="1"
                :max="100"
                placeholder="<=100"
              ></a-input-number>
            </a-form-item>
          </a-col>
          <a-col :lg="12" :md="12" :xs="24">
            <a-form-item
              :label="t('views.monitor.topologyBuild.formStyleFill')"
              name="fill"
            >
              <a-input
                v-model:value="nodeState.form.style.fill"
                type="color"
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col
            :lg="12"
            :md="12"
            :xs="24"
            v-if="nodeState.form.type === 'triangle'"
          >
            <a-form-item
              :label="t('views.monitor.topologyBuild.nodeFormDirection')"
              name="direction"
            >
              <a-select
                v-model:value="nodeState.form.direction"
                :options="nodeDirectionOptions"
              >
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </template>

      <a-divider orientation="left">
        {{ t('views.monitor.topologyBuild.label') }}
      </a-divider>

      <a-form-item
        :label="t('views.monitor.topologyBuild.formLabel')"
        name="label"
        :label-col="{ span: 3 }"
        :help="t('views.monitor.topologyBuild.formLabelTip')"
      >
        <a-input
          v-model:value="nodeState.form.label"
          allow-clear
          :placeholder="t('common.inputPlease')"
        >
        </a-input>
      </a-form-item>

      <a-row :gutter="16">
        <a-col :lg="12" :md="12" :xs="24">
          <a-form-item
            :label="t('views.monitor.topologyBuild.formLabelStyleFill')"
            name="fill"
          >
            <a-input
              v-model:value="nodeState.form.labelCfg.style.fill"
              type="color"
            ></a-input>
          </a-form-item>
        </a-col>
        <a-col :lg="12" :md="12" :xs="24">
          <a-form-item
            :label="t('views.monitor.topologyBuild.formLabelStyleFontSize')"
            name="fontSize"
          >
            <a-input-number
              v-model:value="nodeState.form.labelCfg.style.fontSize"
              style="width: 100%"
              :min="10"
              :max="100"
              placeholder="10~100"
            ></a-input-number>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="16">
        <a-col :lg="12" :md="12" :xs="24">
          <a-form-item
            :label="t('views.monitor.topologyBuild.formLabelPosition')"
            name="labelCfg.position"
            :help="t('views.monitor.topologyBuild.nodeFormLabelPosition')"
          >
            <a-select
              v-model:value="nodeState.form.labelCfg.position"
              :options="nodeLabelPositionOptions"
            >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :lg="12" :md="12" :xs="24">
          <a-form-item
            :label="t('views.monitor.topologyBuild.nodeFormLabelOffset')"
            name="labelCfg.offset"
          >
            <a-input-number
              v-model:value="nodeState.form.labelCfg.offset"
              style="width: 100%"
              :min="-100"
              :max="100"
              placeholder="-100~100"
            ></a-input-number>
          </a-form-item>
        </a-col>
      </a-row>

      <template v-if="nodeState.form.type.startsWith('image')">
        <a-divider orientation="left">
          {{ t('views.monitor.topologyBuild.nodeFormTypeImage') }}
        </a-divider>

        <a-row :gutter="16">
          <a-col :lg="12" :md="12" :xs="24">
            <a-form-item
              :label="t('views.monitor.topologyBuild.nodeFormClipShow')"
              name="clipCfg.show"
            >
              <a-switch v-model:checked="nodeState.form.clipCfg.show" />
            </a-form-item>
          </a-col>
          <a-col :lg="12" :md="12" :xs="24">
            <a-form-item
              :label="t('views.monitor.topologyBuild.nodeFormImg')"
              name="img"
            >
              <a-input-group compact>
                <a-auto-complete
                  v-model:value="nodeState.form.img"
                  :options="nodeImageOptions"
                  allow-clear
                  :placeholder="t('common.selectPlease')"
                  style="width: calc(100% - 32px)"
                />
                <a-upload
                  name="file"
                  list-type="text"
                  accept=".svg,.jpg,.png"
                  :max-count="1"
                  :show-upload-list="false"
                  :custom-request="(v: any) => console.log(v)"
                  :disabled="true"
                >
                  <a-button type="primary" :loading="false">
                    <template #icon>
                      <UploadOutlined />
                    </template>
                  </a-button>
                </a-upload>
              </a-input-group>
            </a-form-item>
          </a-col>
        </a-row>

        <!-- 裁剪功能 -->
        <template v-if="nodeState.form.clipCfg.show">
          <a-row :gutter="16">
            <a-col :lg="12" :md="12" :xs="24">
              <a-form-item
                :label="t('views.monitor.topologyBuild.nodeFormClipType')"
                name="clipCfg.type"
              >
                <a-select
                  v-model:value="nodeState.form.clipCfg.type"
                  :options="nodeImageClipCfgOptions"
                >
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>

          <!-- 剪裁圆形 -->
          <a-row
            :gutter="16"
            v-if="nodeState.form.clipCfg.type.startsWith('circle')"
          >
            <a-col :lg="12" :md="12" :xs="24">
              <a-form-item
                :label="t('views.monitor.topologyBuild.nodeFormClipTypeCircle')"
                name="clipCfg.r"
              >
                <a-input-number
                  v-model:value="nodeState.form.clipCfg.r"
                  style="width: 100%"
                  :min="-200"
                  :max="200"
                  placeholder="-200 ~ 200"
                ></a-input-number>
              </a-form-item>
            </a-col>
          </a-row>

          <!-- 剪裁矩形 -->
          <a-row
            :gutter="16"
            v-if="nodeState.form.clipCfg.type.startsWith('rect')"
          >
            <a-col :lg="12" :md="12" :xs="24">
              <a-form-item
                :label="
                  t('views.monitor.topologyBuild.nodeFormClipTypeRectWidth')
                "
                name="clipCfg.width"
              >
                <a-input-number
                  v-model:value="nodeState.form.clipCfg.width"
                  style="width: 100%"
                  :min="-200"
                  :max="200"
                  placeholder="-200 ~ 200"
                ></a-input-number>
              </a-form-item>
            </a-col>
            <a-col :lg="12" :md="12" :xs="24">
              <a-form-item
                :label="
                  t('views.monitor.topologyBuild.nodeFormClipTypeRectHeight')
                "
                name="clipCfg.height"
              >
                <a-input-number
                  v-model:value="nodeState.form.clipCfg.height"
                  style="width: 100%"
                  :min="-200"
                  :max="200"
                  placeholder="-200 ~ 200"
                ></a-input-number>
              </a-form-item>
            </a-col>
          </a-row>

          <!-- 剪裁椭圆 -->
          <a-row :gutter="16" v-if="nodeState.form.clipCfg.type === 'ellipse'">
            <a-col :lg="12" :md="12" :xs="24">
              <a-form-item
                :label="
                  t('views.monitor.topologyBuild.nodeFormClipTypeEllipseRx')
                "
                name="clipCfg.rx"
              >
                <a-input-number
                  v-model:value="nodeState.form.clipCfg.rx"
                  style="width: 100%"
                  :min="-200"
                  :max="200"
                  placeholder="-200 ~ 200"
                ></a-input-number>
              </a-form-item>
            </a-col>
            <a-col :lg="12" :md="12" :xs="24">
              <a-form-item
                :label="
                  t('views.monitor.topologyBuild.nodeFormClipTypeEllipseRy')
                "
                name="clipCfg.ry"
              >
                <a-input-number
                  v-model:value="nodeState.form.clipCfg.ry"
                  style="width: 100%"
                  :min="-200"
                  :max="200"
                  placeholder="-200 ~ 200"
                ></a-input-number>
              </a-form-item>
            </a-col>
          </a-row>

          <!-- 裁剪图形坐标 -->
          <a-row :gutter="16">
            <a-col :lg="12" :md="12" :xs="24">
              <a-form-item
                :label="t('views.monitor.topologyBuild.nodeFormClipX')"
                name="clipCfg.x"
              >
                <a-input-number
                  v-model:value="nodeState.form.clipCfg.x"
                  style="width: 100%"
                  :min="-200"
                  :max="200"
                  placeholder="-200 ~ 200"
                ></a-input-number>
              </a-form-item>
            </a-col>
            <a-col :lg="12" :md="12" :xs="24">
              <a-form-item
                :label="t('views.monitor.topologyBuild.nodeFormClipY')"
                name="clipCfg.y"
              >
                <a-input-number
                  v-model:value="nodeState.form.clipCfg.y"
                  style="width: 100%"
                  :min="-200"
                  :max="200"
                  placeholder="-200 ~ 200"
                ></a-input-number>
              </a-form-item>
            </a-col>
          </a-row>
        </template>
      </template>

      <!-- 图标 排除矩形和图片 -->
      <template
        v-if="
          nodeState.form.icon &&
          !nodeState.form.type.startsWith('rect') &&
          !nodeState.form.type.startsWith('image')
        "
      >
        <a-divider orientation="left">
          {{ t('views.monitor.topologyBuild.nodeFormIcon') }}
        </a-divider>

        <a-row :gutter="16">
          <a-col :lg="12" :md="12" :xs="24">
            <a-form-item
              :label="t('views.monitor.topologyBuild.nodeFormIconShow')"
              name="icon.show"
            >
              <a-switch v-model:checked="nodeState.form.icon.show" />
            </a-form-item>
          </a-col>
          <a-col :lg="12" :md="12" :xs="24">
            <a-form-item
              :label="t('views.monitor.topologyBuild.nodeFormIconImg')"
              name="icon.img"
            >
              <a-auto-complete
                v-model:value="nodeState.form.icon.img"
                :options="nodeImageOptions"
                allow-clear
                :placeholder="t('common.selectPlease')"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="16">
          <a-col :lg="12" :md="12" :xs="24">
            <a-form-item
              :label="t('views.monitor.topologyBuild.nodeFormIconWidth')"
              name="icon.width"
            >
              <a-input-number
                v-model:value="nodeState.form.icon.width"
                style="width: 100%"
                :min="10"
                :max="100"
                placeholder="10~100"
              ></a-input-number>
            </a-form-item>
          </a-col>
          <a-col :lg="12" :md="12" :xs="24">
            <a-form-item
              :label="t('views.monitor.topologyBuild.nodeFormIconHeight')"
              name="icon.height"
            >
              <a-input-number
                v-model:value="nodeState.form.icon.height"
                style="width: 100%"
                :min="10"
                :max="100"
                placeholder="10~100"
              ></a-input-number>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="16" v-if="nodeState.form.type === 'triangle'">
          <a-col :lg="12" :md="12" :xs="24">
            <a-form-item
              :label="t('views.monitor.topologyBuild.nodeFormIconOffset')"
              name="icon.offset"
            >
              <a-input-number
                v-model:value="nodeState.form.icon.offset"
                style="width: 100%"
                :min="-200"
                :max="200"
                placeholder="-200 ~ 200"
              ></a-input-number>
            </a-form-item>
          </a-col>
        </a-row>
      </template>
    </a-form>

    <!-- 边排版 -->
    <a-form
      v-if="modalState.formType === 'edge'"
      name="modalStateFromEdge"
      layout="horizontal"
      :label-col="{ span: 6 }"
      :labelWrap="true"
    >
      <a-form-item
        :label="t('views.monitor.topologyBuild.edgeFormType')"
        name="type"
        :label-col="{ span: 3 }"
        v-bind="edgeStateForm.validateInfos.type"
      >
        <a-select
          v-model:value="edgeState.form.type"
          :options="edgeTypeOptions"
        >
        </a-select>
      </a-form-item>

      <a-row :gutter="16">
        <a-col :lg="12" :md="12" :xs="24">
          <a-form-item
            :label="t('views.monitor.topologyBuild.edgeFormSource')"
            name="source"
            v-bind="edgeStateForm.validateInfos.source"
          >
            <a-select
              v-model:value="edgeState.form.source"
              :options="selectSourceTargetOptions"
              :placeholder="t('common.selectPlease')"
            >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :lg="12" :md="12" :xs="24">
          <a-form-item
            :label="t('views.monitor.topologyBuild.edgeFormTarget')"
            name="target"
            v-bind="edgeStateForm.validateInfos.target"
          >
            <a-select
              v-model:value="edgeState.form.target"
              :options="selectSourceTargetOptions"
              :placeholder="t('common.selectPlease')"
            >
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="16">
        <a-col :lg="12" :md="12" :xs="24">
          <a-form-item
            :label="t('views.monitor.topologyBuild.formStyleStroke')"
            name="stroke"
          >
            <a-input
              v-model:value="edgeState.form.style.stroke"
              type="color"
            ></a-input>
          </a-form-item>
        </a-col>
        <a-col :lg="12" :md="12" :xs="24">
          <a-form-item
            :label="t('views.monitor.topologyBuild.formStyleLineWidth')"
            name="lineWidth"
          >
            <a-input-number
              v-model:value="edgeState.form.style.lineWidth"
              style="width: 100%"
              :min="1"
              :max="100"
              placeholder="<=100"
            ></a-input-number>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="16">
        <a-col :lg="12" :md="12" :xs="24">
          <a-form-item
            :label="t('views.monitor.topologyBuild.edgeFormStartArrow')"
            name="startArrow"
            :help="t('views.monitor.topologyBuild.edgeFormStartArrowTip')"
          >
            <a-switch v-model:checked="edgeState.form.style.startArrow" />
          </a-form-item>
        </a-col>
        <a-col :lg="12" :md="12" :xs="24">
          <a-form-item
            :label="t('views.monitor.topologyBuild.edgeFormEndArrow')"
            name="endArrow"
            :help="t('views.monitor.topologyBuild.edgeFormEndArrowTip')"
          >
            <a-switch v-model:checked="edgeState.form.style.endArrow" />
          </a-form-item>
        </a-col>
      </a-row>

      <a-divider orientation="left">
        {{ t('views.monitor.topologyBuild.label') }}
      </a-divider>

      <a-form-item
        :label="t('views.monitor.topologyBuild.formLabel')"
        name="label"
        :label-col="{ span: 3 }"
        :help="t('views.monitor.topologyBuild.formLabelTip')"
      >
        <a-input
          v-model:value="edgeState.form.label"
          allow-clear
          :placeholder="t('common.inputPlease')"
        >
        </a-input>
      </a-form-item>

      <a-row :gutter="16">
        <a-col :lg="12" :md="12" :xs="24">
          <a-form-item
            :label="t('views.monitor.topologyBuild.formLabelStyleFill')"
            name="fill"
          >
            <a-input
              v-model:value="edgeState.form.labelCfg.style.fill"
              type="color"
            ></a-input>
          </a-form-item>
        </a-col>
        <a-col :lg="12" :md="12" :xs="24">
          <a-form-item
            :label="t('views.monitor.topologyBuild.formLabelStyleFontSize')"
            name="fontSize"
          >
            <a-input-number
              v-model:value="edgeState.form.labelCfg.style.fontSize"
              style="width: 100%"
              :min="10"
              :max="100"
              placeholder="<=100"
            ></a-input-number>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="16">
        <a-col :lg="12" :md="12" :xs="24">
          <a-form-item
            :label="t('views.monitor.topologyBuild.formLabelRefX')"
            name="labelCfg.refX"
            :help="t('views.monitor.topologyBuild.formLabelRefXTip')"
          >
            <a-input-number
              v-model:value="edgeState.form.labelCfg.refX"
              style="width: 100%"
              :min="-100"
              :max="100"
              placeholder="<=100"
            ></a-input-number>
          </a-form-item>
        </a-col>
        <a-col :lg="12" :md="12" :xs="24">
          <a-form-item
            :label="t('views.monitor.topologyBuild.formLabelRefY')"
            name="labelCfg.refY"
            :help="t('views.monitor.topologyBuild.formLabelRefYTip')"
          >
            <a-input-number
              v-model:value="edgeState.form.labelCfg.refY"
              style="width: 100%"
              :min="-100"
              :max="100"
              placeholder="<=100"
            ></a-input-number>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="16">
        <a-col :lg="12" :md="12" :xs="24">
          <a-form-item
            :label="t('views.monitor.topologyBuild.formLabelPosition')"
            name="labelCfg.position"
            :help="t('views.monitor.topologyBuild.edgeFormLabelPosition')"
          >
            <a-select
              v-model:value="edgeState.form.labelCfg.position"
              :options="edgeLabelPositionOptions"
            >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :lg="12" :md="12" :xs="24">
          <a-form-item
            :label="t('views.monitor.topologyBuild.edgeFormLabelAutoRotate')"
            name="labelCfg.autoRotate"
            :help="t('views.monitor.topologyBuild.edgeFormLabelAutoRotateTip')"
          >
            <a-switch v-model:checked="edgeState.form.labelCfg.autoRotate" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </DraggableModal>
</template>

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