<template>
  <div id="mt-edit" class="relative flex-auto w-1/1 h-1/1 dark">
    <el-container class="h-1/1">
      <!-- 头部1 -->
      <el-header
        height="45px"
        class="dark:bg-myDarkBgColor cb-border p-0 select-none"
        @mousedown="mainPanelRef?.stopListenerKeyDown()"
      >
        <!-- 头部2 -->
        <header-panel
          v-model:leftAside="aside_state.left_show"
          v-model:rightAside="aside_state.right_show"
          v-model:lock-state="globalStore.lock"
          :selected-items-id="globalStore.selected_items_id"
          :group-enabled="header_group_enabled"
          :un-group-enabled="header_un_group_enabled"
          :align-enabled="header_align_enabled"
          :delete-enabled="header_delete_enabled"
          :undo-enabled="cacheStore.historyIndex > 0"
          :redo-enabled="cacheStore.historyIndex < cacheStore.history.length - 1"
          :real-time-data="globalStore.real_time_data"
          :use-thumbnail="mtEidtProps.useThumbnail"
          @on-group-click="mainPanelRef?.createGroupItem"
          @on-ungroup-click="mainPanelRef?.onUngroup"
          @on-delete-click="onDeleteClick"
          @on-export-click="onExportClick"
          @on-tree-click="done_json_tree_visiable = true"
          @on-help-click="onHelpClick"
          @align-selected="onAlignSelected"
          @on-redo-click="onRedoClick"
          @on-undo-click="onUndoClick"
          @on-import-click="onImportClick"
          @on-return-click="emits('onReturnClick')"
          @on-save-click="onSaveClick"
          @on-preview-click="onPreviewClick"
          @on-thumbnail-click="onThumbnailClick"
          @on-draw-line-click="onDrawLineClick"
          @on-right-drawer="onRightDrawer"
          @on-image-dialog="onImageDialog"
        ></header-panel>
      </el-header>

      <!-- 中间1 -->
      <el-container class="h-[calc(100%-45px-40px)]">
        <!-- 左侧 -->
        <el-aside
          :width="aside_state.left_show ? '200px' : '0px'"
          class="dark:bg-myDarkBgColor cr-border mt-edit-aside h-1/1 select-none"
          @mousedown="mainPanelRef?.stopListenerKeyDown()"
        >
          <left-aside :leftAsideConfig="leftAsideStore.config"></left-aside>
        </el-aside>

        <!-- 中间2 渲染组件 -->
        <el-main
          class="dark:bg-myMainDarkBgColor"
          @mousedown="mainPanelRef?.beginListenerKeyDown()"
        >
          <main-panel
            ref="mainPanelRef"
            :group-enabled="header_group_enabled"
            :un-group-enabled="header_un_group_enabled"
            :delete-enabled="header_delete_enabled"
            :line-append-enable="line_append_enable"
          ></main-panel>
        </el-main>

        <!-- 右侧 -->
        <el-aside
          :width="aside_state.right_show ? '200px' : '0px'"
          class="dark:bg-myDarkBgColor cl-border mt-edit-aside select-none"
          @mousedown="mainPanelRef?.stopListenerKeyDown()"
        >
          <!-- 右侧2 渲染选项 -->
          <right-aside>
            <template v-if="hasDeviceBindSlot" #deviceBind="{ item }">
              <slot name="deviceBind" :item="item"></slot>
            </template>
          </right-aside>
        </el-aside>
      </el-container>

      <!-- 底部 -->
      <!-- <el-footer height="40px" class="dark:bg-myDarkBgColor ct-border select-none">
        <footer-panel></footer-panel>
      </el-footer> -->
    </el-container>

    <!-- 导入数据 -->
    <el-dialog
      v-model="import_visible"
      title="数据导入"
      @close="mainPanelRef?.beginListenerKeyDown()"
    >
      <import-json ref="importJsonRef"></import-json>
      <template #footer>
        <el-button type="primary" @click="onImportYes">确定</el-button>
      </template>
    </el-dialog>

    <!-- 导出数据 -->
    <el-dialog
      v-model="export_visible"
      title="数据导出"
      @close="mainPanelRef?.beginListenerKeyDown()"
    >
      <export-json
        :done-json="objectDeepClone(globalStore.done_json)"
        :canvas-cfg="globalStore.canvasCfg"
        :grid-cfg="globalStore.gridCfg"
      ></export-json>
    </el-dialog>

    <el-drawer v-model="done_json_tree_visiable" title="图形结构树" direction="ltr" size="30%">
      <done-tree
        :done-json="globalStore.done_json"
        :selected-items-id="globalStore.selected_items_id"
        @update-selected-items-id="onTreeUpdateSelectedItemsId"
        @update-selected-id-hide="onDoneTreeUpdateSelectedIdHide"
      ></done-tree>
    </el-drawer>

    <!-- 数据模型 -->
    <el-drawer v-model="drawerVisible" :modal="false" title="数据模型文件111" modal-penetrable>
      <!-- <button @click="testData">组装数据</button> -->
      <!-- <el-button @click="resetSelection">重置</el-button> -->
      <!-- <el-button @click="getNode">测试</el-button> -->
      <!-- @check="handleCheck" -->
      <el-tree-v2
        style="max-width: 600px; height: 100"
        :data="treeData"
        :props="props"
        :height="450"
        :show-checkbox="true"
        :check-strictly="true"
        :highlight-current="true"
        @check="handleCheck"
        ref="treeRef"
      >
        <template #default="{ node }">
          <el-icon class="el-icon--left">
            <Document v-if="node.isLeaf" />
            <Folder v-else-if="!node.expanded" />
            <FolderOpened v-else />
          </el-icon>
          <span class="prefix" :class="{ 'is-leaf': node.isLeaf }">{{ node.label }}</span>
          <!-- <span>{{ node.label }}</span> -->
        </template>
      </el-tree-v2>

      <template #footer>
        <div class="drawer-footer">
          <el-button @click="saveModel">保存模型11</el-button>
          <el-button @click="loadModel" v-loading.fullscreen.lock="fullscreenLoading"
            >加载模型2</el-button
          >
          <!-- <el-button @click="coverModel"> 覆盖模型 </el-button> -->
          <el-button @click="removeModel"> 移除模型 </el-button>
        </div>
      </template>
    </el-drawer>

    <!-- 数据保存弹框 -->
    <el-dialog v-model="dialogFormVisible" title="数据模型保存" width="500">
      <span>确定保存或者覆盖 {{ fileName }} 模型文件？</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button
            type="primary"
            @click="doSaveModel"
            v-loading.fullscreen.lock="fullscreenLoading"
          >
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 图片模型 -->
    <imageModel
      v-if="dialogImageVisible"
      :dialogImageVisible="dialogImageVisible"
      :isEdit="true"
      :isDelete="true"
      :isBinding="false"
      :isUpload="true"
      @update-dialog-image-visible="updateDialogImageVisible"
    />

    <!-- END -->
  </div>
