<template>
  <div>
    <div class="container resource clearfix close-left-menu contaNEW">
      <div class="pop-banner clearfix">
        <div class="operate-btns"></div>
        <h3 class="current-module">维护经销授权书证照</h3>
      </div>
      <!--业务资料审核情况-->
      <variation :vartype="vartype" :sdguid="sdguid"></variation>    <!-- v-on:click="getVarInfo" -->
      <div class="fheader-has-logo mb-20 clearfix pb20 bottom-border-blue">
        <div class="header-has-logoinfo clearfix">
          <span class="img-logo fl">
            <img src="/assets/c6.png"/>
          </span>
          <h3 class="primary-text fl">{{medname}}</h3>
          <span class="primary-text fl">专属的业务资料</span>
          <div class="from-button fr mt-10" style='min-width:302px'>
              <a href="javascript:;" class="green-button icon edit t-right pr20" v-if="!sh1" style="color:#DCDCDC;">修改<i>|</i></a>
              <a href="javascript:;" class="green-button icon edit t-right pr20" @click="modifyInfo" v-if="sh1">修改<i>|</i></a>
              <a href="javascript:;" class="green-button icon save w100 t-right" v-if="!canSave"  :disabled="false" style="color:#DCDCDC;">保存<i>|</i></a>
              <a href="javascript:;" class="green-button icon save t-right" v-if="canSave" @click="saveData" >保存<i>|</i></a>

              <a href="javascript:;" class="green-button icon submit t-right" v-if="!canSubmit" :disabled="false"style="color:#DCDCDC;">提交<i>|</i></a>
              <a href="javascript:;" class="green-button icon delivery w100 t-right"  v-if="canSubmit"  @click="submitData">提交<i>|</i></a>
              <a href="javascript:;" class="green-button icon show-content" style="width: 156px;"  :class="showTrOrExc==1?'dif-orange2':'dif-orange'" @click="showTrOrExcData()">{{showTrOrExc==1?"显示变更内容":"显示原内容"}}</a>
          </div>
        </div>
        <div class="fr"  v-if="search.ywtag!='02'">
          <div class="checkbox-control fr mr-10">
            <input type="checkbox" id="cc31" v-mode="search.isAllMed">
            <label for="cc31" class="checkbox">将变更结果同步提交给所有医疗机构审核</label>
            <span class="text-color-blue">*为必填项</span>
            <span class="text-color-blue ml-20">
              <a class="warn-color">桔色内容</a>
              为变更提醒
            </span>
          </div>
        </div>
      </div>
      <div class="auth-list auth-list-down">
        <ul class="al-extend">
          <li class="auth-org" v-for="(index,ao) in po" :class="{ 'auth-null': index<po.length, 'active': currentIndex == index}" style="background-image: none;">
            <span class="remove_icon" @click="removeAuth(index)" v-if="index>0">×</span>
            <span  @click="currentIndex=index;showPO(ao,index)">{{ao.authorizecorpname}}</span>
          </li>
        </ul>
      </div>
      <div class="auth-form">
          <div class="auth-unit">
          <div class="au-item">
              <label class="label">单位名称</label>
              <div class="radio-control">
              <input type="text" v-model="apo.authorizecorpname" class="w180"  v-if="cs1"/>
              <input type="text" v-model="apo.authorizecorpname" class="w180" v-if="!cs1" disabled="disabled" readonly="readonly" />
              </div>
            </div>
            <div class="au-item ml-20">
              <label class="label">授权单位类型</label>
              <div class="radio-control">
                <radio :list="AuthorizeCorpTypeList" :checked.sync="apo.authorizecorptype" v-if="cs1"></radio>
                <radio :list="AuthorizeCorpTypeList" :checked.sync="apo.authorizecorptype" v-if="!cs1" disabled="disabled"></radio>
              </div>
            </div>
            <div class="au-item">
              <label class="label">总代</label>
              <div class="radio-control">
                <radio :list="isgeneralagentList" :checked.sync="apo.isgeneralagent" v-if="cs1"></radio>
                <radio :list="isgeneralagentList" :checked.sync="apo.isgeneralagent" v-if="!cs1" disabled="disabled"></radio>
              </div>
            </div>
          </div>
          <div class="au-cert clearfix" v-for="lic in authorizeLics" style="overflow:inherit;">
            <div class="pic-box" :style="{backgroundImage:'url('+lic.path+')'}" v-if="lic.path!='' && lic.path!=null">
              <span @click="modifyPic($index)">修改照片</span>
            </div>
            <uploads v-bind:class=" ['pic-box pic-empty'] "
                    :display=" 'block' "
                     v-if=" lic.path =='' || lic.path == null "
                    v-bind:sdguid=" ''+ $index "
                    v-on:file-change="fileChange"
                    v-bind:multiple="false"
                    v-bind:readonly="picReadonly" >
              <span>选择照片</span>
            </uploads>
            <div class="pic-message">
              <div class="pm-item">
                <label for="cc1">授权范围</label>
                <textarea v-model="lic.authorizerange" v-if="cs1">{{lic.authorizerange}}</textarea>
                <textarea v-model="lic.authorizerange" v-if="!cs1" readonly="readonly" style="background-color: #F0F4F5;">{{lic.authorizerange}}</textarea>
              </div>
            </div>
            <div class="pic-message">
              <div class="pm-item">
                <label for="cc2">授权时间</label>
                <datepicker_authorize  :tips="'开始日期'" :target.sync="lic.begindate | getYMD" :readonly="!cs1"></datepicker_authorize>
              </div>
              <div class="pm-item">
                <label for="cc3">授权截止</label>
                <datepicker_authorize :tips="'有效日期'" :target.sync="lic.enddate | getYMD" v-if="lic.isunlimited!='Y'":readonly="!cs1"></datepicker_authorize>
                <input type="text" class="date-text text-color-gray-shallow" id="cc3" value="无限期" v-if="lic.isunlimited=='Y'" :readonly="!cs1">
              </div>
              <div class="pm-item">
                <label for="cc3">&emsp;</label>
                <div class="checkbox-control">
                  <input type="checkbox" 
                  v-model="lic.isunlimited" 
                  name="cb" id="wxq{{$index}}"
                  v-bind:true-value="'Y'" 
                  v-bind:false-value="'N'"
                  :disabled="!cs1">
                  <label class="checkbox" for="wxq{{$index}}">无期限</label>
                </div>
              </div>
            </div>
          </div>
      </div>
    </div>
  </div>
