import { __awaiter, __generator } from "tslib";
import { ProgressBarDefaultProps } from './props';
import '../_util/assert-component2';
Component({
    props: ProgressBarDefaultProps,
    data: {
        curProgress: 0,
        canvasWidth: 100,
    },
    ctx: null,
    drawColor: null,
    canvas: null,
    didMount: function () {
        this.calProgress();
    },
    didUpdate: function () {
        this.calProgress();
    },
    methods: {
        requestAnimationFrame: function (fn) {
            setTimeout(fn, 16);
        },
        getDrawColor: function () {
            return __awaiter(this, void 0, void 0, function () {
                var _a, strokeColor, trailColor, drawColor;
                return __generator(this, function (_b) {
                    _a = this.props, strokeColor = _a.strokeColor, trailColor = _a.trailColor;
                    drawColor = {
                        strokeColor: strokeColor || '#1677ff',
                        trailColor: trailColor || '#F5F5F5',
                    };
                    return [2 /*return*/, drawColor];
                });
            });
        },
        getCanvasContext: function () {
            return __awaiter(this, void 0, void 0, function () {
                var systemInfo, pixelRatio, width;
                return __generator(this, function (_a) {
                    switch (_a.label) {
                        case 0:
                            if (this.ctx)
                                return [2 /*return*/];
                            return [4 /*yield*/, my.getSystemInfo()];
                        case 1:
                            systemInfo = _a.sent();
                            pixelRatio = systemInfo.pixelRatio;
                            width = this.props.width;
                            this.ctx = my.createCanvasContext("ant-progress-canvas-".concat(this.$id));
                            this.ctx.imageSmoothingEnabled = true;
                            this.ctx.imageSmoothingQuality = 'high';
                            this.setData({
                                canvasWidth: width * pixelRatio,
                            });
                            return [2 /*return*/];
                    }
                });
            });
        },
        clearCanvas: function () {
            var ctx = this.ctx;
            var canvasWidth = this.data.canvasWidth;
            ctx.clearRect(0, 0, canvasWidth, canvasWidth);
        },
        updateCanvasProgress: function (prev) {
            return __awaiter(this, void 0, void 0, function () {
                var drawColor, curRad, targetRad, direction, draw;
                var _this = this;
                return __generator(this, function (_a) {
                    switch (_a.label) {
                        case 0: return [4 /*yield*/, this.getDrawColor()];
                        case 1:
                            drawColor = _a.sent();
                            return [4 /*yield*/, this.getCanvasContext()];
                        case 2:
                            _a.sent();
                            curRad = Math.floor((prev / 100) * 360);
                            targetRad = Math.floor((this.data.curProgress / 100) * 360);
                            direction = curRad < targetRad ? 1 : -1;
                            draw = function () {
                                if (curRad == targetRad)
                                    return;
                                curRad = direction * _this.props.speed + curRad;
                                if (direction == -1) {
                                    curRad = Math.max(curRad, targetRad);
                                }
                                else {
                                    curRad = Math.min(curRad, targetRad);
                                }
                                _this.clearCanvas();
                                _this.drawOrbit(drawColor.trailColor);
                                _this.drawProgress(drawColor.strokeColor, curRad);
                                _this.ctx.draw(true);
                                _this.requestAnimationFrame(draw);
                            };
                            draw();
                            return [2 /*return*/];
                    }
                });
            });
        },
        drawProgress: function (color, rad) {
            var ctx = this.ctx;
            var canvasWidth = this.data.canvasWidth;
            ctx.beginPath();
            ctx.strokeStyle = color;
            ctx.lineWidth = this.props.strokeWidth;
            ctx.setLineCap('round');
            ctx.arc(canvasWidth / 2, canvasWidth / 2, canvasWidth / 2 - this.props.strokeWidth, -Math.PI / 2, -Math.PI / 2 + (rad / 360) * 2 * Math.PI, false);
            ctx.stroke();
        },
        drawOrbit: function (color) {
            var ctx = this.ctx;
            var canvasWidth = this.data.canvasWidth;
            ctx.beginPath();
            ctx.strokeStyle = color;
            ctx.lineWidth = this.props.strokeWidth;
            ctx.arc(canvasWidth / 2, canvasWidth / 2, canvasWidth / 2 - this.props.strokeWidth, 0, Math.PI * 2, false);
            ctx.stroke();
        },
        calProgress: function () {
            var percent = +this.props.percent;
            if (isNaN(percent)) {
                return this.setData({ curProgress: 0 });
            }
            var prevProgress = this.data.curProgress;
            this.setData({
                curProgress: percent > 100 ? 100 : percent < 0 ? 0 : percent,
            });
            if (this.props.type === 'circle') {
                this.updateCanvasProgress(prevProgress);
            }
        },
    },
});