<template>
    <div>
        <el-table :data="tableData" style="width: 100%" class="elementTable">
            <el-table-column prop="val" label="值" width="180"></el-table-column>
            <el-table-column prop="desc" label="描述"></el-table-column>
        </el-table>
        <div style="margin: 14px 0;">
            <span style="font-size: 14px;">选择起始点样式</span>
            <el-select placeholder="请选择" @change="changeStart" size="small" v-model="begin">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <span style="font-size: 14px;">选择结束点样式</span>
            <el-select placeholder="请选择" @change="changeEnd" size="small" v-model="end">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
        </div>
        <canvas id="arrow" width="740" height="400" tabindex="0"/>
    </div>
</template>

<script>
    import {SGraphItem, SGraphScene, SGraphView} from "@persagy-web/graph/lib";
    import {SRect, SArrowStyleType, SColor, SPoint} from "@persagy-web/draw/lib"

    class Polyline extends SGraphItem{
        /** 起始点样式 */
        _begin = SArrowStyleType.Basic;
        get begin(){
            return this._begin;
        }
        set begin(v){
            this._begin = v;
            this.update();
        }
        /** 结束点样式 */
        _end = SArrowStyleType.Basic;
        get end(){
            return this._end;
        }
        set end(v){
            this._end = v;
            this.update();
        }
        pointList = [
            new SPoint(0, 0),
            new SPoint(2000, 100),
            new SPoint(1800, 1800),
            new SPoint(1200, 1800),
            new SPoint(1000, 1000),
            new SPoint(0, 0)
        ];

        boundingRect() {
            return new SRect(0,0,2000,1800);
        }
        onDraw(painter) {
            painter.pen.lineWidth = painter.toPx(1);
            const style = {
                begin: this.begin,
                end: this.end
            };
            for(let i = 0; i < this.pointList.length - 1; i++){

                painter.drawArrowLine(this.pointList[i], this.pointList[i+1], style)
            }
        }
    }

    export default {
        name: "arrow",
        data(){
            return {
                view:'',
                options: [
                    {
                        value: SArrowStyleType.None,
                        label: 'None'
                    },{
                        value: SArrowStyleType.Basic,
                        label: 'Basic'
                    },{
                        value: SArrowStyleType.Triangle,
                        label: 'Triangle'
                    },{
                        value: SArrowStyleType.Diamond,
                        label: 'Diamond'
                    },{
                        value: SArrowStyleType.Square,
                        label: 'Square'
                    },{
                        value: SArrowStyleType.Circle,
                        label: 'Circle'
                    }
                ],
                item: null,
                tableData: [
                    {
                        val: 'None',
                        desc: '无样式'
                    },{
                        val: 'Basic',
                        desc: '基本箭头'
                    },
                    {
                        val: 'Triangle',
                        desc: '三角形箭头'
                    },
                    {
                        val: 'Diamond',
                        desc: '菱形箭头'
                    },
                    {
                        val: 'Square',
                        desc: '方形箭头'
                    },
                    {
                        val: 'Circle',
                        desc: '圆形箭头'
                    },
                ],
                begin: SArrowStyleType.None,
                end: SArrowStyleType.None
            }
        },
        mounted() {
            this.init()
        },
        methods:{
            init(){
                this.view = new SGraphView('arrow');
                const scene = new SGraphScene();
                this.item = new Polyline(null);
                scene.addItem(this.item);
                this.view.scene = scene;
                this.view.fitSceneToView();
                this.view.scalable = false;
            },
            changeStart(val){
                this.item.begin = val
            },
            changeEnd(val){
                this.item.end = val
            }
        }
    }
</script>
