<template>
  <div>
    <div class="container resource close-left-menu contaNEW">
      <div class="pop-banner clearfix">
        <div class="operate-btns">
          <a href="javascript:void(0)" @click="refreshPage" class="fbtn fb-refresh">刷新</a>
          <a v-link="{ path:'/relationEdit2/0'}" href="javascript:void(0)" v-if="'/supplier/relation:add' | myqx" class="fbtn fb-add">添加</a>
        </div>
        <h3 class="current-module">供应关系</h3>
      </div>

      <div class="ctable ct-parent">
        <div class="ct-head" id='t_header'>
          <span class="ct-col w40">序号</span>
          <span class="ct-col w70">供应方式</span>
          <span class="ct-col w140">配送商</span>
          <span class="ct-col w150">医疗机构</span>
          <span class="ct-col w100">结算方式</span>
          <span class="ct-col w220">合规文件</span>
          <span class="ct-col w70">变更状态</span>
          <span class="ct-col w100">品规数</span>
          <span class="ct-col w80">操作</span>
        </div>
        <div style="height:30px;text-align:center;"  v-if="relations.length==0">
            <span class="ct-col">没有查询到相关数据！</span>
        </div>
        <div class="ct-row" v-for="relation in relations" id="ct-r{{$index}}">
          <div class="row-line">
            <span class="ct-col w40">{{$index+1}}</span>
            <span class="ct-col w70">{{relation.supplymethod | supplymethod}}</span>
            <span class="ct-col w140 break-it">
              <span class="com-name break">{{relation.distrbname}}</span>
            </span>
            <span class="ct-col w150 break-it">
              <span class="com-name break">{{relation.medname}}</span>
            </span>
            <span class="ct-col w100">
              {{relation.settlemethod | settlemethod}}
            </span>
            <span class="ct-col w220" style="padding:5px 0px 10px;">
              <table class="text-color-blue lh-26">
                <thead>
                  <tr>
                    <td class="w50">
                      <div class="license1"></div>
                    </td>
                    <td class="w70 t-left text-color-green">承诺书</td>
                    <td class="w70" :style="relation.cns_num>0?'':'color:#649fa3;'">{{relation.cns_num>0?"是":"否"}}</td>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td> 
                      <div class="license2"></div>
                    </td>
                    <td class="t-left text-color-green">法人委托书</td>
                    <td :style="relation.frwts_num>0?'':'color:#649fa3;'">{{relation.frwts_num>0?"是":"否"}}</td>
                  </tr>
                  <tr>
                    <td>
                    <div class="license3"></div>
                    </td>
                    <td class="t-left text-color-green">供应合同</td>
                    <td :style="relation.gyht_num>0?'':'color:#649fa3;'">{{relation.gyht_num>0?"是":"否"}}</td>
                  </tr>
                </tbody>
              </table>
            </span>
            <span class="ct-col w70 activate" id="isFocus1{{$index}}">
              <div>
                <a href="javascript:void(0);"  @click="slidedown($index,relation.guid,1)" class="status-switch txt_underline text-color-green">{{relation.approvalstate | APPROVALSTATE}}</a>
              </div>
            </span>
            <span class="ct-col w100 activate" id="isFocus2{{$index}}">
              <div>
                {{relation.pinguiNum}}条
              </div>
            </span> 
            <span class="ct-col w80 pt9">
             <!-- relation.approvalstate=='Y' || relation.approvalstate=='R' -->
              <a href="javascript:void(0);" v-if="true" v-link="{ path:'/relationEdit2/'+relation.guid}" class="btn button-green mar-none">明细</a>
              <!-- relation.approvalstate!='Y' && relation.approvalstate!='R' -->
              <a href="javascript:void(0);" v-if="false" v-link="{ path:'/relationEdit2Tr/'+relation.guid}" class="btn button-green mar-none">明细</a>
            </span>
          </div>
          <div class="row-launch" style="display:none;" id="row-l1{{$index}}">
            <h3>变更状态：{{relation.approvalstate | APPROVALSTATE}}</h3>
              	
            <div class="status-process" v-if="relations">
              <div class="sp-head">
                <span class="sp-col w40"></span>
                <span class="sp-col w70">审核方</span>
                <span class="sp-col w270">公司</span>
                <span class="sp-col w100">审核状态</span>
                <span class="sp-col w120">审核人</span>
                <span class="sp-col w160">审核时间</span>
              </div>
              <div class="sp-item sp-pass" 
              	:class="variation.approvestate!='Y' && $index==0?'current-item sp-wait':''"  v-for="variation in relations[$index].vars">
                <span class="sp-col w40"></span>
                <span class="sp-col w70">
                    {{variation.approverole==1?"运营商":variation.approverole==2?"配送商":variation.approverole==3?"医疗机构":""}}
                </span>
                <span class="sp-col w270 t-left pr10">{{variation.approvecorpname}}</span>
                <span class="sp-col w100">{{variation.approvestate | APPROVALSTATE}}</span>
                <span class="sp-col w120">{{variation.approvername}}</span>
                <span class="sp-col w160">{{variation.approvertime }}</span>
              </div>
            </div>
             <div class="reject-reason" v-for="variation in relations[$index].vars"  >
             	<span v-if="variation.approvestate=='R'">驳回理由:{{variation.rejectionreason}}</span>
             </div>
             <div class="zip" @click="slideup($index,relation.guid,1)"></div>
          </div>
        </div>
      </div>
      <div class="pagination m-20-0">
        <pagination 
         @page-change="listRelation" 
         :page-no.sync="search.page" 
         :total-pages.sync="search.totalPages"></pagination>
      </div>
    </div>

    <div class="modal" v-if="opened">
      <div class="container resource">
        <div class="pic-viewer">
          <span class="close" v-on:click="close()">X</span>
          <div class="pv-body pv-file-container">
            <h3>承诺书</h3>
            <div class="pv-list">
              <div class="prev" v-on:click="prev()"></div>
              <div class="next" v-on:click="next()"></div>
              <div class="pv-box">
                <img src="/assets/c25.jpg"></div>
            </div>
          </div>

          <div class="cert-file clearfix">
            <a href="###" class="fl">修改照片</a>

            <div class="file-upload-ctrl fr">
              <span class="file-state file-btn1 file-ok"></span>
              <span class="file-state file-btn2"></span>
              <span class="file-state file-btn3 file-ok"></span>
            </div>
          </div>

          <table class="file-table">
            <thead>
              <tr>
                <th>供应方式</th>
                <th>配送商</th>
                <th>医疗机构</th>
                <th>结算方式</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>托管</td>
                <td>北京医药股份有限公司</td>
                <td>北京大学人民医院</td>
                <td>到货结算</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  
  module.exports = {
    data: function () {
      return {
            opened: false,
            focus:1,
            relations:[],
            search: {
              pageSize: 50,
              page: 1,
              totalPages: 0,
              guid:'',
            },
            listVariation:[],
        };
    },
    methods: {
      open: function () {
        this.opened = true;
      },
      close: function () {
        this.opened = false;
      },
      listRelation: function () {
        var self = this;
        Ajax.get('/relation/listRelation',self.search)
          .then(function (response) {
            var data = response.data.data;
            self.$set('relations', data.list);
            self.search.totalPages = data.totalPages;
        });
      },
      listVariationData: function (index,guid) {
        var self = this;
        self.search.guid=guid;
        Ajax.get('/relation/listVariation',self.search)
          .then(function (response) {
            var data = response.data.data;
            self.$set('listVariation', data);
            self.$set('relations['+index+'].vars', data);
        });
      },
      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.slideup(index,guid,num);
          return;
        }
        this.focus=num;
        if(num==1){
          this.listVariationData(index,guid);
        }else{
          this.listGoods(index,guid,searchGoods);
        }
        $("#ct-r"+index).addClass("active");
        $("#isFocus"+num+index).addClass("focus");
        $("#row-l"+num+index).slideDown(400,function(){
        
        });
      },
      refreshPage:function(){
        this.search.page=1;
        this.listRelation();
      }
    },
    route: {
      activate: function () {
        this.listRelation();
      }
    }
  };

</script>