<template>
<div @click="triggerEvent">
  <div class="fheader mb-0" v-if="vartype=='V01'">
      <h4 class="fh-notes">企业资料</h4>  
      <div class="radio-control fl lh-35 ml-10">
        <p class="fl">已提供给</p><em class="text-color-blue text-bold fl ml-5">{{title.mymednum}}</em><p class="fl ml-5">家医疗机构在业务中使用，
        变更单</p><em class="text-color-blue text-bold fl ml-5">{{title.myvarnum}}</em><p class="fl ml-5">张</p>
      </div>
      <div class="stretch ml-50">
         <div class="stretch-pull" @click='push("pull",0)' v-if='pullState'></div>
         <div class="stretch-push" @click='pull("pull",0)' v-else></div>
   <!--      <div class="stretch-pull" v-on:click="showWin('close')" v-if="isShow=='open'"></div>
        <div class="stretch-push" v-on:click="showWin('open')" v-if="isShow=='close'"></div> -->
      </div>
  </div> 
  <div class="fheader" v-if="vartype!='V01'&& vartype!='V18'">
      <h4 class="no-l-icon">{{vartype | vartype}}【{{title.myname}}】</h4>  
      <div class="radio-control fl ml-10">
        <p class="fl">已提供给</p><em class="text-color-blue text-bold fl ml-5">{{title.mymednum}}</em><p class="fl ml-5">家医疗机构在业务中使用，
        变更单</p><em class="text-color-blue text-bold fl ml-5">{{title.myvarnum}}</em><p class="fl ml-5">张</p>
       
      </div>
      <div class="stretch ml-50">
         <div class="stretch-pull" @click='push("pull",2)' v-if='pullState2'></div>
         <div class="stretch-push" @click='pull("pull",2)' v-else></div>
      <!--   <div class="stretch-pull" v-on:click="showWin('close')" v-if="isShow=='open'"></div>
        <div class="stretch-push" v-on:click="showWin('open')" v-if="isShow=='close'"></div> -->
      </div>
  </div>


  <!--
  <div class="fheader no-bottom" v-if="vartype=='V01'">
      <h4 class="no-l-icon">企业资料</h4>  
      <div class="radio-control fl">
        <span>已提供给<em class="text-color-blue text-bold">{{title.mymednum}}</em>家医疗机构在业务中使用  
        <a v-on:click="showWin('open')" v-if="isShow=='close'"  class="ml-20 text-color-blue">查看详情</a>
        <a v-on:click="showWin('close')" v-if="isShow=='open'" class="hide">收起</a>
        </span>
      </div>
  </div>
  -->
  <!--
  <div class="fheader no-bottom" v-if="vartype!='V01'">
    <div class="radio-control fl">
      <span>{{vartype | vartype}}【{{title.myname}}】已提供给
      <em class="text-color-blue text-bold">{{title.mymednum}}</em>家医疗机构在业务中使用  
      <a v-on:click="showWin('open')" v-if="isShow=='close'" class="ml-20 text-color-blue">查看详情</a>
      <a v-on:click="showWin('close')" v-if="isShow=='open'" class="ml-20 text-color-blue">收起</a>
      </span>
    </div>
  </div>
  -->
  <div class="pull">
    <table class="itable itable-thead-13px" v-if="vartype!='V18'">
    <!-- <table class="itable itable-thead-13px"  v-if="isShow=='open'"> -->
      <thead>
        <tr>
          <th class="w50">序号</th>
          <th class="w90">差异对比</th>
          <th class="w90">医疗机构</th>
          <th class="w150">业务状态</th>
          <th class="w80">审核进程</th>
          <th class="w80">最后变更时间</th>
          <th class="w80">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-if="medList==null || medList.length==0">
          <td colspan="10">暂无符合条件的记录</td>
        </tr>
        <tr v-for="med in medList">
          <td>{{$index+1 | getIndex}}</td>
          <td>
            <!--dif-orange-->
            <div class="dif" >
              <div class="dif-orange"></div>
            </div>
          <!--   <div class="dif" v-if="med.ywtag=='01' && med.isDiff==0">
              <div class="dif-gary"></div>
            </div>
            <div class="dif" v-if="med.ywtag=='02'">
            
            </div> -->
          </td>
          <td class="t-left pr10">{{med.medname}}</td>
          <td >{{med.state | bizstate}}</td>
          <td>
            {{med.approvalstate | CHECK_APPROVALSTATE med.updatetime}}
          </td>   
          <td>{{med.updatetime | getYMD}}</td>
          <td>
            <a @click="goVarDetail(med.ywguid,med.medguid,med.medname)" class="btn button-green mar-none">变更详情</a>
          </td>
        </tr>
      </tbody>
    </table>

    <div class="pagination m-20-0" v-if="isShow=='open'&&vartype!='V18'">
      <pagination 
         @page-change="getMed"
         :page-no.sync="paramsMed.page"
         :total-pages.sync="paramsMed.totalPages">          
      </pagination>
    </div>




  <!-- 流程图 -->
  <div class="flow-map clearfix" v-if="statusList!=null && statusList.length!=0">
  <!-- <div class="flow-map clearfix" v-if="statusList!=null && statusList.length!=0 && isShow=='open'"> -->
    <!-- 流程环节点 -->
    <div class="flow-link" >
      <span class="title">审核资料流程</span>
      <div v-if="oStatus.approvecorpname!=null" class="link-item l-140 arrows-after mt-0" :class="oStatus.class">
        <span>{{oStatus.approvestate | APPROVALSTATE}}</span>
      </div>
      <div v-if="dStatus.approvecorpname!=null" class="link-item l-200 arrows-after mt-0" :class="dStatus.class">
        <span>{{dStatus.approvestate | APPROVALSTATE}}</span>
      </div>
      <div v-if="hStatus.approvecorpname!=null" class="link-item l-350 arrows-after mt-0" :class="hStatus.class">
        <span>{{hStatus.approvestate | APPROVALSTATE}}</span>
      </div>
    </div>

    <!-- 流程操作 -->
    <div class="flow-operate befaft t-30">
      <!-- <span class="title">管理方流程</span> -->
      <div v-if="oStatus.approvecorpname!=null" class="operate-item ml-0 l-200 before-none w200"><b>运营商</b><br>{{oStatus.approvecorpname}}
        <br>
        <div v-if="oStatus.rejectionreason!=null && oStatus.rejectionreason!=''">
            <button class="sbtn_1" 
              v-on:click="showDialog(oStatus)">驳回理由详情</button>
        </div>
      </div>
      <div v-if="dStatus.approvecorpname!=null" class="operate-item ml-0 l-280 before-none w200"><b>配送商</b><br>{{dStatus.approvecorpname}}
        <br>
        <div v-if="dStatus.rejectionreason!=null && dStatus.rejectionreason!=''">
            <button class="sbtn_1" v-on:click="showDialog(dStatus)">驳回理由详情</button>
        </div>
      </div>
      <div v-if="hStatus.approvecorpname!=null" class="operate-item ml-0 l-380 before-none w200"><b>医疗机构</b><br>{{hStatus.approvecorpname}}
        <br>
        <div v-if="hStatus.rejectionreason!=null && hStatus.rejectionreason!=''">
        <!-- btn-d bgc-red btn-d-lg mt-10 mb-10 reject-ico -->
            <button class="sbtn_1" v-on:click="showDialog(hStatus)">驳回理由详情</button>
        </div>
      </div>
    </div>
  </div>
