<script setup lang="ts">
import { ElMessage, ElSelect } from 'element-plus';
import { v4 as uuidv4 } from 'uuid';
import { useI18n } from 'vue-i18n';
import { createTargetTables, getFileId, getMindMap, getTable, getUser, targetUser } from '@/utils/axios/sync/configTask/index';

import { X6Graph } from './antvX6';

// 接收一个名为 data 的对象 props，类型为 DataProps
const props = defineProps<{
  data: DataProps; // 这里的 data 就是父组件传递的整个对象
}>();
const emit = defineEmits(['cancel']);
// 定义一个接口描述对象结构
interface DataProps {
  taskId: string;
  sourceId: string;
  sourceName: string;
}

const { t } = useI18n();

// 模式列表
const modeList = ref<any[]>([]);
// 数据表列表
const dataList = ref<any[]>([]);
// 字段列表
const fieldList = ref<any[]>([]);
// 目标用户名
const targetUserNameList = ref<any[]>([]);

const graph = ref<X6Graph | null>(null);

const level3 = ref<InstanceType<typeof ElSelect> | null>(null);
const level4 = ref<InstanceType<typeof ElSelect> | null>(null);

// 手动输入模式名
const manualModeInput = ref('');

// 表单数据
const formData = reactive({
  taskId: '',
  sourceId: '', // 默认选中“mySql”
  sourceName: '',
  mode: [],
  dataValue: [],
  field: '',
  targetUserName: '',
});

// 当前配置项Id
const configData = ref<any>([]);

// 记录上一次的选中值（初始为空）
const prevModeValues = ref<string[]>([]);
// 记录上一次的选中值(数据表列表)
const prevDataValues = ref<string[]>([]);
// 记录上一次的选中值(字段列表)
const prevFieldValues = ref<string>('');

// 配置的数据表集合
const configDataValues = ref<string[]>([]);

// 初始化思维导图画布
function initGraph() {
  // 初始化画布（容器ID为 graph-container）
  graph.value = new X6Graph('graphContainer').init({ grid: false, zoom: true });

  // 1. 创建根节点
  const root = graph.value.addRootNode({
    id: formData.sourceId,
    label: formData.sourceName,
  });

  console.log(root);
}

// 模式选择变化（正确的事件参数：仅新值）
function handleModeChange(newValues: string[]) {
  if (!graph.value)
    return;

  // 旧值从 prevModeValues 中获取
  const oldValues = prevModeValues.value;

  // 1. 找出新增的选项（需要新增节点）
  const added = newValues.filter(v => !oldValues.includes(v));
  // 2. 找出移除的选项（需要删除节点）
  const removed = oldValues.filter(v => !newValues.includes(v));

  // 新增节点
  added.forEach((value) => {
    const item = modeList.value.find((item: any) => item.value === value);
    if (item) {
      graph.value?.addChildNode(formData.sourceId, {
        id: value,
        label: item.label,
        level: 'level2',
      });
    }
  });

  // 删除节点
  removed.forEach((value) => {
    graph.value?.removeNode(value);
  });

  // 更新旧值记录（下次触发时使用）
  prevModeValues.value = [...newValues];
}

// 数据选择变化（模仿 handleModeChange 逻辑）
function handleDataListChange(newValues: string[]) {
  if (!graph.value)
    return;

  // 旧值从 prevDataValues 中获取
  const oldValues = prevDataValues.value;

  // 1. 找出新增的选项（需要新增节点）
  const added = newValues.filter(v => !oldValues.includes(v));
  // 2. 找出移除的选项（需要删除节点）
  const removed = oldValues.filter(v => !newValues.includes(v));

  // 新增节点（假设添加到 level3 层级，父节点为某个 level2 节点，可按需修改）
  added.forEach((value) => {
    // 从数据列表中找到对应项的 label
    const item = dataList.value.find(item => item.value === value);
    if (item) {
      // 假设父节点 ID 为某个 level2 节点（例如：取第一个 level2 节点的 ID，或通过参数传入）
      // 实际场景中需根据业务确定父节点 ID
      const parentNodeId = configData.value[1].id; // 可替换为动态获取的父节点

      graph.value?.addChildNode(parentNodeId, {
        id: `${value}`, // 避免与其他节点 ID 冲突，加前缀区分
        label: item.label,
        level: 'level3', // 假设数据节点为 level3 层级
      });
    }
  });

  // 删除节点（注意：节点 ID 需与新增时一致，这里对应上面的 `data-${value}`）
  removed.forEach((value) => {
    const nodeId = `${value}`; // 与新增时的 ID 保持一致
    if (!configDataValues.value.includes(value)) {
      graph.value?.removeNode(nodeId);
    }
  });

  // 更新旧值记录（下次触发时使用）
  prevDataValues.value = [...newValues];
}

