<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" :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">
            <IconRotationHorizontal class="q-mr-lg" title="横向节点" style="margin-top: 5px;" />
            <div class="col flex">
                <IconMinus class="handler-item viewport-size q-mr-md pointer" @click="AddSubtract('-',2)"/>
                <Slider class="filter-slider grow" :max="10" :min="-10" :step="0.1" :value="attrs.tensionX"
                @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 items-center">
            <IconRotationVertical class="q-mr-lg" title="Y轴弯曲" style="margin-top: 5px;font-weight: bold;" />
            <div class="col flex">
                <IconMinus class="handler-item viewport-size q-mr-md pointer" @click="AddSubtract('-',3)"/>
                <Slider class="filter-slider grow" :max="10" :min="-10" :step="0.1" :value="attrs.tensionY"
                @update:value="value => updateFilter(3, value as number)" />
                <IconPlus class="handler-item viewport-size q-ml-md pointer" @click="AddSubtract('+',3)"/>
            </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,splineSeries,lineSeries } = storeToRefs(mapStore)
const updateAllLineStatus=ref(false)
const splineTransfromLine = inject("splinetoline",(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.tensionX>-10){
            let tensionX = (attrs.tensionX*100)-(0.1*100)
            attrs.tensionX = tensionX/100
        }if(symbol=='+'&&attrs.tensionX<10){
            attrs.tensionX = attrs.tensionX+0.1
        }
        value =  attrs.tensionX
        updateFilter(2, value as number)
    }if(val==3){
        if(symbol=='-'&&attrs.tensionY>-10){
            let tensionY = (attrs.tensionY*100)-(0.1*100)
            attrs.tensionY = tensionY/100
        }if(symbol=='+'&&attrs.tensionY<10){
            attrs.tensionY = attrs.tensionY+0.1
        }
        value =  attrs.tensionY
        updateFilter(3, 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.tensionX = val
            break;
        case 3:
            attrs.tensionY = 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 && splineSeries.value?.mapLines.length!>1){
        for (let i = 0; i < splineSeries.value?.mapLines.length!; i++) {
            let element = splineSeries.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.children.getIndex(0).tensionX = attrs.tensionX
    lineObj.children.getIndex(0).tensionY = attrs.tensionY
    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 < splineSeries.value?.mapLines.length!; i++) {
        let element = splineSeries.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.tensionX = current.value.children.getIndex(0).tensionX
    attrs.tensionY = current.value.children.getIndex(0).tensionY
    attrs.strokeDasharray=current.value.strokeDasharray && current.value.strokeDasharray!=''?parseInt(current.value.strokeDasharray.split(',')[0]):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 = ()=>{
    splineSeries.value?.mapLines.removeValue(current.value)
    mapStore.setCurrent(null)
}
const changeToLineHandler = ()=>{
    let changes:number[]=[]
    for (let i = 0; i < splineSeries.value?.mapLines.length!; i++) {
        let element = splineSeries.value?.mapLines.getIndex(i);
        if(element?.uid==current.value.uid || updateAllLineStatus.value){
            changes.push(i)
            element?.hide()
            splineTransfromLine(element)
        }
    }
    changes.forEach(x=>{
        splineSeries.value?.mapLines.removeIndex(x)
    })
    mapStore.setCurrent(null)
}
setAttribute()

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