<template>
  <div :class="[_class,_inlineClass]">
    <div :class="[_typeBarClass,_sizeClass]" v-if="type === 'bar'">
      <div>
        <div :class="_barClass">
          <div :class="_barInnerClass" :style="{width: percent + '%'}" />
        </div>
        <span :class="_infoClass" v-if="status === 'text'">{{ showText }}</span>
        <div :class="_infoClass" v-else>
          <template>
            <slot></slot>
          </template>
        </div>
      </div>
    </div>
    <div :class="[_typeCircleClass,_sizeClass]" v-else >
      <div>
        <svg
          :viewBox = "` 0 0 ${boxWidth} ${boxWidth} `"
        >
          <path
            :class="_pathBgClass"
            :d = "path"
            fill="none"
            :stroke-width = "lineWidth"
          />

          <path
            :class="_pathValClass"
            :d = "path"
            fill="none"
            :stroke-width = "lineWidth"
            :stroke-dasharray = "dashArray"
            :stroke-dashoffset = "dashOffset"
          />
        </svg>
        <span :class="_infoClass" v-if="status === 'text'">{{ showText }}</span>
        <div :class="_infoClass" v-else>
          <template>
            <slot></slot>
          </template>
        </div>
      </div>
    </div>
    <p :class="_messageClass">{{ message }}</p>
  </div>
</template>

<script>
  const name = 'hive-progress';

  export default {
    name,
    props: {
      inline: {
        type: Boolean,
        default: false,
      },
      message: String,
      size: {
        type: String,
        default: 'default',
      },
      type: {
        type: String,
        default: 'bar',
        validator: val => ['bar', 'circle'].indexOf(val) > -1,
      },
      /**
       * 值为 0-1
       */
      value: Number,
      status: {
        type: String,
        default: 'text',
      },
    },
    data() {
      return {
        boxWidth: 146,
        lineWidth: 8,
      };
    },
    computed: {
      _class() {
        return [name];
      },
      _typeBarClass() {
        return [
          `${name}--type-bar`,
        ];
      },
      _typeCircleClass() {
        return [
          `${name}--type-circle`,
        ];
      },
      _barClass() {
        return [`${name}__bar`];
      },
      _barInnerClass() {
        return [`${name}__bar-inner`];
      },
      _pathBgClass() {
        return [`${name}__path-bg`];
      },
      _pathValClass() {
        return [`${name}__path-value`];
      },

      _infoClass() {
        return [`${name}__valuetext`];
      },

      _messageClass() {
        return [`${name}__message`];
      },
      _sizeClass() {
        return [
          this.size === 'default' ? `${name}--size-default` : `${name}--size-large`,
        ];
      },
      _inlineClass() {
        return [
          this.inline ? `${name}--inline` : `${name}--block`,
        ];
      },
      _iconClass() {
        return [
          `${name}__icon`,
        ];
      },
      showText() {
        if (this.value > 1) {
          this.value = 1;
        }
        if (this.value < 0) {
          this.value = 0;
        }
        return parseInt(this.value * 100) + '%';
      },
      path() {
        const radius = this.boxWidth / 2;
        const halfLineWidth = this.lineWidth / 2;
        const drawRadius = radius - halfLineWidth;
        const path = `
            M ${radius} ${halfLineWidth} 
            A ${drawRadius} ${drawRadius} 0 0 1 ${radius} ${radius + drawRadius}
            A ${drawRadius} ${drawRadius} 0 0 1 ${radius} ${halfLineWidth}
        `;

        return path;
      },
      percent() {
        return parseInt(this.value * 100);
      },
      pathLen() {
        return (Math.PI * 2 * (this.boxWidth - this.lineWidth)) / 2;
      },
      dashArray() {
        return `${this.pathLen} ${this.pathLen}`;
      },
      dashOffset() {
        return this.pathLen * (1 - this.value);
      },
    },
  };
</script>