// 数据选择变化（单选逻辑）
function handleFieldListChange(newValue: string) { // 注意：参数从 string[] 改为 string
  console.log('当前选中值：', newValue);

  if (!graph.value)
    return;

  // 1. 旧值从 prevFieldValues 中获取（同样存单个值，非数组）
  const oldValue = prevFieldValues.value;

  // 2. 核心判断：只有新值≠旧值时，才执行新增/删除（单选无需找新增/删除数组）
  if (newValue !== oldValue) {
    // 第一步：先删除旧值对应的节点（如果旧值存在）
    if (oldValue) {
      const oldNodeId = `${oldValue}`; // 与新增时的ID规则一致
      // 只有旧值不在配置保留列表中，才删除节点
      if (!configDataValues.value.includes(oldValue)) {
        graph.value.removeNode(oldNodeId);
      }
    }

    // 第二步：再新增新值对应的节点（如果新值存在）
    if (newValue) {
      // 从数据列表找到新值对应的label
      const item = fieldList.value.find(item => item.value === newValue);
      if (item) {
        // 动态获取父节点ID（这里逻辑保持你原有，可根据业务调整）
        const parentNodeId = configData.value[2].id;
        // 新增level4节点（ID规则与删除时一致，加前缀避免冲突）
        graph.value.addChildNode(parentNodeId, {
          id: newValue,
          label: item.label,
          level: 'level4', // 单选节点层级为level4
        });
      }
    }
  }

  // 3. 更新旧值记录（存单个值，供下次对比）
  prevFieldValues.value = newValue;
}

// -------------------------- 8. 初始化逻辑（保留） --------------------------
onMounted(() => {
  // 源数据库id和name从props传入
  formData.taskId = props.data.taskId;
  formData.sourceId = props.data.sourceId;
  formData.sourceName = props.data.sourceName;
  // 根据源数据库获取(模式/用户名)列表
  nextTick(() => {
    getTargetUserName(formData.taskId);
    getMindMap({
      taskId: formData.taskId,
    }, (res) => {
      initGraph();
      getModelList((value: any) => {
        console.log(value);
        if (res.result.userInfos.length) {
          console.log(res);
          graph.value?.importData(res.result.userInfos, formData.sourceId);
          res.result.userInfos.forEach((item: any) => {
            modeList.value.forEach((mode: any) => {
              if (mode.label === item.userName) {
                formData.mode.push(mode.value);
              }
            });
          });
        }
      });

      // mindMap.value = res.result;
    });
  });

  // 注册antvX6Event回调事件
  EventBusTool.getEventBus().subscribe('antvX6Event', (res: any) => {
    // 如果进入全屏，全屏icon没有高亮的话，需要高亮
    if (res.key === 'removeNode') {
      console.log(res.id);

      if (res.level === 'level2') {
        // 3. 从下拉选中值中移除（关键：同步下拉选择器的选中状态）
        formData.mode = formData.mode.filter(v => v !== res.id);
        prevModeValues.value = prevModeValues.value.filter(v => v !== res.id);
        formData.dataValue = [];
        formData.field = '';
      }
      else if (res.level === 'level3') {
        // 3. 从下拉选中值中移除（关键：同步下拉选择器的选中状态）
        formData.dataValue = formData.dataValue.filter(v => v !== res.id);
        prevDataValues.value = prevDataValues.value.filter(v => v !== res.id);
        formData.field = '';
      }
      else if (res.level === 'level4') {
        formData.field = '';
        prevFieldValues.value = '';
      }
    }
    if (res.key === 'configNode') {
      configData.value = res.allParents;
      configDataValues.value = [...formData.dataValue, formData.field];
      // 请求
      if (res.level === 'level2') {
        getDataListById(res.label);
      }
      if (res.level === 'level3') {
        getFieldById(res.label);
      }
    }
  });
});

// 根据taskId获取目标用户名
function getTargetUserName(taskId: any) {
  targetUser({ taskId }, (res) => {
    console.log(res);
    targetUserNameList.value = res.result.map((item: any) => {
      return {
        value: item,
        label: item,
      };
    });
  });
}

// 根据源数据库id获取用户
function getModelList(callback?: (data: any) => void) {
  getUser({ sourceId: formData.sourceId }, (res) => {
    modeList.value = res.result.map((item: any) => {
      return {
        value: uuidv4(),
        label: item,
      };
    });
    callback?.(res);
  });
}

// 根据源数据库id以及用户名称获取所有表名称
function getDataListById(name: any) {
  getTable({ sourceId: formData.sourceId, username: name }, (res: any) => {
    dataList.value = res.result.map((item: any) => {
      return {
        value: uuidv4(),
        label: item,
      };
    });

    level3.value?.toggleMenu();
    formData.dataValue = [];
  });
}