</div>
  <!-- 流程图 end-->




<!--驳回理由弹出框查看-->
<div id="showDialog" class="modal hide" >
  <div class="container resource pd20">
    <div class="audit-detail pd0">
      <span class="close-win" v-on:click="closeDialog()"></span>
       <div class="fheader mar-20 bottom-border">
            <button class="btn-d bgc-red btn-d-lg ml-20">驳回理由</button>
        </div>
        <div class="reason">
            <span class="f-size16">{{showDetail.approverole | approverole}}<br>{{showDetail.approvecorpname}}</span>
            <div class="reject-reason ">
                {{showDetail.rejectionreason}}
            </div>
        </div>
    </div>
  </div>
</div>

</div>
</template>
<!--资料变更单-->
<script >

  module.exports = {
    // 传递的属性值
    props: {
      // 业务资料类型
      vartype: {
        type: String,
        default: ''
      },
      // 标准数据guid
      sdguid:{
        type: String,
        default: ''
      },
      sh:true,

    },
    data: function () {
      return {
        isShow:'open',
        // result头部信息
        title:{},
        // 头部显示内容的查询条件
        paramsTitle:{
          vartype:'',
          sdguid:'', 
        },

        // result专属医院列表
        medList:[],
        // 专属医院的查询条件，翻页
        paramsMed:{
          vartype:'',
          sdguid:'', 

          pageSize: 5,
          page: 1,
          totalPages: 0,
        },


        // result资料审核流程结果
        oStatus:{},// 运营商
        dStatus:{},// 配送商
        hStatus:{},// 医院
        statusList:[],

        showDetail:{},// 显示详细信息
        // 审核资料流程
        paramsStatus:{ 
          vartype:'',
          sdguid:'', 
          medguid:''
        },

        // 差异对比
        paramsJudgeDiff:{
          vartype:'',
          sdguid:'', 
          medguid:''
        },
        pullState:false,
        pullState2:false
      };
    },
    events: {
      'child' : function(){ 
          var self=this;
          if(vartype!='V18'){
              self.getTitle();
          }

      }
      },
    methods: {
      triggerEvent:function(){
        const childState = this.oStatus.approvestate;
        this.$dispatch('childEvent', childState);
      },
      pull:function(doc,index){ 
          var self=this;
          switch(index){
            case 0: 
              self.pullState=true;
              break;
            case 2: 
              self.pullState2=true;
              break;
          }
           $('.'+doc).slideUp(1000)
        },
        push:function(doc,index){
          var self=this;
           switch(index){
            case 0: 
              self.pullState=false;
              break;
            case 2: 
              self.pullState2=false;
              break;
          }
           $('.'+doc).slideDown(1000)
        },
      // 获得头部信息
      getTitle: function () {

        var self = this;
        self.paramsTitle.vartype = self.vartype;
        self.paramsTitle.sdguid = self.sdguid;
        Ajax.get('/variation/getVarTitle', self.paramsTitle)
          .then(function (response){
            if(response.data.errorCode>0){
              layer.msg('数据获取异常!');
            }else{
              self.title = response.data.data;
            }
        })
      },
      // 专属资料
      getMed: function () {
        var self = this;
        self.$set('medList',[]);
        self.paramsMed.vartype = self.vartype;
        self.paramsMed.sdguid = self.sdguid;
        Ajax.get('/variation/listMed', self.paramsMed)
          .then(function (response){
            if(response.data.errorCode>0){
              layer.msg('数据获取异常!');
            }else{
              var data = response.data.data;
              self.$set('medList',data.list);

              self.paramsMed.pageno = data.pageno;
              self.paramsMed.totalPages = data.totalPages;
              self.paramsMed.total = data.total;

              // =========当前医疗机构的guid=============
              if(self.medList!=null && self.medList.length>0){
                // self.$set('paramsStatus.medguid',self.medList[0].medguid);
 
                self.paramsStatus.ywguid = self.medList[0].ywguid;
                self.paramsStatus.medguid = self.medList[0].medguid;
                self.paramsStatus.medname = self.medList[0].medname;

                // 审核状态
                self.listVarStatus();  

                // 差异对比 - 循环赋值
                for(var index=0;index<self.medList.length;index++){   
                  self.judgeDiff(index);
                }  
              }
            }
        })
      },
      // 差异对比
      judgeDiff:function(index){        
        var self = this;

        var medObj = self.medList[index]; 
          if(medObj.search==null){
            // 设置每组的查询条件
            medObj.search = {
              vartype:self.vartype,
              sdguid:self.sdguid,
              ywguid:self.medList[index].ywguid,
              medguid: self.medList[index].medguid
            };
          }

          /*Ajax.get('/variation/judgeDiff', medObj.search)
            .then(function (response){
              if(response.data.errorCode>0){
              }else{
                var data = response.data.data; 
              }
          }) */
      },
      // 审核流程状态
      listVarStatus: function (falg) {  
        var self = this;
        self.oStatus = {};
        self.hStatus = {};
        self.dStatus = {};
        if(self.paramsStatus.medguid!=''){
          self.paramsStatus.vartype = self.vartype;
          self.paramsStatus.sdguid = self.sdguid;
          Ajax.get('/variation/listVarStatus', self.paramsStatus)
            .then(function (response){
              if(response.data.errorCode>0){
                layer.msg('数据获取异常!');
              }else{
                var data = response.data.data;
                self.$set('statusList',data);
                for (var j = 0; j < self.statusList.length; j++) { 
                    if(self.statusList[j].approvestate == "A"){
                        self.sh =false;
                    }
                }   
                if(!falg){
                  self.$dispatch('child-say', self.medList[0].ywguid,self.medList[0].medname,self.medList[0].medguid,self.sh);
                }
                
                $.each(self.statusList, function(i,obj){ 
                   if(obj.approverole=='2'){    //配送商
                    self.dStatus = obj;
                    self.dStatus.class = self.showClass(obj);
                  }else if(obj.approverole=='1'){   //运营商
                    self.oStatus = obj;
                    self.oStatus.class = self.showClass(obj);
                  }else if(obj.approverole=='3'){   //医院
                    self.hStatus = obj;
                    self.hStatus.class = self.showClass(obj);
                  }
                });  
              }
          })
        }
      },
      // 判断应该使用的样式
      showClass:function(checkObj){
        var self = this;
        var chState = checkObj.approvestate;
        if("W"==chState){// 待提交
          return "active";
        }else if("A"==chState){// 审核中 
          return "active-orange";
        }else if("R"==chState){// 驳回
          return "active-red";
        }else{
          return "active";
        }

      },
      // 查看医院专属详情，调用父组件的方法 01
      goVarDetail:function(ywguid,medguid,medname){    

          this.paramsStatus.ywguid = ywguid;
          this.paramsStatus.medguid = medguid;
          this.paramsStatus.medname = medname;
          this.listVarStatus(true);    
          this.$dispatch('child-say',ywguid,medname,medguid,this.sh);
      },
      // 显示弹出框
      showDialog:function(obj){
        this.showDetail = obj;
        $("#showDialog").attr("class","modal"); 
      },
      // 关闭弹出框
      closeDialog:function(){
        this.showDetail = {};
        $("#showDialog").attr("class","modal hide"); 
      },
      // 列表数据的查看、收起
      showWin:function(status){
        this.$set('isShow',status);
      },
    },
    created: function(){
      this.oStatus = {};
      this.hStatus = {};
      this.dStatus = {};
      this.statusList = [];
      this.medList =[];
      this.medList ={};
      /*if(this.vartype&&this.vartype!='V18'){
        this.getTitle();
      }
      this.getMed();*/
    },
      attached:function(){
          if(this.vartype&&this.vartype!='V18'){
              this.getTitle();
          }
          this.getMed();
      },

  };
</script>