

import template from '../template/circle.html'


export default class circle{
    constructor(){
        this.replace=true
        this.restrict='EA'
        this.template=template
        this.require='^ngModel'
        this.scope={
            ngModel:'=',
            label:'@',
            showinfo:'@'
        }

        //this.utils=utils
        this.controller.$inject=['$scope']
    }

    controller($scope){
        const PI = 3.1415926535898
        //$scope.showInfo=!!$scope.showInfo
        $scope.showinfo=Boolean($scope.showinfo)
        $scope.dashOffset = () => {
            let C = $scope.radius * 2 * PI
            return {
                'stroke-dasharray'  : `${C}px ${C}px`,
                'stroke-dashoffset' : `${C - C * $scope.ngModel / 100}`
            }
        }
    }

    link(scope,elem,attrs,ctrl){
        let size = attrs.size || 100
        let strokeWidth = attrs.strokeWidth || 4
        let inner = attrs.inner || '#e9e9e9' //inner background-color
        let outer = attrs.outer || '#00a9e8' //outer background-color
        let radius = null

        let moveTo = size / 2
        scope.radius = radius = moveTo - (strokeWidth / 2)
        let paths = elem.find('path')

        for(let i = 0;i < paths.length; i++){
            paths[i].setAttribute('d',`M ${moveTo},${moveTo} m 0,-${radius} a ${radius},${radius} 0 1 1 0,${radius * 2} a ${radius},${radius} 0 1 1 0,-${radius * 2}`)
            paths[i].setAttribute('stroke', i===0 ? inner : outer)
            paths[i].setAttribute('stroke-width', strokeWidth)
        }

        let svg = elem.find('svg')[0]
        svg.setAttribute('viewBox',`0 0 ${size} ${size}`)
    }
}


//circle.$inject = ['fermi.Utils']

@@ -1,10 +1,8 @@
-%0A%0A
 import t
@@ -41,17 +41,46 @@
 .html'%0A%0A
+//Todo %E5%8D%8A%E5%9C%86%E5%BD%A2%0A//Todo template %E6%8E%A5%E5%8F%A3
 %0A
-
 export d
@@ -344,35 +344,8 @@
  %7D%0A%0A
-        //this.utils=utils%0A
     
@@ -453,52 +453,9 @@
 898%0A
-        //$scope.showInfo=!!$scope.showInfo
 %0A
+
     
@@ -547,18 +547,20 @@
         
-le
+cons
 t C = $s
@@ -1010,32 +1010,75 @@
 ackground-color%0A
+        let shape = attrs.shape %7C%7C 'round'%0A
         let radi
@@ -1562,32 +1562,100 @@
 dth)%0A        %7D%0A%0A
+        paths%5Bpaths.length-1%5D.setAttribute('stroke-linecap',shape)%0A%0A
         let svg 
@@ -1744,43 +1744,6 @@
   %7D%0A
+
 %7D%0A
-%0A%0A//circle.$inject = %5B'fermi.Utils'%5D%0A

support for svg linecap