<template>
  <div>
    <div class="container resource clearfix close-left-menu contaNEW">
      <div class="pop-banner clearfix">
        <div class="operate-btns">
          <a href="javascript:void(0)" @click="modifyInfo"  class="fbtn fb-modify" v-if="canEdit">修改</a>
          <a href="javascript:void(0)" style="color:#DCDCDC"  class="fbtn fb-modify" v-else >修改</a>
          <a href="javascript:void(0)" v:disabled="false" v-if="'/supplier/agent:deleteAgentPO' | myqx !canDelete"  style="color:#DCDCDC" class="fbtn fb-remove">删除</a>
          <a href="javascript:void(0)" @click="deleteAgent" v-if="'/supplier/agent:deleteAgentPO' | myqx canDelete" class="fbtn fb-remove">删除</a>
          <a href="javascript:void(0)" v:disabled="false" v-if="'/supplier/agent:saveOrUpdateAgentPO' | myqx !canSave"  style="color:#DCDCDC" class="fbtn fb-save">保存</a>
          <a href="javascript:void(0)" @click="saveAgent" v-if="'/supplier/agent:saveOrUpdateAgentPO' | myqx canSave" class="fbtn fb-save">保存</a>
          <a v-if="countTrs==0"  style="color:#DCDCDC" href="javascript:void(0)" class="fbtn fb-book">业务资料</a>
          <a href="javascript:void(0)" v-if="countTrs>0" class="fbtn fb-book" v-link="{path:'/certAgen2/'+$route.params.guid}">业务资料</a>
        </div>
        <h3 class="current-module">维护一级代理商</h3>
      </div>

      <div class="contractor-head no-bottom">
        <div class="pd-form">
          <div class="group-row">
            <div class="form-group form-label">
              <label for="cn1f" class="label">一级代理商</label>
              <div class="control">
                <input type="text" id="cn1f" readonly="readonly" v-model="agent.name" class="text-color-blue inp5"></div>
            </div>
            <div class="radio-control ml-100">
              <radio :list="BusinessClassList" :checked.sync="agent.businessclass" v-if="cs1"></radio>
              <radio :list="BusinessClassList" :checked.sync="agent.businessclass" v-if="!cs1" disabled="disabled"></radio>
            </div>
          </div>
        </div>
      </div>

      <div class="epi-form">
        <div class="group-row">
          <div class="form-group form-label">
            <label for="cn1" class="label">公司电话</label>
            <div class="control">
              <input type="text" v-model="agent.corptel" id="cn1" v-if="cs1" class="inp4">
              <input type="text" v-model="agent.corptel" id="cn1" v-if="!cs1" readonly="readonly" class="inp4">
            </div>
          </div>
          <div class="form-group form-label">
            <label for="cn2" class="label">传真</label>
            <div class="control">
              <input type="text" v-model="agent.corpfax" id="cn2" v-if="cs1" class="inp2">
              <input type="text" v-model="agent.corpfax" id="cn2" v-if="!cs1" readonly="readonly" class="inp2">
            </div>
          </div>
        </div>
        <div class="group-row">
          <div class="form-group form-label">
            <label for="cn3" class="label">联系电话</label>
            <div class="control">
              <input type="text" v-model="agent.contacttel"  id="cn3" v-if="cs1" class="inp4">
              <input type="text" v-model="agent.contacttel"  id="cn3" v-if="!cs1" readonly="readonly" class="inp4">
            </div>
          </div>
          <div class="form-group form-label">
            <label for="cn4" class="label">网址</label>
            <div class="control">
              <input type="text" v-model="agent.corpweb"  id="cn4" v-if="cs1" class="inp2">
              <input type="text" v-model="agent.corpweb"  id="cn4" v-if="!cs1" readonly="readonly" class="inp2">
            </div>
          </div>
        </div>
        <div class="group-row">
          <div class="form-group form-label">
            <label for="cn5" class="label">注册地址</label>
            <div class="control">
              <city :province.sync="agent.province"
                  :city.sync="agent.city"
                  :area.sync="agent.district"
                  v-if="cs1" classname='inp4'></city>

              <city :province.sync="agent.province"
                  :city.sync="agent.city"
                  :area.sync="agent.district"
                  v-if="!cs1" disabled="disabled" classname='inp4'></city>
              <textarea row="2" v-model="agent.address" id="content" :readonly="!cs1"></textarea>
              <!-- <textarea row="2" v-model="agent.address" v-if="!cs1" readonly="readonly"></textarea> -->
            </div>
          </div>
          <div class="form-group form-label">
            <label for="cn6" class="label">邮箱</label>
            <div class="control">
              <input type="text" v-model="agent.email" id="cn6" v-if="cs1" class="inp2">
              <input type="text" v-model="agent.email" id="cn6" v-if="!cs1" readonly="readonly" class="inp2">
            </div>
          </div>
        </div>
      </div>

      <div class="radio-control mb-20" style="height:30px;">
        <span style="float:left;display:block;height:34px;line-height:34px;">三证合一</span>
        <span style="float:left;display:block;margin-left:15px;">
          <radio :list="flagList" :checked.sync="agent.islicthreetoone" v-if="cs1"></radio>
          <radio :list="flagList" :checked.sync="agent.islicthreetoone" v-if="!cs1" disabled="disabled"></radio>
          <imagebox v-bind:imgarr="imgArry">
            <span class="pic-max blue-search" id="bigImgs"></span>
          </imagebox>
        </span>
      </div>
      
        <div class="cert-manage clearfix bd-gray2" style="margin:0px;">
          <!-- 营业执照 statr -->
          <div class="cert-item" id="zz1" :class="{'focus1':currentType==1}">
            <div class="cert-type" style="margin:10px 10px 5px 24px;">
              <div class="cert-name" style="margin-left:45px;">营业执照</div>
            </div>
            <div class="cert-view warn bd-none">
              <ul class="cert-list" v-show="cs1">
                <li>
                  <div  class="cp-box" :style="{backgroundImage:'url('+(uploads1.length>
                    0?uploads1[mIndex1].path:'')+')'}"  v-if="!show1">
                    <!-- <span @click="modifyPic(1)">修改照片</span> -->
                    <!--  <div class="big-imgs"  style="top:110px;left:0px;z-index: 99;">
                      </div> -->
                  </div>
                  <uploads v-bind:class="['cp-box cp-empty']" 
                    :display="'block'"  
                    v-if="show1"
                    v-bind:canUpload="cs1"
                    v-on:file-change="fileChange" 
                    v-bind:sdguid="'1@@m'"
                    v-bind:multiple="false" 
                    v-bind:readonly="readonly">
                    <!-- <span v-if="uploads1[0].path!=null">修改照片</span> -->
                  </uploads>
                  <div class="license-btn">
                    <span class="fbtn modify-btn" title="修改" @click="modifyPic(1)"><i>|</i></span>
                    <span class="fbtn magnify-btn" title="放大" @click="showBigImgs(1,mIndex1)"><i>|</i></span>
                    <span class="fbtn del-btn" title="删除" @click="delPic(1)"></span>
                  </div>
                  <input type="text" class="text-empty" placeholder="注册编号" v-bind:value="uploads1[mIndex1].licenseno" v-on:input="uploads1[mIndex1].licenseno = $event.target.value">
                  <datepicker_relation :target.sync="uploads1[mIndex1].begindate | getYMD" :tips="'开始日期'"></datepicker_relation>
                  <datepicker_relation  v-if="uploads1[mIndex1].isunlimited!='Y'" :target.sync="uploads1[mIndex1].enddate | getYMD" :tips="'有效期至'"></datepicker_relation>
                  <input type="text" readonly="readonly" class="text-empty" v-if="uploads1[mIndex1].isunlimited=='Y'" value="长期">

                  <div class="deadline">
                    <span class="overdue" v-if="uploads1[mIndex1].enddate | compareDate">已过期</span>
                    <div class="checkbox-control fl">
                      <input type="checkbox" name="cb" 
                      id="cballType1"
                      v-model="uploads1[mIndex1].isunlimited" 
                      v-bind:true-value="'Y'" 
                      v-bind:false-value="'N'">
                      <label class="checkbox  mr-0" for="cballType1">无期限</label>
                    </div>
                    <a href="javascript:void(0)" @click="showPicInfoByType(1)" class="fr text-color-blue lh-34 mr-10"><ins>{{isOpen && currentType==1?'收起':'更多'}}</ins></a>
                  </div>
                </li>
          <!--       <uploads v-bind:class="['only_select']"  
                  :display="'block'" 
                  style="float:left"
                  v-bind:sdguid="'1@@s'"  
                  v-on:file-change="fileChange" 
                  v-bind:multiple="false" 
                  v-bind:readonly="readonly"> -->
                  <!-- <div class="btn-d btn-d-lg btn-d-activate cur-poin">添加</div> -->
                <!-- </uploads> -->
                <!-- <div class="btn-d bgc-red btn-d-lg btn-trash cur-poin fr" @click="delPic(1)">删除</div> -->
              </ul>
              <!-- 不可上传的代码 -->
              <ul class="cert-list" v-show="!cs1">
                <li>
                  <div class="cp-box" :style="{backgroundImage:'url('+(uploads1.length>
                      0?uploads1[mIndex1].path:'')+')'}" v-if="!show1">
                     <!--  <div class="big-imgs" @click="showBigImgs(1,mIndex1)" style="top:149px;left:0px;z-index: 99;">
                      </div> -->
                  </div>
                  <div class="cp-box cp-empty" v-if="show1">
                    <!-- <span>修改照片</span> -->
                  </div>
                  <div class="license-btn">
                    <span class="fbtn modify-btn" title="修改"><i>|</i></span>
                    <span class="fbtn magnify-btn" title="放大"@click="showBigImgs(1,mIndex1)"><i>|</i></span>
                    <span class="fbtn del-btn" title="删除"></span>
                  </div>
                  <input type="text" readonly="readonly" class="text-empty" placeholder="注册编号" v-model="uploads1[mIndex1].licenseno">
                  <datepicker_relation :target.sync="uploads1[mIndex1].begindate | getYMD" :tips="'开始日期'" readonly="readonly" :disabled="!cs1"></datepicker_relation>
                  <datepicker_relation v-if="uploads1[mIndex1].isunlimited!='Y'" :target.sync="uploads1[mIndex1].enddate | getYMD" :tips="'有效期至'" readonly="readonly" :disabled="!cs1"></datepicker_relation>
                  <input type="text" readonly="readonly" class="text-empty" v-if="uploads1[mIndex1].isunlimited=='Y'" value="长期">

                  <div class="deadline">
                    <span class="overdue" v-if="uploads1[mIndex1].enddate | compareDate">已过期</span>
                    <div class="checkbox-control fl">
                      <input type="checkbox" name="cb" 
                      id="cballType1"
                      v-model="uploads1[mIndex1].isunlimited" 
                      disabled="disabled"
                      v-bind:true-value="'Y'" 
                      v-bind:false-value="'N'">
                      <label class="checkbox  mr-0" for="cballType1">无期限</label>
                    </div>
                    <a href="javascript:void(0)" @click="showPicInfoByType(1)" class="fr text-color-blue lh-34 mr-10"><ins>{{isOpen && currentType==1?'收起':'更多'}}</ins></a>
                  </div>
                </li>
                <!-- <div class="btn-d btn-d-lg btn-d-activate cur-poin">添加</div> -->
                <!-- <div class="btn-d bgc-red btn-d-lg btn-trash cur-poin fr">删除</div> -->
              </ul>
            </div>
          </div>
          <!-- 营业执照 end -->
          <!-- 税务登记 statrt  -->
          <div class="cert-item" :class="{'focus1':currentType==2}" v-if="agent.islicthreetoone=='N'" id="zz2">
            <div class="cert-type"  style="margin:10px 10px 0px 24px;">
              <div class="cert-name ml-40">税务登记证</div>
            </div>
            <div  class="cert-view bd-none">
              <ul class="cert-list" v-show="cs1">
                <li>
                  <div class="cp-box" :style="{backgroundImage:'url('+(uploads2.length>
                    0?uploads2[mIndex2].path:'')+')'}" v-if="!show2">
                    <!-- <span @click="modifyPic(2)">修改照片</span>
                     <div class="big-imgs" @click="showBigImgs(2,mIndex2)" style="top:110px;left:0px;z-index: 99;">
                     </div> -->
                  </div>
                
                  <uploads style="width:167px;height:110px;" v-bind:class="['cp-box cp-empty']" 
                    :display="'block'"  
                    v-if="show2"
                    v-on:file-change="fileChange" 
                    v-bind:sdguid="'2@@m'"
                    v-bind:multiple="false" 
                    v-bind:readonly="readonly">
                    <!-- <span v-if="uploads2[0].path!=null">修改照片</span> -->
                  </uploads>
                  <div class="license-btn">
                    <span class="fbtn modify-btn" title="修改"@click="showBigImgs(1,mIndex1)"><i>|</i></span>
                    <span class="fbtn magnify-btn" title="放大"@click="showBigImgs(2,mIndex2)"><i>|</i></span>
                    <span class="fbtn del-btn" title="删除"@click="showBigImgs(2,mIndex2)"></span>
                  </div>
                  <input type="text" placeholder="注册编号" class="text-empty" v-bind:value="uploads2[mIndex2].licenseno" v-on:input="uploads2[mIndex2].licenseno = $event.target.value">
                  <datepicker_relation :target.sync="uploads2[mIndex2].begindate | getYMD" :tips="'开始日期'"></datepicker_relation>
                  <datepicker_relation v-if="uploads2[mIndex2].isunlimited!='Y'" :target.sync="uploads2[mIndex2].enddate | getYMD" :tips="'有效期至'"></datepicker_relation>
                  <input type="text" readonly="readonly" class="text-empty" v-if="uploads2[mIndex2].isunlimited=='Y'" value="长期">

                  <div class="deadline">
                    <span class="overdue" v-if="uploads2[mIndex2].enddate | compareDate">已过期</span>
                    <div class="checkbox-control fl">
                      <input type="checkbox" name="cb"  v-model="uploads2[mIndex2].isunlimited" 
                      v-bind:true-value="'Y'" 
                      v-bind:false-value="'N'" id="cballType2">
                      <label class="checkbox  mr-0" for="cballType2">无期限</label>
                    </div>
                    <a href="javascript:void(0)" @click="showPicInfoByType(2)" class="fr text-color-blue lh-34 mr-10"><ins>{{isOpen && currentType==2?'收起':'更多'}}</ins></a>
                  </div>
                </li>
           <!--      <uploads v-bind:class="['only_select']"  
                  :display="'block'" 
                  style="float:left"
                  v-bind:sdguid="'2@@s'"  
                  v-on:file-change="fileChange" 
                  v-bind:multiple="false" 
                  v-bind:readonly="readonly"> -->
                  <!-- <div class="btn-d btn-d-lg btn-d-activate cur-poin">添加</div> -->
                <!-- </uploads> -->
                <!-- <div class="btn-d bgc-red btn-d-lg btn-trash cur-poin fr" @click="delPic(2)">删除</div> -->
              </ul>
              <!-- 用于展示 -->
              <ul class="cert-list" v-show="!cs1">
                <li>
                  <div class="cp-box" :style="{backgroundImage:'url('+(uploads2.length>
                    0?uploads2[mIndex2].path:'')+')'}" v-if="!show2">
                    <!-- <div class="big-imgs" @click="showBigImgs(2,mIndex2)" style="top:110px;left:0px;z-index: 99;">
                     </div> -->
                  </div>
                  <div class="cp-box cp-empty" v-if="show2">
                    <!-- <span>修改照片</span> -->
                  </div>
                  <div class="license-btn">
                    <span class="fbtn modify-btn" title="修改"><i>|</i></span>
                    <span class="fbtn magnify-btn" title="放大"@click="showBigImgs(2,mIndex2)"><i>|</i></span>
                    <span class="fbtn del-btn" title="删除"></span>
                  </div>
                  <input type="text" readonly="readonly" placeholder="注册编号" class="text-empty" v-model="uploads2[mIndex2].licenseno">
                  <datepicker_relation :target.sync="uploads2[mIndex2].begindate | getYMD" :tips="'开始日期'" readonly="readonly" :disabled="!cs1"></datepicker_relation>
                  <datepicker_relation v-if="uploads2[mIndex2].isunlimited!='Y'" :target.sync="uploads2[mIndex2].enddate | getYMD" :tips="'有效期至'" readonly="readonly" :disabled="!cs1"></datepicker_relation>
                  <input type="text" readonly="readonly" class="text-empty" v-if="uploads2[mIndex2].isunlimited=='Y'" value="长期">

                  <div class="deadline">
                    <span class="overdue" v-if="uploads2[mIndex2].enddate | compareDate">已过期</span>
                    <div class="checkbox-control fl">
                      <input type="checkbox" name="cb"  v-model="uploads2[mIndex2].isunlimited" 
                      v-bind:true-value="'Y'"  disabled="disabled" 
                      v-bind:false-value="'N'" id="cballType2">
                      <label class="checkbox  mr-0" for="cballType2">无期限</label>
                    </div>
                     <a href="javascript:void(0)" @click="showPicInfoByType(2)" class="fr text-color-blue lh-34 mr-10"><ins>{{isOpen && currentType==2?'收起':'更多'}}</ins></a>
                  </div>
                </li>
             <!--    <div class="btn-d btn-d-lg btn-d-activate cur-poin">添加</div>
                <div class="btn-d bgc-red btn-d-lg btn-trash cur-poin fr">删除</div> -->
              </ul>
            </div>
          </div>
          <!-- 税务登记 end  -->

          <!-- 组织机构代码证 statrt  -->
          <div class="cert-item" v-if="agent.islicthreetoone=='N'"  id="zz3" :class="{'focus1':currentType==3}">
            <div class="cert-type"  style="margin:10px 10px 0px 16px;">
              <div class="cert-name"  style="margin-left:18px;">组织机构代码证</div>
            </div>
            <div class="cert-view bd-none">
              <ul class="cert-list" v-show="cs1">
                <li>
                  <div class="cp-box" :style="{backgroundImage:'url('+(uploads3.length>
                    0?uploads3[mIndex3].path:'')+')'}" v-if="!show3">
                   <!--  <span @click="modifyPic(3)">修改照片</span>
                     <div class="big-imgs" @click="showBigImgs(3,mIndex3)" style="top:110px;left:0px;z-index: 99;">
                     </div> -->
                  </div>
          
                  <uploads style="width:167px;height:110px;" v-bind:class="['cp-box cp-empty']" 
                    :display="'block'"  
                    v-if="show3"
                    v-on:file-change="fileChange" 
                    v-bind:sdguid="'3@@m'"
                    v-bind:multiple="false" 
                    v-bind:readonly="readonly">
                    <!-- <span v-if="uploads3[0].path!=null">修改照片</span> -->
                  </uploads>
                  <div class="license-btn">
                    <span class="fbtn modify-btn" title="修改" @click="modifyPic(3)"><i>|</i></span>
                    <span class="fbtn magnify-btn" title="放大" @click="showBigImgs(3,mIndex3)"><i>|</i></span>
                    <span class="fbtn del-btn" title="删除" @click="delPic(3)"></span>
                  </div>
                  <input type="text" class="text-empty" placeholder="注册编号" v-bind:value="uploads3[mIndex3].licenseno" v-on:input="uploads3[mIndex3].licenseno = $event.target.value">
                  <datepicker_relation :target.sync="uploads3[mIndex3].begindate | getYMD" :tips="'开始日期'"></datepicker_relation>
                  <datepicker_relation v-if="uploads3[mIndex3].isunlimited!='Y'" :target.sync="uploads3[mIndex3].enddate | getYMD" :tips="'有效期至'"></datepicker_relation>
                  <input type="text" readonly="readonly" class="text-empty" v-if="uploads3[mIndex3].isunlimited=='Y'" value="长期">

                  <div class="deadline w170">
                    <span class="overdue" v-if="uploads3[mIndex3].enddate | compareDate">已过期</span>
                    <div class="checkbox-control fl">
                      <input type="checkbox" name="cb"  v-model="uploads3[mIndex3].isunlimited" 
                      v-bind:true-value="'Y'" 
                      v-bind:false-value="'N'" id="cballType3">
                      <label class="checkbox  mr-0" for="cballType3">无期限</label>
                    </div>
                      <a href="javascript:void(0)" @click="showPicInfoByType(3)" class="fr text-color-blue  lh-34 mr-10"><ins>{{isOpen && currentType==3?'收起':'更多'}}</ins></a>
                  </div>
                </li>
             <!--    <uploads v-bind:class="['only_select']"  
                  :display="'block'" 
                  style="float:left"
                  v-bind:sdguid="'3@@s'"  
                  v-on:file-change="fileChange" 
                  v-bind:multiple="false" 
                  v-bind:readonly="readonly">
                  <div class="btn-d btn-d-lg btn-d-activate cur-poin">添加</div>
                </uploads>
                <div class="btn-d bgc-red btn-d-lg btn-trash cur-poin fr" @click="delPic(3)">删除</div> -->
              </ul>
              <!-- 只用于展示  -->
              <ul class="cert-list" v-show="!cs1">
                <li>
                  <div class="cp-box" :style="{backgroundImage:'url('+(uploads3.length>
                    0?uploads3[mIndex3].path:'')+')'}" v-if="!show3">
                    <div class="big-imgs" @click="showBigImgs(3,mIndex3)" style="top:110px;left:0px;z-index: 99;">
                     </div>
                  </div>
                  <div class="license-btn">
                    <span class="fbtn modify-btn" title="修改"><i>|</i></span>
                    <span class="fbtn magnify-btn" title="放大"@click="showBigImgs(3,mIndex3)"><i>|</i></span>
                    <span class="fbtn del-btn" title="删除"></span>
                  </div>
                  <div class="cp-box cp-empty" v-if="show3">
                    <span>修改照片</span>
                  </div>
                  <input type="text" readonly="readonly" class="text-empty" placeholder="注册编号" v-model="uploads3[mIndex3].licenseno">
                  <datepicker_relation :target.sync="uploads3[mIndex3].begindate | getYMD" :tips="'开始日期'" readonly="readonly" :disabled="!cs1"></datepicker_relation>
                  <datepicker_relation  v-if="uploads3[mIndex3].isunlimited!='Y'" :target.sync="uploads3[mIndex3].enddate | getYMD" :tips="'有效期至'" readonly="readonly" :disabled="!cs1"></datepicker_relation>
                  <input type="text" readonly="readonly" class="text-empty" v-if="uploads3[mIndex3].isunlimited=='Y'" value="长期">

                  <div class="deadline w170">
                    <span class="overdue" v-if="uploads3[mIndex3].enddate | compareDate">已过期</span>
                    <div class="checkbox-control fl">
                      <input type="checkbox" name="cb"  v-model="uploads3[mIndex3].isunlimited" 
                      v-bind:true-value="'Y'"  disabled="disabled" 
                      v-bind:false-value="'N'" id="cballType3">
                      <label class="checkbox  mr-0" for="cballType3">无期限</label>
                    </div>
                    <a href="javascript:void(0)" @click="showPicInfoByType(3)" class="fr text-color-blue lh-34 mr-10"><ins>{{isOpen && currentType==3?'收起':'更多'}}</ins></a>
                  </div>
                </li>
               <!--  <div class="btn-d btn-d-lg btn-d-activate cur-poin">添加</div>
                <div class="btn-d bgc-red btn-d-lg btn-trash cur-poin fr">删除</div> -->
              </ul>
            </div>
          </div>
          <!-- 组织机构代码证 end  -->

          <!-- 经营许可证 statrt  -->
          <div class="cert-item" id="zz5" :class="{'focus1':currentType==5}">
            <div class="cert-type" style="margin:10px 10px 0px 16px;">
              <div class="cert-name"  style="margin-left:45px;">经营许可证</div>
            </div>
            <div class="cert-view bd-none">
              <ul class="cert-list" v-show="cs1">
                <li>
                  <div class="cp-box" :style="{backgroundImage:'url('+(uploads5.length>
                    0?uploads5[mIndex5].path:'')+')'}" v-if="!show5">
                    <!-- <span @click="modifyPic(5)">修改照片</span>
                    <div class="big-imgs" @click="showBigImgs(5,mIndex5)" style="top:149px;left:0px;z-index: 99;">
                     </div> -->
                  </div>
                  <uploads v-bind:class="['cp-box cp-empty']" 
                    :display="'block'"  
                    v-if="show5"
                    v-on:file-change="fileChange" 
                    v-bind:sdguid="'5@@m'"
                    v-bind:multiple="false" 
                    v-bind:readonly="readonly">
                    <!-- <span v-if="uploads5[0].path!=null">修改照片</span> -->
                  </uploads>
                  <div class="license-btn">
                    <span class="fbtn modify-btn" title="修改" @click="modifyPic(5)"><i>|</i></span>
                    <span class="fbtn magnify-btn" title="放大" @click="showBigImgs(5,mIndex5)" ><i>|</i></span>
                    <span class="fbtn del-btn" title="删除"@click="delPic(5)"></span>
                  </div>
                  <input type="text" class="text-empty" placeholder="注册编号" v-bind:value="uploads5[mIndex5].licenseno" v-on:input="uploads5[mIndex5].licenseno = $event.target.value">
                  <datepicker_relation :target.sync="uploads5[mIndex5].begindate | getYMD" :tips="'开始日期'"></datepicker_relation>
                  <datepicker_relation v-if="uploads5[mIndex5].isunlimited!='Y'" :target.sync="uploads5[mIndex5].enddate | getYMD" :tips="'有效期至'"></datepicker_relation>
                  <input type="text" readonly="readonly" class="text-empty" v-if="uploads5[mIndex5].isunlimited=='Y'" value="长期">

                  <div class="deadline">
                    <span class="overdue" v-if="uploads5[mIndex5].enddate | compareDate">已过期</span>
                    <div class="checkbox-control fl">
                      <input type="checkbox" name="cb"  v-model="uploads5[mIndex5].isunlimited" 
                      v-bind:true-value="'Y'" 
                      v-bind:false-value="'N'"  id="cballType5">
                      <label class="checkbox  mr-0" for="cballType5">无期限</label>
                    </div>
                    <a href="javascript:void(0)" @click="showPicInfoByType(5)" class="fr text-color-blue lh-34 mr-10"><ins>{{isOpen && currentType==5?'收起':'更多'}}</ins></a>
                  </div>
                </li>
           <!--      <uploads v-bind:class="['only_select']"  
                  :display="'block'" 
                  style="float:left"
                  v-bind:sdguid="'5@@s'"  
                  v-on:file-change="fileChange" 
                  v-bind:multiple="false" 
                  v-bind:readonly="readonly"> -->
                  <!-- <div class="btn-d btn-d-lg btn-d-activate cur-poin">添加</div> -->
                <!-- </uploads> -->
                <!-- <div class="btn-d bgc-red btn-d-lg btn-trash cur-poin fr" @click="delPic(5)">删除</div> -->
              </ul>
              <!-- 只用于展示 -->
              <ul class="cert-list" v-show="!cs1">
                <li>
                  <div class="cp-box" :style="{backgroundImage:'url('+(uploads5.length>
                    0?uploads5[mIndex5].path:'')+')'}" v-if="!show5">
                  <!--   <div class="big-imgs" @click="showBigImgs(5,mIndex5)" style="top:110px;left:0px;z-index: 99;">
                     </div> -->
                  </div>
                  <div class="cp-box cp-empty" v-if="show5">
                    <!-- <span>修改照片</span> -->
                  </div>
                  <div class="license-btn">
                    <span class="fbtn modify-btn" title="修改"><i>|</i></span>
                    <span class="fbtn magnify-btn" title="放大" @click="showBigImgs(5,mIndex5)"><i>|</i></span>
                    <span class="fbtn del-btn" title="删除"></span>
                  </div>
                  <input type="text" readonly="readonly" class="text-empty" placeholder="注册编号" v-model="uploads5[mIndex5].licenseno">
                  <datepicker_relation :target.sync="uploads5[mIndex5].begindate | getYMD" :tips="'开始日期'" readonly="readonly" 
                  :disabled="!cs1"></datepicker_relation>
                  <datepicker_relation v-if="uploads5[mIndex5].isunlimited!='Y'" :target.sync="uploads5[mIndex5].enddate | getYMD" 
                  :tips="'有效期至'" readonly="readonly" :disabled="!cs1"></datepicker_relation>
                  <input type="text" readonly="readonly" class="text-empty" v-if="uploads5[mIndex5].isunlimited=='Y'" value="长期">

                  <div class="deadline">
                    <span class="overdue" v-if="uploads5[mIndex5].enddate | compareDate">已过期</span>
                    <div class="checkbox-control fl">
                      <input type="checkbox" name="cb"  v-model="uploads5[mIndex5].isunlimited" 
                      v-bind:true-value="'Y'" disabled="disabled"
                      v-bind:false-value="'N'"  id="cballType5">
                      <label class="checkbox  mr-0" for="cballType5">无期限</label>
                    </div>
                     <a href="javascript:void(0)" @click="showPicInfoByType(5)" class="fr text-color-blue lh-34 mr-10"><ins>{{isOpen && currentType==5?'收起':'更多'}}</ins></a>
                  </div>
                </li>
   <!--              <div class="btn-d btn-d-lg btn-d-activate cur-poin">添加</div>
                <div class="btn-d bgc-red btn-d-lg btn-trash cur-poin fr">删除</div> -->
              </ul>
            </div>
          </div>
          <!-- 经营许可证 end  -->
          <div></div>
        </div>
        <!-- 展示图片 -->

          <div style='position:relative;' v-if="isOpen" class="activer focus">
            <span class="close-win" style='top: 18px;right: 11px;z-index: 5;' @click="closeShow"></span>
            <div class="text-color-blue" style='position: absolute;top: 34px;left: 30px;'>更多证照-{{currentType==1?"营业执照":currentType==2?"税务登记证":currentType==3?"组织机构代码证":currentType==4?"生产许可证":currentType==5?"经营许可证":""}}</div>
          </div>
          
           <div class="cert-manage clearfix border-blue mt-20 content" id="content-1" style="margin:0px;width:1500px;height:480px;" 
           v-if="isOpen">
            <div> 
            <div class="cert-item" v-for="up in uploads" v-if="$index==0"  style="margin-left:10px;" >
              <div class="cert-type" style="margin:27px 10px 0px 0px;">
              </div>
              <div class="cert-view  bd-none">
                <ul class="cert-list">
                  <li>
                    <div class="cp-box" @click="modifyPicInfo($index,1)" :style="{backgroundImage: 'url('+(up.path!=null?up.path:'')+')'}">
                    <!--    <div class="big-imgs" @click="showBigImgs(currentType,0)" style="top:110px;left:0px;z-index: 99;">
                     </div> -->
                    </div>
                    <div class="license-btn icon fr">
                      <span class="fbtn magnify-btn" title="放大"@click="showBigImgs(currentType,0)"></span>
                    </div>
                    <input type="text" readonly="readonly" class="text-empty" placeholder="注册编号"  value="{{up.licenseno}}">
                    <input type="text" readonly="readonly" class="text-empty" placeholder="开始日期"  value="{{up.begindate | getYMD}}">
                    <input type="text" readonly="readonly" class="text-empty" placeholder="有效期至"  v-if="up.isunlimited!='Y'" value="{{up.enddate | getYMD}}">
    
                    <input type="text" readonly="readonly" class="text-empty"  style="width:167px;" v-if="up.isunlimited=='Y'" value="长期">
                    <div class="deadline">
                      <div class="checkbox-control fl">
                        <input type="checkbox" disabled="disabled"  v-if="up.isunlimited!='Y'" name="cb" id="cball1">
                        <input type="checkbox" disabled="disabled" checked="checked" v-if="up.isunlimited=='Y'"  name="cb" id="cball1">
                        <label class="checkbox  mr-0" for="cball1">无期限</label>
                      </div>
                      <span class="overdue fr" style="display:block;" v-if="up.enddate | compareDate">已过期</span>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
            <div class="cert-item"  v-for="up in uploads" v-if="$index>0">
              <div class="cert-type" style="margin:27px 10px 0px 16px;">
              </div>
              <div class="cert-view  bd-none">
                <ul class="cert-list">
                  <li>
                    <div class="cp-box" @click="modifyPicInfo($index,1)" :style="{backgroundImage: 'url('+(up.path!=null?up.path:'')+')'}">
                     <!--   <div class="big-imgs" @click="showBigImgs(currentType,$index)" style="top:110px;left:0px;z-index: 99;">
                     </div> -->
                    </div>
                    <div class="license-btn icon fr">
                      <span class="fbtn magnify-btn" title="放大" @click="showBigImgs(currentType,$index)"></span>
                    </div>
                    <input type="text" readonly="readonly" class="text-empty" placeholder="注册编号" value="{{up.licenseno}}">
                    <input type="text" readonly="readonly" class="text-empty" placeholder="开始日期" v- value="{{up.begindate | getYMD}}">
                    <input type="text" readonly="readonly" class="text-empty" placeholder="有效期至" v-if="up.isunlimited!='Y'" value="{{up.enddate | getYMD}}">
    
                    <input type="text" readonly="readonly" class="text-empty" v-if="up.isunlimited=='Y'" value="长期">
                    <div class="deadline">
                      <div class="checkbox-control fl">
                        <input type="checkbox" disabled="disabled"  v-if="up.isunlimited!='Y'" name="cb" id="cball1">
                        <input type="checkbox" disabled="disabled" checked="checked" v-if="up.isunlimited=='Y'"  name="cb" id="cball1">
                        <label class="checkbox  mr-0" for="cball1">无期限</label>
                      </div>
                       <span class="overdue fr" style="display:block;" v-if="up.enddate | compareDate">已过期</span>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          </div>
        </div>
        <!-- 展示图片 --> 
