<template>
    <div class="tool-mid-box-left">
        <!-- 工具循环 -->
        <div class="tool-box-cell-box-left" v-for="item in tools" :key="item.shapeType">
            <!-- <el-tooltip :content="item.name" placement="top-end">
                <div class="tool-box-cell" @click="clickAppliance(item.shapeType)">
                    <img :src="item.shapeType === currentShapType ? item.iconActive : item.icon" :alt="item.name" />
                </div>
            </el-tooltip> -->
            <el-tooltip :content="item.name" placement="top-end">
  <div class="tool-box-cell" @click="clickAppliance(item.shapeType)">
    <img
            :src="(
              // 当前是该工具
              item.shapeType === currentShapType
              // 当前在选颜色 / 粗细时保持上一个绘图工具高亮
              || (['colorSelector','brushSize'].includes(currentShapType) && item.shapeType === lastDrawingTool)
            )
              ? item.iconActive
              : item.icon"
            :alt="item.name"
          />
     
  </div>        
</el-tooltip>

            <!-- 颜色选择器 -->
            <div v-if="item.shapeType === 'colorSelector' && currentShapType === 'colorSelector' && colorSelectorControl"
                class="tool-popup">
                <el-color-picker ref="colorPickerRef" v-model="selectedColor" v-model:visible="colorVisible" show-alpha
                    @change="handleColorChange" />
            </div>

            <!-- 画笔大小选择器 -->
            <div v-if="item.shapeType === 'brushSize' && currentShapType === 'brushSize' && brushSizeControl"
                class="tool-popup">
                <el-select ref="brushSizeRef" v-model="selectedThickness" placeholder="画笔粗细" size="small"
                    @change="handleThicknessChange" v-model:visible="brushSizeVisible" style="width: 60px">
                    <el-option v-for="size in thicknessOptions" :key="size" :label="size + 'px'" :value="size" />
                </el-select>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, nextTick, onMounted, onBeforeUnmount } from "vue";

const props = defineProps({
    canvas: {
        type: Object,
        required: true,
        validator: (value) => value && typeof value.setDrawingTool === "function",
    },
});

// 工具图标导入
import pen from "./image/pencil.svg";
import penActive from "./image/pencil-active.svg";
import eraser from "./image/eraser.svg";
import eraserActive from "./image/eraser-active.svg";
import ellipse from "./image/ellipse.svg";
import ellipseActive from "./image/ellipse-active.svg";
import rectangle from "./image/rectangle.svg";
import rectangleActive from "./image/rectangle-active.svg";
import straight from "./image/straight.svg";
import straightActive from "./image/straight-active.svg";
import brushSize from "./image/brushSize.svg";
import brushSizeActive from "./image/brushSize-active.svg";
import colorSelector from "./image/colorSelector.svg";
import colorSelectorActive from "./image/colorSelector-active.svg";

const tools = ref([
    { name: "笔", icon: pen, iconActive: penActive, shapeType: "pencil" },
    { name: "圆形", icon: ellipse, iconActive: ellipseActive, shapeType: "circle" },
    { name: "矩形", icon: rectangle, iconActive: rectangleActive, shapeType: "rectangle" },
    { name: "直线", icon: straight, iconActive: straightActive, shapeType: "line" },
    { name: "选色器", icon: colorSelector, iconActive: colorSelectorActive, shapeType: "colorSelector" },
    { name: "画笔大小", icon: brushSize, iconActive: brushSizeActive, shapeType: "brushSize" },
    { name: "橡皮擦", icon: eraser, iconActive: eraserActive, shapeType: "eraser" },
]);

// 状态
const selectedColor = ref("#ffcc00");
const selectedThickness = ref(2);
const thicknessOptions = [1, 2, 4, 8, 16];

const colorSelectorControl = ref(false);
const brushSizeControl = ref(false);
const colorVisible = ref(false);
const brushSizeVisible = ref(false);

const currentShapType = ref("pencil"); // 当前点击的工具
const lastDrawingTool = ref("pencil"); // 记录最后一个绘图工具

// refs
const colorPickerRef = ref();
const brushSizeRef = ref();

// 颜色选择逻辑
const handleColorChange = (color) => {
    props.canvas?.setColor(color);
    colorSelectorControl.value = false;
    colorVisible.value = false;
};

// 粗细选择逻辑
const handleThicknessChange = (size) => {
    props.canvas?.setThickness(size);
    brushSizeControl.value = false;
    brushSizeVisible.value = false;
};

// 点击工具逻辑
function clickAppliance(type) {
    // 点击同一个工具时切换关闭
    if (currentShapType.value === type) {
        if (type === "colorSelector") {
            colorSelectorControl.value = !colorSelectorControl.value;
            colorVisible.value = colorSelectorControl.value;
        } else if (type === "brushSize") {
            brushSizeControl.value = !brushSizeControl.value;
            brushSizeVisible.value = brushSizeControl.value;
        }
        return;
    }

    // 切换到新工具
    currentShapType.value = type;
    lastDrawingTool.value = type; // 记录最新绘图工具
    if (type === "colorSelector") {
        colorSelectorControl.value = true;
        brushSizeControl.value = false;
        nextTick(() => {
            colorVisible.value = true;
        });
    } else if (type === "brushSize") {
        brushSizeControl.value = true;
        colorSelectorControl.value = false;
        nextTick(() => {
            brushSizeVisible.value = true;
        });
    } else {
        colorSelectorControl.value = false;
        brushSizeControl.value = false;
        colorVisible.value = false;
        brushSizeVisible.value = false;
        props.canvas?.setDrawingTool(type);
    }

} 

// 点击工具栏外部关闭弹窗
function handleClickOutside(event) {
    const toolBox = document.querySelector(".tool-mid-box-left");
    if (!toolBox.contains(event.target)) {
        //   colorSelectorControl.value = false;
        brushSizeControl.value = false;
        //   colorVisible.value = false;
        brushSizeVisible.value = false;
    }
}

onMounted(() => {
    if (!props.canvas || typeof props.canvas.setDrawingTool !== "function") {
        console.error("Invalid canvas prop passed to ToolBox");
    }
    document.addEventListener("click", handleClickOutside);
});

onBeforeUnmount(() => {
    document.removeEventListener("click", handleClickOutside);
});
</script>

<style lang="scss" scoped>
.tool-mid-box-left {
    width: 40px;
    display: flex;
    border-radius: 4px;
    background-color: white;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    padding: 4px 0;
    box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.1);
}

.tool-box-cell {
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: relative;
}

.tool-box-cell-box-left {
    width: 32px;
    height: 32px;
    user-select: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 2px;
    position: relative;

    &:hover {
        background: rgba(33, 35, 36, 0.1);
    }
}

/* 弹出层样式：显示在图标右侧 */
.tool-popup {
    position: absolute;
    left: 40px;
    /* 距离工具栏宽度 */
    top: 50%;
    transform: translateY(-50%);
    background: white;
    padding: 6px;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
}
</style>