<template>
  <div class="gl-page-content-grey-full">
    <div class="content">
      <div class="page-content-left">
        <el-tree
          v-if="showTree"
          ref="libTreeRef"
          node-key="nodeKey"
          highlight-current
          lazy
          :props="props"
          :current-node-key="currentNodeKey"
          :load="loadMoreFun"
          @current-change="currentChangeFun"
        >
          <template #default="{ data }">
            <div class="custom-tree-node">
              <el-icon class="icon-style" v-if="data.type !=3"><Folder /></el-icon>
              <el-icon class="icon-style" v-else><Document /></el-icon>
              <span>{{ data.name }}</span>
            </div>
          </template>
        </el-tree>
      </div>
      <div class="page-content-right">
        <BaseTable ref="paramTableRef" tableName="PARAMETER_LIST" hidePagination>
          <template #leftOptions>
            <div class="options">
              <div v-if="paramObjInfo.fileName" class="file-content">
                <div class="file-icon"><el-icon :size="16"><Document /></el-icon></div>
                <div class="file-name"><span>{{ paramObjInfo.fileName }} </span></div>
                <div class="download-btn"><UploadFile v-if="paramObjInfo.fileId" v-model="paramObjInfo.fileId" name="下载" /></div>
              </div>
              <el-button type="primary" v-if="currentNode?.type === 1 || !currentNode?.type" @click="openCreateFun('lib')">新增参数库</el-button>
              <el-button type="primary" v-if="currentNode?.type === 1" @click="openCreateFun('type')">新增分类</el-button>
              <el-button type="primary" v-if="currentNode?.type === 2" @click="openCreateFun('param')">新增参数对象</el-button>
              <el-button type="danger" v-if="currentNode?.type === 1" :disabled="currentNode?.type != 1" @click="deleteParamFun('lib')">删除参数库</el-button>
              <el-button type="danger" v-if="currentNode?.type === 2" @click="deleteParamFun('type')">删除分类</el-button>
              <el-button type="danger" v-if="currentNode?.type === 3" @click="deleteParamFun('param')">删除参数对象</el-button>
              <el-button @click="infoShow = true">参数详情</el-button>
            </div>
          </template>
        </BaseTable>
      </div>
    </div>
    <el-drawer
      v-model="infoShow"
      :size="400"
      title="参数详情"
      :close-on-click-modal="false"
      @close="infoShow = false"
    >
      <div class="info-content">
        <el-descriptions class="info-content-descriptions" :column="1" label-width="100px" border>
          <el-descriptions-item v-if="paramObjInfo?.parameterLibraryCategoryObjectName" label="对象名称">{{ paramObjInfo?.parameterLibraryCategoryObjectName }}</el-descriptions-item>
          <el-descriptions-item label="所属库">{{ paramObjInfo?.parameterLibraryName }}</el-descriptions-item>
          <el-descriptions-item v-if="paramObjInfo?.parameterLibraryCategoryName" label="所属分类">{{ paramObjInfo?.parameterLibraryCategoryName }}</el-descriptions-item>
          <el-descriptions-item v-if="paramObjInfo?.createTime" label="创建时间">{{ paramObjInfo?.createTime }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </el-drawer>
    <addParamLib
      v-if="showParamLibVisible"
      @close="showParamLibVisible = false"
      @createFun="createLibFun"
    />
    <addParamType
      v-if="showParamTypeVisible"
      @close="showParamTypeVisible = false"
      :lib-info="currentNode"
      @createFun="createLibTypeFun"
    />
    <addParamObject
      v-if="showParamObjVisible"
      @close="showParamObjVisible = false"
      :lib-type-info="currentNode"
      @createFun="creatLibParamObjFun"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { Document, Folder } from '@element-plus/icons-vue';
import BaseTable from '@/components/common/table/baseTable.vue';
import { addLibraryApi, addLibraryCategoryApi, addLibraryCategoryObjectApi, deleteSimulationParameterApi, getSimulationParameterLibraryCategoryObjectApi, getSimulationParameterTreeApi } from '@/api/data/data';
import addParamLib from './components/addParamLib.vue';
import addParamType from './components/addParamType.vue';
import addParamObject from './components/addParamObject.vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import UploadFile from '@/components/common/uploadFile/index.vue';

const currentNodeKey = ref<any>('');
const currentNode = ref<any>({});
const showParamLibVisible = ref(false);
const showParamTypeVisible = ref(false);
const showParamObjVisible = ref(false);
const showTree = ref(true);
const libTreeRef = ref();
const paramTableRef = ref();
const infoShow = ref(false);

const props = {
  label: 'label',
  children: 'children',
  isLeaf: 'leaf',
};

const loadMoreFun = async(node: any, resolve: any) => {
  const listData: any = await getSimulationParameterTreeDAtaFun(node.data);
  return resolve(listData);
};

const getSimulationParameterTreeDAtaFun = async(data?: any) => {
  const param: any = {
    type: 1,
  };
  if (data?.type) {
    param.type = data.type;
  }
  if (data?.id) {
    param.id = data.id;
  }
  const res: any = await getSimulationParameterTreeApi(param);
  if (res && res.code === 200) {
    const result = res.data.map((item: any) => {
      const node: any = {
        ...item,
        nodeKey: item.id + '_' + item.type,
      };
      if (param.type === 1 && param.id) {
        node.libName = data.name;
        node.libId = data.id;
      }
      if (param.type === 2 && param.id) {
        node.typeName = data.name;
        node.typeId = data.id;
        node.libName = data.libName;
        node.libId = data.libId;
        node.leaf = true;
        node.isLeaf = true;
      }
      return node;
    });
    return result;
  }
};

const paramObjInfo = ref<any>({});

// 当前节点更改
const currentChangeFun = async(data: any) => {
  currentNodeKey.value = data.nodeKey;
  currentNode.value = data;
  paramTableRef.value.setDataFun([]);
  if (data.type === 3) {
    const res:any = await getSimulationParameterLibraryCategoryObjectApi({
      ObjectId: data.id,
    });
    if (res && res.code === 200) {
      paramObjInfo.value = res.data || [];
      paramTableRef.value.setDataFun( paramObjInfo.value.parameterJsonValue || []);
    }
  } else if (data.type === 2) {
    paramObjInfo.value = {
      parameterLibraryName: data.libName,
      parameterLibraryCategoryName: data.name,
    };

  } else if (data.type === 1) {
    paramObjInfo.value = {
      parameterLibraryName: data.name,
    };
  } else {
    paramObjInfo.value = {};
  }
};

const openCreateFun = (flag: any) => {
  if (flag === 'lib') {
    showParamLibVisible.value = true;
  }
  if (flag === 'type') {
    showParamTypeVisible.value = true;
  }
  if (flag === 'param') {
    showParamObjVisible.value = true;
  }
};

const createLibFun = async(data: any) => {
  const res: any = await addLibraryApi(data);
  if (res && res.code === 200) {
    ElMessage.success('新增参数库成功');
    const libList = await getSimulationParameterTreeDAtaFun();
    if (libList.length === 1) {
      showTree.value = false;
    } else {
      libTreeRef.value.insertAfter(libList.at(-1), libList[libList.length - 2].nodeKey);
    }
  }
  showTree.value = true;
  showParamLibVisible.value = false;
  return;
};

const createLibTypeFun = async(data: any) => {
  const res: any = await addLibraryCategoryApi(data);
  if (res && res.code === 200) {
    ElMessage.success('新增参数分类成功');
    const list = await getSimulationParameterTreeDAtaFun(currentNode.value);
    const node = list.find((item: any) => {
      return item.name === data.parameterLibraryCategoryName;
    });
    libTreeRef.value.append(node, currentNode.value.nodeKey);
  }
  showParamTypeVisible.value = false;
};

const creatLibParamObjFun = async(data: any) => {
  const res:any = await addLibraryCategoryObjectApi({
    parameterLibraryId: data.parameterLibraryId,
    parameterLibraryCategoryId: data.parameterLibraryCategoryId,
    parameterLibraryCategoryObjectName: data.parameterLibraryCategoryObjectName,
    fileName: data.fileName,
    file: data.file,
    templateId: data.templateId,
    templateName: data.templateName,
  });

  if (res && res.code === 200) {
    ElMessage.success('操作成功');
    const list = await getSimulationParameterTreeDAtaFun(currentNode.value);
    const node = list.find((item: any) => {
      return item.name === data.parameterLibraryCategoryObjectName;
    });
    libTreeRef.value.append(node, currentNode.value.nodeKey);
  }
  showParamObjVisible.value = false;
};

const deleteParamFun = (flag:any) => {
  ElMessageBox.confirm(
    `确认要删除这个${flag === 'lib' ? '参数库' : flag === 'type' ? '参数库分类' : '参数对象'}吗?`,
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(async() => {
    const res:any = await deleteSimulationParameterApi({
      type: currentNode.value.type,
      id: currentNode.value.id,
    });
    if (res && res.code === 200) {
      ElMessage.success('删除成功！');
      libTreeRef.value.remove(currentNode.value.nodeKey);
      currentNode.value = {};
      paramObjInfo.value = '';
    }
  });
};
</script>

<style lang="scss" scoped>
.gl-page-content-grey-full {
  .content {
    height: 100%;
    width: 100%;
    display: flex;
    .page-content-left {
      padding: 10px;
      width: 350px;
      height: 100%;
      margin-right: 10px;
      background-color: #fff;
      overflow: auto;
      .custom-tree-node {
        display: flex;
        align-items: center;
        .icon-style{
          margin-right: 5px;
        }
      }
    }
    .page-content-right {
      flex: 1;
      padding: 16px;
      background-color: #fff;
      height: 100%;
      overflow: auto;
      .options {
        display: flex;
        align-items: center;
        justify-content: center;
        .file-content {
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 20px;
          height: 24px;
          padding: 0 5px;
          border-radius: 4px;
          background-color: var(--el-border-color-light);
          .file-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--el-color-primary);
          }
          .file-name {
            padding: 0 4px;
            font-size: 14px;
            color: var(--el-text-color-primary);
          }
        }
      }
    }
  }
}
.pinfo-content {
  width: 100%;
  height: 100%;
  .info-content-descriptions {
    margin-top: var(--margin-small);
  }
}
</style>
