<template>
    <div class="attr-box" @click.stop="(e:MouseEvent)=>e.stopPropagation()">
        <div class="box-header">
            <div class="row items-center attr-header">
                <img class="drag-icon"
                    src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1704767732000_329.webp"
                    alt="">
                <div class="title col">文字设置</div>
                <IconDelete class="btn" style="font-size: 12px;" @click="removeText" />
            </div>
        </div>
        <div class="attr-items flex items-center">
            <i class="icon-arrow-thickness q-mr-lg" title="粗细" style="margin-top: 5px;"></i>
            <div class="col flex">
                <IconMinus class="handler-item viewport-size q-mr-md pointer" @click="AddSubtract('-')"/>
                <Slider class="filter-slider grow" :max="72" :min="11" :step="1" :value="attrs.fontSize"
                @update:value="value => current.fontSize = value" />
                <IconPlus class="handler-item viewport-size q-ml-md pointer" @click="AddSubtract('+')"/>
            </div>
        </div>
        <div class="attr-items grey-bg" style="border-top-width: 1px; font-size: 11px;padding: 10px;">
           <el-input input-style="border: none !important; background: none !important;" @input="changeTextHandler" v-model="attrs.text" :rows="5" type="textarea" placeholder="文字..." />
        </div>
        
        <div class="attr-items flex items-center">
            <div class="color-box  q-mr-lg">
                <Popover trigger="mouseenter" class="full-height full-width">
                    <template #content>
                        <ColorPicker :modelValue="attrs.fill" @update:modelValue="value => updateFillHandler(value)"/>
                    </template>
                    <div class="full-height full-width" :style="{backgroundColor:attrs.fill}"></div>
                </Popover>
            </div>
            <div>{{ attrs.fill }}</div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useMapStore } from '@/store/index'
import { storeToRefs } from 'pinia';
import { reactive, ref } from 'vue';
import tinycolor from 'tinycolor2';
import { color as am4coreColor} from "@amcharts/amcharts4/core";
import { watch } from 'vue';

const mapStore = useMapStore()
const { current,fillColor } = storeToRefs(mapStore)
const attrs = reactive({} as any)
const AddSubtract = (symbol: string) => {
    if(symbol=='-'&&attrs.fontSize>11){
        attrs.fontSize--
    }if(symbol=='+'&&attrs.fontSize<72){
        attrs.fontSize++
    }
    current.value.fontSize =  attrs.fontSize
}
const updateFillHandler = (val:any) =>{
    attrs.fill = tinycolor(val).toHex8String()
    current.value.fill = am4coreColor(attrs.fill)
}
const changeTextHandler = (val:string) => current.value.text =val
const setAttribute = ()=>{
    attrs.text =current.value.text
    attrs.fontSize = current.value.fontSize
    attrs.fill = current.value.fill?tinycolor(current.value.fill.rgba).setAlpha(current.value.fill.alpha).toHex8String():fillColor.value.realColor
}
const removeText = ()=>{
    mapStore.removeCurrentText()
}

setAttribute()

watch(()=>current.value,()=>{
    setAttribute()
})
</script>
