<style scoped>
.ctable .ct-row.active .row-line {
    border-bottom: 1px solid #c8c8c8;
} 
</style>
<template>
  <div class="container resource close-left-menu contaNEW">
    <div class="pop-banner clearfix">
      <!-- <form class="search-bar" active="###" v-on:submit.prevent>
        <div class="search-btn">
          <input type="submit" @click="getData" value="搜索"></div>
        <input type="text" v-model="search.realname" placeholder="输入关键字" style="color:black;"></form> -->
      <div class="operate-btns">
        <a href="javascript:void(0)" @click="getData" class="fbtn fb-refresh">刷新</a>
        <a v-link="{ path:'/employeeEdit/0'}" v-if="'/supplier/employee:add' | myqx" class="fbtn fb-add">添加</a>
      </div>
      <h3 class="current-module">业务员</h3>
    </div>

    <form class="search-bar" active="###"  v-on:submit.prevent>
      
      <input type="text"  placeholder="输入关键词" class='ipt' 
       v-model="search.realname" placeholder="输入关键字" v-rule maxlength="50">
      <div class="search-btn">
        <input type="button"  @click="getData" value="搜索">
      </div>
    </form>
   
    <!-- 构造表格 -->
    <div class="ctable ct-parent mt-30">
      <div class="ct-head" id="t_header">
        <span class="ct-col w70">序号</span>
        <span class="ct-col w100">姓名</span>
        <span class="ct-col w100">权限</span>
        <span class="ct-col w40">状态</span>
        <span class="ct-col w100">品规数</span>
        <span class="ct-col w80">医疗机构</span>
        <span class="ct-col w250">手机号</span>
        <span class="ct-col w110">业务授权书</span>
        <span class="ct-col w150">操作</span>
      </div>
      <div class="ct-row main" v-for="(i2,user) in userList" id="ct-r{{$index}}">
        <div class="row-line">
          <span class="ct-col w70">{{$index+1}}</span>
          <span class="ct-col w100">{{user.realname}}</span>
          <span class="ct-col w100">{{user.roletype | roletype}}</span>
          <span class="ct-col w40">{{user.bizstate | bizstate}}</span>
          <span class="ct-col w100 t-center activate" id="isFocus1{{$index}}">
            <div>
              <a href="javascript:void(0)" class="txt_underline text-color-green" @click="slidedown($index,user.guid,1,user.searchGoods)">{{user.pinguiCount}}条</a>
            </div>
          </span>
          <span class="ct-col w80 activate" id="isFocus2{{$index}}">
            <div>
              <a href="javascript:void(0)" class="txt_underline text-color-green" @click="slidedown($index,user.guid,2,user.searchHospital)">{{user.medCount}}</a>
            </div>
          </span>
          <span class="ct-col w250 tel">
            {{user.mobiletel1}}
            <template v-if="user.mobiletel1 && user.mobiletel2">/</template>
            {{user.mobiletel2}}
          </span>
          <span class="ct-col w110">{{user.sqsCount}}</span>
          <span class="ct-col w150 pt9">
            <a class="btn button-green mar-none" v-link="{ path:'/employeeEdit/'+user.guid}">明细</a>
          </span>
        </div>
        <div class="row-launch" style="display: none;"  id="row-l1{{$index}}">
          <h3>品规数（{{user.searchGoods.total}}）条</h3>
          <div class="ctable">
            <div class="ct-head">
              <span class="ct-col w40">序号</span>
              <span class="ct-col w130">商品编号</span>
              <span class="ct-col w200">商品名称</span>
              <span class="ct-col w150">规格</span>
              <span class="ct-col w180">生产厂商</span>
              <span class="ct-col w50">配送商</span>
              <span class="ct-col w70">医疗机构</span>
              <span class="ct-col w60">状态</span>
              <span class="ct-col w60">证照</span>
            </div>
            <div class="ct-row" v-for="gd in user.gl" id="ct-r1-1{{i2}}{{$index}}">
              <div class="row-line">
                <span class="ct-col w40">{{$index+1}}</span>
                <span class="ct-col w130 t-left pr10">{{gd.goodscode}}</span>
                <span class="ct-col w200 t-left pr10">{{gd.goodsname}}</span>
                <span class="ct-col w150 pr10">{{gd.goodsspec}}</span>
                <span class="ct-col w180 break-it t-left pr10">
                  <span class="break">{{gd.producer}}</span>
                </span>
                <span class="ct-col w50 activate" id="isFocus1-1{{i2}}{{$index}}">
                  <div>
                  {{gd.distrbCount}}
                    <!-- <a href="javascript:void(0)" @click="slidedown2($index,gd.guid,'1-1',i2,gd.searchDistr)">{{gd.distrbCount}}</a> -->
                  </div>
                </span>
                <span class="ct-col w70 ">
                  {{gd.medCount}}
                </span>
                <span class="ct-col w60 st-invalid">{{gd.bizstate | bizstate}}</span>
                <span class="ct-col w60 ">
                  {{gd.zjCount}}
                </span>
              </div>
              <div class="row-launch" style="display:none;" id="row-l1-1{{i2}}{{$index}}">
                <h3>配送商（{{gd.distrbCount}}）</h3>

                <table class="itable">
                  <thead>
                    <tr>
                      <th class="w80">序号</th>
                      <th>配送商</th>
                      <th class="w100">联系人</th>
                      <th class="w140">联系电话</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="distr in gd.dis">
                      <td>{{$index+1}}</td>
                      <td>{{distr.name}}</td>
                      <td>{{distr.linkman}}</td>
                      <td>{{distr.contacttel}}</td>
                    </tr>
                  </tbody>
                </table>
                <div class="pagination page-line m-20-0">
                   <pagination 
                     @page-change="listDistribution(i2,$index,gd.guid,gd.searchDistr)" 
                     :page-no.sync="gd.searchDistr.page" 
                     :total-pages.sync="gd.searchDistr.totalPages"></pagination>
                </div>
                <div class="zip" @click="slideup2($index,gd.guid,'1-1',i2)"></div>
              </div>
            </div>
          
          </div>
          <div class="pagination page-line">
             <pagination 
               @page-change="listGoods($index,user.guid,user.searchGoods)" 
               :page-no.sync="user.searchGoods.pageNo" 
               :total-pages.sync="user.searchGoods.totalPages"></pagination>
          </div>
          <div class="zip" @click="slideup($index,user.guid,1)"></div>
        </div>
        <div class="row-launch" style="display: none;"  id="row-l2{{$index}}">
          <h3>医疗机构（{{user.hps.length}}）</h3>
          <table class="itable">
            <thead>
              <tr>
                <th class="w80">序号</th>
                <th>医院</th>
                <th class="w200">联系人</th>
                <th class="w240">联系电话</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="hp in user.hps">
                <td>{{$index+1}}</td>
                <td style="text-align: left;">
                  <imagebox v-bind:imgarr="hp.pictcontent | original" v-if="hp.pictcontent!=null">
                  
                      <img class="hosp-img" :src="hp.pictcontent | thumbnail">
                   
                  </imagebox>
                  <img src="/images/default.jpg" class="hosp-img" v-if="hp.pictcontent==null">
                  {{hp.name}}
                </td>
                <td>{{hp.linkman}}</td>
                <td>{{hp.contacttel}}</td>
              </tr>
            </tbody>
          </table>

          <div class="pagination page-line">
             <pagination 
               @page-change="listHospitalData($index,user.guid,user.searchHospital)" 
               :page-no.sync="user.searchHospital.page" 
               :total-pages.sync="user.searchHospital.totalPages"></pagination>
          </div>
          <div class="zip" @click="slideup($index,user.guid,2)"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  
  module.exports = {
    data: function () {
      return {
        userList: [],
        active: true,
        focus: 0,
        search: {
          realname:'',
        },
        searchGoods: {
          pageSize: 50,
          pageNo: 1,
          totalPages: 0,
          total:0,
          param:{
            user_guid:'',
          }
        },
        searchDistr: {
          pageSize: 5,
          page: 1,
          totalPages: 0,
          total:0,
          goodsguid:'',
        },
        searchHospital: {
          pageSize: 5,
          page: 1,
          totalPages: 0,
          total:0,
          user_guid:'',
          userListPage:'yes',
        }
      };
    },
    methods: {
      getData: function () {
        var self = this;
        Ajax.get('/user', self.search)
          .then(function (response) {
            var data = response.data.data;
            for(var i=0;i<data.length;i++){
              data[i].searchGoods={pageNo:0,totalPages:0,total:0,pageSize:50};
              data[i].searchHospital={page:0,totalPages:0};
              data[i].hps=[];
            }            
            self.$set('userList', data);
          });
      },
      //查询商品信息
      listGoods:function(index,guid,searchGoods){
          var self=this;
          if(searchGoods==undefined){
            searchGoods=self.searchGoods;
          }
          //star 11-9
          if(searchGoods.param==undefined){
            searchGoods.param={};
          }
          searchGoods.param.user_guid=guid;
          //   /supplierGood
          Ajax.post('/user/listMfsuppliergoodsByStaff', searchGoods)
          .then(function (response) {
            var data = response.data.data;
            //star 11-9
            var list=data.list;
            for(var i=0;i<list.length;i++){
              list[i].searchDistr={page:1,totalPages:0};
            }
            self.$set('userList['+index+'].gl', list);
            self.$set('userList['+index+'].searchGoods.totalPages', data.totalPages);
            self.$set('userList['+index+'].searchGoods.total', data.total);
            self.$set('userList['+index+'].searchGoods.pageNo', data.pageNo);
            self.$set('userList['+index+'].searchGoods.pageSize', 50);
            self.$set('userList['+index+'].searchGoods.param.user_guid', guid);
          });
      },
      //查询医院信息
      listHospitalData: function (index,guid,searchHospital) {
        var self = this;
        //star 11-10

        if(searchHospital==undefined){
           searchHospital={page:0,pageSize:5,userListPage:'yes'};
        }
        if(searchHospital.pageSize==undefined){
          searchHospital.pageSize=5;
        }
        if(searchHospital.userListPage==undefined){
          searchHospital.userListPage='yes'
        }

        searchHospital.user_guid=guid;

        Ajax.get('/relation/hospital',searchHospital)
          .then(function (response) {
            var data = response.data.data;
            self.$set('userList['+index+'].hps', data.list);
            self.$set('userList['+index+'].searchHospital.totalPages', data.totalPages);
            self.$set('userList['+index+'].searchHospital.total', data.total);
            self.$set('userList['+index+'].searchHospital.page', data.pageNo);
            self.$set('userList['+index+'].searchHospital.pageSize', 5);
            self.$set('userList['+index+'].searchHospital.user_guid', guid);
            self.$set('userList['+index+'].searchHospital.userListPage', "yes");
        });
      },
      //查询配送商信息
      listDistribution: function (index,index2,guid,searchDistr) {
        var self = this;
        if(searchDistr==undefined){
           searchDistr=self.searchDistr;
        }
        searchDistr.goodsguid=guid;
        Ajax.get('/otherMethod/listDistribution',searchDistr)
        .then(function (response) {
          var data = response.data.data;
          self.$set('userList['+index+'].gl['+index2+'].dis', data.list);
          self.$set('userList['+index+'].gl['+index2+'].searchDistr.totalPages', data.totalPages);
          self.$set('userList['+index+'].gl['+index2+'].searchDistr.total', data.total);
          self.$set('userList['+index+'].gl['+index2+'].searchDistr.page',data.pageNo);
          self.$set('userList['+index+'].gl['+index2+'].searchDistr.pageSize', 3);
          self.$set('userList['+index+'].gl['+index2+'].searchDistr.goodsguid', guid);
        });
      },
      slideup:function(index,guid,num){
        $("#row-l"+num+index).slideUp(400,function(){
            $("#ct-r"+index).removeClass('active');
            $("#isFocus"+num+index).removeClass("focus");
            $(".ct-col:eq("+index+")").removeClass('activate');
        });
      },
      slidedown:function(index,guid,num,searchGoods){
        var clss=$("#ct-r"+index).attr("class");
        if(clss.indexOf("active")!=-1 && this.focus==num){
          this.slideup(index,guid,num);
          return;
        }
        this.focus=num;
        if(num==1){
          $("#row-l"+2+index).slideUp(400,function(){
              $("#isFocus"+2+index).removeClass("focus");
          });
          this.listGoods(index,guid,searchGoods);
        }else{
          $("#row-l"+1+index).slideUp(400,function(){
              $("#isFocus"+1+index).removeClass("focus");
          });
          this.listHospitalData(index,guid,searchGoods);
        }
        $("#ct-r"+index).addClass("active");
        $("#isFocus"+num+index).addClass("focus");
        $("#row-l"+num+index).slideDown(400,function(){
        
        });
      },
      slideup2:function(index,guid,num,firstNum){
        $("#row-l"+num+firstNum+index).slideUp(400,function(){
            $("#ct-r"+num+firstNum+index).removeClass('active');
            $("#isFocus"+num+firstNum+index).removeClass("focus");
            $(".ct-col:eq("+index+")").removeClass('activate');
        });
      },
      slidedown2:function(index,guid,num,firstNum,searchDistr){
        var clss=$("#ct-r"+num+firstNum+index).attr("class");
        if(clss.indexOf("active")!=-1){
          this.slideup2(index,guid,num,firstNum);
          return;
        }
        this.listDistribution(firstNum,index,guid,searchDistr);
        $("#ct-r"+num+firstNum+index).addClass("active");
        $("#isFocus"+num+firstNum+index).addClass("focus");
        $("#row-l"+num+firstNum+index).slideDown(400,function(){
        
        });
      },
    },
    route: {
      activate: function () {
        this.getData();
      }
    },
    // 赵志杰 1-20 搜索插件添加
    watch:{
    'search.realname':function(){
        var $this= $('.ipt');
        var current_width;
        var text_length = $this.val().length;//获取当前文本框的长度
        current_width = parseInt(text_length) *14;//该12是改变前的宽度除以当前字符串的长度,算出每个字符的长度
        current_width=current_width>318?current_width:318;

        $this.css("width",current_width+"px");
      }
    }
  };
</script>