function getFieldById(name: any) {
  console.log(configData.value[1].label, name);

  getFileId({ sourceId: formData.sourceId, username: configData.value[1].label, tableName: name }, (res) => {
    fieldList.value = res.result.map((item: any) => {
      return {
        value: uuidv4(),
        label: item,
      };
    });
    level4.value?.toggleMenu();
    formData.field = '';
  });
}
// 手动添加模式
function handleAddMode() {
  const inputVal = manualModeInput.value.trim();
  if (!inputVal) {
    ElMessage({ type: 'warning', message: '请输入模式名称' });
    return;
  }
  // 检查是否已存在相同 label 的模式
  const exists = modeList.value.find((item: any) => item.label === inputVal);
  if (exists) {
    // 如果已存在但未选中，直接选中
    if (!formData.mode.includes(exists.value)) {
      formData.mode.push(exists.value);
      handleModeChange([...formData.mode]);
    }
    else {
      ElMessage({ type: 'warning', message: '该模式已添加' });
    }
  }
  else {
    // 新建项并选中
    const newItem = { value: uuidv4(), label: inputVal };
    modeList.value.push(newItem);
    formData.mode.push(newItem.value);
    handleModeChange([...formData.mode]);
  }
  manualModeInput.value = '';
}

// 保存事件
function handleSave() {
  if (!formData.targetUserName) {
    ElMessage({
      type: 'error',
      message: `请选择目标用户名`,
    });
    return;
  }
  const data = graph.value?.getTargetTableData(formData.taskId, formData.targetUserName);
  console.log(data);
  if (data) {
    createTargetTables(data, (res) => {
      console.log(res);
      if (res === true) {
        ElMessage({
          type: 'success',
          message: `配置数据表成功`,
        });
        emit('cancel');
      }
    });
  }
  else {
    ElMessage({
      type: 'error',
      message: `配置有误，请检查`,
    });
  }
}
// 取消事件
function handleCancel() {
  emit('cancel');
}
</script>

<template>
  <div class="dataTable">
    <ElForm :inline="true" :model="formData" class="custom-form" style="margin-bottom: 20px;">
      <ElFormItem :label="t('database')">
        <ElInput v-model="formData.sourceName" disabled style="width: 180px" />
      </ElFormItem>
      <ElFormItem :label="t('mode')">
        <ElSelect v-model="formData.mode" style="width: 220px" multiple :max-collapse-tags="0" collapse-tags
          collapse-tags-tooltip filterable :placeholder="t('pleaseSelect')" class="custom-select"
          @change="handleModeChange">
          <ElOption v-for="(item, index) in modeList" :key="index" :label="item.label" :value="item.value" />
        </ElSelect>
      </ElFormItem>
      <ElFormItem label="手动输入模式" v-show="!formData.mode || !formData.mode.length">
        <div style="display: flex; align-items: center;">
          <ElInput v-model="manualModeInput" style="width: 160px" placeholder="输入模式名" @keyup.enter="handleAddMode" />
          <ElButton type="primary" style="margin-left: 4px; height: 34px; border-radius: 4px;" @click="handleAddMode">
            添加
          </ElButton>
        </div>
      </ElFormItem>
      <ElFormItem :label="t('dataTable')">
        <ElSelect ref="level3" v-model="formData.dataValue" style="width: 220px" multiple :max-collapse-tags="0"
          collapse-tags collapse-tags-tooltip filterable :placeholder="t('pleaseSelect')" class="custom-select"
          @change="handleDataListChange">
          <ElOption v-for="(item, index) in dataList" :key="index" :label="item.label" :value="item.value" />
        </ElSelect>
      </ElFormItem>
      <ElFormItem :label="t('field')">
        <ElSelect ref="level4" v-model="formData.field" style="width: 220px" filterable :placeholder="t('pleaseSelect')"
          class="custom-select" @change="handleFieldListChange">
          <ElOption v-for="(item, index) in fieldList" :key="index" :label="item.label" :value="item.value"
            :disabled="formData.dataValue.length === 0" />
        </ElSelect>
      </ElFormItem>
      <ElFormItem :label="t('targetUserName')">
        <ElSelect v-model="formData.targetUserName" style="width: 220px" filterable :placeholder="t('pleaseSelect')"
          class="custom-select">
          <ElOption v-for="(item, index) in targetUserNameList" :key="index" :label="item.label" :value="item.value" />
        </ElSelect>
      </ElFormItem>
    </ElForm>

    <div class="container_warapper">
      <div id="graphContainer" class="flow-chart-container" />
    </div>

    <div class="btns">
      <div class="save" @click="handleSave">
        保存
      </div>
      <div class="close" @click="handleCancel">
        取消
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.dataTable {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;

  .custom-form {
    margin-bottom: 20px;

    .custom-select {
      margin-right: 10px;
    }
  }

  .container_warapper {
    width: 100%;
    padding: 40px 0;
    box-sizing: border-box;
    border: 1px solid #416f7f;

    .flow-chart-container {
      width: 100%;
      height: 600px;
      overflow: auto;
    }
  }

  .x6-node:hover rect {
    stroke: #2196f3;
    strokewidth: 2;
  }

  .x6-node-selected rect {
    stroke: #ff9800;
    strokewidth: 2;
  }

  // 按钮hover优化
  .x6-node .btn:hover circle {
    fill: rgba(173, 230, 238, 0.2);
  }
}

.btns {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  div {
    margin-top: 5px;
    width: 150px;
    height: 40px;
    border-radius: 2px;
    background-color: rgb(10, 74, 92);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 16px;
  }

  .save {
    margin-right: 5px;
  }
}
</style>
