<template>
    <div class="tools-box rounded" ref="toolsRef" draggable="true" :style="{top:location.top+'px',left:location.left+'px'}" @dragstart="dragstartHandler" @dragend="dragendHandler">
        <div class="grip"></div>
        <div class="tools-item mouse" @click.stop="setOperaHandler(0)" :class="{'active':operaIndex==0,'disable-item':!canOpera}"></div>
        <div class="tools-item more"  @click.stop="setOperaHandler(1)" :class="{'active':operaIndex==1,'disable-item':!canOpera}">
            <Popover trigger="mouseenter" placement="right" class="full-height full-width">
                <template #content>
                    <el-menu v-if="canOpera" :default-active="fillType" style="border: none !important;">
                        <el-menu-item :index="1" @click="fillType=1" style="height: 36px;">
                            <span>区域填充</span>
                        </el-menu-item>
                        <el-menu-item :index="2" @click="fillType=2" style="height: 36px;">
                            <span>全部填充</span>
                        </el-menu-item>
                    </el-menu>
                </template>
                <div class="clash child-item" :style="{backgroundColor:fillColor.realColor}"></div>
            </Popover>
        </div>
        <div class="tools-item line"  @click.stop="setOperaHandler(2)" :class="{'active':operaIndex==2,'disable-item':!canOpera}"></div>
        <div class="tools-item more" @click.stop="setOperaHandler(5)" :class="{'active':operaIndex==5,'disable-item':!canOpera}">
            <Popover trigger="mouseenter" placement="right" class="full-height full-width">
                <template #content>
                    <el-menu v-if="canOpera" :default-active="markSelect" style="border: none !important;">
                        <el-menu-item :index="1" @click="marker=markerPath" style="height: 36px;">
                            <svg viewBox="0 0 32 32" width="20" height="20" preserveAspectRatio="none"><path :d="markerPath"></path></svg>
                        </el-menu-item>
                        <el-menu-item :index="2" @click="marker='circle'" style="height: 36px;">
                            <div class="temp-circle"></div>
                        </el-menu-item>
                    </el-menu>
                </template>
                <svg viewBox="0 0 32 32" width="20" height="20" preserveAspectRatio="none" v-if="marker!='circle'"><path :d="markerPath"></path></svg>
                <div class="temp-circle" v-else></div>
            </Popover>
        </div>
        <div class="tools-item" @click.stop="setOperaHandler(3)" :class="{'active':operaIndex==3,'disable-item':!canOpera}">
            <span class="alifont">T</span>
        </div>
        <div class="tools-item" :class="{'active':operaIndex==4,'disable-item':!canOpera}">
            <div class="menucolor child-item">
                <Popover trigger="mouseenter" class="full-height full-width">
                    <template #content>
                        <ColorPicker v-if="canOpera" :modelValue="fillColor.realColor" @update:modelValue="value => updateFillHandler(value)"/>
                    </template>
                    <div class="full-height" :style="{backgroundColor:fillColor.realColor}"></div>
                </Popover>
                
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import Popover from '@/components/Popover.vue'
import tinycolor from 'tinycolor2'
import { useMapStore } from '@/store/index'
import { storeToRefs } from 'pinia';

const location = ref<{
    top:number,
    left:number
}>({
    top:30,
    left:30
})
const move = ref<{
    startX:number,
    startY:number
}>({
    startX:0,
    startY:0
})
const toolsRef = ref()
const mapStore = useMapStore()
const { operaIndex,fillColor,fillType,canOpera,marker } = storeToRefs(mapStore)
const markSelect = marker?.value=='circle'?2:1
const markerPath = ref("M3.5,13.277C3.5,6.22,9.22,0.5,16.276,0.5C23.333,0.5,29.053,6.22,29.053,13.277C29.053,14.54,28.867,15.759,28.526,16.914C26.707,24.271,16.219,32.5,16.219,32.5C16.219,32.5,4.37,23.209,3.673,15.542C3.673,15.542,3.704,15.536,3.704,15.536C3.572,14.804,3.5,14.049,3.5,13.277C3.5,13.277,3.5,13.277,3.5,13.277M16.102,16.123C18.989,16.123,21.329,13.782,21.329,10.895C21.329,8.008,18.989,5.668,16.102,5.668C13.216,5.668,10.876,8.008,10.876,10.895C10.876,13.782,13.216,16.123,16.102,16.123C16.102,16.123,16.102,16.123,16.102,16.123")
marker.value = markerPath.value
const dragstartHandler =(e:DragEvent)=>{
    move.value = {
        startX:e.clientX,
        startY:e.clientY
    }
}
const dragendHandler =(e:DragEvent)=>{
    let maxX=(document.querySelector('.map-content')?.clientWidth??0)-toolsRef.value.clientWidth
    let maxY=(document.querySelector('.map-content')?.clientHeight??0)-toolsRef.value.clientHeight
    let x = location.value.left + (e.clientX - move.value.startX);
    let y = location.value.top + (e.clientY - move.value.startY);
    location.value.left = x<0?0:(x>maxX?maxX:x);
    location.value.top = y<0?0:(y>maxY?maxY:y);
}
const setOperaHandler = (i:number) => {
    if(!canOpera.value) i=0
    operaIndex.value = i
}

const updateFillHandler = (val:any) =>{
    fillColor.value.color = parseInt(tinycolor(val).toHex(),16)
    fillColor.value.opacity = tinycolor(val).getAlpha()
    fillColor.value.realColor = tinycolor(val).toHex8String()
}

</script>

<style scoped>
    .tools-box{
        position: absolute;
        z-index: 9;
        background: rgba(255, 255, 255, .8);
        width:55px;
    }
    .grip{
        background-image: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1703830679000_621.webp');
        background-repeat: no-repeat;
        height: 5px;
        background-position: center center;
        margin: 0px auto;
        padding: 5px 0px;
        cursor: move;
    }
    .tools-item{
        border-top:1px solid rgba(204, 204, 204, 0.3);
        height: 53px;
        text-align: center;
        line-height: 53px;
        background-color: rgb(235, 235, 235);
        background-position:center;
        background-repeat:no-repeat;
        background-size: 32px;
        font-size: 32px;
        color: #000;
        cursor: pointer !important;
    }
    .more{
        background-image: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1703835556000_358.png');
        background-repeat: no-repeat;
        background-position: right bottom;
        background-size: 10px;
    }
    .mouse {
        background-image: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1703835556000_666.png');
    }
    .clash{
        background-position:center;
        background-repeat:no-repeat;
        background-size: 32px;
        background-image: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1703835556000_459.png');
    }
    .tools-item:hover .clash,.tools-item.active .clash{
        background-image: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1703835556000_578.png');
    }
    .line{
        background-image: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1703835556000_618.png');
    
    }
    .menucolor{
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==');
        background-repeat: repeat;
        background-size: 10px;
        background-position: top left;
    }
    .tools-item .child-item{
        margin-top: calc((100% - 32px) / 2);
        margin-left: auto;
        margin-right: auto;
        width: 32px;
        height: 32px;
    }
    .tools-item:hover,.tools-item.active{
        background-color: #FFF;
    }
    .tools-item.active{
        cursor: default !important;
    }
    .disable-item{
        cursor:not-allowed;
    }
    .temp-circle{
        width: 18px;
        height: 18px;
        border-radius: 100%;
        border:2px solid #FFF;
        background-color: #000;
        box-shadow: 0 0 5px rgba(0,0,0,0.3);
        display: inline-block;
    }
</style>