<template>

<div class="container resource close-left-menu contaNEW">

  <div class="pop-banner clearfix">
    <!-- <div class="operate-btns">
    </div> -->
    <h3 class="current-module">供应商评价</h3>
  </div>


  <!--supply-productlist start-->
  <div class="supply-productlist clearfix">

    <div class="pd-form fast-search-form">
      <div class="group-row">
        <div class="form-group">
          <div class="control">
            <input type="text" v-model="supname" maxlength="20" v-rule id="cn1" title="供应商" placeholder="供应商">
          </div>
        </div>
        <div class="form-group">
          <div class="control">
            <input type="text" v-model="medwvguid" maxlength="17" v-rule id="cn1" title="入库单号" placeholder="入库单号">
          </div>
        </div>
      </div>
      <div class="group-row">
        <div class="form-group">
          <!-- <label for="cn1" class="label">入库日期</label> -->
          <div class="control control-date" style="height:34px;overflow: inherit;background: white;">
              <div style="width: 42%;float: left">
                <datepicker :target.sync='wvdatestart' :readonly="readonlyFlag" title="入库开始日期" placeholder="入库开始日期"
                styleobj="width:100% !important;border-radius:8px 0px 0px 8px !important;"></datepicker>
              </div>
              <span class="text-and" style="width: 45px;height:32px; background: white;">—</span>
              <div style="width: 48%;float: right;">
                <datepicker :target.sync="wvdateend" :readonly="readonlyFlag" title="入库结束日期" placeholder="入库结束日期"
                styleobj="width:100% !important;border-radius:0px 8px 8px 0px !important;"></datepicker>
              </div>
            </div>
        </div>
      </div>
      <div class="group-row t-right">
        <button class="fast-search-form-btn btn-d btn-d-lg btn-d-activate btn-d-circle" @click="getData(true)">查 询</button>
      </div>
    </div>

    <div class="ctable ct-parent">
      <div class="ct-head break-line" id="t_header" style='border-top:none;'>
        <span class="ct-col w70">序号</span>
        <span class="ct-col w330">供应商</span>
        <span class="ct-col w130">供货质量</span>
        <span class="ct-col w130">供应及时率</span>
        <span class="ct-col w130">证照完整率</span>
        <span class="ct-col w130">综合评价</span>
        <span class="ct-col w70">操作</span>
      </div>
      <div class="ct-row" v-if="list==null || list.length==0">
        <div class="row-line t-center">
          <div class="ct-col">暂无符合条件的记录</div>
        </div>
      </div>
      <div class="ct-row" v-for="item in list" v-else>
        <div class="row-line">
          <span class="ct-col w70">{{$index+1}}</span>
          <span class="ct-col w330 break-it t-left pr10"><span class="break">{{item.suppliername}}</span></span>
          <span class="ct-col w130">{{item.dimension1}}</span>
          <span class="ct-col w130">{{item.dimension2}}</span>
          <span class="ct-col w130">{{item.dimension3}}</span>
          <span class="ct-col w130">{{item.score}}</span>
          <span class="ct-col w70 activate">
            <div>
              <a @click='slidedown($index,item.supplierguid)' class="btn button-green">明细</a>
            </div>
          </span>
        </div>
        <div class="row-launch" style="display:none;">
        <div class="load" v-if="read">
	        <div class="sk-spinner sk-spinner-wave">
	            <div class="sk-rect1"></div>
	            <div class="sk-rect2"></div>
	            <div class="sk-rect3"></div>
	            <div class="sk-rect4"></div>
	            <div class="sk-rect5"></div>
	        </div>
      	</div>
          <table class="itable" v-else>
            <thead>
              <tr>
                <th class="w50">序号</th>
                <th class="w90">入库单号</th>
                <th class="w80">入库日期</th>
                <th class="w80">入库质量</th>
                <th class="w90">供应及时率</th>
                <th class="w100">证照完整率</th>
                <th class="w90">综合评价</th>
                <th class="w80">评价人</th>
                <th class="w80">评价日期</th>
              </tr>
            </thead>
            <tbody v-for="item2 in datalist">
              <tr>
                <td>{{$index+1}}</td>
                <td class="t-left pr10">{{item2.medwvbillno}}</td>
                <td class="pr10">{{item2.mvdate}}</td>
                <td>{{item2.dimension1}}</td>
                <td>{{item2.dimension2}}</td>
                <td>{{item2.dimension3}}</td>
                <td>{{item2.score}}</td>
                <td>{{item2.evaluatestaffname}}</td>
                <td>{{item2.evaluatedate}}</td>
              </tr>
            </tbody>
          </table>
          <pagination
   				@page-change="detail"
          :class="['m-20-0']"
   				:page-no.sync="search2.page"
          :total-pages.sync="search2.totalPages">

   			</pagination>
          <div class="zip" @click="slideup($index)"></div>
        </div>
      </div>
    </div>

    <pagination
   		@page-change="getData"
      :class="['m-20-0']"
   		:page-no.sync="search.page"
      :total-pages.sync="search.totalPages">
   	</pagination>

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

</div>

</template>
<script>
module.exports={
  data: function(){
    return {
    	lastIndex:'',
      list:{},
      datalist:{},
      supname:null,
      wvdatestart:null,
      wvdateend:null,
      medwvguid:null,
      search:{
          page: 1,
          totalPages: 1,
          pageSize:50
      },
      search2:{
          page: 1,
          totalPages: 1,
          pageSize:50
      },
      read:true
    };
  },
  methods: {
    getData: function(flag){
      var self = this;
      if(flag){
        self.search.page=1;
      }

      Ajax.post('/wveval/query',{'page':self.search.page,'pageSize':5,'supname':self.supname,
        'wvdatestart':self.wvdatestart,'wvdateend':self.wvdateend,'medwvguid':self.medwvguid}).
          then(function(response){
            var res=response.data.data;
            self.list=res.list;
            self.search.totalPages=res.totalPages;
          })
    },
    slideup:function(index){
       //手风琴收起状态
    	var self=this;
          $(".row-launch:eq("+index+")").slideUp(400,function(){
	          $(".ct-row:eq("+index+")").removeClass('active');
	          $('.activate:eq('+index+')').removeClass('focus');
	          self.lastIndex='';
        });

      },
    slidedown:function(index,supplierguid){

      //手风琴下拉状态
    	var self=this;

    	if(index !=self.lastIndex){
    		self.slideup(self.lastIndex);
    	}
          self.detail(supplierguid);
        	$(".row-launch:eq("+index+")").slideDown(400,function(){
    	    	$(".ct-row:eq("+index+")").addClass("active");
    	    	$('.activate:eq('+index+')').addClass('focus');
    			self.$set('lastIndex',index);
     		});
     },
     detail:function(supplierguid){
      var self=this;
      self.read=true;
       Ajax.post('/wveval/queryDetail',{'page':self.search2.page,"pageSize":5,'supplierguid':supplierguid}).
          then(function(response){
            var res=response.data.data;
            self.$set('datalist',res.list);
            self.search2.totalPages=res.totalPages;
            self.$set('read',false);
          })
     }
   },
  route:{
    activate : function(){
    	this.getData();
    }
  }
//   ready:function(){
//     var self=this;

//     self.read=false;
// // self.read=false;
//   }
};


</script>