</template>
<script setup lang="ts">
import HeaderPanel from '@/components/mt-edit/components/layout/header-panel/index.vue';
import LeftAside from '@/components/mt-edit/components/layout/left-aside/index.vue';
import MainPanel from '@/components/mt-edit/components/layout/main-panel/index.vue';
import RightAside from '@/components/mt-edit/components/layout/right-aside/index.vue';
import { leftAsideStore } from '@/components/mt-edit/store/left-aside';
import {
  ElContainer,
  ElHeader,
  ElAside,
  ElMain,
  ElDialog,
  ElDrawer,
  ElButton,
  ElMessage,
  ElTreeV2
} from 'element-plus';
import { globalStore } from '@/components/mt-edit/store/global';
import { computed, reactive, ref, useSlots, onMounted, getCurrentInstance } from 'vue';
import DoneTree from '@/components/mt-edit/components/done-tree/index.vue';
import { cacheStore } from './store/cache';
import ExportJson from '@/components/mt-edit/components/export-json/index.vue';
import ImportJson from '@/components/mt-edit/components/import-json/index.vue';
import { objectDeepClone } from './utils';
import { genExportJson, useExportJsonToDoneJson } from './composables';
import type { IExportJson } from './components/types';
import { constantRoutes } from '@/router/newIndex';
import { type RouteRecordRaw } from 'vue-router';
import type { IDoneJson } from '@/components/mt-edit/store/types';
import { modelApi } from '@/utils/request';
import imageModel from '@/components/mt-edit/components/layout/base-panel/imageModel.vue';

interface Tree {
  id: string;
  label: string;
  disabled?: boolean;
  children?: Tree[];
}

const props = {
  value: 'id',
  label: 'label',
  children: 'children',
  disabled: 'disabled'
};

let treeData: Tree[] = [];

function updateDialogImageVisible() {
  dialogImageVisible.value = false;
}

// 打开图片模型弹窗
const onImageDialog = () => {
  dialogImageVisible.value = true;
  console.log('点击：', dialogImageVisible.value);
};

