<script setup lang="tsx">
import { useElementsInfoStore } from '../../stores/elementsInfo.ts';
import { useSelectedInfoStore } from '../../stores/selectedInfo.ts';

defineOptions({ name: 'EdgeTransfer' });

const lf: any = inject('lf');

const elementsInfoStore = useElementsInfoStore();
const selectedInfoStore = useSelectedInfoStore();

const typeOptions = [
  { label: '普通流转路径', value: 'normal' },
  { label: '默认流转路径', value: 'half' },
  { label: '条件流转路径', value: 'empty' },
];
const lTypeOptions = [
  { label: '表达式', value: 'expression' },
  { label: '脚本', value: 'scriptFormat' },
];
const scriptTypeOptions = [
  { label: '内联脚本', value: 'inline' },
  { label: '外部脚本', value: 'external' },
];
interface FormType {
  type: string
  lType?: string
  expression?: string
  scriptFormat?: string
  scriptType?: string
  scriptContent?: string
  resource?: string
}
const form = ref<FormType>({ type: 'normal' });

const elementInfo = computed(() => {
  return elementsInfoStore.getElementById(selectedInfoStore.selectId) || {};
});

watch(elementInfo, (val) => {
  form.value = val.edgeTransfer || { type: 'normal' };
}, { immediate: true, deep: true });

function handleChangeType(val: any) {
  lf.value.setProperties(selectedInfoStore.selectId, {
    arrowType: val,
  });
  form.value = {
    type: val,
  };
  // 默认流转路径（需要把sourceNodeId的default属性设置为当前选中的边id，同时其余的边之前设置为默认的 需要改为普通）
  if (val === 'half') {
    const sourceNodeId = lf.value.getEdgeDataById(selectedInfoStore.selectId).sourceNodeId;
    // 设置sourceNodeId的default属性为当前选中的边id
    lf.value.setProperties(sourceNodeId, {
      default: selectedInfoStore.selectId,
    });
    // 其余以sourceNodeId为出发点的边取消默认流转路径改为普通流转路径
    const edges = lf.value.getEdgeModels({
      sourceNodeId,
    });
    // console.log('edges--->>>', edges);
    edges.forEach((edge: any) => {
      if (edge.id !== selectedInfoStore.selectId && edge.properties.arrowType === 'half') {
        lf.value.setProperties(edge.id, {
          arrowType: 'normal',
        });
        elementsInfoStore.updateElement(edge.id, {
          edgeTransfer: { type: 'normal' },
        });
      }
    });
  }
  else {
    // 普通流转路径和条件流转路径都需要把sourceNodeId的default属性设置为空
    const sourceNodeId = lf.value.getEdgeDataById(selectedInfoStore.selectId).sourceNodeId;
    lf.value.setProperties(sourceNodeId, {
      default: '',
    });
  }
}

watch(() => form.value, (newVal) => {
  elementsInfoStore.updateElement(selectedInfoStore.selectId, {
    edgeTransfer: newVal,
  });
  lf.value.setProperties(selectedInfoStore.selectId, {
    arrowType: newVal.type,
    edgeTransfer: newVal,
  });
}, { deep: true });
</script>

<template>
  <a-form
    :model="form"
    :label-col="{ style: { width: '80px' } }"
  >
    <a-form-item label="流转类型" name="type">
      <a-select
        v-model:value="form.type"
        style="width: 100%;"
        placeholder="请选择流转类型"
        :options="typeOptions"
        @change="handleChangeType"
      />
    </a-form-item>
    <template v-if="form.type === 'empty'">
      <a-form-item v-if="form.type === 'empty'" label="条件格式" name="lType">
        <a-select
          v-model:value="form.lType"
          style="width: 100%;"
          placeholder="请选择条件格式"
          :options="lTypeOptions"
        />
      </a-form-item>
      <a-form-item v-if="form.lType === 'expression'" label="表达式" name="expression">
        <a-input v-model:value="form.expression" :maxlength="30" />
      </a-form-item>
      <a-form-item v-if="form.lType === 'scriptFormat'" label="脚本语言" name="scriptFormat">
        <a-input v-model:value="form.scriptFormat" :maxlength="30" />
      </a-form-item>
      <a-form-item v-if="form.lType === 'scriptFormat'" label="脚本类型" name="scriptType">
        <a-select
          v-model:value="form.scriptType"
          style="width: 100%;"
          placeholder="脚本类型"
          :options="scriptTypeOptions"
        />
      </a-form-item>
      <a-form-item v-if="form.scriptType === 'inline'" label="脚本" name="scriptContent">
        <a-textarea v-model:value="form.scriptContent" placeholder="输入脚本内容" allow-clear :maxlength="300" />
      </a-form-item>
      <a-form-item v-if="form.scriptType === 'external'" label="资源地址" name="resource">
        <a-input v-model:value="form.resource" :maxlength="100" />
      </a-form-item>
    </template>
  </a-form>
</template>
