<script setup lang="ts">
// import useDragAndDrop from "../configs/useDnD";

// import useDragAndDrop from "jxq-ui";
import { FunctionTypeModel } from "../configs/properites";

import useDragAndDrop from "@/components/hjflow/src/hooks/useDnD";

const { onDragStart } = useDragAndDrop();

import TitleHeader from "./titleHeader.vue";

import { getProjectConfigMokuaiPage } from "@/api/project";

const activeNames = ref(["1"]);
const handleChange = (val: any) => {
  console.log(val);
};

const test = (data) => {
  console.log("test", data?.data?.information?.properties);
};

const allMokuaiDataList = ref<FunctionTypeModel[]>([]);
const getList = () => {
  getProjectConfigMokuaiPage().then((res) => {
    allMokuaiDataList.value = res.data;
  });
};

onMounted(() => {
  getList();
});
</script>

<template>
  <div class="function-col">
    <TitleHeader> 添加功能模块</TitleHeader>
    <el-scrollbar class="collapse-container">
      <el-collapse v-model="activeNames" @change="handleChange" accordion>
        <el-collapse-item
          :name="funType.id"
          v-for="(funType, index) in allMokuaiDataList"
          :key="funType.id"
          :title="funType?.moduleName"
        >
          <el-scrollbar max-height="400px">
            <div class="drag-container-scroll">
              <div
                class="drag-item"
                v-for="(dragData, index) in funType.functions"
                :key="index"
                :draggable="true"
                @dragstart="onDragStart($event, dragData)"
                @click="test(dragData)"
              >
                {{ dragData?.data?.information?.functionName ?? "-" }}
              </div>
            </div>
          </el-scrollbar>
        </el-collapse-item>
      </el-collapse>
    </el-scrollbar>
  </div>
</template>

<style scoped lang="scss">
.function-col {
  width: 200px;
  flex-shrink: 0;
  height: calc(100vh - $main-header-height);
  background-color: $hj-black-2;
}
.collapse-container {
  height: calc(100vh - $main-header-height - 65px);
  overflow-y: auto;
}
.drag-container-scroll {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  width: 100%;
  overflow-y: auto;
  background-color: $hj-black-2;
  padding: 12px 11px;
  .drag-item {
    background-color: rgba(0, 0, 0, 0.25);
    width: 100%;
    font-size: 14px;
    text-align: center;
    height: 36px;
    line-height: 36px;
    border-radius: 4px;
    margin-bottom: 10px;
    cursor: pointer;
    color: $hj-white-1;
  }
}

:deep(.el-collapse-item__content) {
  padding: 0;
  border: 0;
}
:deep(.el-collapse-item__header) {
  background-color: rgba(0, 0, 0, 0.25);
  color: $hj-white-1;
  padding-left: 20px;
  font-size: 14px;
  border: 0;
}
:deep(.el-collapse, .el-collapse-item__content) {
  border: 0;
}
</style>
