<style>
.showcurrent{
    background-color: #f3f5f7;
}
</style>

<template>
<div class="container resource contaNEW" style="min-height: 483px;">
      <div class="pop-banner clearfix">
        <!-- <div class="operate-btns">
    </div> -->
        <h3 class="current-module">结算对账单</h3>
      </div>  


     <div class="ctable ct-parent" >
        <div class="ct-head break-line">
          <span class="ct-col w50">序号</span>
          <span class="ct-col w140">商品名称</span>
          <span class="ct-col w80">规格</span>
          <span class="ct-col w80">数量</span>
          <span class="ct-col w100">结算金额</span>
          <span class="ct-col w160">批准文号／注册证号</span>
          <span class="ct-col w140">生产厂家</span>
          <span class="ct-col w90">操作</span>
        </div>      

      <div style="position:relative;">

        <div class="ct-row" 
        v-bind:class="{showcurrent:hospital.id==pagelistboxdata.row.id}"

        v-bind:style="{paddingBottom:hospital.id==pagelistboxdata.row.id?pagelistboxdata.row.boxheight:0}"

        v-for="hospital in hospitalList">
          <div class="row-line">
            <span class="ct-col w50">{{$index+1}}</span>
            <span class="ct-col w140 break-it"><span class="break">{{hospital.billCode}}</span></span>
            <span class="ct-col w80">{{hospital.distributor.name}}</span>
            <span class="ct-col w80">{{hospital.accountBeginDate}}</span>
            <span class="ct-col w100 break-it">{{hospital.accountEndDate}}</span>
            <span class="ct-col w160 break-it">
              <span class="break">{{hospital.detailSum}}</span>
            </span>
            <span class="ct-col w140 break-it"><span class="break">乐普（北京）医疗器械股份有限公司</span></span>
            <span class="ct-col w90"
              v-bind:class="{
                activate:hospital.id==pagelistboxdata.row.id,
                focus:hospital.id==pagelistboxdata.row.id}"
            >
              <div>
                <a href="javascript:;"                
                v-on:click="pagelistboxtoggle(hospital.id,$index)"
                class="btn-d btn-d-green">
                明细</a>
              </div>
            </span>
          </div>
        </div>

        
        <Pagelistbox 
        v-bind:list="pagelistboxdata.list"
        v-bind:keys.once="pagelistboxdata.keys"
        v-bind:row="pagelistboxdata.row"
        v-on:reload="pagelistboxget"
        >          
          
                      
        </Pagelistbox>
      </div>

    </div>

    </div>
    </template>
     
<script>
  module.exports = {
    data: function () {
      return {       
        hospitalList:[
          {
            id:1,billCode:'code',distributor:{name:'scc'},
            accountBeginDate:'data',accountEndDate:'datab',detailSum:'333'
          },
          {
            id:2,billCode:'code2',distributor:{name:'scc2'},
            accountBeginDate:'data2',accountEndDate:'datab2',detailSum:'3233'
          }
        ],
        pagelistboxdata:{ //插件配置对象         
          list:[//插件数据
            {id:1,name:'cc',status:'1',em:'cc',num:'cc',row:'cc',ks:'ss',
              number:33,price:33,pricenum:3333
            }
          ],//keys 是插件表头名/应用的class/渲染的对象属性名
          keys:['序号/w50/id','商品名称/w140/name','发票状态哦/w70/status', '单位/w50/em',
          '科室出库单号/w110/num','行号/w50/row','使用科室/w80/ks',
          '数量/w50/number','单价/w80/price','金额/w80/pricenum'],
          //rowheight 为行高 
          row:{rownum:0,rowheight:61,pagebool:0,boxheight:0,id:'',
            pagenum:1,pagesize:5,pagetotal:3
          }
        }
      };
    },
    methods: {
      pagelistboxtoggle:function(id,index){
        if(id !=this.pagelistboxdata.row.id){
          this.pagelistboxdata.row.pagebool=0;
          this.pagelistboxdata.row.id=id;
          this.pagelistboxdata.list=[];          
          this.pagelistboxdata.row.rownum= ++index;
          this.pagelistboxdata.row.pagenum=1;
          this.pagelistboxget(0)
        }
      },
      pagelistboxget:function(){//ajax 修改list pagenum pagetotal 
        //以下是模拟的数据
        //需要注意在ajax成功后记得修改pagebool=1
        setTimeout(function(){
            this.pagelistboxdata.list=insertdata();
            this.pagelistboxdata.row.pagebool=1;
        }.bind(this),1000)
        function insertdata(){
          var a=Math.round(Math.random()*5);
          var arr=[];
          for(var i=0;i<a;i++){
            arr.push({
              id:i,name:'cc',status:'1',em:'cc',num:'cc',row:'cc',ks:'ss',
              number:33,price:33,pricenum:3333
            })
          }
          return arr;
        }
      }
    }
  };
</script>