function loadMenuData(constantRoutes: Readonly<RouteRecordRaw[]>, treeData: Tree[]) {
  constantRoutes.forEach((route) => {
    // 没有子节点
    if (!route.children && !route.meta?.treeHidden) {
      treeData.push({
        id: route.name as string,
        label: route.meta?.title as string
      });
    }

    //只有一个子节点
    if (route.children && route.children?.length === 1 && !route.meta?.treeHidden) {
      treeData.push({
        id: route.name as string,
        label: route.meta?.title as string,
        disabled: true, // 禁用父节点
        children: [
          {
            id: route.children[0].name as string,
            label: route.children[0].meta?.title as string
          }
        ]
      });
    }

    //多个子节点
    if (route.children && route.children?.length > 1 && !route.meta?.treeHidden) {
      const parentNode = {
        id: route.name as string,
        label: route.meta?.title as string,
        disabled: true, // 禁用父节点
        children: [] as Tree[]
      };
      loadMenuData(route.children, parentNode.children);
      treeData.push(parentNode);
    }
  });
}

let drawerVisible = ref(false);
let dialogFormVisible = ref(false);
let dialogImageVisible = ref(false);
let fileName = ref('');
let menuType = ref('');

type MtEditProps = {
  useThumbnail?: boolean;
  screen?: string;
};

const mtEidtProps = withDefaults(defineProps<MtEditProps>(), {
  useThumbnail: false
});
const emits = defineEmits([
  'onPreviewClick',
  'onReturnClick',
  'onSaveClick',
  'onThumbnailClick',
  'onRightDrawer',
  'onImageDialog',
  'updateDialogImageVisible'
]);
const slots = useSlots();
const mainPanelRef = ref<InstanceType<typeof MainPanel>>();
const importJsonRef = ref<InstanceType<typeof ImportJson>>();
const aside_state = reactive({
  left_show: true,
  right_show: true
});
const hasDeviceBindSlot = computed(() => {
  return !!slots.deviceBind;
});
const header_delete_enabled = computed(() => {
  return globalStore.selected_items_id.length > 0;
});
const header_group_enabled = computed(() => {
  return globalStore.selected_items_id.length > 1;
});
const header_un_group_enabled = computed(() => {
  if (globalStore.selected_items_id.length === 1) {
    const item = globalStore.done_json.find((f) => f.id === globalStore.selected_items_id[0]);
    return item?.type === 'group';
  }
  return false;
});
const header_align_enabled = computed(() => {
  const selected_items = globalStore.done_json.filter(
    (f) => globalStore.selected_items_id.includes(f.id) && f.type !== 'sys-line'
  );
  return selected_items.length > 1;
});
const import_visible = ref(false);
const export_visible = ref(false);
const done_json_tree_visiable = ref(false);
const line_append_enable = ref(false);
const onDeleteClick = () => {
  globalStore.deleteSelectedItems();
  cacheStore.addHistory(globalStore.done_json);
};
const onImportClick = () => {
  import_visible.value = true;
  mainPanelRef.value?.stopListenerKeyDown();
};
const onExportClick = () => {
  export_visible.value = true;
  mainPanelRef.value?.stopListenerKeyDown();
};
const onTreeUpdateSelectedItemsId = (id: string) => {
  globalStore.setSingleSelect(id);
};
const onDoneTreeUpdateSelectedIdHide = (id: string) => {
  const item = globalStore.done_json.find((f) => f.id === id);
  if (item) {
    item.hide = !item.hide;
  }
};
const onAlignSelected = (
  type:
    | 'left'
    | 'horizontally'
    | 'right'
    | 'top'
    | 'vertically'
    | 'bottom'
    | 'horizontal-distribution'
    | 'vertical-distribution'
) => {
  mainPanelRef.value?.onAlignSelected(type);
};
const onHelpClick = () => {
  window.open('http://mt.yaolm.top');
};
const onRedoClick = () => {
  mainPanelRef.value?.onRedo();
};
const onUndoClick = () => {
  mainPanelRef.value?.onUndo();
};

// 导入
const onImportYes = async () => {
  const res = await importJsonRef.value?.onImport();
  if (res) {
    import_visible.value = false;

    cacheStore.addHistory(globalStore.done_json);
  } else {
    ElMessage.error('导入失败,请检查数据格式');
  }
};

const onPreviewClick = () => {
  // 获取导出json
  const { exportJson } = genExportJson(
    globalStore.canvasCfg,
    globalStore.gridCfg,
    globalStore.done_json
  );
  emits('onPreviewClick', exportJson);
};
const onSaveClick = () => {
  // 获取导出json
  const { exportJson } = genExportJson(
    globalStore.canvasCfg,
    globalStore.gridCfg,
    globalStore.done_json
  );
  emits('onSaveClick', exportJson);
};
const onThumbnailClick = () => {
  emits('onThumbnailClick');
};
const onDrawLineClick = (val: boolean) => {
  line_append_enable.value = val;
};

