<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>
            </div>
        </div>
        <div class="attr-items grey-bg" style="border-top-width: 1px; font-size: 11px;padding: 20px;">
           {{ attrs.name }}
        </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 updateFillHandler = (val:any) =>{
    attrs.fill = val
    attrs.opacity = tinycolor(val).getAlpha()
    current.value.fill = am4coreColor(tinycolor(val).toHexString())
    current.value.fillOpacity = attrs.opacity
}
const setAttribute = ()=>{
    let context = current.value.dataItem.dataContext
    attrs.name = (context.CNTRY?context.CNTRY +' - ':'')+context.name
    attrs.opacity = current.value.fillOpacity!=undefined?current.value.fillOpacity:1
    attrs.fill = current.value.fill?tinycolor(current.value.fill.hex).setAlpha(attrs.opacity).toHex8String():fillColor.value.realColor
}
setAttribute()

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

</style>