<template>
    <div class="attr-box">
        <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="removeLine" />
            </div>
        </div>
        <div class="row items-center">
            <div class="col q-ml-md">
                <el-button @click="changeToLineHandler" link size="mini" type="primary" style="font-size: 11px;">变更为双头曲线</el-button>
            </div>
            <el-checkbox v-model="updateAllLineStatus" @click.stop="selectAllLineHandler">同步更新</el-checkbox>
        </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('-',0)"/>
                <Slider class="filter-slider grow" :max="50" :min="1" :step="1" :value="attrs.strokeWidth"
                @update:value="value => updateFilter(0, value as number)" />
                <IconPlus class="handler-item viewport-size q-ml-md pointer" @click="AddSubtract('+',0)"/>
            </div>
        </div>
        <div class="attr-items flex items-center">
            <i class="icon-arrow-dasharray 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('-',1)"/>
                <Slider class="filter-slider grow" :max="10" :min="0" :step="0.1" :value="attrs.strokeDasharray"
                @update:value="value => updateFilter(1, value as number)" />
                <IconPlus class="handler-item viewport-size q-ml-md pointer" @click="AddSubtract('+',1)"/>
            </div>
        </div>
        <div class="attr-items flex items-center">
            <i class="icon-arrow-arc 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('-',2)"/>
                <Slider class="filter-slider grow" :max="0.6" :min="-0.6" :step="0.1" :value="attrs.controlPointDistance"
                @update:value="value => updateFilter(2, value as number)" />
                <IconPlus class="handler-item viewport-size q-ml-md pointer" @click="AddSubtract('+',2)"/>
            </div>
        </div>
        <div class="attr-items flex grey-bg items-center" style="border-bottom: 1px;padding: 0px;">
            <div class="col arrow-type text-center" v-for="(x,i) in icons" @click="updateLinePoint(i)" :class="{'active':attrs.arrow==i}">
                <i :class="[x]"></i>
            </div>
        </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.stroke" @update:modelValue="value => updateFillHandler(value)"/>
                    </template>
                    <div class="full-height full-width" :style="{backgroundColor:attrs.stroke}"></div>
                </Popover>
                
            </div>
            <div>{{ attrs.stroke }}</div>
        </div>
    </div>
</template>

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

const mapStore = useMapStore()
const { current,lineSeries } = storeToRefs(mapStore)
const updateAllLineStatus=ref(false)
const lineTransfromSpine = inject("linetoSpline",(spline:any)=>{})
const attrs = reactive({
    arrow:-1
} as any)
const icons = ref<string[]>(['icon-arrow-left','icon-arrow-right','icon-arrow-leftright','icon-arrow-middle'])