</div>
</template>
<script>
  
  module.exports = {
    data: function () {
      return {
          countTrs:0,
          countTr:1,
          canEdit: false,
          trVO:{
              guid:'',
              variationtype:'V09',
          },
          cs1:false,
          BusinessClassList: [{
              value: '1',
              label: '药品'
          }, {
              value: '2',
              label: '医疗器械'
          }, {
              value: '3',
              label: '其它'
          }],
          flagList: [{
              value: "Y",
              label: "是"
          },
          {
              value: "N",
              label: "否"
          }],
          agent:{},
            //----上传 start
          isOpen:false,
          uploads:[],
          uploads1:[],
          mIndex1:0,
          show1:true,
          uploads2:[],
          mIndex2:0,
          show2:true,
          uploads3:[],
          mIndex3:0,
          show3:true,
          uploads4:[],
          mIndex4:0,
          show4:true,
          uploads5:[],
          mIndex5:0,
          show5:true,
          currentType:0,
          uploadsAll:[],
          isModify:false,
          imgArry:[],
          checkNodate:[],
          //----上传 end
          canSave:false,
          canDelete:false,
        };
    },
    methods: {
      getData: function () {
        var self = this;
        self.uploads=[];
        self.uploads1=[];
        self.uploads2=[];
        self.uploads3=[];
        self.uploads4=[];
        self.uploads5=[];
        self.uploads1[0]={};
        self.uploads2[0]={};
        self.uploads3[0]={};
        self.uploads4[0]={};
        self.uploads5[0]={};
        self.countTrs=0;
        if (this.$route.params.guid != '0') {
          Ajax.get('/supplierProductLic/Agent/' + this.$route.params.guid)
            .then(function (response) {
                self.$set('agent', response.data.data);

                self.existTr();
                self.canSave=false;
                self.canDelete=false;
                self.cs1=false;
                if(self.agent.islicthreetoone==null){
                   self.$set('agent.islicthreetoone', 'Y');
                }
                if(self.agent.businessclass==null){
                   self.$set('agent.businessclass', 1);
                } 
                var lics=self.agent.lics, imgReg = /\.(jpg|jpeg|png|gif|bmp)$/i; //判断字符串是否为图片路径;
                if(lics!=null && lics.length>0){
                  for(var i=0;i<lics.length;i++){
                      var lic=lics[i];
                      var objPic=JSON.parse(lic.pictcontent);
                      var path=imgReg.test(objPic[0].thumbnail.path) ? objPic[0].thumbnail.path : objPic[0].thumbnail.path+objPic[0].thumbnail.name;
                      lic.path=path;
                      lic.type=lic.licensetype;
                      if(lic.licensetype==1){
                          if(self.uploads1[0].path==null){
                              self.uploads1.splice(0,1);
                          }
                          self.uploads1.push(lic);
                          self.show1=false;
                      }else if(lic.licensetype==2){
                          if(self.uploads2[0].path==null){
                              self.uploads2.splice(0,1);
                          }
                          self.uploads2.push(lic);
                          self.show2=false;
                      }else if(lic.licensetype==3){
                          if(self.uploads3[0].path==null){
                              self.uploads3.splice(0,1);
                          }
                          self.uploads3.push(lic);
                          self.show3=false;
                      }else if(lic.licensetype==4){
                          if(self.uploads4[0].path==null){
                              self.uploads4.splice(0,1);
                          }
                          self.uploads4.push(lic);
                          self.show4=false;
                      }else if(lic.licensetype==5){
                          if(self.uploads5[0].path==null){
                              self.uploads5.splice(0,1);
                          }
                          self.uploads5.push(lic);
                          self.show5=false;
                      }
                  }
                  self.uploads=self.uploads1;
                }
            });
        } else {
          self.producer = {};
          self.uploads=[];
          self.canSave=true;
          self.canAdd=true;
        }
      },      
      saveAgent: function () {
        var self = this;
        self.uploadsAll.splice(0);
        if(self.uploads1.length>0 && self.uploads1[0].path!=null){
          for(var i=0;i<self.uploads1.length;i++){
             if(i==0){
                self.uploads1[i].isfirst='Y';
             }else{
                self.uploads1[i].isfirst='N';
             }
             self.uploads1[i].licensetype=1;
             self.uploadsAll.push(self.uploads1[i]);
          }     
        }
        if(self.uploads2.length>0 && self.uploads2[0].path!=null){
          for(var i=0;i<self.uploads2.length;i++){
             if(i==0){
                self.uploads2[i].isfirst='Y';
             }else{
                self.uploads2[i].isfirst='N';
             }
             self.uploads2[i].licensetype=2;
             self.uploadsAll.push(self.uploads2[i]);
          }     
        }
        if(self.uploads3.length>0 && self.uploads3[0].path!=null){
          for(var i=0;i<self.uploads3.length;i++){
             if(i==0){
                self.uploads3[i].isfirst='Y';
             }else{
                self.uploads3[i].isfirst='N';
             }
             self.uploads3[i].licensetype=3;
             self.uploadsAll.push(self.uploads3[i]);
          }     
        }
        if(self.uploads4.length>0 && self.uploads4[0].path!=null){
          for(var i=0;i<self.uploads4.length;i++){
             if(i==0){
                self.uploads4[i].isfirst='Y';
             }else{
                self.uploads4[i].isfirst='N';
             }
             self.uploads4[i].licensetype=4;
             self.uploadsAll.push(self.uploads4[i]);
          }     
        }
        if(self.uploads5.length>0 && self.uploads5[0].path!=null){
          for(var i=0;i<self.uploads5.length;i++){
             if(i==0){
                self.uploads5[i].isfirst='Y';
             }else{
                self.uploads5[i].isfirst='N';
             }
             self.uploads5[i].licensetype=5;
             self.uploadsAll.push(self.uploads5[i]);
          }     
        }
        self.agent.lics=self.uploadsAll;
        for (var i = 0; i < self.agent.lics.length; i++) {
             if(self.agent.lics[i].isunlimited == 'Y'){
                self.agent.lics[i].enddate ='';
             }
        }
        Ajax.post('/supplierProductLic/Agent/save', self.agent)
          .then(function (response) {
             if(response.data.errorCode==0){
                self.MessageBox({title:'提示',message:'保存成功！',type:'alert'
                },function(action){
                    self.$route.router.go('/cert/certAgentList'); 
                }); 
             }else{
                 layer.msg('保存失败！');
             }
          });
      }, 
      deleteAgent: function () {
        var self = this;
        Ajax.get('/supplierProductLic/Agent/delete/' + self.agent.guid)
          .then(function (response) {
            if(response.data.errorCode==0){
                self.MessageBox({title:'提示',message:'删除成功！',type:'alert'
                },function(action){
                    self.$route.router.go('/cert/certAgentList'); 
                }); 
             }else{
                layer.msg('删除失败！');
             }
        });
      },
      fileChange:function(data){
        var self=this, imgReg = /\.(jpg|jpeg|png|gif|bmp)$/i; //判断字符串是否为图片路径;
        var backObj = JSON.parse(data);
        var type=backObj.sdguid.split("@@")[0];
        if(backObj.sdguid.split("@@")[1]=='m'){
           this.isModify=true;
        }else{
           this.isModify=false;
        }
        for(var i=0;i<backObj.data.length;i++){
          var path=imgReg.test(backObj.data[0].thumbnail.path) ? backObj.data[0].thumbnail.path : backObj.data[0].thumbnail.path+backObj.data[0].thumbnail.name;
          var json='{"path":"'+path+'","type":"'+type+'"}';
          var obj=JSON.parse(json);
          obj.pictcontent=JSON.stringify(backObj.data);
          if(type==1){
            if(self.isModify){//修改、新增
              self.$set('uploads1['+self.mIndex1+']', obj);
            }else{
              this.uploads1.splice(0,0,obj);
              this.mIndex1=0;
            }
            var len=this.uploads1.length-1;
            if(this.uploads1[len].path==null){
               this.uploads1.splice(len,1);
            }
            self.show1=false;
          }else if(type==2){
            if(self.isModify){//修改、新增
              self.$set('uploads2['+self.mIndex2+']', obj);
            }else{
              this.uploads2.splice(0,0,obj);
              this.mIndex2=0;
            }
            var len=this.uploads2.length-1;
            if(this.uploads2[len].path==null){
               this.uploads2.splice(len,1);
            }
            self.show2=false;
          }else if(type==3){
            if(self.isModify){//修改、新增
              self.$set('uploads3['+self.mIndex3+']', obj);
            }else{
              this.uploads3.splice(0,0,obj);
              this.mIndex3=0;
            }
            var len=this.uploads3.length-1;
            if(this.uploads3[len].path==null){
               this.uploads3.splice(len,1);
            }
            self.show3=false;
          }else if(type==4){
            if(self.isModify){//修改、新增
              self.$set('uploads4['+self.mIndex4+']', obj);
            }else{
              this.uploads4.splice(0,0,obj);
              this.mIndex4=0;
            }
            var len=this.uploads4.length-1;
            if(this.uploads4[len].path==null){
               this.uploads4.splice(len,1);
            }
            self.show4=false;
          }else if(type==5){
            if(self.isModify){//修改、新增
              self.$set('uploads5['+self.mIndex5+']', obj);
            }else{
              this.uploads5.splice(0,0,obj);
              this.mIndex5=0;
            }
            var len=this.uploads5.length-1;
            if(this.uploads5[len].path==null){
               this.uploads5.splice(len,1);
            }
            self.show5=false;
          }
          self.showPicInfoByType(type); 
        }
      },
      showPicInfoByType:function(type){
        var tempCurrentType=this.currentType;
        this.currentType= type;
        if(this.isOpen){
          this.isOpen = false;
          if(tempCurrentType==type){
              this.currentType=0;
          }else{
              this.showPicInfoByType(type);
          }
        }else{
          this.isOpen = true;
        }
        if(type==1){
          this.$set('uploads',this.uploads1);
        }else if(type==2){
          this.$set('uploads',this.uploads2);
        }else if(type==3){
          this.$set('uploads',this.uploads3);
        }else if(type==4){
          this.$set('uploads',this.uploads4);
        }else if(type==5){
          this.$set('uploads',this.uploads5);
        }
      },
      //点击图片修改信息
      modifyPicInfo:function(index,type){
        type=this.currentType;
        if(type==1){
          this.mIndex1=index;
          if(this.cn1){
             this.show1=false;
          }
        }else if(type==2){
          this.mIndex2=index;
          if(this.cn1){
            this.show2=false;
          }
        }else if(type==3){
          this.mIndex3=index;
          if(this.cn1){
            this.show3=false;
          }
        }else if(type==4){
          this.mIndex4=index;
          if(this.cn1){
            this.show4=false;
          }
        }else if(type==5){
          this.mIndex5=index;
          if(this.cn1){
            this.show5=false;
          }
        }
      },
      //修改图片
      modifyPic: function(type){
        if(type==1){
          this.show1=true;
        }else if(type==2){
          this.show2=true;
        }else if(type==3){
          this.show3=true;
        }else if(type==4){       
          this.show4=true;
        }else if(type==5){
          this.show5=true;
        }
        this.isModify=true;
      },
      //删除图片
      delPic:function(type){
          var self=this;
          if(type==1){
            this.uploads1.splice(this.mIndex1,1);
            this.mIndex1=0;
            if(this.uploads1.length==0){
               self.show1=true;
            }  
          }else if(type==2){
            this.uploads2.splice(this.mIndex2,1);  
            this.mIndex2=0;
            if(this.uploads2.length==0){
              self.show2=true;
            }
          }else if(type==3){
            this.uploads3.splice(this.mIndex3,1); 
            this.mIndex3=0; 
            if(this.uploads3.length==0){
              self.show3=true;
            }
          }else if(type==4){
            this.uploads4.splice(this.mIndex4,1);  
            this.mIndex4=0;
            if(this.uploads4.length==0){
              self.show4=true;
            }
          }else if(type==5){
            this.uploads5.splice(this.mIndex5,1);  
            this.mIndex5=0;
            if(this.uploads5.length==0){
              self.show5=true;
            }
          } 
      },
      closeShow:function(){
          this.isOpen=false;
          this.currentType=0;
      },
      showBigImgs:function(type,index){
         var txt="";
         var obj, imgReg = /\.(jpg|jpeg|png|gif|bmp)$/i; //判断字符串是否为图片路径;
         if(type==1){
            obj=this.uploads1[index];
         }else if(type==2){
            obj=this.uploads2[index];
         }else if(type==3){
            obj=this.uploads3[index];
         }else if(type==4){
            obj=this.uploads4[index];
         }else if(type==5){
            obj=this.uploads5[index];
         }
         if(obj.isunlimited=='Y'){
            txt="证照编号："+this.delNull(obj.licenseno)+"   有效期限："+this.delNull(obj.begindate)+" 至 "+"无期限";
         }else{
            txt="证照编号："+this.delNull(obj.licenseno)+"   有效期限："+this.delNull(obj.begindate)+" 至 "+this.delNull(obj.enddate);
         }
         var pics=JSON.parse(obj.pictcontent);
         var path=imgReg.test(pics[0].original.path) ? pics[0].original.path : pics[0].original.path+pics[0].original.name;
         var jsonStr='[{"img":"'+path+'","txt":"'+txt+'"}]';
         this.$set('imgArry',JSON.parse(jsonStr));
         $("#bigImgs").click();
      },
      delNull:function(val){
         if(val==null){
            return '';
         }
         return val;
      },
      modifyInfo:function(){
          var self = this;

          if(self.countTr>0){
              layer.msg(self.editMsg);
            return;
          }
          this.canDelete=true;
          this.canSave=true;
          this.cs1=true;
      },
       existTr:function(){
        var self=this;
        self.trVO.guid=self.agent.guid;
           Ajax.post('/businessData/isExistExc',self.trVO)
               .then(function(response){
                   if(response.data.data==0){
                       Ajax.post('/businessData/existTrvariation',{
                           guid:self.agent.supplierguid,
                           variationtype: self.trVO.variationtype,
                           sdguid:self.trVO.guid
                       })
                           .then(function(response){
                            if(!response.data.data || response.data.data == 'R'){
                              self.countTr=0;
                              self.canEdit = true;
                            } else {
                                self.countTr=1;
                                self.countTrs=0;
                                self.canEdit = true;
                                self.editMsg='该代理商资质正在审核中，审核通过后请前往业务资料中修改。';
                            }
                           });
                   } else {
                      self.countTr=0;
                      self.countTrs=1;
                      self.canEdit = false;
                      self.editMsg='该代理商资质已有变更单，您可以进入【业务资料】修改并且提交审核！';
                   }
               });
      }
    },
    route: {
      activate: function () {
        this.getData();
      }
    },
    watch:{
      'agent.address':function(){
          $('#content').flexText();
      }
    }
  };

</script>