<template>
    <div :class="progressClass"
         :style="progressStyle">
        <div v-if="type==='circle'"
             :class="`${prefix}-progress__inner`">
            <svg :width="circleSize"
                 :height="circleSize"
                 view>
                <circle :cx="circleSize/2"
                        :cy="circleSize/2"
                        :r="r"
                        :stroke-width="w"
                        :class="`${prefix}-progress__inner--back`"
                        fill="none"></circle>
                <circle :cx="circleSize/2"
                        :cy="circleSize/2"
                        :r="r"
                        :stroke-width="w"
                        fill="none"
                        :class="`${prefix}-progress__inner--fore`"
                        stroke-linecap="round"
                        transform="matrix(0,-1,1,0,0,0)"
                        :style="`transform-origin: ${circleSize/2}px;`"
                        :stroke-dasharray="strokeDasharray"></circle>
            </svg>
            <div :class="`${prefix}-progress__inner__mask`"
                 :style="maskStyle">
                <slot>
                    <i v-if="status!=='running'"
                       :class="`${prefix}-icon-${status}-s`"></i>
                    <span v-else>
                        <slot :value="value">{{model}}%</slot>
                    </span>
                </slot>
            </div>
        </div>
        <div v-if="type==='line'"
             :class="`${prefix}-progress__inner`">
            <div :class="`${prefix}-progress__inner__bar`"
                 :style="barStyle"></div>
            <div :class="`${prefix}-progress__inner__text`">
                <slot>
                    <i v-if="status!=='running'"
                       :class="`${prefix}-icon-${status}`"></i>
                    <span v-else>
                        <slot :value="value">{{model}}%</slot>
                    </span>
                </slot>
            </div>
        </div>
    </div>
</template>

<script>
import { prefix, prefixMixins, guid } from 'jdd-design/utils';
export default {
    name: `${prefix}-progress`,
    mixins: [prefixMixins],
    props: {
        type: {
            type: String,
            default: 'line'
        },
        size: {
            type: [String, Number],
            default: 'medium'
        },
        status: {
            type: String,
            default: 'running'
        },
        value: {
            type: Number,
            validator: function(val) {
                return val >= 0 && val <= 100;
            }
        },
        stroke: {
            type: Number
        }
    },
    data() {
        return {
            cssRight: {},
            cssLeft: {},
            strokeDasharray: null,
            model: 0,
            r: 55,
            w: 10,
            sizes: { large: 120, medium: 90, small: 60, mini: 30 },
            circleSize: 90,
            maskStyle: {},
            progressStyle: {}
        };
    },
    watch: {
        value: function(val) {
            this.model = val;
            this.setValue(val);
        },
        model: function(val) {
            this.$emit('input', val);
        }
    },
    computed: {
        progressClass() {
            let clsNames = [`${prefix}-progress`];
            clsNames.push(`${prefix}-progress--${this.size}`);
            clsNames.push(`${prefix}-progress--${this.type}`);
            clsNames.push(`${prefix}-progress--${this.status}`);
            return clsNames;
        },
        barStyle() {
            return { width: `${this.model}%` };
        }
    },
    methods: {
        setValue(val) {
            var circumference = 2 * this.r * Math.PI;
            var dasharray1 = (circumference * (1 - val / 100)).toFixed(2);
            var dasharray2 = ((circumference * val) / 100).toFixed(2);
            this.strokeDasharray = dasharray2 + ',' + dasharray1;
            var deg = val * 3.6;
            if (deg <= 180) {
                this.cssRight = 'transform:rotate(' + deg + 'deg)';
            } else {
                this.cssRight = 'transform:rotate(180deg)';
                this.cssLeft = 'transform:rotate(' + (deg - 180) + 'deg)';
            }
        }
    },
    mounted() {
        this.model = this.value;
        if (
            Object.prototype.toString.call(this.size).toLowerCase() ===
            '[object string]'
        ) {
            this.circleSize = this.sizes[this.size];
            this.w = this.sizes[this.size] / 20;
            this.r = (this.sizes[this.size] * 9) / 20;
        } else {
            this.circleSize = this.size;
            this.w = this.stroke || this.circleSize / 20;
            this.r = this.circleSize / 2 - this.w / 2;
            this.maskStyle = {
                width: `${this.circleSize - this.w * 2}px`,
                height: `${this.circleSize - this.w * 2}px`,
                lineHeight: `${this.circleSize - this.w * 2}px`,
                left: `${this.w}px`,
                top: `${this.w}px`,
                fontSize: `${this.circleSize / 5}px`
            };
            this.progressStyle = {
                width: `${this.circleSize}px`,
                height: `${this.circleSize}px`
            };
        }
        this.setValue(this.model);
    }
};
</script>