const AddSubtract = (symbol: string,val: number) => {
    let value
    if(val==0){
        if(symbol=='-'&&attrs.strokeWidth>1){
            attrs.strokeWidth--
        }if(symbol=='+'&&attrs.strokeWidth<50){
            attrs.strokeWidth++
        }
        value =  attrs.strokeWidth
        updateFilter(0, value as number)
    }if(val==1){
        if(symbol=='-'&&attrs.strokeDasharray>0){
            let strokeDasharray = (attrs.strokeDasharray*100)-(0.1*100)
            attrs.strokeDasharray = strokeDasharray/100
        }if(symbol=='+'&&attrs.strokeDasharray<10){
            attrs.strokeDasharray = attrs.strokeDasharray+0.1
        }
        value =  attrs.strokeDasharray
        updateFilter(1, value as number)
    }if(val==2){
        if(symbol=='-'&&attrs.controlPointDistance>-0.6){
            let controlPointDistance = (attrs.controlPointDistance*100)-(0.1*100)
            attrs.controlPointDistance = controlPointDistance/100
        }if(symbol=='+'&&attrs.controlPointDistance<0.6){
            attrs.controlPointDistance = attrs.controlPointDistance+0.1
        }
        value =  attrs.controlPointDistance
        updateFilter(2, value as number)
    }
}
const updateFilter = (t: number, val: number) => {
    switch (t) {
        case 0:
            attrs.strokeWidth = val
            break;
        case 1:
            attrs.strokeDasharray = val
            break;
        case 2:
            attrs.controlPointDistance = val
            break;
        default:
            break;
    }
    updated()
}
const updateFillHandler = (val:any) =>{
    attrs.stroke = val
    attrs.opacity = tinycolor(val).getAlpha()
    updated()
}
const selectAllLineHandler = (val:any)=>{
    //console.log(val, updateAllLineStatus.value)
}
const updated =()=>{
    updateLineStyle(current.value)
    if(updateAllLineStatus.value && lineSeries.value?.mapLines.length!>1){
        for (let i = 0; i < lineSeries.value?.mapLines.length!; i++) {
            let element = lineSeries.value?.mapLines.getIndex(i);
            if(element?.uid!=current.value.uid){
                updateLineStyle(element)
            }
        }
    }
    updateLinePoint(attrs.arrow,true)
}
const updateLineStyle = (lineObj:any)=>{
    lineObj.strokeWidth= attrs.strokeWidth
    lineObj.strokeOpacity = attrs.opacity
    lineObj.stroke = am4coreColor(tinycolor(attrs.stroke).toHex8String())
    lineObj.line.controlPointDistance = attrs.controlPointDistance
    lineObj.line.controlPointPosition = 0.5
    lineObj.strokeDasharray = `${attrs.strokeDasharray},${attrs.strokeDasharray}`
    
}
const updateLinePoint = (t:number,isReload:boolean=false)=>{
    if(t==attrs.arrow && !isReload) t=-1

    for (let i = 0; i < lineSeries.value?.mapLines.length!; i++) {
        let element = lineSeries.value?.mapLines.getIndex(i);
        if(element?.uid==current.value.uid || updateAllLineStatus.value){
            element!.lineObjects.clear()
            if(t==0){
                createPoint(0,element)
            } else if(t==1){
                createPoint(1,element)
            } else if(t==2){
                createPoint(0,element)
                createPoint(1,element)
            } else if(t==3){
                createPoint(0.5,element)
            }
        }
    }
    
    attrs.arrow=t
}


const createPoint = (point:number,lineObj:any)=>{
    let rotation = point == 0?270:90
    let bullet = lineObj.lineObjects.create();
    bullet.position = point;
    bullet.nonScaling = true;
    bullet.width = attrs.strokeWidth + 10
    bullet.height = attrs.strokeWidth + 10
    bullet.strokeWidth = 0

    var tria = bullet.createChild(Triangle);
    tria.width = attrs.strokeWidth + 10
    tria.height = attrs.strokeWidth + 10
    tria.fill = am4coreColor(tinycolor(attrs.stroke).toHexString());
    tria.strokeWidth = point;
    tria.rotation = rotation
    tria.x = point == 0? -tria.width:tria.width
    tria.y = point == 0? tria.width/2:-tria.width/2
}
const setAttribute = ()=>{
    attrs.strokeWidth=current.value.strokeWidth
    attrs.stroke=tinycolor(current.value.stroke.hex).setAlpha(current.value.strokeOpacity).toHex8String()
    attrs.opacity=current.value.strokeOpacity
    attrs.controlPointDistance=current.value.line.controlPointDistance??0
    attrs.strokeDasharray=current.value.strokeDasharray && current.value.strokeDasharray!=''?parseInt(current.value.strokeDasharray.split(',')):0
    if(current.value.lineObjects.length>0){
        if(current.value.lineObjects.length==2) attrs.arrow=2
        else{
            let p = current.value.lineObjects.getIndex(0).position
            attrs.arrow = p==0.5?3:p
        }
    }
}
const removeLine = ()=>{
    mapStore.removeCurrentLine()
}

const changeToLineHandler = ()=>{
    let changes:number[]=[]
    for (let i = 0; i < lineSeries.value?.mapLines.length!; i++) {
        let element = lineSeries.value?.mapLines.getIndex(i);
        if(element?.uid==current.value.uid || updateAllLineStatus.value){
            changes.push(i)
            element?.hide()
            lineTransfromSpine(element)
        }
    }
    changes.forEach(x=>{
        lineSeries.value?.mapLines.removeIndex(x)
    })
    mapStore.setCurrent(null)
}
setAttribute()

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