<script>

  module.exports = {
    data: function () {
      return {
        // 企业信息
        mysupplier: [],
        // 是否资料齐全，即是否可以维护其他信息
        isFlag:false,
        // 我的商品
        mygoods:[],
        // 我的客户
        mymeds:[],
        // 供应关系、供应品种
        myrelation:[],
        // 我的证照
        mylics:[],
        // 证照完整率
        myrate:''
      };
    },
    methods: {
      // 获取idaas Code
      getCode:function(code){
        const params = {
          code,
          clientType: 'S'
        }
        const self = this;
        Ajax.post('/getIdaasCode', params)
          .then(function (response){
            if(response.data.message == 'success'){
              setTimeout(() => {
                self.initData();
              }, 1000*30)
            } else {

            }
        })
      },
      // 初始化获取数据
      initData: function(){
        this.getData();
        // this.getSupplier();
        // this.getMyGoods();
        // this.getMyMeds();
        // this.getMyRelation();
        // this.getMyLics();
      },
      //请求数据 
      getData:function(){
			  var self=this;
        Ajax.post('/sitemessage/public_msg_getAll',{
          size: 10,page: 1,type:0,isRead:'Y'  
        }).then(function(res){
            var result=res.data;
            if(result.data && result.data.list){
                self.$set('reads',result.data.list);
                window.localStorage.setItem('resDate',res.data.senData);
            }
            this.$store.state.contS=result.data.total>0?result.data.total:0;
        })
	    },
      // 企业信息
      getSupplier:function(){
        var self = this;
        Ajax.get('/guid/getMySupplier', this.search)
          .then(function (response){
            self.$set('mysupplier',response.data.data);
            // 表示资料已经齐全
            var flag = self.$store.state.user.showMenu;
            self.$set('isFlag',flag=='Y'?true:false);  

            self.getMyLicsRate();
        })
      },
      // 我的商品
      getMyGoods:function(){
        var self = this;
        Ajax.get('/guid/getMyGoods', this.search)
          .then(function (response){
            self.$set('mygoods',response.data.data);
        })
      },      
      // 我的客户
      getMyMeds:function(){
        var self = this;
        Ajax.get('/guid/getMyMeds', this.search)
          .then(function (response){
            self.$set('mymeds',response.data.data);
        })
      },    
      // 供应关系、供应品种
      getMyRelation:function(){
        var self = this;
        Ajax.get('/guid/getMyRelation', this.search)
          .then(function (response){
            self.$set('myrelation',response.data.data);
        })
      }, 
      // 我的证照
      getMyLics:function(){
        var self = this;
        Ajax.get('/guid/getMyLics', this.search)
          .then(function (response){
            self.$set('mylics',response.data.data);
        })
      },
      // 获得证照完整率
      getMyLicsRate:function(){        
        var self = this;
        Ajax.post('/guid/getMyLicsRate', {supguid:self.mysupplier.guid})
          .then(function (response){
            var data = response.data;
            if(data.errorCode==0){
              self.$set('myrate',data.licnum);
            }else{// 异常的时候，设置为0
              self.$set('myrate',0);
            }
            var rate = self.myrate || '0';
            var count = 1;
            var intel = window.setInterval(function () {
              if (count > rate) {
                window.clearInterval(intel);
              } else {
                self.drawCircle(count++);
              }
            }, rate);
        })
      },
      // 合格率的动态效果
      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);
        }
      },
    },
    route: {
      activate: function () {
        if(this.$route.query && this.$route.query.code){
          setTimeout(() => {
            const code = this.$route.query.code;
            this.getCode(code);
          }, 2000)
        } else {
          this.initData();
        }
      }
    },
  };
