<style>
.relation .root-node>div .node-btn:before{
	border-left-color:#fff !important;
}
.relation .root-node>div.bgc-blue{
	background-color: #4aa8e5;
	color: #fff;		
}
.list-show >div{
	border: 1px solid #fff;
}
.list-show >div.bgc-gra{
	color: #4aa8e5 !important;
	border: 1px solid #4aa8e5;
}

.relation .root-node>div.bgc-gra{
	background-color: #CFD3D7;
	color: #fff;		
}
.supplylist-root.relation .root-node div.bgc-gra a{
	color: #4aa8e5 !important;		
}
</style>
<template>
<div class="container resource close-left-menu" style="min-height: 809px;">
  <div class="pop-banner clearfix">
    <form class="search-bar" active="###">
      <div class="search-btn">
        <input type="button" value="搜索">
      </div>
      <input type="text" placeholder="输入供应商名称过滤" class="text-color-gray">
    </form>
    <div class="operate-btns"> 
        <a class="fbtn fb-return" v-on:click="go">返回</a>
    </div>
    <h3 class="current-module">配送企业委托配送关系</h3>
     
  </div>
  <!--supply-supplylist start-->
  <div class="supplylist clearfix">
  
    <div class="supplylist-root relation" style="width:500px;">
      <div class="root-node" style="width:480px;"     >

        <div class="list-node " style="width:480px;"
        :class="{'bgc-blue':item.show,'bgc-gra':!item.show}"
        v-for="item in list" v-on:click="item.show=!item.show">
              <span class="node-btn"></span>{{item.name}}
        </div>

        <div class="list-show mr-0" style="width:480px;margin-left:5px;"
        v-for="item in list" v-show="item.show">

          <div class="pl10 "
          :class="{'bgc-gra':s.guid==showguid}" v-for="s in item.data"
                 v-on:click="show(s.guid)"
          >
            <span class="w170"><a href="javasript:;">
            {{s.supplierName}}</a></span>
            <span class="w80">{{s.contacts}}</span>
            <span class="w110">{{s.contactsTel}}</span>
            <span class="w60">
              <button class="btn-d btn-d-activate" v-link="{path:'/distributionDetailSupplier/'+s.supplierGuid}">详情</button>
              
            </span>
          </div>

        </div>
      </div>
    </div>
    
    <div class="supplylist-table pl20">
      <h3>商品列表</h3>
      <table class=" itable itable-bordertop itable-thead-13px">
        <thead>
          <tr>
            <th class="w50">序号</th>
            <th class="w110">商品</th>
            <th class="w140">生产厂商</th>
            <th class="w70">证照完整率</th>
            <th class="w50">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr  v-for="item in list2">
            <td>{{$index+1}}
              <div class="pro-pic" 
              v-bind:style="{backgroundImage:'url('+item.PictContent+')'}">
                <span class="pic-max blue-search"></span>
              </div>
            </td>
            <td><div class="p-lr-10 t-left">
            {{item.GoodsName}}</div></td>
            <td><div class="p-lr-10">{{item.Producer}}<br><br>鲁食药监械(准)字2010<br>第2660036号</div></td>
            <td>80%</td>
            <td><a v-link="{path:'/distributionDetailRelationList/'+item.GUID}" class="btn-d btn-d-activate/">明细</a></td>
          </tr>
        </tbody>
      </table> 

   <!--    <pagination
   @page-change="getData"
   :class="['m-20-0']"
   :page-no.sync="search.page"
   :total-pages.sync="search.totalPages">
   <em class="page">明细条目数【3】</em>
       </pagination> -->

    </div>

  </div>
  <!--supply-supplylist end-->

</div>
</template>
<script>
module.exports={
  data:function(){
    return {
      list:[
        
      ],search:{
          pageSize: 20, page: 1, totalPages: 0,searchWord:''
      },showguid:'',list2:[]
    }
  },methods:{
    go:function(){
        history.go(-1);
    },
    show:function(guid){
      this.showguid=guid;
      this.getlist();
    },
    getlist:function(){
      Ajax.get('/api/goverment_distribution_findSupplyGoods',{
        id:"00468123c3064d54801a62c41a021c89" || this.guid
      }).then(function(res){
          var result=res.data;


          if(result.data){                          
              this.$set('list2',result.data);
          }
      }.bind(this))
    },
    getData:function(casetxt){//请求数据    
      Ajax.get('/api/goverment_distribution_findSupplyRelation',{
        id:this.$route.params.id
      }).then(function(res){
          var result=res.data;


          if(result.data){
              var d=[];
              for(var i in result.data){
                  d.push({
                    name:i,data:result.data[i],show:false
                  })
              }              
              this.$set('list',d);
          }
      }.bind(this))
    }
  },route:{
    activate:function(){
      this.getData();
    }
  }
}
</script>