</template>
<script>
  import variation from './variation-include.vue';

  module.exports = {
    data: function () {
      return {
        picReadonly:0,
        cs1:false,
        cs2:false,
        AuthorizeCorpTypeList: [{
            value: '1',
            label: '经销商'
        }, {
            value: '2',
            label: '生产厂商' 
        }],
        isgeneralagentList: [{
            value: "Y",
            label: "是"
        },
        {
            value: "N",
            label: "否"
        }],
        vartype:'V05',
        sdguid:this.$route.params.guid,// 初始化的时候，需要对该字段赋值
        // 明细数据
        medList: [],
        // 订单总数量
        totalNum:0,
        // 查询条件
        search: {
          ywguid:'',

          variationtype:'V05',
          isAllMed:false,
          v05:{},

        },
        BusinessDataVO:{},
        po:{},
        cpo:{},
        tpo:{},
        apo:[],
        showTrOrExc:1,
        uploads:[],
        medname:'',
        currentIndex:0,
          sh: true,
          sh1:true,
          button_return:false,
          canSave: true,
          canSubmit:false,
          authorizeLics:''
      };
    },
      events: {
          'child-say' : function(ywguid,medname,medguid,sh){
              var self = this;
              if(sh == false){
                  self.sh1 = sh;
              }
              self.medguid =medguid;
              self.$set('medname',medname);
              self.getVarInfo(ywguid,medguid,'V05');
          }
      },
    methods: {
       getData:function(){
          this.cs1=false;
          this.cs2=false;
          this.canSave=false;
          this.canSubmit=false;
          this.sdguid = this.$route.params.guid;
       },

      // 提供给子组件调用，返回专属医院的guid
      getVarInfo:function(ywguid,medguid,variationtype){
        var self=this;
         self.canSave=false;
          self.canSubmit=false;
          self.cs1=false;
          self.cs2=false;
        self.uploads=[];
        self.search.ywguid=ywguid;
        self.search.medguid=medguid;
        Ajax.get('/businessData/getExcData',{
            ywguid,medguid,variationtype
        })
          .then(function (response){
            var data = response.data.data;
              if(self.showTrOrExc==1){
                  self.$set('po',data.excObj);
                  self.$set('cpo',data.sdObj);
                  self.$set('tpo',data.trObj);
                  self.authorizeLics=[];
                    self.$set('authorizeLics', self.po[0].lics);
                    var size=self.po[0].lics.length, imgReg = /\.(jpg|jpeg|png|gif|bmp)$/i; //判断字符串是否为图片路径;
                    for(var i=0;i<size;i++){
                        var data1=self.po[0].lics[i].pictcontent;
                        if(data1!=null){
                            data1=JSON.parse(data1);
                            var path=imgReg.test(data1[0].thumbnail.path) ? data1[0].thumbnail.path : data1[0].thumbnail.path+data1[0].thumbnail.name;
                            self.$set('authorizeLics['+i+'].path',path);
                        }
                    }
                    self.showValue(0);
              }else{
                  self.$set('po',data.trObj);
                  self.$set('cpo',data.trObj);
                  self.$set('tpo',data.trObj);
              }
              if(self.po[0].lics.length==0){
                  var json='{"authorizerange":"","begindate":"","enddate":"","isunlimited":"","pictcontent":""}';
                  self.po[0].lics.push(JSON.parse(json));
              }
            self.showPO(0);
        })  
      },
      showValue:function(index){
                var i=this.po.length, imgReg = /\.(jpg|jpeg|png|gif|bmp)$/i; //判断字符串是否为图片路径;
                if(this.currentIndex==(this.po.length-1) && this.po[0].authorizecorpname!=''){
                    //this.authorizes[0].lics=[];
                    //this.authorizes[0].lics=this.authorizeLics;
                }
                this.currentIndex=index;
                this.authorize=this.po[index];
                if(this.po[index].lics.length>0){
                    this.authorizeLics=[];
                    this.$set('authorizeLics', this.po[index].lics);
                    var size=this.po[index].lics.length;
                    for(var i=0;i<size;i++){
                        var data=this.po[index].lics[i].pictcontent;
                        if(data!=null){
                            data=JSON.parse(data);
                            var path=imgReg.test(data[0].thumbnail.path) ? data[0].thumbnail.path : data[0].thumbnail.path+data[0].thumbnail.name;
                            this.$set('authorizeLics['+i+'].path',path);
                        }
                    }
                }else{
                    this.authorizeLics=[];
                    var json='{"authorizerange":"","begindate":"","enddate":"","isunlimited":"","path":""}';
                    this.authorizeLics.push(JSON.parse(json));
                }
            },
      // fileChange:function(data){
      //   var self=this;
      //   var backObj = JSON.parse(data);
      //   var index=backObj.sdguid;
      //   for(var i=0;i<backObj.data.length;i++){
      //     var path=backObj.data[0].thumbnail.path+backObj.data[0].thumbnail.name;
      //     var json='{"path":"'+path+'"}';
      //     var obj=JSON.parse(json);
      //     obj.pic=backObj.data[i];
      //     self.uploads.push(obj);
      //     self.$set('apo.lics['+i+'].pictcontent',"["+JSON.stringify(backObj.data[i])+"]");
      //     self.$set('apo.lics['+i+'].path',path);
      //   }
      //   if(self.uploads.length>=4){
      //       self.cs2=false;
      //   }
      // },
      //上传
            fileChange:function(data){
                var self=this, imgReg = /\.(jpg|jpeg|png|gif|bmp)$/i; //判断字符串是否为图片路径;
                var backObj=JSON.parse(data);
                data=backObj.data;
                var index=backObj.sdguid;
                for(var i=0;i<data.length;i++){
                    var path=imgReg.test(data[i].thumbnail.path) ? data[i].thumbnail.path : data[i].thumbnail.path+data[i].thumbnail.name;
                    var json='{"path":"'+path+'"}';
                    self.$set('authorizeLics['+index+'].pictcontent',"["+JSON.stringify(data[i])+"]");
                    self.$set('authorizeLics['+index+'].path',path);
                }
            },
      submitData:function(){
        var self=this;
          if(!self.canSubmit){
              layer.msg('请先保存数据!');
              return;
          }
          if(self.button_return){
              return
          };
          self.button_return=true;
          console.log(self.search);
          Ajax.post('/businessData/submitTrVariation', self.search)
          .then(function (response){
            var data = response.data;
            if(data.errorCode==0){
                layer.msg('提交成功！');
                self.button_return=false;
                window.location.reload();
            }else{
                layer.msg('提交失败！');
                self.button_return=false;
            }
        }) 
      },
      saveData:function(){
        var self = this;
          if(self.button_return){
              return
          };
          self.button_return=true; 
          if(self.po[self.currentIndex].authorizecorpname !=''){
              self.po[self.currentIndex].lics=[];
              self.po[self.currentIndex].lics=self.authorizeLics;
          }
          for (var i = 0; i < self.po.length; i++) { 
              if(self.po[i].lics != null){
                      // if(self.po[i].lics[0].path =='' || self.po[i].lics[0].path == null){
                      //         layer.msg('请上传图片！');
                      //         return
                      // }
                      if(self.po[i].lics[0].authorizerange =='' || self.po[i].lics[0].authorizerange == null){
                              layer.msg('请填写授权范围！');
                              return
                      }
                      if(self.po[i].lics[0].isunlimited=='Y'){
                         self.po[i].lics[0].enddate = 1
                      }
                      if(self.po[i].lics[0].enddate =='' || self.po[i].lics[0].enddate == null){
                              layer.msg('请选择授权截止时间！');
                              return
                      }
              }
          } 
          console.log(111);
          self.search.v05= [];
          self.search.v05.push(self.po[0]);
          self.search.v05.push(self.po[1]);
          self.canSave=false;
          // self.search.v05=;
          // console.log(self.search); 
        Ajax.post('/businessData/createTrvariation', self.search)
          .then(function (response){
            var data = response.data.data;
            if(response.data.errorCode==0){
                layer.msg('保存成功！');
                self.button_return=false;
                self.canSubmit=true;
            }else{
                layer.msg('保存失败！');
                self.button_return=false;
                self.canSubmit=false;
            }
        }) 
      },
      showTrOrExcData:function(type){
          var self=this;
          if(self.search.ywtag=='02'){
             return;
          }
          if(self.showTrOrExc==1){
              self.showTrOrExc=2;
          }else{
              self.showTrOrExc=1;
          }
          self.getVarInfo(self.search.ywguid,self.search.medguid,'V05');
      },
      showDifferent:function(id,excval,sdval,trval){
          if(excval==null){
            excval='';
          }
          if(sdval==null){
            sdval='';
          }
          if(trval==null){
            trval='';
          }
          var html='<div class="popup">';
          if(excval!=sdval){
             html+='<div class="popup-orange">'
                +'   原始信息<br>'+sdval+'</div>';
          }
          if(excval!=trval){
            html+='<div class="popup-orange">'
                +'   变更信息<br>'+trval+'</div>';
          }
          html+="</div>";
          if(this.showTrOrExc=='1' && !(excval==sdval && sdval==trval)){
             $("#"+id).before(html);
          } 
      },
      closeDifferent:function(){
          $(".popup").remove();
      },
      modifyInfo:function(){
          var self = this;
          self.canSave=true;
          self.canSubmit=false;
          this.canE = true;
          this.cs1 = true;
          this.sh = false;
          if(self.uploads.length<4){
            this.cs2 = true;
          }
          self.picReadonly = 1;
      },
      modifyPic:function(index){
          this.authorizeLics[index].path='';
          this.po[this.currentIndex].lics[index].pictcontent=null;
      },
      showPO:function(index){
        var self=this, ao = this.po[index];
        self.currentIndex=index;
        self.$set('apo',ao);
        self.showValue(index);
      },
      removeAuth(aIndex){
        if(!this.cs1){
          layer.msg('非编辑状态下不可进行删除操作');
          return
        } 
        const self = this;
        layer.confirm('是否确定删除该授权单位', {icon: 3, title:'提示'}, function(index){
            layer.close(index);
            self.po.splice(aIndex,1);
            self.currentIndex = 0;
            self.showPO(0);
        });
      }
    },
    route: {
      activate: function () {
          this.getData();
      }
    },
    components: {
        variation
    },
  };
</script>

<style scoped lang="sass">
.al-extend {
    .auth-org {
        position: relative;

        .remove_icon {
            width: 20px;
            height: 20px;
            padding: 0;
            text-align: center;
            line-height: 20px;
            font-size: 24px;
            background-color: rgba(0, 0, 0, 0.35);
            color: #fff;
            position: absolute;
            top: 0;
            right: 0;
            cursor: pointer;
            display: none;
        }

        &:hover {
            .remove_icon {
                //display: block;
            }
        }
    }
}
.auth-list .al-extend li.auth-null {
    border-color: #ddd;
}
.auth-list .al-extend li.auth-null.active {
    border-color: #86b8bc;
}
</style>