import { Component, OnInit } from '@angular/core';
import { Propertiy } from 'src/app/interface/propertiy-interface';
import { Others } from 'src/app/interface/ohters-interface';

@Component({
  selector: 'app-progress-demo',
  templateUrl: './progress-demo.component.html',
  styleUrls: ['./progress-demo.component.scss']
})
export class ProgressDemoComponent implements OnInit {

  properties: Array<Propertiy> = [
    {
        name: 'type',
        value: 'line | circle | dashboard',
        type: '@Input()',
        description: '进度条类型'
    },
    {
      name: 'size',
      value: 'default | small',
      type: '@Input()',
      description: '进度条尺寸'
    },
    {
      name: 'format',
      value: 'percent => percent + %',
      type: '@Input()',
      description: '进度条内容模板'
    },
    {
      name: 'percent',
      value: 'number',
      type: '@Input()',
      description: '百分比'
    },
    {
      name: 'showInfo',
      value: 'boolean',
      type: '@Input()',
      description: '是否显示进度数值或状态图标'
    },
    {
      name: 'status',
      value: 'string normal | success | error | active',
      type: '@Input()',
      description: '进度条状态'
    },
    {
      name: 'strokeLinecap',
      value: 'round | square',
      type: '@Input()',
      description: '进度条端点形状'
    },
    {
      name: 'strokeColor',
      value: 'string | { from: string; to: string: direction: string; [percent: string]: string }',
      type: '@Input()',
      description: '进度条颜色，传入对象时为渐变'
    },
    {
      name: 'successPercent',
      value: 'number 0',
      type: '@Input()',
      description: '已完成的分段百分比'
    },
    {
      name: 'strokeWidth',
      value: '线性进度条是8px，圆环是6%',
      type: '@Input()',
      description: '进度条线的宽度或 圆形进度条宽度，单位是进度条画布宽度的百分比'
    },
    {
      name: 'width',
      value: '80',
      type: '@Input()',
      description: '仪表盘进度条画布宽度，单位px'
    },
    {
      name: 'gapDegree',
      value: '0~360',
      type: '@Input()',
      description: '仪表盘进度条缺口角度'
    },
    {
      name: 'gapPosition',
      value: 'top | right | bottom | left',
      type: '@Input()',
      description: '仪表盘进度条缺口位置'
    }
  ];

  codePath = {
    baseDemo: 'assets/codes/progress/basedemo',
    circleDemo: 'assets/codes/progress/circledemo',
    boardDemo: 'assets/codes/progress/borderdemo',
    stateDemo: 'assets/codes/progress/statedemo'
  };

  formatOne = (percent: number) => `${percent} Days`;
  formatTwo = () => `Done`;

  percent = 80;
  status="'normal";
  constructor() { }

  ngOnInit() {
  }

  decline(){
    this.percent = this.percent - 10;
    if (this.percent < 0) {
      this.percent = 0;
    }
  }
  increase(){
    this.percent = this.percent + 10;
    if (this.percent > 100) {
      this.percent = 100;
    }
  }

  success() {
    this.status = 'success';
  }
  error() {
    this.status = 'error';
  }
  normal() {
    this.status = 'normal';
  }

}