<script setup lang="ts">
import { Panel } from "@vue-flow/core";
import Back from "./btns/Back.vue";
import AddNode from "../panel/btns/add-node.vue";
import LayoutLR from "./btns/layout-LR.vue";
import LayoutTB from "./btns/layout-TB.vue";
import SnakeBtn from "./btns/snake.vue";
import ResetBtn from "./btns/reset.vue";
import { HJPanelFunName } from "../types/comTypes";

// 定义一个props,参数是数组，而且数组里面的值只能是 HJPannelFunName 的值
const props = defineProps<{
  funNames: HJPanelFunName[];
}>();

const emits = defineEmits([
  "addNode",
  "reset",
  "layout",
  "toSnake",
  "back",
  "saveTemplate",
]);

const onAddNode = (type: string) => {
  emits("addNode", type);
};
</script>

<template>
  <Panel position="top-right" class="process-panel">
    <el-button
      type="primary"
      style="width: 80px"
      @click="() => emits('saveTemplate')"
      v-if="props.funNames.includes('saveTemplate')"
      >保存模版</el-button
    >
    <Back @click="() => emits('back')" v-if="props.funNames.includes('back')" />
    <add-node
      @addNode="onAddNode"
      v-if="props.funNames.includes('addNode')"
    ></add-node>
    <LayoutLR
      @click="() => emits('layout', 'LR')"
      v-if="props.funNames.includes('layoutLR')"
    />
    <LayoutTB
      @click="() => emits('layout', 'TB')"
      v-if="props.funNames.includes('layoutTB')"
    />
    <SnakeBtn
      @click="() => emits('toSnake')"
      v-if="props.funNames.includes('toSnake')"
    />
    <ResetBtn
      @click="() => emits('reset')"
      v-if="props.funNames.includes('reset')"
    />
  </Panel>
</template>

<style scoped lang="less">
.process-panel {
  background-color: #2d3748;
  padding: 4px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: row-reverse;
  gap: 8px;
}

.process-panel button {
  border: none;
  cursor: pointer;
  background-color: #4a5568;
  border-radius: 8px;
  color: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  font-size: 16px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.checkbox-panel {
  display: flex;
  align-items: center;
  gap: 4px;
}

.process-panel button:hover,
.layout-panel button:hover {
  background-color: #2563eb;
  transition: background-color 0.2s;
}

.process-panel label {
  color: white;
  font-size: 12px;
}
</style>
