<template>
    <canvas id="clockItem1" width="400" height="400" />
</template>

<script lang="ts">
    import { SColor, SPainter, SRect } from "@saga-web/draw";
    import { SGraphyItem, SGraphyScene, SGraphyView } from "@saga-web/graphy";

    class ClockItem extends SGraphyItem {
        /** 宽度 */
        width = 100;
        /** 高度 */
        height = 100;

        /** 半径 */
        get radius(): number {
            return Math.min(this.width, this.height) / 2.0;
        }

        /**
         * 构造函数
         *
         * @param   parent      指向父Item
         * @param   width       宽度
         * @param   height      高度
         */
        constructor(parent: SGraphyItem | null, width: number, height: number) {
            super(parent);
            this.width = width;
            this.height = height;
        }

        /**
         * 对象边界区域
         *
         * @return  边界区域
         */
        boundingRect(): SRect {
            return new SRect(0, 0, this.width, this.height);
        }

        /**
         * Item绘制操作
         *
         * @param   canvas      画布
         */
        onDraw(canvas: SPainter): void {
            canvas.translate(this.width / 2, this.height / 2);
            const t = new Date();
            this.drawScale(canvas);
            this.drawHour(canvas, t.getHours(), t.getMinutes(), t.getSeconds());
            this.drawMinute(canvas, t.getMinutes(), t.getSeconds());
            this.drawSecond(canvas, t.getSeconds() + t.getMilliseconds() / 1000.0);

            this.update();
        }

        /**
         * 绘制表刻度
         *
         * @param   canvas      画布
         */
        private drawScale(canvas: SPainter): void {
            const scaleLength = Math.max(this.radius / 10.0, 2.0);
            const scaleLength1 = scaleLength * 1.2;
            const strokeWidth = Math.max(this.radius / 100.0, 2.0);
            const strokeWidth1 = strokeWidth * 2.0;

            canvas.save();
            canvas.pen.color = SColor.Blue;

            for (let i = 1; i <= 12; i++) {
                // 12小时刻度
                canvas.pen.lineWidth = strokeWidth1;
                canvas.drawLine(
                    0,
                    -this.radius,
                    0,
                    -this.radius + scaleLength1
                );

                if (this.radius >= 40) {
                    // 如果半度大于40显示分钟刻度
                    canvas.rotate((6 * Math.PI) / 180);
                    for (let j = 1; j <= 4; j++) {
                        // 分钟刻度
                        canvas.pen.lineWidth = strokeWidth;
                        canvas.drawLine(
                            0,
                            -this.radius,
                            0,
                            -this.radius + scaleLength
                        );
                        canvas.rotate((6 * Math.PI) / 180);
                    }
                } else {
                    canvas.rotate((30 * Math.PI) / 180);
                }
            }

            canvas.restore();
        }

        /**
         * 绘制时针
         *
         * @param   canvas      画布
         * @param   hour        时
         * @param   minute      分
         * @param   second      秒
         */
        private drawHour(
            canvas: SPainter,
            hour: number,
            minute: number,
            second: number
        ): void {
            canvas.save();
            canvas.pen.color = SColor.Black;
            canvas.rotate(
                ((hour * 30.0 + (minute * 30.0) / 60 + (second * 30.0) / 3600) *
                    Math.PI) /
                180
            );
            canvas.drawLine(
                0,
                this.radius / 10.0,
                0,
                -this.radius / 2.0
            );
            canvas.restore();
        }

        /**
         * 绘制秒针
         *
         * @param   canvas      画布
         * @param   minute      分
         * @param   second      秒
         */
        private drawMinute(canvas: SPainter, minute: number, second: number): void {
            canvas.save();
            canvas.pen.color = SColor.Black;
            canvas.rotate(((minute * 6 + (second * 6) / 60.0) * Math.PI) / 180);
            canvas.drawLine(
                0,
                this.radius / 10.0,
                0,
                (-this.radius * 2.0) / 3.0
            );
            canvas.restore();
        }

        /**
         * 绘制秒针
         *
         * @param   canvas      画布
         * @param   second      秒
         */
        private drawSecond(canvas: SPainter, second: number): void {
            canvas.save();
            canvas.pen.color = SColor.Red;
            canvas.rotate((second * 6 * Math.PI) / 180);
            canvas.drawLine(
                0,
                this.radius / 5.0,
                0,
                -this.radius + this.radius / 10.0
            );
            canvas.restore();
        }
    }

    class TestView extends SGraphyView {
        clock1 = new ClockItem(null, 300, 300);

        constructor() {
            super("clockItem1");
            this.scene = new SGraphyScene();
            this.scene.addItem(this.clock1);
        }
    }

    export default {
        mounted(): void {
            new TestView();
        }
    }
</script>

<style scoped>

</style>