<script >
  export default {
    props: {
      // 证照类型
      licstype: {
        type:String,
        default: 'xxxx'
      },
      // 证照类型
      title: {
        type:String,
        default: ''
      },
    },
    data: function () {
      return {
        licsRate:0,
      }
    },
    methods: {
      // 获得资料完整率
      getRate: function () {
        var self = this;


        var supguid = self.$store.state.user.curUser.supplierguid;

        Ajax.post('/certacc/getMyLicsRate', {supguid:supguid,lictype:self.licsType})
          .then(function (response){
            var data = response.data;
            if(data.errorCode==0){
              self.$set('licsRate',data.licnum);
            }else{// 异常的时候，设置为0
              self.$set('licsRate',0);
            }

            var licsRate = self.licsRate || '0';
            var count = 1;
            var intel = window.setInterval(function () {
              if (count > licsRate) {
                window.clearInterval(intel);
              } else {
                self.drawCircle(count++);
              }
            }, 20);
        })
        
      },
      returnQ: function () {
         var self = this;
          self.$route.router.go('/einfor');
      },
      // 合格率的动态效果
      drawCircle:function(percent) {
        var path = $('#percentCircle');
        if (percent > 50) {
            var degree = Math.PI * (100 - percent) / 50;
            var x = Math.sin(degree) * 22.5;
            var y = 22.5 - Math.cos(degree) * 22.5;
            path.attr('d', 'M27.5,5 a22.5,22.5 0 1 0 ' + x + ' ' + y);
        } else {
            var degree = Math.PI * percent / 50;
            var x = Math.sin(degree) * -22.5;
            var y = 22.5 - Math.cos(degree) * 22.5;
            path.attr('d', 'M27.5,5 a22.5,22.5 0 0 0 ' + x + ' ' + y);
        }
      },
      // 刷新
      refresh:function(){        
        this.$dispatch('click');
      }
    },
    created: function(){
      this.getRate();
    }
  };
</script>
<template>
  <div class="pop-banner clearfix">
    <div class="current-operate has-process hide">
      <svg id="svgProcess" class="svg-process" width="55" height="55" xmlns="http://www.w3.org/2000/svg">
          <g stroke="#e8ebef" stroke-width="4" fill="#fff">
              <circle cx="27.5" cy="27.5" r="25.5" />
          </g>
          <g stroke="#86b8bc" stroke-width="5" fill="transparent">
              <circle cx="27.5" cy="27.5" r="22" />
          </g>
          <text x="27.5" y="32.5" text-anchor="middle" fill="#86b8bc" font-size="14">{{licsRate}}%</text>
          <g fill="transparent" stroke="#a1d8dc" stroke-width="6">
              <path id="percentCircle" d="M27.5,5 a22.5,22.5 0 0 0 0,0" />
          </g>
      </svg>
      您当前资料完整度{{licsRate}}%，请尽快补齐资料
    </div>
    <!--之下每个选项卡显示名跟按钮不一样-->
    <div class="operate-btns">
      <a v-on:click="refresh" class="fbtn fb-refresh">刷新</a>
      <a v-on:click="returnQ" class="fbtn fb-return">返回</a>
    </div>
    <h3 class="current-module">{{title}}</h3>
  </div>
</template>