<template>
    <div style="margin-top: 10px;">
        阴影扩散范围 :
        <el-input-number @change="changeblur" v-model="blurl" size="mini" style="width: 100px"></el-input-number> &nbsp;
        x轴偏移量 :
        <el-input-number @change="changeX" v-model="X" size="mini" style="width: 100px"></el-input-number> &nbsp;
        y轴偏移量 :
        <el-input-number @change="changeY" v-model="Y" size="mini" style="width: 100px"></el-input-number> &nbsp;
        阴影颜色 :
        <el-color-picker @change="changeColor" v-model="color" size="mini"
                         style="vertical-align: middle"></el-color-picker>
        <canvas :id="id" width="740" height="400" tabindex="0"></canvas>
    </div>
</template>

<script lang="ts">
import { SColor, SPainter } from "@persagy-web/draw/lib";
import { Component, Vue } from "vue-property-decorator";
import { SGraphView } from "@persagy-web/graph/lib";
import { v1 as uuid } from "uuid";

/**
 * 绘制阴影
 *
 * @author 郝洁 <haojie@persagy.com>
 */
class shadowView extends SGraphView {
    /** 阴影扩散距离 */
    shadowBlur: number;
    /** 阴影颜色 */
    shadowColor: SColor;
    /** 阴影 x 轴偏移量 */
    shadowOffsetX: number;
    /** 阴影 y 轴偏移量 */
    shadowOffsetY: number;

    /**
     * 构造函数
     * @param id    图 Id
     */
    constructor(id: string) {
        super(id);
        this.shadowBlur = 10;
        this.shadowColor = new SColor('#00000060');
        this.shadowOffsetX = 10;
        this.shadowOffsetY = 10;
    }

    /**
     * Item 绘制操作
     * @param canvas    绘制对象
     */
    onDraw(canvas: SPainter) {
        // 清除画布
        canvas.clearRect(0, 0, 740, 400);
        // 绘制操作相关命令
        canvas.pen.lineWidth = 1;
        canvas.pen.color = SColor.Black;
        canvas.brush.color = SColor.White;
        canvas.shadow.shadowBlur = this.shadowBlur;
        canvas.shadow.shadowColor = this.shadowColor;
        canvas.shadow.shadowOffsetX = this.shadowOffsetX;
        canvas.shadow.shadowOffsetY = this.shadowOffsetY;
        // 绘制矩形
        canvas.drawRect(300, 50, 100, 100);
        canvas.drawRect(270, 100, 100, 100);
    }
}

@Component
export default class ShadowCanvas extends Vue {
    /** 图 id */
    id: string = uuid();
    /** 实例化 view */
    view: shadowView | undefined;
    /** 阴影 */
    blurl: number = 10;
    /** x 轴 */
    X: number = 10;
    /** y 轴 */
    Y: number = 10;
    color: string = "#cccccc";

    /**
     * 页面挂载
     */
    mounted() {
        this.view = new shadowView(this.id);
    }

    /** 修改扩散距离 */
    changeblur(v: number): void {
        this.view!!.shadowBlur = v;
        this.view!!.update()
    };

    /** x 轴偏移量 */
    changeX(v: number) {
        this.view!!.shadowOffsetX = v;
        this.view!!.update()
    };

    /** y 轴偏移量 */
    changeY(v: number) {
        this.view!!.shadowOffsetY = v;
        this.view!!.update()
    };

    /** 修改颜色 */
    changeColor(v: string) {
        this.view!!.shadowColor = new SColor(v);
        this.view!!.update()
    }
}
</script>