let fileNames: Array<{ id: string; name: string }> = reactive([]);
let radio = ref('-1');

//文件读取
// function fileRead() {
//   fetch('/public/dataModes/index.json')
//     .then((response) => response.json())
//     .then((data) => {
//       fileNames = Object.assign(data);
//     })
//     .catch((error) => {
//       console.error('获取JSON文件错误：', error);
//     });
// }

// 移除模型
function removeModel() {
  console.log('选中：', radio.value, radio);
  if (!radio.value || radio.value == '-1') {
    ElMessage.warning('请先选择一个模型文件');
  } else {
    console.log('删除模型：', radio.value);
  }
}

//覆盖模型
// function coverModel() {
//   console.log('选中：', radio.value, radio);
//   if (!radio.value || radio.value == '-1') {
//     ElMessage.warning('请先选择一个模型文件');
//   }
//   fileNames.forEach((item) => {
//     if (item.id == radio.value) {
//       fetch(`/public/dataModes/${item.name}`)
//         .then((response) => response.json())
//         .then((data) => {
//           console.log('文件IDX：', radio.value);
//           console.log('文件内容：', data);
//           let endJson = {
//             id: radio.value,
//             canvasCfg: data.canvasCfg,
//             gridCfg: data.gridCfg,
//             json: data.json
//           };
//           console.log('覆盖数据模型：', JSON.stringify(endJson, null, 2));
//         })
//         .catch((error) => {
//           console.error('获取文件错误：', error);
//         });
//     }
//   });
// }

// 保存数据模型
async function doSaveModel() {
  fullscreenLoading.value = true;

  const { exportJson } = genExportJson(
    globalStore.canvasCfg,
    globalStore.gridCfg,
    globalStore.done_json
  );

  let endJson = {
    menuType: menuType.value,
    canvasCfg: exportJson.canvasCfg,
    gridCfg: exportJson.gridCfg,
    json: exportJson.json
  };

  try {
    const response = await modelApi.saveOrUpdate_modelData_post(endJson);
    if (response.code == 200) {
      fullscreenLoading.value = false;
      dialogFormVisible.value = false;
      ElMessage.success('数据模型保存成功');
    } else {
      fullscreenLoading.value = false;
      dialogFormVisible.value = false;
      console.error('保存失败：', response.code, response.message);
      // 尝试获取错误详情
      console.error('服务器返回错误信息：', response.message);
      ElMessage.error(`数据模型保存失败: ${response.code} - ${response.message}`);
    }
  } catch (error) {
    fullscreenLoading.value = false;
    dialogFormVisible.value = false;
    console.error('请求错误：', error);
    ElMessage.error('网络请求失败');
  }
}

function saveModel() {
  let nodes = treeRef.value.getCheckedNodes();
  console.log(nodes.length);
  if (nodes.length === 0) {
    ElMessage.warning('请至少选择一个模型文件');
  } else {
    console.log('保存模型：', nodes[0]);
    dialogFormVisible.value = true;
    fileName.value = nodes[0].label;
    menuType.value = nodes[0].id;
  }
}

//加载数据模型
const fullscreenLoading = ref(false);