</script>
<template>
  <div style="  width: 100%; height: 100%; z-index: -10;">
    <div class="guide-map container">
      <!-- 我是谁 -->
      <div class="area-me">
        <div class="area-me-ch">
        <div class="me-content">
          <div class="whoami" v-if="mysupplier.chinesename==''">我是谁?</div>
          <div class="myname"><span>{{mysupplier.chinesename}}</span></div>
          <div class="btn-wrap">
            <a class="edit-btn fl ml-30" v-link="{path: '/home'}">待办事宜</a>
            <a class="edit-btn fr" v-link="{path: '/einfor'}">立即补充</a>
          </div>
        </div>
        <div class="screen-btn"><i></i><i></i><i></i></div>
        <div class="screen-bottom"></div>
        </div>
        
      </div>
      <div class="triangle">
        <p class="triangle-up"></p>
        <p class="triangle-up1"></p>
      </div>

      <!-- 我的商品 -->
      <div  
      :class="isFlag==true && mygoods.goodnum!=0? 'area-goods area-item active':'area-goods area-item'"
      class="area-goods area-item">
        <div class="area-name">我的商品</div>

        <a href="javascript:void()" v-if="isFlag==false" class="edit-btn">立即补充</a>
        <!--star 11-17 v-link="{path:'/supplierGood'}"-->
        <a v-link="{path: '/productList'}" v-if="isFlag==true" class="edit-btn">立即补充</a>

        <a v-link="{path: '/productList'}" class="edit-btn">点击修改</a>
        <div class="area-detail" v-if="isFlag==true && mygoods.goodnum!=0">
          <div class="content"><p class="big-p">共<em>{{mygoods.goodnum}}</em>个</p><p class="big-p">商品</p></div>
          <a class="typo-update"><p class="min-p">有变更</p><p class="min-p">{{mygoods.checknum}}</p></a>
          <a class="typo-new"><p class="min-p">待飞送</p><p class="min-p">{{mygoods.waitingnum}}</p></a>
          <a class="typo-normal"><p class="min-p">正常</p><p class="min-p">{{mygoods.normalnum}}</p></a>
        </div>
      </div>

      <!-- 我的客户 -->
      <div :class="isFlag==true && mymeds.mednum!=0? 'area-customer area-item active':'area-customer area-item '">
        <div class="area-name">我的客户</div>

        <a href="javascript:void()" v-if="isFlag==false" class="edit-btn">立即补充</a>
        <a v-link="{path: '/customer'}" v-if="isFlag==true" class="edit-btn">立即补充</a>

        <a v-link="{path: '/customer'}" 
          v-if="isFlag==true && mymeds.mednum!=0"   class="edit-btn">点击修改</a>

        <div class="area-detail" v-if="isFlag==true && mymeds.mednum!=0">
          <div class="content"><p class="big-p">共<em>{{mymeds.mednum}}</em>家</p><p class="big-p">客户</p></div>
        </div>
      </div>

      <!-- 我的证照 -->
      <div :class="isFlag==true && mygoods.goodnum!=0 && mylics.licnum!=0?'area-credentials area-item active':'area-credentials area-item'">
        <div class="area-name">我的证照</div>
        
        <a href="javascript:void()" v-if="mygoods.goodnum==0" class="edit-btn">立即补充</a>
        <a v-link="{path: '/cert/certCompleteList'}" v-if="mygoods.goodnum!=0" class="edit-btn">立即补充</a>
        <a v-link="{path: '/cert/certCompleteList'}" class="edit-btn">点击修改</a>

        <div class="area-detail" v-if="isFlag==true && mylics.licnum!=0">
          <div class="content"><p class="big-p">共<em>{{mylics.licnum}}</em>份</p><p class="big-p">证照</p></div>
          <a class="typo-pass"><p class="min-p">合格率</p><p class="min-p">{{rate ==null ? '0' : rate}}</p></a>

          <!-- <svg id="svgProcess" class="svg-process" width="55" height="55" xmlns="http://www.w3.org/2000/svg">
            <g stroke="#649fa3" stroke-width="4" fill="#fff">
              <circle cx="27.5" cy="27.5" r="25.5"/>
            </g>
            <g stroke="#649fa3" stroke-width="5" fill="transparent">
              <circle cx="27.5" cy="27.5" r="22"/>
            </g>
            <text x="27.5" y="25.5" text-anchor="middle" fill="#649fa3" font-size="12">合格率</text>
            <text x="27.5" y="40.5" text-anchor="middle" fill="#649fa3" font-size="12">
              {{ rate ==null ? '0' : rate }}
            </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> -->
        </div>
      </div>

      <!-- 供应关系 -->
      <div 
        :class="isFlag==true && myrelation.relationnum!=0? 'area-supply area-item active':'area-supply area-item'">
        <div class="area-name">供应关系</div>

        <a v-link="javascript:void();" v-if="isFlag==false" class="edit-btn">立即补充</a>
        <a v-link="{path: '/relation-edit2/0'}" v-if="isFlag==true" class="edit-btn">立即补充</a>
        <a v-link="{path: '/relation'}" class="edit-btn">点击修改</a>

        <div class="area-detail" v-if="isFlag==true && myrelation.relationnum!=0">
          <div class="content"><p class="big-p">共<em>{{myrelation.relationnum}}</em>家</p><p class="big-p"><i>{{myrelation.goodsnum}}</i>个</p></div>
        </div>
      </div>

      <div class="virtual-line"></div>
    </div>
  </div>
</template>

<style lang="sass" scoped>
.area-detail {
  width: 200px;
  height: 135px;
  border-radius: 50px;
  font-size: 16px;
  .content {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;

    .big-p {
      height: 38px;
      line-height: 38px;

      em {
        vertical-align: bottom;
      }
    }
  }

  >a, >svg {
    width: 56px;
    height: 56px;
  }

  .typo-update {
    left: -28px;
    top: -28px;
  }
  .typo-new {
    right: -28px;
    top: -28px;
  }
  .typo-normal {
    left: 50%;
    bottom: -28px;
    transform: translateX(-50%);
    margin: 0;
  }
  .typo-pass {
    background: #f5f5f5;
    border-color: #4fa1a4;
    color: #4fa1a4;
    left: 50%;
    bottom: -28px;
    transform: translateX(-50%);
  }
  .svg-process {
    left: -28px;
    transform: translateY(-50%);
    margin-top: 0;
  }
}

.area-goods .area-detail {
  right: calc(100% + 28px);
}
.area-customer .area-detail {
  left: calc(100% + 28px);
}
.area-credentials .area-detail {
  right: calc(100% + 28px);
  margin-right: 0;
}
.area-supply .area-detail {
  left: calc(100% + 28px);
  margin-left: 0;
}
</style>