async function loadModel() {
  fullscreenLoading.value = false;
  let nodes = treeRef.value.getCheckedNodes();
  console.log(nodes.length);
  if (nodes.length === 0) {
    fullscreenLoading.value = false;
    ElMessage.warning('请至少选择一个模型文件');
  } else {
    console.log('加载模型：', nodes[0].id);
    let endJson = {
      menuType: nodes[0].id
    };

    console.log('请求数据类型：', typeof JSON.stringify(endJson));

    try {
      const response = await modelApi.model_getModelData_post(endJson);
      console.log('响应状态：', typeof response);
      if (response.code == 200) {
        ElMessage.success('请求数据成功');
        const result = response.data;
        const { canvasCfg, gridCfg, importDoneJson } = useExportJsonToDoneJson(result);
        globalStore.canvasCfg = canvasCfg;
        globalStore.gridCfg = gridCfg;
        globalStore.setGlobalStoreDoneJson(importDoneJson);
        fullscreenLoading.value = false;
      } else {
        fullscreenLoading.value = false;
        ElMessage.error(`数据模型加载失败: ${response.code} - ${response.message}`);
      }
    } catch (error) {
      fullscreenLoading.value = false;
      console.error('请求错误：', error);
      ElMessage.error('网络请求失败');
    }

    // try {
    //   const response = await fetch('http://localhost:8080/data/model/getModelData', {
    //     method: 'POST',
    //     headers: {
    //       'Content-Type': 'application/json',
    //       Accept: '*/*'
    //     },
    //     body: JSON.stringify(endJson)
    //   });
    //   console.log('响应状态：', typeof response);
    //   if (response.ok) {
    //     ElMessage.success('请求数据成功');
    //     const result = await response.json();
    //     const { canvasCfg, gridCfg, importDoneJson } = useExportJsonToDoneJson(result.data);
    //     globalStore.canvasCfg = canvasCfg;
    //     globalStore.gridCfg = gridCfg;
    //     globalStore.setGlobalStoreDoneJson(importDoneJson);
    //     fullscreenLoading.value = false;
    //   } else {
    //     fullscreenLoading.value = false;
    //     ElMessage.error(`数据模型加载失败: ${response.status} - ${response.statusText}`);
    //   }
    // } catch (error) {
    //   fullscreenLoading.value = false;
    //   console.error('请求错误：', error);
    //   ElMessage.error('网络请求失败');
    // }
  }
}

// 加载分类数据,
async function loadData(menuType: string, importDoneJson: IDoneJson[]) {
  // 清空现有数据再设置新的数据
  if (globalStore.group_ids.has(menuType)) {
    globalStore.group_ids.delete(menuType);
  }
  globalStore.group_ids.set(menuType, importDoneJson);
  ElMessage.success('数据模型加载成功');

  // fullscreenLoading.value = true;
  // try {
  //   const response = await fetch('/public/dataModes/index.json');
  //   const items = await response.json();

  //   // 使用 Promise.all 来并行处理所有子请求
  //   const promises = items.map(async (item) => {
  //     try {
  //       const response = await fetch(`/public/dataModes/${item.name}`);
  //       const data = await response.json();
  //       groupIds.set(item.name.split('.')[0], data.json);
  //     } catch (error) {
  //       fullscreenLoading.value = false;
  //       console.error(`获取文件错误 ${item.name}：`, error);
  //       ElMessage({
  //         message: '获取文件错误',
  //         type: 'error'
  //       });
  //     }
  //   });

  //   // 等待所有请求完成
  //   await Promise.all(promises);
  //   globalStore.group_ids = groupIds;
  //   fullscreenLoading.value = false;
  //   console.log('数据模型：', globalStore);
  //   ElMessage({
  //     message: '数据模型载入成功',
  //     type: 'success'
  //   });
  // } catch (error) {
  //   fullscreenLoading.value = false;
  //   ElMessage({
  //     message: '获取JSON文件错误',
  //     type: 'error'
  //   });
  //   console.error('获取JSON文件错误：', error);
  // }
}

const onRightDrawer = () => {
  drawerVisible.value = true;
  // fileRead();
};

onMounted(() => {
  // fileRead();
  loadMenuData(constantRoutes, treeData);
});

const setImportJson = (exportJson: IExportJson) => {
  const { canvasCfg, gridCfg, importDoneJson } = useExportJsonToDoneJson(exportJson);
  globalStore.canvasCfg = canvasCfg;
  globalStore.gridCfg = gridCfg;
  globalStore.setGlobalStoreDoneJson(importDoneJson);
  cacheStore.history[0] = importDoneJson;
  return true;
};

const treeRef = ref<InstanceType<typeof ElTreeV2> | null>();

const getNode = () => {
  console.log(treeRef.value.getCheckedNodes());
};

const resetSelection = () => {
  // 取消所有选中状态
  treeRef.value.setCheckedKeys([]);
};

const handleCheck = (data: any, checkedInfo: any) => {
  // 获取当前选中的节点
  const checkedKeys = treeRef.value.getCheckedKeys();

  // 如果选中的节点超过1个，则取消之前的选中状态，只保留当前点击的节点
  if (checkedKeys.length > 1) {
    // 取消所有选中状态
    treeRef.value.setCheckedKeys([checkedInfo.checkedKeys[1]]);
  }

  console.log('当前选中的节点:', treeRef.value.getCheckedNodes());
};

defineExpose({
  setImportJson
});
</script>
<style scoped>
.demo-pagination-block {
  margin-top: 20px;
}
.prefix {
  color: var(--el-color-primary);
  margin-right: 10px;
}
.prefix.is-leaf {
  color: var(--el-color-success);
}

.mt-edit-aside {
  transition: width 0.3s;
}

.vertical-radio-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-start;
}
</style>
