tnc-fe/src/views/smscheck/modules/TaskUploadData.vue

<template>
  <a-spin :spinning="this.uploading" size="large" tip="正在提交资料，请勿关闭当前网页...">
    <!--  客户信息-->
    <a-page-header
      style="background-color: #FFFFFF;margin-bottom:10px"
      title="行短稽核资料填写"
      :sub-title='notes'
      @back="back"
    >
      <div>
        <a-form-model
          ref="form"
          :model="infoModel"
          :rules="rules"
        >
          <a-row>
            <a-col :span="6">

              <a-form-model-item label="客户编号" v-bind="labelCol4" >
                <a-input   v-model="infoModel.customerNo" placeholder="客户编号" :disabled='true'></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item label="用户编号"   v-bind="labelCol4" >
                <a-input   v-model="infoModel.userNo" placeholder="用户编号" :disabled='true'></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item label="入网时间"   v-bind="labelCol4" >
                <a-input   v-model="infoModel.networkAccessTime" placeholder="入网时间" :disabled='true'></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item label="用户发展员工" prop="staffNo" v-bind="labelCol4">
                <a-input  v-model="infoModel.staffNo" placeholder="用户发展员工" :disabled='true'></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item label="发展员工姓名" prop="staffNo" v-bind="labelCol4">
                <a-input  v-model="infoModel.staffName" placeholder="发展员工姓名" :disabled='true'></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item label="客户名称(全)" prop="customerName" v-bind="labelCol4">
                <a-input   v-model="infoModel.customerName" placeholder="客户名称/使用人名称"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col  :span="6">
              <!--              <a-form-model-item label="用户状态" prop="userState" v-bind="labelCol4">-->
              <!--                <a-input  v-model="infoModel.userState" placeholder="用户状态" :disabled='true'></a-input>-->
              <!--              </a-form-model-item>-->
              <a-form-item label="用户状态"v-bind="labelCol4" prop="userState" >
                <j-dict-select-tag placeholder="请选择用户状态"   v-model="infoModel.userState" dictCode="user_status_2"/>
              </a-form-item>
            </a-col>

            <a-col :span="6">
              <a-form-model-item label="码号" prop="codeNumber" v-bind="labelCol4">
                <a-input   v-model="infoModel.codeNumber" placeholder="(接入开通码号95/96/10/11/12/106/400（不含拓展位长））"></a-input>
              </a-form-model-item>
            </a-col>

            <a-col :span="6">
              <a-form-model-item label="号码详细用途" prop="numberUse" v-bind="labelCol4">
                <a-input  v-model="infoModel.numberUse" placeholder="（文字描述，最大200字。）"></a-input>
              </a-form-model-item>
            </a-col>


            <a-col :span="6">
              <a-form-model-item label="客户经理手机号" prop="managePhone" v-bind="labelCol4">
                <a-input  v-model="infoModel.managePhone" placeholder="客户经理手机号"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item label="单位联系人手机号" prop="codeNumberContactPhone" v-bind="labelCol4">
                <a-input  v-model="infoModel.codeNumberContactPhone" placeholder="业务合同码号使用单位联系人手机号"></a-input>
              </a-form-model-item>
            </a-col>
<!--            <a-col :span="6">-->
<!--              <a-form-model-item label="是否完成整改" prop="isComplete" v-bind="labelCol4">-->
<!--                <a-radio-group v-model="infoModel.isComplete" button-style="solid" >-->
<!--                  <a-radio-button value="0">否</a-radio-button>-->
<!--                  <a-radio-button value="1">是</a-radio-button>-->
<!--                </a-radio-group>-->
<!--              </a-form-model-item>-->
<!--            </a-col>-->
            <a-col :span="6">
              <a-form-model-item label="是否为CSP商" prop="isCsp" v-bind="labelCol4">
                <a-radio-group v-model="infoModel.isCsp" button-style="solid" >
                  <a-radio-button value="0">否</a-radio-button>
                  <a-radio-button value="1">是</a-radio-button>
                </a-radio-group>
              </a-form-model-item>
            </a-col>
            <a-col :span="10">
              <a-form-model-item label="码号证书营业执照合同签约方主体是否一致" prop="codeNumberBusinessLicense" v-bind="labelCol5">
                <a-radio-group v-model="infoModel.codeNumberBusinessLicense" button-style="solid" >
                  <a-radio-button value="0">否</a-radio-button>
                  <a-radio-button value="1">是</a-radio-button>
                </a-radio-group>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="签约号码与证书下发码号是否一致" prop="isSigningNumber" v-bind="labelCol5">
                <a-radio-group v-model="infoModel.isSigningNumber" button-style="solid" >
                  <a-radio-button value="0">否</a-radio-button>
                  <a-radio-button value="1">是</a-radio-button>
                </a-radio-group>
              </a-form-model-item>
            </a-col>

            <a-col :span="8" v-if='infoModel.contractDateDateIs==="" || infoModel.contractDateDateIs===null || infoModel.contractDateDateIs==="1" '>
              <a-form-model-item label="合同到期时间是否长期" prop="contractDateDateIs" v-bind="labelCol8">
                <a-radio-group v-model="infoModel.contractDateDateIs" button-style="solid" >
                  <a-radio-button value="0">否</a-radio-button>
                  <a-radio-button value="1">是</a-radio-button>
                </a-radio-group>
              </a-form-model-item>
            </a-col>
            <a-col :span="8"  v-if='infoModel.contractDateDateIs==="0" '  >
                <a-form-model-item label="合同到期时间" prop="contractDateDate" v-bind="labelCol8">
                  <a-date-picker style="min-width:50px; width: 68% " v-model="infoModel.contractDateDate"
                                 format="YYYY-MM-DD"
                                 showTime valueFormat="YYYY-MM-DD"/>
                  <a-button  @click="backDate('contractDate')" >长期</a-button>
                </a-form-model-item>
            </a-col>
             <a-col :span="8" v-if='infoModel.businessLicenseDateDateIs==="" || infoModel.businessLicenseDateDateIs===null || infoModel.businessLicenseDateDateIs==="1" '>
              <a-form-model-item label="营业执照有效期是否长期" prop="businessLicenseDateDateIs" v-bind="labelCol8">
                <a-radio-group v-model="infoModel.businessLicenseDateDateIs" button-style="solid"  >
                  <a-radio-button value="0">否</a-radio-button>
                  <a-radio-button value="1">是</a-radio-button>
                </a-radio-group>
              </a-form-model-item>
            </a-col>
            <a-col :span="8" v-if='infoModel.businessLicenseDateDateIs==="0"'  >
              <a-form-model-item label="营业执照到期时间" prop="businessLicenseDateDate" v-bind="labelCol8">
                <a-date-picker  style="min-width:50px; width: 68% " v-model="infoModel.businessLicenseDateDate"
                               format="YYYY-MM-DD"
                               showTime valueFormat="YYYY-MM-DD"/>
                <a-button  @click="backDate('businessLicenseDate')" >长期</a-button>
              </a-form-model-item>
            </a-col>

            <a-col :span="8" v-if='infoModel.codeNumberDateDateIs==="" || infoModel.codeNumberDateDateIs===null || infoModel.codeNumberDateDateIs==="1" '>
              <a-form-model-item label="码号证书有效期是否长期" prop="codeNumberDateDateIs" v-bind="labelCol8">
                <a-radio-group v-model="infoModel.codeNumberDateDateIs" button-style="solid"  >
                  <a-radio-button value="0">否</a-radio-button>
                  <a-radio-button value="1">是</a-radio-button>
                </a-radio-group>
              </a-form-model-item>
            </a-col>
            <a-col :span="8" v-if='infoModel.codeNumberDateDateIs==="0" ' >
              <a-form-model-item label="码号证书到期时间" prop="codeNumberDateDate" v-bind="labelCol8">
                <a-date-picker  style="min-width:50px; width: 68% "  v-model="infoModel.codeNumberDateDate"
                                format="YYYY-MM-DD"
                                showTime valueFormat="YYYY-MM-DD"/>
                <a-button  @click="backDate('codeNumberDate')" >长期</a-button>
              </a-form-model-item>
            </a-col>
             <a-col :span="8" v-if='infoModel.filingsDateDateIs==="" || infoModel.filingsDateDateIs===null || infoModel.filingsDateDateIs==="1" '>
              <a-form-model-item label="备案到期时间是否长期" prop="filingsDateDateIs" v-bind="labelCol8">
                <a-radio-group v-model="infoModel.filingsDateDateIs" button-style="solid"  >
                  <a-radio-button value="0">否</a-radio-button>
                  <a-radio-button value="1">是</a-radio-button>
                </a-radio-group>
              </a-form-model-item>
            </a-col>
            <a-col :span="8"  v-if='infoModel.filingsDateDateIs==="0" ' >
              <a-form-model-item label="备案通知到期时间" prop="filingsDateDate" v-bind="labelCol8">
                <a-date-picker  style="min-width:50px; width: 68% "  v-model="infoModel.filingsDateDate"
                                format="YYYY-MM-DD"
                                showTime valueFormat="YYYY-MM-DD"/>
                <a-button  @click="backDate('filingsDate')" >长期</a-button>
              </a-form-model-item>

            </a-col>


            <a-col :span="8" v-if='infoModel.permitDateDateIs==="" || infoModel.permitDateDateIs===null || infoModel.permitDateDateIs==="1" '>
              <a-form-model-item label="增值业务许可证是否长期"   :prop='infoModel.isCsp==="1"?"permitDateDateIs":""'  v-bind="labelCol8">
                <a-radio-group v-model="infoModel.permitDateDateIs" button-style="solid"  >
                  <a-radio-button value="0">否</a-radio-button>
                  <a-radio-button value="1">是</a-radio-button>
                </a-radio-group>
              </a-form-model-item>
            </a-col>
            <a-col :span="8"  v-if='infoModel.permitDateDateIs==="0" ' >
              <a-form-model-item label="增值业务许可证到期时间" :prop='infoModel.isCsp==="1"?"permitDateDate":""'  v-bind="labelCol8">
                <a-date-picker  style="min-width:50px; width: 68% "  v-model="infoModel.permitDateDate"
                                format="YYYY-MM-DD"
                                showTime valueFormat="YYYY-MM-DD"/>
                <a-button  @click="backDate('permitDate')" >长期</a-button>
              </a-form-model-item>
            </a-col>
<!--            <a-col :span="8">-->
<!--              <a-form-model-item label="资料是否完整" prop="isAll" v-bind="labelCol4">-->
<!--                <a-radio-group v-model="infoModel.isAll" button-style="solid" >-->
<!--                  <a-radio-button value="0">否</a-radio-button>-->
<!--                  <a-radio-button value="1">是</a-radio-button>-->
<!--                </a-radio-group>-->
<!--              </a-form-model-item>-->
<!--            </a-col>-->
          </a-row>

        </a-form-model>
      </div>
    </a-page-header>

    <!--    步骤条-->
    <a-card style="margin-bottom:10px;width: 15%;float: left">
      <a-steps direction="vertical" :current="steps.current" size="small" @change="stepsClick">
        <a-step v-for="item in steps.stepsNow" :key="item.title" :title="item.title" :status="item.status"/>
      </a-steps>
      <a-button @click="addIsStaging" style="width: 100%" type="warn">暂存</a-button>
      <a-button @click="submitAuditLot" style="width: 100%;position: relative;top: 10px" type="primary">提交申请</a-button>
    </a-card>
    <!--    合同到期时间（YYYY-MM-DD）-->
    <a-card v-if="steps.currentId == 'contractDate'"
            style="margin-bottom:10px;
              float: left;width: 83%;left: 2%">
      <div slot="title">
        <span style="float: left;position: relative;top: 4px">合同资料</span>
      </div>
      <!--      文件上传-->
      <!--      附件-->

      <div>
        <a-form-model-item style="left: 5%;width: 85%;" label="上传资料备注：" v-bind="labelCol1Note">
          <a-textarea style="height: 77px"
                      v-model="infoModel.contractDateRemark"
                      @change="textareaChange('contractDate','contractDateRemark')"
                      placeholder="如没有合同到期时间，需要说明原因"
          />
          <!--            :auto-size="{ minRows: 3, maxRows: 5 }"-->
        </a-form-model-item>
      </div>
      <div style="height: 70%">
        <a-upload
          name="file"
          :multiple="true"
          :action="importMinioUploadAction"
          :customRequest="e => selfUploadContract(e, 'contractDate')"
          :headers="tokenHeader"
          :showUploadList="false"
          :beforeUpload="importBeforeUpload"
          @change="importHandleChange"
          style='margin-left: 90px'
        >
          <a-button> <a-icon type="upload" /> 上传文件 </a-button>
        </a-upload>
        <div class="thumb-example"  >
          <!-- swiper1 -->
          <swiper
            class="swiper gallery-top"
            :options="swiperOptionTop"
            ref="swiperTop"
          >
            <swiper-slide class="slide-1" v-for="(item, index) in infoModel.contractDate" :key="item.id">
              <iframe
                v-if="item.urlBase"
                frameborder="1"
                :src="item.urlBase"
                ref="ifr"
                width="85%"
                height="445px"
                scrolling="auto">
              </iframe>
              <div><img style="width: 85%;height: 445px;border: 1px solid;"
                   v-if="!item.urlBase" :src="noDataPng" border="1">
              <div>
              <a-button  v-if="infoModel.contractDate.length && item.urlBase"
                        style="display: block;margin-top: 1px;border-color: red;color: red;float: left"
                        danger @click="removeFile(item,'contractDate')">移除
              </a-button>

              <a-button  style="display: block;position: relative;left:20px;margin-top: 10px;border-color: #1890FF;color: #1890FF"
                         v-if="infoModel.contractDate.length && item.urlBase"
                         @click="jumpUrl(item.urlBase)">预览
              </a-button></div>
              </div>
            </swiper-slide>
            <!--            <div
                          class="swiper-button-next swiper-button-white"
                          slot="button-next"
                        ></div>
                        <div
                          class="swiper-button-prev swiper-button-white"
                          slot="button-prev"
                        ></div>-->
          </swiper>
          <!-- swiper2 Thumbs -->
          <swiper
            class="swiper gallery-thumbs"
            :options="swiperOptionThumbs"
            ref="swiperThumbs"
          >
            <swiper-slide
              class="slide"
              style="width:100px;height:100px;"
              v-for="(item, index) in infoModel.contractDate"
              :key="item.id"
            >
              <div v-if="item.urlBase" style="width: 100%;height: 96px;background: rgb(68,142,247);color: white">
                <span style="white-space:normal; word-break:break-all;overflow:hidden;">{{ item.fileName }}</span>
              </div>

              <img style="width: 100%;height: 96px"
                   v-if="!item.urlBase" :src="noDataPng" border="1">

            </swiper-slide>
            <!--              点我上传文件按钮-->
            <div class="clearfix">
              <a-upload
                listType="picture-card"
                name="file"
                :multiple="false"
                :action="importMinioUploadAction"
                :customRequest="e => selfUploadContract(e, 'contractDate')"
                :headers="tokenHeader"
                :showUploadList="false"
                :beforeUpload="importBeforeUpload"
                @change="importHandleChange"
              >
                <div v-if="infoModel.contractDate.length < 10">
                  <a-icon type="plus"/>
                  <div class="ant-upload-text">点我上传合同</div>
                </div>
              </a-upload>

            </div>

            <div class="swiper-button-next swiper-button-white" slot="button-next">
              <div>
                <!--                  <img src="../../../../assets/images/nextImg.png" alt=""/>-->
              </div>
            </div>
            <div class="swiper-button-prev swiper-button-white" slot="button-prev">
              <div>
                <!--                  <img src="../../../../assets/images/prevImg.png" alt=""/>-->
              </div>
            </div>
          </swiper>
        </div>
      </div>

    </a-card>
    <!--      营业执照到期时间-->
    <a-card v-if="steps.currentId == 'businessLicenseDate'"
            style="margin-bottom:10px;
              float: left;width: 83%;left: 2%">
      <div slot="title">
        <span style="float: left;position: relative;top: 4px">营业执照资料</span>
      </div>
      <!--      文件上传-->
      <!--      附件-->
      <div>
                <a-form-model-item style="left: 5%;width: 85%;" label="上传资料备注：" v-bind="labelCol1Note">

          <a-textarea style="height: 77px"
                      @change="textareaChange('businessLicenseDate','businessLicenseDateRemark')"
                      v-model="infoModel.businessLicenseDateRemark"
                      placeholder="如没有营业执照到期时间资料，需要说明原因"
          />
          <!--            :auto-size="{ minRows: 3, maxRows: 5 }"-->
        </a-form-model-item>
      </div>
      <div style="height: 70%">
        <a-upload
          name="file"
          :multiple="true"
          :action="importMinioUploadAction"
          :customRequest="e => selfUploadContract(e, 'businessLicenseDate')"
          :headers="tokenHeader"
          :showUploadList="false"
          :beforeUpload="importBeforeUpload"
          @change="importHandleChange"
          style='margin-left: 90px'
        >
          <a-button> <a-icon type="upload" /> 上传文件 </a-button>
        </a-upload>
        <div class="thumb-example"  >
          <!-- swiper1 -->
          <swiper
            class="swiper gallery-top"
            :options="swiperOptionTop"
            ref="swiperTop"
          >
            <swiper-slide class="slide-1" v-for="(item, index) in infoModel.businessLicenseDate" :key="item.id">
              <iframe
                v-if="item.urlBase"
                frameborder="1"
                :src="item.urlBase"
                ref="ifr"
                width="85%"
                height="445px"
                scrolling="auto">
              </iframe>
              <div><img style="width: 85%;height: 445px;border: 1px solid;"
                   v-if="!item.urlBase" :src="noDataPng" border="1">
              <a-button   v-if="infoModel.businessLicenseDate.length && item.urlBase"
                    style="display: block;margin-top: 1px;border-color: red;color: red;float: left"
                        danger @click="removeFile(item,'businessLicenseDate')">移除
              </a-button>
              <a-button  style="display: block;position: relative;left:20px;margin-top: 10px;border-color: #1890FF;color: #1890FF"
                         v-if="infoModel.businessLicenseDate.length && item.urlBase"
                         @click="jumpUrl(item.urlBase)">预览
              </a-button></div>

            </swiper-slide>
            <!--            <div
                          class="swiper-button-next swiper-button-white"
                          slot="button-next"
                        ></div>
                        <div
                          class="swiper-button-prev swiper-button-white"
                          slot="button-prev"
                        ></div>-->
          </swiper>
          <!-- swiper2 Thumbs -->
          <swiper
            class="swiper gallery-thumbs"
            :options="swiperOptionThumbs"
            ref="swiperThumbs"
          >
            <swiper-slide
              class="slide"
              style="width:100px;height:100px;"
              v-for="(item, index) in infoModel.businessLicenseDate"
              :key="item.id"
            >
              <div v-if="item.urlBase" style="width: 100%;height: 96px;background: rgb(68,142,247);color: white">
                <span style="white-space:normal; word-break:break-all;overflow:hidden;">{{ item.fileName }}</span>
              </div>

              <img style="width: 100%;height: 96px"
                   v-if="!item.urlBase" :src="noDataPng" border="1">

            </swiper-slide>
            <!--              点我上传文件按钮-->
            <div class="clearfix">
              <a-upload
                listType="picture-card"
                name="file"
                :multiple="false"
                :action="importMinioUploadAction"
                :customRequest="e => selfUploadContract(e, 'businessLicenseDate')"
                :headers="tokenHeader"
                :showUploadList="false"
                :beforeUpload="importBeforeUpload"
                @change="importHandleChange"
              >
                <div v-if="infoModel.businessLicenseDate.length < 20">
                  <a-icon type="plus"/>
                  <div class="ant-upload-text">点我上传营业执照到期时间资料</div>
                </div>
              </a-upload>

            </div>

            <div class="swiper-button-next swiper-button-white" slot="button-next">
              <div>
                <!--                  <img src="../../../../assets/images/nextImg.png" alt=""/>-->
              </div>
            </div>
            <div class="swiper-button-prev swiper-button-white" slot="button-prev">
              <div>
                <!--                  <img src="../../../../assets/images/prevImg.png" alt=""/>-->
              </div>
            </div>
          </swiper>
        </div>
      </div>

    </a-card>
    <!--      码号证书到期时间资料-->
    <a-card v-if="steps.currentId == 'codeNumberDate'"
            style="margin-bottom:10px;
              float: left;width: 83%;left: 2%">
      <div slot="title">
        <span style="float: left;position: relative;top: 4px">码号证书资料</span>
      </div>
      <!--      文件上传-->
      <!--      附件-->
      <div>
                <a-form-model-item style="left: 5%;width: 85%;" label="上传资料备注：" v-bind="labelCol1Note">

          <a-textarea style="height: 77px"
                      @change="textareaChange('codeNumberDate','codeNumberDateRemark')"
                      v-model="infoModel.codeNumberDateRemark"
                      placeholder="如没有码号证书到期时间资料，需要说明原因"
          />
          <!--            :auto-size="{ minRows: 3, maxRows: 5 }"-->
        </a-form-model-item>
      </div>
      <div style="height: 70%">
        <a-upload
          name="file"
          :multiple="true"
          :action="importMinioUploadAction"
          :customRequest="e => selfUploadContract(e, 'codeNumberDate')"
          :headers="tokenHeader"
          :showUploadList="false"
          :beforeUpload="importBeforeUpload"
          @change="importHandleChange"
          style='margin-left: 90px'
        >
          <a-button> <a-icon type="upload" /> 上传文件 </a-button>
        </a-upload>
        <div class="thumb-example"  >
          <!-- swiper1 -->
          <swiper
            class="swiper gallery-top"
            :options="swiperOptionTop"
            ref="swiperTop"
          >
            <swiper-slide class="slide-1" v-for="(item, index) in infoModel.codeNumberDate" :key="item.id">
              <iframe
                v-if="item.urlBase"
                frameborder="1"
                :src="item.urlBase"
                ref="ifr"
                width="85%"
                height="445px"
                scrolling="auto">
              </iframe>
              <div><img style="width: 85%;height: 445px;border: 1px solid;"
                   v-if="!item.urlBase" :src="noDataPng" border="1">
              <a-button  v-if="infoModel.codeNumberDate.length && item.urlBase"
                    style="display: block;margin-top: 1px;border-color: red;color: red;float: left"
                        danger @click="removeFile(item,'codeNumberDate')">移除
              </a-button>
              <a-button  style="display: block;position: relative;left:20px;margin-top: 10px;border-color: #1890FF;color: #1890FF"
                         v-if="infoModel.codeNumberDate.length && item.urlBase"
                         @click="jumpUrl(item.urlBase)">预览
              </a-button></div>
            </swiper-slide>
            <!--            <div
                          class="swiper-button-next swiper-button-white"
                          slot="button-next"
                        ></div>
                        <div
                          class="swiper-button-prev swiper-button-white"
                          slot="button-prev"
                        ></div>-->
          </swiper>
          <!-- swiper2 Thumbs -->
          <swiper
            class="swiper gallery-thumbs"
            :options="swiperOptionThumbs"
            ref="swiperThumbs"
          >
            <swiper-slide
              class="slide"
              style="width:100px;height:100px;"
              v-for="(item, index) in infoModel.codeNumberDate"
              :key="item.id"
            >
              <div v-if="item.urlBase" style="width: 100%;height: 96px;background: rgb(68,142,247);color: white">
                <span style="white-space:normal; word-break:break-all;overflow:hidden;">{{ item.fileName }}</span>
              </div>

              <img style="width: 100%;height: 96px"
                   v-if="!item.urlBase" :src="noDataPng" border="1">

            </swiper-slide>
            <!--              点我上传文件按钮-->
            <div class="clearfix">
              <a-upload
                listType="picture-card"
                name="file"
                :multiple="false"
                :action="importMinioUploadAction"
                :customRequest="e => selfUploadContract(e, 'codeNumberDate')"
                :headers="tokenHeader"
                :showUploadList="false"
                :beforeUpload="importBeforeUpload"
                @change="importHandleChange"
              >
                <div v-if="infoModel.codeNumberDate.length < 20">
                  <a-icon type="plus"/>
                  <div class="ant-upload-text">点我上传码号证书到期时间资料</div>
                </div>
              </a-upload>

            </div>

            <div class="swiper-button-next swiper-button-white" slot="button-next">
              <div>
                <!--                  <img src="../../../../assets/images/nextImg.png" alt=""/>-->
              </div>
            </div>
            <div class="swiper-button-prev swiper-button-white" slot="button-prev">
              <div>
                <!--                  <img src="../../../../assets/images/prevImg.png" alt=""/>-->
              </div>
            </div>
          </swiper>
        </div>
      </div>

    </a-card>
    <!--      备案通知到期时间-->
    <a-card v-if="steps.currentId == 'filingsDate'"
            style="margin-bottom:10px;
              float: left;width: 83%;left: 2%">
      <div slot="title">
        <span style="float: left;position: relative;top: 4px"> 备案通知资料</span>
      </div>
      <!--      文件上传-->
      <!--      附件-->
      <div>
                <a-form-model-item style="left: 5%;width: 85%;" label="上传资料备注：" v-bind="labelCol1Note">

          <a-textarea style="height: 77px"
                      @change="textareaChange('filingsDate','filingsDateRemark')"
                      v-model="infoModel.filingsDateRemark"
                      placeholder="如没有备案通知到期时间资料，需要说明原因"
          />
          <!--            :auto-size="{ minRows: 3, maxRows: 5 }"-->
        </a-form-model-item>
      </div>
      <div style="height: 70%">
        <a-upload
          name="file"
          :multiple="true"
          :action="importMinioUploadAction"
          :customRequest="e => selfUploadContract(e, 'filingsDate')"
          :headers="tokenHeader"
          :showUploadList="false"
          :beforeUpload="importBeforeUpload"
          @change="importHandleChange"
          style='margin-left: 90px'
        >
          <a-button> <a-icon type="upload" /> 上传文件 </a-button>
        </a-upload>
        <div class="thumb-example"  >
          <!-- swiper1 -->
          <swiper
            class="swiper gallery-top"
            :options="swiperOptionTop"
            ref="swiperTop"
          >
            <swiper-slide class="slide-1" v-for="(item, index) in infoModel.filingsDate" :key="item.id">
              <iframe
                v-if="item.urlBase"
                frameborder="1"
                :src="item.urlBase"
                ref="ifr"
                width="85%"
                height="445px"
                scrolling="auto">
              </iframe>
              <div><img style="width: 85%;height: 445px;border: 1px solid;"
                   v-if="!item.urlBase" :src="noDataPng" border="1">
              <a-button  v-if="infoModel.filingsDate.length && item.urlBase"
                    style="display: block;margin-top: 1px;border-color: red;color: red;float: left"
                        danger @click="removeFile(item,'filingsDate')">移除
              </a-button>
              <a-button  style="display: block;position: relative;left:20px;margin-top: 10px;border-color: #1890FF;color: #1890FF"
                         v-if="infoModel.filingsDate.length && item.urlBase"
                         @click="jumpUrl(item.urlBase)">预览
              </a-button></div>

            </swiper-slide>
            <!--            <div
                          class="swiper-button-next swiper-button-white"
                          slot="button-next"
                        ></div>
                        <div
                          class="swiper-button-prev swiper-button-white"
                          slot="button-prev"
                        ></div>-->
          </swiper>
          <!-- swiper2 Thumbs -->
          <swiper
            class="swiper gallery-thumbs"
            :options="swiperOptionThumbs"
            ref="swiperThumbs"
          >
            <swiper-slide
              class="slide"
              style="width:100px;height:100px;"
              v-for="(item, index) in infoModel.filingsDate"
              :key="item.id"
            >
              <div v-if="item.urlBase" style="width: 100%;height: 96px;background: rgb(68,142,247);color: white">
                <span style="white-space:normal; word-break:break-all;overflow:hidden;">{{ item.fileName }}</span>
              </div>

              <img style="width: 100%;height: 96px"
                   v-if="!item.urlBase" :src="noDataPng" border="1">

            </swiper-slide>
            <!--              点我上传文件按钮-->
            <div class="clearfix">
              <a-upload
                listType="picture-card"
                name="file"
                :multiple="false"
                :action="importMinioUploadAction"
                :customRequest="e => selfUploadContract(e, 'filingsDate')"
                :headers="tokenHeader"
                :showUploadList="false"
                :beforeUpload="importBeforeUpload"
                @change="importHandleChange"
              >
                <div v-if="infoModel.filingsDate.length < 20">
                  <a-icon type="plus"/>
                  <div class="ant-upload-text">点我上传备案通知到期时间资料</div>
                </div>
              </a-upload>

            </div>

            <div class="swiper-button-next swiper-button-white" slot="button-next">
              <div>
                <!--                  <img src="../../../../assets/images/nextImg.png" alt=""/>-->
              </div>
            </div>
            <div class="swiper-button-prev swiper-button-white" slot="button-prev">
              <div>
                <!--                  <img src="../../../../assets/images/prevImg.png" alt=""/>-->
              </div>
            </div>
          </swiper>
        </div>
      </div>

    </a-card>
    <!--      增值业务许可证到期时间-->
    <a-card v-if="steps.currentId == 'permitDate'"
            style="margin-bottom:10px;
              float: left;width: 83%;left: 2%">
      <div slot="title">
        <span style="float: left;position: relative;top: 4px"> 增值业务许可证资料</span>
      </div>
      <!--      文件上传-->
      <!--      附件-->
      <div>
                <a-form-model-item style="left: 5%;width: 85%;" label="上传资料备注：" v-bind="labelCol1Note">

          <a-textarea style="height: 77px"
                      @change="textareaChange('permitDate','permitDateRemark')"
                      v-model="infoModel.permitDateRemark"
                      placeholder="如没有增值业务许可证到期时间资料，需要说明原因"
          />
          <!--            :auto-size="{ minRows: 3, maxRows: 5 }"-->
        </a-form-model-item>
      </div>
      <div style="height: 70%">
        <a-upload
          name="file"
          :multiple="true"
          :action="importMinioUploadAction"
          :customRequest="e => selfUploadContract(e, 'permitDate')"
          :headers="tokenHeader"
          :showUploadList="false"
          :beforeUpload="importBeforeUpload"
          @change="importHandleChange"
          style='margin-left: 90px'
        >
          <a-button> <a-icon type="upload" /> 上传文件 </a-button>
        </a-upload>
        <div class="thumb-example"  >
          <!-- swiper1 -->
          <swiper
            class="swiper gallery-top"
            :options="swiperOptionTop"
            ref="swiperTop"
          >
            <swiper-slide class="slide-1" v-for="(item, index) in infoModel.permitDate" :key="item.id">
              <iframe
                v-if="item.urlBase"
                frameborder="1"
                :src="item.urlBase"
                ref="ifr"
                width="85%"
                height="445px"
                scrolling="auto">
              </iframe>
              <div><img style="width: 85%;height: 445px;border: 1px solid;"
                   v-if="!item.urlBase" :src="noDataPng" border="1">
              <a-button v-if="infoModel.permitDate.length && item.urlBase"
                    style="display: block;margin-top: 1px;border-color: red;color: red;float: left"
                        danger @click="removeFile(item,'permitDate')">移除
              </a-button>
              <a-button  style="display: block;position: relative;left:20px;margin-top: 10px;border-color: #1890FF;color: #1890FF"
                         v-if="infoModel.permitDate.length && item.urlBase"
                         @click="jumpUrl(item.urlBase)">预览
              </a-button></div>

            </swiper-slide>
            <!--            <div
                          class="swiper-button-next swiper-button-white"
                          slot="button-next"
                        ></div>
                        <div
                          class="swiper-button-prev swiper-button-white"
                          slot="button-prev"
                        ></div>-->
          </swiper>
          <!-- swiper2 Thumbs -->
          <swiper
            class="swiper gallery-thumbs"
            :options="swiperOptionThumbs"
            ref="swiperThumbs"
          >
            <swiper-slide
              class="slide"
              style="width:100px;height:100px;"
              v-for="(item, index) in infoModel.permitDate"
              :key="item.id"
            >
              <div v-if="item.urlBase" style="width: 100%;height: 96px;background: rgb(68,142,247);color: white">
                <span style="white-space:normal; word-break:break-all;overflow:hidden;">{{ item.fileName }}</span>
              </div>

              <img style="width: 100%;height: 96px"
                   v-if="!item.urlBase" :src="noDataPng" border="1">

            </swiper-slide>
            <!--              点我上传文件按钮-->
            <div class="clearfix">
              <a-upload
                listType="picture-card"
                name="file"
                :multiple="false"
                :action="importMinioUploadAction"
                :customRequest="e => selfUploadContract(e, 'permitDate')"
                :headers="tokenHeader"
                :showUploadList="false"
                :beforeUpload="importBeforeUpload"
                @change="importHandleChange"
              >
                <div v-if="infoModel.permitDate.length < 20">
                  <a-icon type="plus"/>
                  <div class="ant-upload-text">点我上传增值业务许可证到期时间资料</div>
                </div>
              </a-upload>

            </div>

            <div class="swiper-button-next swiper-button-white" slot="button-next">
              <div>
                <!--                  <img src="../../../../assets/images/nextImg.png" alt=""/>-->
              </div>
            </div>
            <div class="swiper-button-prev swiper-button-white" slot="button-prev">
              <div>
                <!--                  <img src="../../../../assets/images/prevImg.png" alt=""/>-->
              </div>
            </div>
          </swiper>
        </div>
      </div>

    </a-card>
    <!--      法人/责任人证件-->
    <a-card v-if="steps.currentId == 'corporationCard'"
            style="margin-bottom:10px;
              float: left;width: 83%;left: 2%">
      <div slot="title">
        <span style="float: left;position: relative;top: 4px"> 法人/责任人证件资料</span>
      </div>
      <!--      文件上传-->
      <!--      附件-->
      <div>
                <a-form-model-item style="left: 5%;width: 85%;" label="上传资料备注：" v-bind="labelCol1Note">

          <a-textarea style="height: 77px"
                      @change="textareaChange('corporationCard','corporationCardRemark')"
                      v-model="infoModel.corporationCardRemark"
                      placeholder="如没有法人/责任人证件，需要说明原因"
          />
          <!--            :auto-size="{ minRows: 3, maxRows: 5 }"-->
        </a-form-model-item>
      </div>
      <div style="height: 70%">
        <a-upload
          name="file"
          :multiple="true"
          :action="importMinioUploadAction"
          :customRequest="e => selfUploadContract(e, 'corporationCard')"
          :headers="tokenHeader"
          :showUploadList="false"
          :beforeUpload="importBeforeUpload"
          @change="importHandleChange"
          style='margin-left: 90px'
        >
          <a-button> <a-icon type="upload" /> 上传文件 </a-button>
        </a-upload>
        <div class="thumb-example"  >
          <!-- swiper1 -->
          <swiper
            class="swiper gallery-top"
            :options="swiperOptionTop"
            ref="swiperTop"
          >
            <swiper-slide class="slide-1" v-for="(item, index) in infoModel.corporationCard" :key="item.id">
              <iframe
                v-if="item.urlBase"
                frameborder="1"
                :src="item.urlBase"
                ref="ifr"
                width="85%"
                height="445px"
                scrolling="auto">
              </iframe>
              <div><img style="width: 85%;height: 445px;border: 1px solid;"
                   v-if="!item.urlBase" :src="noDataPng" border="1">
              <a-button v-if="infoModel.corporationCard.length && item.urlBase"
                    style="display: block;margin-top: 1px;border-color: red;color: red;float: left"
                        danger @click="removeFile(item,'corporationCard')">移除
              </a-button>
              <a-button  style="display: block;position: relative;left:20px;margin-top: 10px;border-color: #1890FF;color: #1890FF"
                         v-if="infoModel.corporationCard.length && item.urlBase"
                         @click="jumpUrl(item.urlBase)">预览
              </a-button></div>

            </swiper-slide>
            <!--            <div
                          class="swiper-button-next swiper-button-white"
                          slot="button-next"
                        ></div>
                        <div
                          class="swiper-button-prev swiper-button-white"
                          slot="button-prev"
                        ></div>-->
          </swiper>
          <!-- swiper2 Thumbs -->
          <swiper
            class="swiper gallery-thumbs"
            :options="swiperOptionThumbs"
            ref="swiperThumbs"
          >
            <swiper-slide
              class="slide"
              style="width:100px;height:100px;"
              v-for="(item, index) in infoModel.corporationCard"
              :key="item.id"
            >
              <div v-if="item.urlBase" style="width: 100%;height: 96px;background: rgb(68,142,247);color: white">
                <span style="white-space:normal; word-break:break-all;overflow:hidden;">{{ item.fileName }}</span>
              </div>

              <img style="width: 100%;height: 96px"
                   v-if="!item.urlBase" :src="noDataPng" border="1">

            </swiper-slide>
            <!--              点我上传文件按钮-->
            <div class="clearfix">
              <a-upload
                listType="picture-card"
                name="file"
                :multiple="false"
                :action="importMinioUploadAction"
                :customRequest="e => selfUploadContract(e, 'corporationCard')"
                :headers="tokenHeader"
                :showUploadList="false"
                :beforeUpload="importBeforeUpload"
                @change="importHandleChange"
              >
                <div v-if="infoModel.corporationCard.length < 20">
                  <a-icon type="plus"/>
                  <div class="ant-upload-text">点我上传法人/责任人证件资料</div>
                </div>
              </a-upload>

            </div>

            <div class="swiper-button-next swiper-button-white" slot="button-next">
              <div>
                <!--                  <img src="../../../../assets/images/nextImg.png" alt=""/>-->
              </div>
            </div>
            <div class="swiper-button-prev swiper-button-white" slot="button-prev">
              <div>
                <!--                  <img src="../../../../assets/images/prevImg.png" alt=""/>-->
              </div>
            </div>
          </swiper>
        </div>
      </div>

    </a-card>

    <!--   责任人授权书-->
    <a-card v-if="steps.currentId == 'personResponsible'"
            style="margin-bottom:10px;
              float: left;width: 83%;left: 2%">
      <div slot="title">
        <span style="float: left;position: relative;top: 4px"> 责任人授权书资料</span>
      </div>
      <!--      文件上传-->
      <!--      附件-->
      <div>
                <a-form-model-item style="left: 5%;width: 85%;" label="上传资料备注：" v-bind="labelCol1Note">

          <a-textarea style="height: 77px"
                      @change="textareaChange('personResponsible','personResponsibleRemark')"
                      v-model="infoModel.personResponsibleRemark"
                      placeholder="如没有责任人授权书资料，需要说明原因"
          />
          <!--            :auto-size="{ minRows: 3, maxRows: 5 }"-->
        </a-form-model-item>
      </div>
      <div style="height: 70%">
        <a-upload
          name="file"
          :multiple="true"
          :action="importMinioUploadAction"
          :customRequest="e => selfUploadContract(e, 'personResponsible')"
          :headers="tokenHeader"
          :showUploadList="false"
          :beforeUpload="importBeforeUpload"
          @change="importHandleChange"
          style='margin-left: 90px'
        >
          <a-button> <a-icon type="upload" /> 上传文件 </a-button>
        </a-upload>
        <div class="thumb-example"  >
          <!-- swiper1 -->
          <swiper
            class="swiper gallery-top"
            :options="swiperOptionTop"
            ref="swiperTop"
          >
            <swiper-slide class="slide-1" v-for="(item, index) in infoModel.personResponsible" :key="item.id">
              <iframe
                v-if="item.urlBase"
                frameborder="1"
                :src="item.urlBase"
                ref="ifr"
                width="85%"
                height="445px"
                scrolling="auto">
              </iframe>
              <div><img style="width: 85%;height: 445px;border: 1px solid;"
                   v-if="!item.urlBase" :src="noDataPng" border="1">
              <a-button  v-if="infoModel.personResponsible.length && item.urlBase"
                    style="display: block;margin-top: 1px;border-color: red;color: red;float: left"
                        danger @click="removeFile(item,'personResponsible')">移除
              </a-button>
              <a-button  style="display: block;position: relative;left:20px;margin-top: 10px;border-color: #1890FF;color: #1890FF"
                         v-if="infoModel.personResponsible.length && item.urlBase"
                         @click="jumpUrl(item.urlBase)">预览
              </a-button></div>

            </swiper-slide>
            <!--            <div
                          class="swiper-button-next swiper-button-white"
                          slot="button-next"
                        ></div>
                        <div
                          class="swiper-button-prev swiper-button-white"
                          slot="button-prev"
                        ></div>-->
          </swiper>
          <!-- swiper2 Thumbs -->
          <swiper
            class="swiper gallery-thumbs"
            :options="swiperOptionThumbs"
            ref="swiperThumbs"
          >
            <swiper-slide
              class="slide"
              style="width:100px;height:100px;"
              v-for="(item, index) in infoModel.personResponsible"
              :key="item.id"
            >
              <div v-if="item.urlBase" style="width: 100%;height: 96px;background: rgb(68,142,247);color: white">
                <span style="white-space:normal; word-break:break-all;overflow:hidden;">{{ item.fileName }}</span>
              </div>

              <img style="width: 100%;height: 96px"
                   v-if="!item.urlBase" :src="noDataPng" border="1">

            </swiper-slide>
            <!--              点我上传文件按钮-->
            <div class="clearfix">
              <a-upload
                listType="picture-card"
                name="file"
                :multiple="false"
                :action="importMinioUploadAction"
                :customRequest="e => selfUploadContract(e, 'personResponsible')"
                :headers="tokenHeader"
                :showUploadList="false"
                :beforeUpload="importBeforeUpload"
                @change="importHandleChange"
              >
                <div v-if="infoModel.personResponsible.length < 20">
                  <a-icon type="plus"/>
                  <div class="ant-upload-text">点我上传责任人授权书资料</div>
                </div>
              </a-upload>

            </div>

            <div class="swiper-button-next swiper-button-white" slot="button-next">
              <div>
                <!--                  <img src="../../../../assets/images/nextImg.png" alt=""/>-->
              </div>
            </div>
            <div class="swiper-button-prev swiper-button-white" slot="button-prev">
              <div>
                <!--                  <img src="../../../../assets/images/prevImg.png" alt=""/>-->
              </div>
            </div>
          </swiper>
        </div>
      </div>

    </a-card>
    <!--   经办人证件-->
    <a-card v-if="steps.currentId == 'operatorCard'"
            style="margin-bottom:10px;
              float: left;width: 83%;left: 2%">
      <div slot="title">
        <span style="float: left;position: relative;top: 4px"> 经办人证件资料</span>
      </div>
      <!--      文件上传-->
      <!--      附件-->
      <div>
                <a-form-model-item style="left: 5%;width: 85%;" label="上传资料备注：" v-bind="labelCol1Note">

          <a-textarea style="height: 77px"
                      v-model="infoModel.operatorCardRemark"
                      @change="textareaChange('operatorCard','operatorCardRemark')"
                      placeholder="如没有经办人证件资料，需要说明原因"
          />
          <!--            :auto-size="{ minRows: 3, maxRows: 5 }"-->
        </a-form-model-item>
      </div>
      <div style="height: 70%">
        <a-upload
          name="file"
          :multiple="true"
          :action="importMinioUploadAction"
          :customRequest="e => selfUploadContract(e, 'operatorCard')"
          :headers="tokenHeader"
          :showUploadList="false"
          :beforeUpload="importBeforeUpload"
          @change="importHandleChange"
          style='margin-left: 90px'
        >
          <a-button> <a-icon type="upload" /> 上传文件 </a-button>
        </a-upload>
        <div class="thumb-example"  >
          <!-- swiper1 -->
          <swiper
            class="swiper gallery-top"
            :options="swiperOptionTop"
            ref="swiperTop"
          >
            <swiper-slide class="slide-1" v-for="(item, index) in infoModel.operatorCard" :key="item.id">
              <iframe
                v-if="item.urlBase"
                frameborder="1"
                :src="item.urlBase"
                ref="ifr"
                width="85%"
                height="445px"
                scrolling="auto">
              </iframe>
              <div><img style="width: 85%;height: 445px;border: 1px solid;"
                   v-if="!item.urlBase" :src="noDataPng" border="1">
              <a-button v-if="infoModel.operatorCard.length && item.urlBase"
                    style="display: block;margin-top: 1px;border-color: red;color: red;float: left"
                        danger @click="removeFile(item,'operatorCard')">移除
              </a-button>
              <a-button  style="display: block;position: relative;left:20px;margin-top: 10px;border-color: #1890FF;color: #1890FF"
                         v-if="infoModel.operatorCard.length && item.urlBase"
                         @click="jumpUrl(item.urlBase)">预览
              </a-button></div>

            </swiper-slide>
            <!--            <div
                          class="swiper-button-next swiper-button-white"
                          slot="button-next"
                        ></div>
                        <div
                          class="swiper-button-prev swiper-button-white"
                          slot="button-prev"
                        ></div>-->
          </swiper>
          <!-- swiper2 Thumbs -->
          <swiper
            class="swiper gallery-thumbs"
            :options="swiperOptionThumbs"
            ref="swiperThumbs"
          >
            <swiper-slide
              class="slide"
              style="width:100px;height:100px;"
              v-for="(item, index) in infoModel.operatorCard"
              :key="item.id"
            >
              <div v-if="item.urlBase" style="width: 100%;height: 96px;background: rgb(68,142,247);color: white">
                <span style="white-space:normal; word-break:break-all;overflow:hidden;">{{ item.fileName }}</span>
              </div>

              <img style="width: 100%;height: 96px"
                   v-if="!item.urlBase" :src="noDataPng" border="1">

            </swiper-slide>
            <!--              点我上传文件按钮-->
            <div class="clearfix">
              <a-upload
                listType="picture-card"
                name="file"
                :multiple="false"
                :action="importMinioUploadAction"
                :customRequest="e => selfUploadContract(e, 'operatorCard')"
                :headers="tokenHeader"
                :showUploadList="false"
                :beforeUpload="importBeforeUpload"
                @change="importHandleChange"
              >
                <div v-if="infoModel.operatorCard.length < 20">
                  <a-icon type="plus"/>
                  <div class="ant-upload-text">点我上传经办人证件资料</div>
                </div>
              </a-upload>

            </div>

            <div class="swiper-button-next swiper-button-white" slot="button-next">
              <div>
                <!--                  <img src="../../../../assets/images/nextImg.png" alt=""/>-->
              </div>
            </div>
            <div class="swiper-button-prev swiper-button-white" slot="button-prev">
              <div>
                <!--                  <img src="../../../../assets/images/prevImg.png" alt=""/>-->
              </div>
            </div>
          </swiper>
        </div>
      </div>

    </a-card>
    <!--    经办人手持身份证照片（背景需为电信营业厅或白墙-->
    <a-card v-if="steps.currentId == 'operatorCardPhone'"
            style="margin-bottom:10px;
              float: left;width: 83%;left: 2%">
      <div slot="title">
        <span style="float: left;position: relative;top: 4px"> 经办人手持身份证照片</span>
      </div>
      <!--      文件上传-->
      <!--      附件-->
      <div>
                <a-form-model-item style="left: 5%;width: 85%;" label="上传资料备注：" v-bind="labelCol1Note">

          <a-textarea style="height: 77px"
                      @change="textareaChange('operatorCardPhone','operatorCardPhoneRemark')"
                      v-model="infoModel.operatorCardPhoneRemark"
                      placeholder="经办人手持身份证照片备注"
          />
          <!--            :auto-size="{ minRows: 3, maxRows: 5 }"-->
        </a-form-model-item>
      </div>
      <div style="height: 70%">
        <a-upload
          name="file"
          :multiple="true"
          :action="importMinioUploadAction"
          :customRequest="e => selfUploadContract(e, 'operatorCardPhone')"
          :headers="tokenHeader"
          :showUploadList="false"
          :beforeUpload="importBeforeUpload"
          @change="importHandleChange"
          style='margin-left: 90px'
        >
          <a-button> <a-icon type="upload" /> 上传文件 </a-button>
        </a-upload>
        <div class="thumb-example"  >
          <!-- swiper1 -->
          <swiper
            class="swiper gallery-top"
            :options="swiperOptionTop"
            ref="swiperTop"
          >
            <swiper-slide class="slide-1" v-for="(item, index) in infoModel.operatorCardPhone" :key="item.id">
              <iframe
                v-if="item.urlBase"
                frameborder="1"
                :src="item.urlBase"
                ref="ifr"
                width="85%"
                height="445px"
                scrolling="auto">
              </iframe>
              <div><img style="width: 85%;height: 445px;border: 1px solid;"
                   v-if="!item.urlBase" :src="noDataPng" border="1">
              <a-button v-if="infoModel.operatorCardPhone.length && item.urlBase"
                    style="display: block;margin-top: 1px;border-color: red;color: red;float: left"
                        danger @click="removeFile(item,'operatorCardPhone')">移除
              </a-button>
              <a-button  style="display: block;position: relative;left:20px;margin-top: 10px;border-color: #1890FF;color: #1890FF"
                         v-if="infoModel.operatorCardPhone.length && item.urlBase"
                         @click="jumpUrl(item.urlBase)">预览
              </a-button></div>

            </swiper-slide>
            <!--            <div
                          class="swiper-button-next swiper-button-white"
                          slot="button-next"
                        ></div>
                        <div
                          class="swiper-button-prev swiper-button-white"
                          slot="button-prev"
                        ></div>-->
          </swiper>
          <!-- swiper2 Thumbs -->
          <swiper
            class="swiper gallery-thumbs"
            :options="swiperOptionThumbs"
            ref="swiperThumbs"
          >
            <swiper-slide
              class="slide"
              style="width:100px;height:100px;"
              v-for="(item, index) in infoModel.operatorCardPhone"
              :key="item.id"
            >
              <div v-if="item.urlBase" style="width: 100%;height: 96px;background: rgb(68,142,247);color: white">
                <span style="white-space:normal; word-break:break-all;overflow:hidden;">{{ item.fileName }}</span>
              </div>

              <img style="width: 100%;height: 96px"
                   v-if="!item.urlBase" :src="noDataPng" border="1">

            </swiper-slide>
            <!--              点我上传文件按钮-->
            <div class="clearfix">
              <a-upload
                listType="picture-card"
                name="file"
                :multiple="false"
                :action="importMinioUploadAction"
                :customRequest="e => selfUploadContract(e, 'operatorCardPhone')"
                :headers="tokenHeader"
                :showUploadList="false"
                :beforeUpload="importBeforeUpload"
                @change="importHandleChange"
              >
                <div v-if="infoModel.operatorCardPhone.length < 20">
                  <a-icon type="plus"/>
                  <div class="ant-upload-text">点我上传经办人手持身份证照片</div>
                </div>
              </a-upload>

            </div>

            <div class="swiper-button-next swiper-button-white" slot="button-next">
              <div>
                <!--                  <img src="../../../../assets/images/nextImg.png" alt=""/>-->
              </div>
            </div>
            <div class="swiper-button-prev swiper-button-white" slot="button-prev">
              <div>
                <!--                  <img src="../../../../assets/images/prevImg.png" alt=""/>-->
              </div>
            </div>
          </swiper>
        </div>
      </div>

    </a-card>

    <!--    机房设备照片-->
    <a-card v-if="steps.currentId == 'devicePhone'"
            style="margin-bottom:10px;
              float: left;width: 83%;left: 2%">
      <div slot="title">
        <span style="float: left;position: relative;top: 4px"> 机房设备照片</span>
      </div>
      <!--      文件上传-->
      <!--      附件-->
      <div>
                <a-form-model-item style="left: 5%;width: 85%;" label="上传资料备注：" v-bind="labelCol1Note">

          <a-textarea style="height: 77px"
                      @change="textareaChange('devicePhone','devicePhoneRemark')"
                      v-model="infoModel.devicePhoneRemark"
                      placeholder="机房设备照片"
          />
          <!--            :auto-size="{ minRows: 3, maxRows: 5 }"-->
        </a-form-model-item>
      </div>
      <div style="height: 70%">
        <a-upload
          name="file"
          :multiple="true"
          :action="importMinioUploadAction"
          :customRequest="e => selfUploadContract(e, 'devicePhone')"
          :headers="tokenHeader"
          :showUploadList="false"
          :beforeUpload="importBeforeUpload"
          @change="importHandleChange"
          style='margin-left: 90px'
        >
          <a-button> <a-icon type="upload" /> 上传文件 </a-button>
        </a-upload>
        <div class="thumb-example"  >
          <!-- swiper1 -->
          <swiper
            class="swiper gallery-top"
            :options="swiperOptionTop"
            ref="swiperTop"
          >
            <swiper-slide class="slide-1" v-for="(item, index) in infoModel.devicePhone" :key="item.id">
              <iframe
                v-if="item.urlBase"
                frameborder="1"
                :src="item.urlBase"
                ref="ifr"
                width="85%"
                height="445px"
                scrolling="auto">
              </iframe>
              <div><img style="width: 85%;height: 445px;border: 1px solid;"
                   v-if="!item.urlBase" :src="noDataPng" border="1">
              <a-button v-if="infoModel.devicePhone.length && item.urlBase"
                    style="display: block;margin-top: 1px;border-color: red;color: red;float: left"
                        danger @click="removeFile(item,'devicePhone')">移除
              </a-button>
              <a-button  style="display: block;position: relative;left:20px;margin-top: 10px;border-color: #1890FF;color: #1890FF"
                         v-if="infoModel.devicePhone.length && item.urlBase"
                         @click="jumpUrl(item.urlBase)">预览
              </a-button></div>
            </swiper-slide>
            <!--            <div
                          class="swiper-button-next swiper-button-white"
                          slot="button-next"
                        ></div>
                        <div
                          class="swiper-button-prev swiper-button-white"
                          slot="button-prev"
                        ></div>-->
          </swiper>
          <!-- swiper2 Thumbs -->
          <swiper
            class="swiper gallery-thumbs"
            :options="swiperOptionThumbs"
            ref="swiperThumbs"
          >
            <swiper-slide
              class="slide"
              style="width:100px;height:100px;"
              v-for="(item, index) in infoModel.devicePhone"
              :key="item.id"
            >
              <div v-if="item.urlBase" style="width: 100%;height: 96px;background: rgb(68,142,247);color: white">
                <span style="white-space:normal; word-break:break-all;overflow:hidden;">{{ item.fileName }}</span>
              </div>

              <img style="width: 100%;height: 96px"
                   v-if="!item.urlBase" :src="noDataPng" border="1">

            </swiper-slide>
            <!--              点我上传文件按钮-->
            <div class="clearfix">
              <a-upload
                listType="picture-card"
                name="file"
                :multiple="false"
                :action="importMinioUploadAction"
                :customRequest="e => selfUploadContract(e, 'devicePhone')"
                :headers="tokenHeader"
                :showUploadList="false"
                :beforeUpload="importBeforeUpload"
                @change="importHandleChange"
              >
                <div v-if="infoModel.devicePhone.length < 20">
                  <a-icon type="plus"/>
                  <div class="ant-upload-text">点我上传机房设备照片</div>
                </div>
              </a-upload>

            </div>

            <div class="swiper-button-next swiper-button-white" slot="button-next">
              <div>
                <!--                  <img src="../../../../assets/images/nextImg.png" alt=""/>-->
              </div>
            </div>
            <div class="swiper-button-prev swiper-button-white" slot="button-prev">
              <div>
                <!--                  <img src="../../../../assets/images/prevImg.png" alt=""/>-->
              </div>
            </div>
          </swiper>
        </div>
      </div>

    </a-card>

    <!--    短信模板-->
    <a-card v-if="steps.currentId == 'textMessage'"
            style="margin-bottom:10px;
              float: left;width: 83%;left: 2%">
      <div slot="title">
        <span style="float: left;position: relative;top: 4px"> 短信模板</span>
      </div>
      <!--      文件上传-->
      <!--      附件-->
      <div>
                <a-form-model-item style="left: 5%;width: 85%;" label="上传资料备注：" v-bind="labelCol1Note">

          <a-textarea style="height: 77px"
                      @change="textareaChange('textMessage','textMessageRemark')"
                      v-model="infoModel.textMessageRemark"
                      placeholder="短信模板"
          />
          <!--            :auto-size="{ minRows: 3, maxRows: 5 }"-->
        </a-form-model-item>
      </div>
      <div style="height: 70%">
        <a-upload
          name="file"
          :multiple="true"
          :action="importMinioUploadAction"
          :customRequest="e => selfUploadContract(e, 'textMessage')"
          :headers="tokenHeader"
          :showUploadList="false"
          :beforeUpload="importBeforeUpload"
          @change="importHandleChange"
          style='margin-left: 90px'
        >
          <a-button> <a-icon type="upload" /> 上传文件 </a-button>
        </a-upload>
        <div class="thumb-example"  >
          <!-- swiper1 -->
          <swiper
            class="swiper gallery-top"
            :options="swiperOptionTop"
            ref="swiperTop"
          >
            <swiper-slide class="slide-1" v-for="(item, index) in infoModel.textMessage" :key="item.id">
              <iframe
                v-if="item.urlBase"
                frameborder="1"
                :src="item.urlBase"
                ref="ifr"
                width="85%"
                height="445px"
                scrolling="auto">
              </iframe>
              <div><img style="width: 85%;height: 445px;border: 1px solid;"
                   v-if="!item.urlBase" :src="noDataPng" border="1">
              <a-button v-if="infoModel.textMessage.length && item.urlBase"
                    style="display: block;margin-top: 1px;border-color: red;color: red;float: left"
                        danger @click="removeFile(item,'textMessage')">移除
              </a-button>
              <a-button  style="display: block;position: relative;left:20px;margin-top: 10px;border-color: #1890FF;color: #1890FF"
                         v-if="infoModel.textMessage.length && item.urlBase"
                         @click="jumpUrl(item.urlBase)">预览
              </a-button></div>
            </swiper-slide>
            <!--            <div
                          class="swiper-button-next swiper-button-white"
                          slot="button-next"
                        ></div>
                        <div
                          class="swiper-button-prev swiper-button-white"
                          slot="button-prev"
                        ></div>-->
          </swiper>
          <!-- swiper2 Thumbs -->
          <swiper
            class="swiper gallery-thumbs"
            :options="swiperOptionThumbs"
            ref="swiperThumbs"
          >
            <swiper-slide
              class="slide"
              style="width:100px;height:100px;"
              v-for="(item, index) in infoModel.textMessage"
              :key="item.id"
            >
              <div v-if="item.urlBase" style="width: 100%;height: 96px;background: rgb(68,142,247);color: white">
                <span style="white-space:normal; word-break:break-all;overflow:hidden;">{{ item.fileName }}</span>
              </div>

              <img style="width: 100%;height: 96px"
                   v-if="!item.urlBase" :src="noDataPng" border="1">

            </swiper-slide>
            <!--              点我上传文件按钮-->
            <div class="clearfix">
              <a-upload
                listType="picture-card"
                name="file"
                :multiple="false"
                :action="importMinioUploadAction"
                :customRequest="e => selfUploadContract(e, 'textMessage')"
                :headers="tokenHeader"
                :showUploadList="false"
                :beforeUpload="importBeforeUpload"
                @change="importHandleChange"
              >
                <div v-if="infoModel.textMessage.length < 20">
                  <a-icon type="plus"/>
                  <div class="ant-upload-text">点我上传短信模板</div>
                </div>
              </a-upload>

            </div>

            <div class="swiper-button-next swiper-button-white" slot="button-next">
              <div>
                <!--                  <img src="../../../../assets/images/nextImg.png" alt=""/>-->
              </div>
            </div>
            <div class="swiper-button-prev swiper-button-white" slot="button-prev">
              <div>
                <!--                  <img src="../../../../assets/images/prevImg.png" alt=""/>-->
              </div>
            </div>
          </swiper>
        </div>
      </div>

    </a-card>
    <!--    端口类短信业务责任承诺书-->
    <a-card v-if="steps.currentId == 'textMessageBook'"
            style="margin-bottom:10px;
              float: left;width: 83%;left: 2%">
      <div slot="title">
        <span style="float: left;position: relative;top: 4px"> 端口类短信业务责任承诺书</span>
      </div>
      <!--      文件上传-->
      <!--      附件-->
      <div>
                <a-form-model-item style="left: 5%;width: 85%;" label="上传资料备注：" v-bind="labelCol1Note">

          <a-textarea style="height: 77px"
                      @change="textareaChange('textMessageBook','textMessageBookRemark')"
                      v-model="infoModel.textMessageBookRemark"
                      placeholder="端口类短信业务责任承诺书"
          />
          <!--            :auto-size="{ minRows: 3, maxRows: 5 }"-->
        </a-form-model-item>
      </div>
      <div style="height: 70%">
        <a-upload
          name="file"
          :multiple="true"
          :action="importMinioUploadAction"
          :customRequest="e => selfUploadContract(e, 'textMessageBook')"
          :headers="tokenHeader"
          :showUploadList="false"
          :beforeUpload="importBeforeUpload"
          @change="importHandleChange"
          style='margin-left: 90px'
        >
          <a-button> <a-icon type="upload" /> 上传文件 </a-button>
        </a-upload>
        <div class="thumb-example"  >
          <!-- swiper1 -->
          <swiper
            class="swiper gallery-top"
            :options="swiperOptionTop"
            ref="swiperTop"
          >
            <swiper-slide class="slide-1" v-for="(item, index) in infoModel.textMessageBook" :key="item.id">
              <iframe
                v-if="item.urlBase"
                frameborder="1"
                :src="item.urlBase"
                ref="ifr"
                width="85%"
                height="445px"
                scrolling="auto">
              </iframe>
              <div><img style="width: 85%;height: 445px;border: 1px solid;"
                   v-if="!item.urlBase" :src="noDataPng" border="1">
              <a-button  v-if="infoModel.textMessageBook.length && item.urlBase"
                    style="display: block;margin-top: 1px;border-color: red;color: red;float: left"
                        danger @click="removeFile(item,'textMessageBook')">移除
              </a-button>
              <a-button  style="display: block;position: relative;left:20px;margin-top: 10px;border-color: #1890FF;color: #1890FF"
                         v-if="infoModel.textMessageBook.length && item.urlBase"
                         @click="jumpUrl(item.urlBase)">预览
              </a-button></div>

            </swiper-slide>
            <!--            <div
                          class="swiper-button-next swiper-button-white"
                          slot="button-next"
                        ></div>
                        <div
                          class="swiper-button-prev swiper-button-white"
                          slot="button-prev"
                        ></div>-->
          </swiper>
          <!-- swiper2 Thumbs -->
          <swiper
            class="swiper gallery-thumbs"
            :options="swiperOptionThumbs"
            ref="swiperThumbs"
          >
            <swiper-slide
              class="slide"
              style="width:100px;height:100px;"
              v-for="(item, index) in infoModel.textMessageBook"
              :key="item.id"
            >
              <div v-if="item.urlBase" style="width: 100%;height: 96px;background: rgb(68,142,247);color: white">
                <span style="white-space:normal; word-break:break-all;overflow:hidden;">{{ item.fileName }}</span>
              </div>

              <img style="width: 100%;height: 96px"
                   v-if="!item.urlBase" :src="noDataPng" border="1">

            </swiper-slide>
            <!--              点我上传文件按钮-->
            <div class="clearfix">
              <a-upload
                listType="picture-card"
                name="file"
                :multiple="false"
                :action="importMinioUploadAction"
                :customRequest="e => selfUploadContract(e, 'textMessageBook')"
                :headers="tokenHeader"
                :showUploadList="false"
                :beforeUpload="importBeforeUpload"
                @change="importHandleChange"
              >
                <div v-if="infoModel.textMessageBook.length < 20">
                  <a-icon type="plus"/>
                  <div class="ant-upload-text">点我上传端口类短信业务责任承诺书</div>
                </div>
              </a-upload>

            </div>

            <div class="swiper-button-next swiper-button-white" slot="button-next">
              <div>
                <!--                  <img src="../../../../assets/images/nextImg.png" alt=""/>-->
              </div>
            </div>
            <div class="swiper-button-prev swiper-button-white" slot="button-prev">
              <div>
                <!--                  <img src="../../../../assets/images/prevImg.png" alt=""/>-->
              </div>
            </div>
          </swiper>
        </div>
      </div>

    </a-card>

    <!--    信息安全责任承诺书-->
    <a-card v-if="steps.currentId == 'secureBook'"
            style="margin-bottom:10px;
              float: left;width: 83%;left: 2%">
      <div slot="title">
        <span style="float: left;position: relative;top: 4px"> 信息安全责任承诺书</span>
      </div>
      <!--      文件上传-->
      <!--      附件-->
      <div>
                <a-form-model-item style="left: 5%;width: 85%;" label="上传资料备注：" v-bind="labelCol1Note">

          <a-textarea style="height: 77px"
                      @change="textareaChange('secureBook','secureBookRemark')"
                      v-model="infoModel.secureBookRemark"
                      placeholder="信息安全责任承诺书"
          />
          <!--            :auto-size="{ minRows: 3, maxRows: 5 }"-->
        </a-form-model-item>
      </div>
      <div style="height: 70%">
        <a-upload
          name="file"
          :multiple="true"
          :action="importMinioUploadAction"
          :customRequest="e => selfUploadContract(e, 'secureBook')"
          :headers="tokenHeader"
          :showUploadList="false"
          :beforeUpload="importBeforeUpload"
          @change="importHandleChange"
          style='margin-left: 90px'
        >
          <a-button> <a-icon type="upload" /> 上传文件 </a-button>
        </a-upload>
        <div class="thumb-example"  >
          <!-- swiper1 -->
          <swiper
            class="swiper gallery-top"
            :options="swiperOptionTop"
            ref="swiperTop"
          >
            <swiper-slide class="slide-1" v-for="(item, index) in infoModel.secureBook" :key="item.id">
              <iframe
                v-if="item.urlBase"
                frameborder="1"
                :src="item.urlBase"
                ref="ifr"
                width="85%"
                height="445px"
                scrolling="auto">
              </iframe>
              <div><img style="width: 85%;height: 445px;border: 1px solid;"
                   v-if="!item.urlBase" :src="noDataPng" border="1">
              <a-button v-if="infoModel.secureBook.length && item.urlBase"
                    style="display: block;margin-top: 1px;border-color: red;color: red;float: left"
                        danger @click="removeFile(item,'secureBook')">移除
              </a-button>
              <a-button  style="display: block;position: relative;left:20px;margin-top: 10px;border-color: #1890FF;color: #1890FF"
                         v-if="infoModel.secureBook.length && item.urlBase"
                         @click="jumpUrl(item.urlBase)">预览
              </a-button></div>
            </swiper-slide>
            <!--            <div
                          class="swiper-button-next swiper-button-white"
                          slot="button-next"
                        ></div>
                        <div
                          class="swiper-button-prev swiper-button-white"
                          slot="button-prev"
                        ></div>-->
          </swiper>
          <!-- swiper2 Thumbs -->
          <swiper
            class="swiper gallery-thumbs"
            :options="swiperOptionThumbs"
            ref="swiperThumbs"
          >
            <swiper-slide
              class="slide"
              style="width:100px;height:100px;"
              v-for="(item, index) in infoModel.secureBook"
              :key="item.id"
            >
              <div v-if="item.urlBase" style="width: 100%;height: 96px;background: rgb(68,142,247);color: white">
                <span style="white-space:normal; word-break:break-all;overflow:hidden;">{{ item.fileName }}</span>
              </div>

              <img style="width: 100%;height: 96px"
                   v-if="!item.urlBase" :src="noDataPng" border="1">

            </swiper-slide>
            <!--              点我上传文件按钮-->
            <div class="clearfix">
              <a-upload
                listType="picture-card"
                name="file"
                :multiple="false"
                :action="importMinioUploadAction"
                :customRequest="e => selfUploadContract(e, 'secureBook')"
                :headers="tokenHeader"
                :showUploadList="false"
                :beforeUpload="importBeforeUpload"
                @change="importHandleChange"
              >
                <div v-if="infoModel.secureBook.length < 20">
                  <a-icon type="plus"/>
                  <div class="ant-upload-text">点我上传信息安全责任承诺书</div>
                </div>
              </a-upload>

            </div>

            <div class="swiper-button-next swiper-button-white" slot="button-next">
              <div>
                <!--                  <img src="../../../../assets/images/nextImg.png" alt=""/>-->
              </div>
            </div>
            <div class="swiper-button-prev swiper-button-white" slot="button-prev">
              <div>
                <!--                  <img src="../../../../assets/images/prevImg.png" alt=""/>-->
              </div>
            </div>
          </swiper>
        </div>
      </div>

    </a-card>
    <!--    特殊资费审批（标准资费无需提供）-->
    <a-card v-if="steps.currentId == 'special'"
            style="margin-bottom:10px;
              float: left;width: 83%;left: 2%">
      <div slot="title">
        <span style="float: left;position: relative;top: 4px"> 特殊资费审批（标准资费无需提供）</span>
      </div>
      <!--      文件上传-->
      <!--      附件-->
      <div>
                <a-form-model-item style="left: 5%;width: 85%;" label="上传资料备注：" v-bind="labelCol1Note">

          <a-textarea style="height: 77px"
                      @change="textareaChange('special','specialRemark')"
                      v-model="infoModel.specialRemark"
                      placeholder="特殊资费审批（标准资费无需提供）"
          />
          <!--            :auto-size="{ minRows: 3, maxRows: 5 }"-->
        </a-form-model-item>
      </div>
      <div style="height: 70%">
        <a-upload
          name="file"
          :multiple="true"
          :action="importMinioUploadAction"
          :customRequest="e => selfUploadContract(e, 'special')"
          :headers="tokenHeader"
          :showUploadList="false"
          :beforeUpload="importBeforeUpload"
          @change="importHandleChange"
          style='margin-left: 90px'
        >
          <a-button> <a-icon type="upload" /> 上传文件 </a-button>
        </a-upload>
        <div class="thumb-example"  >
          <!-- swiper1 -->
          <swiper
            class="swiper gallery-top"
            :options="swiperOptionTop"
            ref="swiperTop"
          >
            <swiper-slide class="slide-1" v-for="(item, index) in infoModel.special" :key="item.id">
              <iframe
                v-if="item.urlBase"
                frameborder="1"
                :src="item.urlBase"
                ref="ifr"
                width="85%"
                height="445px"
                scrolling="auto">
              </iframe>
              <div><img style="width: 85%;height: 445px;border: 1px solid;"
                   v-if="!item.urlBase" :src="noDataPng" border="1">
              <a-button v-if="infoModel.special.length && item.urlBase"
                    style="display: block;margin-top: 1px;border-color: red;color: red;float: left"
                        danger @click="removeFile(item,'special')">移除
              </a-button>
              <a-button  style="display: block;position: relative;left:20px;margin-top: 10px;border-color: #1890FF;color: #1890FF"
                         v-if="infoModel.special.length && item.urlBase"
                         @click="jumpUrl(item.urlBase)">预览
              </a-button></div>
            </swiper-slide>
            <!--            <div
                          class="swiper-button-next swiper-button-white"
                          slot="button-next"
                        ></div>
                        <div
                          class="swiper-button-prev swiper-button-white"
                          slot="button-prev"
                        ></div>-->
          </swiper>
          <!-- swiper2 Thumbs -->
          <swiper
            class="swiper gallery-thumbs"
            :options="swiperOptionThumbs"
            ref="swiperThumbs"
          >
            <swiper-slide
              class="slide"
              style="width:100px;height:100px;"
              v-for="(item, index) in infoModel.special"
              :key="item.id"
            >
              <div v-if="item.urlBase" style="width: 100%;height: 96px;background: rgb(68,142,247);color: white">
                <span style="white-space:normal; word-break:break-all;overflow:hidden;">{{ item.fileName }}</span>
              </div>

              <img style="width: 100%;height: 96px"
                   v-if="!item.urlBase" :src="noDataPng" border="1">

            </swiper-slide>
            <!--              点我上传文件按钮-->
            <div class="clearfix">
              <a-upload
                listType="picture-card"
                name="file"
                :multiple="false"
                :action="importMinioUploadAction"
                :customRequest="e => selfUploadContract(e, 'special')"
                :headers="tokenHeader"
                :showUploadList="false"
                :beforeUpload="importBeforeUpload"
                @change="importHandleChange"
              >
                <div v-if="infoModel.special.length < 20">
                  <a-icon type="plus"/>
                  <div class="ant-upload-text">点我上传特殊资费审批（标准资费无需提供）</div>
                </div>
              </a-upload>

            </div>

            <div class="swiper-button-next swiper-button-white" slot="button-next">
              <div>
                <!--                  <img src="../../../../assets/images/nextImg.png" alt=""/>-->
              </div>
            </div>
            <div class="swiper-button-prev swiper-button-white" slot="button-prev">
              <div>
                <!--                  <img src="../../../../assets/images/prevImg.png" alt=""/>-->
              </div>
            </div>
          </swiper>
        </div>
      </div>

    </a-card>
    <!--    入网签报-->
    <a-card v-if="steps.currentId == 'networkAccess'"
            style="margin-bottom:10px;
              float: left;width: 83%;left: 2%">
      <div slot="title">
        <span style="float: left;position: relative;top: 4px"> 入网签报</span>
      </div>
      <!--      文件上传-->
      <!--      附件-->
      <div>
                <a-form-model-item style="left: 5%;width: 85%;" label="上传资料备注：" v-bind="labelCol1Note">

          <a-textarea style="height: 77px"
                      @change="textareaChange('networkAccess','networkAccessRemark')"
                      v-model="infoModel.networkAccessRemark"
                      placeholder="上传入网签报资料备注"
          />
          <!--            :auto-size="{ minRows: 3, maxRows: 5 }"-->
        </a-form-model-item>
      </div>
      <div style="height: 70%">
        <a-upload
          name="file"
          :multiple="true"
          :action="importMinioUploadAction"
          :customRequest="e => selfUploadContract(e, 'networkAccess')"
          :headers="tokenHeader"
          :showUploadList="false"
          :beforeUpload="importBeforeUpload"
          @change="importHandleChange"
          style='margin-left: 90px'
        >
          <a-button> <a-icon type="upload" /> 上传文件 </a-button>
        </a-upload>
        <div class="thumb-example"  >
          <!-- swiper1 -->
          <swiper
            class="swiper gallery-top"
            :options="swiperOptionTop"
            ref="swiperTop"
          >
            <swiper-slide class="slide-1" v-for="(item, index) in infoModel.networkAccess" :key="item.id">
              <iframe
                v-if="item.urlBase"
                frameborder="1"
                :src="item.urlBase"
                ref="ifr"
                width="85%"
                height="445px"
                scrolling="auto">
              </iframe>
              <div><img style="width: 85%;height: 445px;border: 1px solid;"
                   v-if="!item.urlBase" :src="noDataPng" border="1">
              <a-button  v-if="infoModel.networkAccess.length && item.urlBase"
                    style="display: block;margin-top: 1px;border-color: red;color: red;float: left"
                        danger @click="removeFile(item,'networkAccess')">移除
              </a-button>
              <a-button  style="display: block;position: relative;left:20px;margin-top: 10px;border-color: #1890FF;color: #1890FF"
                         v-if="infoModel.networkAccess.length && item.urlBase"
                         @click="jumpUrl(item.urlBase)">预览
              </a-button></div>
            </swiper-slide>
            <!--            <div
                          class="swiper-button-next swiper-button-white"
                          slot="button-next"
                        ></div>
                        <div
                          class="swiper-button-prev swiper-button-white"
                          slot="button-prev"
                        ></div>-->
          </swiper>
          <!-- swiper2 Thumbs -->
          <swiper
            class="swiper gallery-thumbs"
            :options="swiperOptionThumbs"
            ref="swiperThumbs"
          >
            <swiper-slide
              class="slide"
              style="width:100px;height:100px;"
              v-for="(item, index) in infoModel.networkAccess"
              :key="item.id"
            >
              <div v-if="item.urlBase" style="width: 100%;height: 96px;background: rgb(68,142,247);color: white">
                <span style="white-space:normal; word-break:break-all;overflow:hidden;">{{ item.fileName }}</span>
              </div>

              <img style="width: 100%;height: 96px"
                   v-if="!item.urlBase" :src="noDataPng" border="1">

            </swiper-slide>
            <!--              点我上传文件按钮-->
            <div class="clearfix">
              <a-upload
                listType="picture-card"
                name="file"
                :multiple="false"
                :action="importMinioUploadAction"
                :customRequest="e => selfUploadContract(e, 'networkAccess')"
                :headers="tokenHeader"
                :showUploadList="false"
                :beforeUpload="importBeforeUpload"
                @change="importHandleChange"
              >
                <div v-if="infoModel.networkAccess.length < 20">
                  <a-icon type="plus"/>
                  <div class="ant-upload-text">点我上传入网签报资料</div>
                </div>
              </a-upload>

            </div>

            <div class="swiper-button-next swiper-button-white" slot="button-next">
              <div>
                <!--                  <img src="../../../../assets/images/nextImg.png" alt=""/>-->
              </div>
            </div>
            <div class="swiper-button-prev swiper-button-white" slot="button-prev">
              <div>
                <!--                  <img src="../../../../assets/images/prevImg.png" alt=""/>-->
              </div>
            </div>
          </swiper>
        </div>
      </div>

    </a-card>
    <!--    集团价格审批-->
    <a-card v-if="steps.currentId == 'groupPriceApproval'"
            style="margin-bottom:10px;
              float: left;width: 83%;left: 2%">
      <div slot="title">
        <span style="float: left;position: relative;top: 4px"> 集团价格审批</span>
      </div>
      <!--      文件上传-->
      <!--      附件-->
      <div>
                <a-form-model-item style="left: 5%;width: 85%;" label="上传资料备注：" v-bind="labelCol1Note">

          <a-textarea style="height: 77px"
                      @change="textareaChange('groupPriceApproval','groupPriceApprovalRemark')"
                      v-model="infoModel.groupPriceApprovalRemark"
                      placeholder="集团价格审批"
          />
          <!--            :auto-size="{ minRows: 3, maxRows: 5 }"-->
        </a-form-model-item>
      </div>
      <div style="height: 70%">
        <a-upload
          name="file"
          :multiple="true"
          :action="importMinioUploadAction"
          :customRequest="e => selfUploadContract(e, 'groupPriceApproval')"
          :headers="tokenHeader"
          :showUploadList="false"
          :beforeUpload="importBeforeUpload"
          @change="importHandleChange"
          style='margin-left: 90px'
        >
          <a-button> <a-icon type="upload" /> 上传文件 </a-button>
        </a-upload>
        <div class="thumb-example"  >
          <!-- swiper1 -->
          <swiper
            class="swiper gallery-top"
            :options="swiperOptionTop"
            ref="swiperTop"
          >
            <swiper-slide class="slide-1" v-for="(item, index) in infoModel.groupPriceApproval" :key="item.id">
              <iframe
                v-if="item.urlBase"
                frameborder="1"
                :src="item.urlBase"
                ref="ifr"
                width="85%"
                height="445px"
                scrolling="auto">
              </iframe>
              <div><img style="width: 85%;height: 445px;border: 1px solid;"
                   v-if="!item.urlBase" :src="noDataPng" border="1">
              <a-button v-if="infoModel.groupPriceApproval.length && item.urlBase"
                    style="display: block;margin-top: 1px;border-color: red;color: red;float: left"
                        danger @click="removeFile(item,'groupPriceApproval')">移除
              </a-button>
              <a-button  style="display: block;position: relative;left:20px;margin-top: 10px;border-color: #1890FF;color: #1890FF"
                         v-if="infoModel.groupPriceApproval.length && item.urlBase"
                         @click="jumpUrl(item.urlBase)">预览
              </a-button></div>
            </swiper-slide>
            <!--            <div
                          class="swiper-button-next swiper-button-white"
                          slot="button-next"
                        ></div>
                        <div
                          class="swiper-button-prev swiper-button-white"
                          slot="button-prev"
                        ></div>-->
          </swiper>
          <!-- swiper2 Thumbs -->
          <swiper
            class="swiper gallery-thumbs"
            :options="swiperOptionThumbs"
            ref="swiperThumbs"
          >
            <swiper-slide
              class="slide"
              style="width:100px;height:100px;"
              v-for="(item, index) in infoModel.groupPriceApproval"
              :key="item.id"
            >
              <div v-if="item.urlBase" style="width: 100%;height: 96px;background: rgb(68,142,247);color: white">
                <span style="white-space:normal; word-break:break-all;overflow:hidden;">{{ item.fileName }}</span>
              </div>

              <img style="width: 100%;height: 96px"
                   v-if="!item.urlBase" :src="noDataPng" border="1">

            </swiper-slide>
            <!--              点我上传文件按钮-->
            <div class="clearfix">
              <a-upload
                listType="picture-card"
                name="file"
                :multiple="false"
                :action="importMinioUploadAction"
                :customRequest="e => selfUploadContract(e, 'groupPriceApproval')"
                :headers="tokenHeader"
                :showUploadList="false"
                :beforeUpload="importBeforeUpload"
                @change="importHandleChange"
              >
                <div v-if="infoModel.groupPriceApproval.length < 20">
                  <a-icon type="plus"/>
                  <div class="ant-upload-text">点我上传集团价格审批</div>
                </div>
              </a-upload>

            </div>

            <div class="swiper-button-next swiper-button-white" slot="button-next">
              <div>
                <!--                  <img src="../../../../assets/images/nextImg.png" alt=""/>-->
              </div>
            </div>
            <div class="swiper-button-prev swiper-button-white" slot="button-prev">
              <div>
                <!--                  <img src="../../../../assets/images/prevImg.png" alt=""/>-->
              </div>
            </div>
          </swiper>
        </div>
      </div>

    </a-card>
    <a-card  v-if='isPhoneshow'    ref="floatButton"
             class="float-infoPhone">
      <div class="thumb-example1"  >
        <!-- swiper1 -->
        <swiper
          class="swiper gallery-top1"
          :options="swiperOptionTop"
          ref="swiperTop"
        >

        </swiper>
        <!-- swiper2 Thumbs -->
        <swiper
          class="swiper gallery-thumbs"
          :options="swiperOptionThumbs"
          ref="swiperThumbs"
        >
          <swiper-slide  v-for="(item, index) in phoneList" :key="item.id"
                        class="slide"
                        style="width:290px;height:200px;">
            <div  v-if="item.urlBase" style="width:290px;height: 96px;background: rgb(68,142,247);color: white">
            <iframe
              v-if="item.urlBase"
              frameborder="1"
              :src="item.urlBase"
              ref="ifr"
              @preview="handlePreview"
              @change="handleChange"
              scrolling="auto">
            </iframe>
              <div style="display:flex ;justify-content:center;height:100%;">
                <a-button @click='selfUploadContractView(item)' >使用</a-button>
                <a-button style='margin-left: 10px' @click="jumpUrl(item.urlBase)">预览</a-button>
              </div>
            </div>
                    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                      <img alt="example" style="width: 100%" :src="previewImage" />
                    </a-modal>
          </swiper-slide>
          <div class="swiper-button-next swiper-button-white" slot="button-next">
            <div>
            </div>
          </div>
          <div class="swiper-button-prev swiper-button-white" slot="button-prev">
            <div>
            </div>
          </div>
        </swiper>
      </div>
    </a-card>
    <div @click='showPhone(true,true)'
       ref="floatButton"
      class="float-info floating-button"
      :style="{'width': 80 + 'px', 'height': 80 + 'px', 'left':   90+'%' , 'top': 80 + '%'}"
    >
      <a-badge :count=fileShoppingNumber>
        <img style="width: 89%;height: 81%;position: relative;top: 10%" :src="fileShopping" border="1">
      </a-badge>
    </div>

  </a-spin>

 </template>

<script>
import {getAction, httpAction, postAction} from "@api/manage";
/*无数据图片*/
import noDataPng from '@/assets/nodata.png'
import Vue from "vue";
import {ACCESS_TOKEN, TENANT_ID} from "@/store/mutation-types";
import fileShopping from '@assets/file_shopping.png'


let Base64 = require('js-base64').Base64

function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}
export default {
  name: 'TaskUploadData',
  inject: ['closeCurrent'],
  components: {
    noDataPng
  },
  data() {
    return {
      // 购物车图标数
      fileShoppingNumber:0,
      fileShopping: fileShopping,
      idCurrent :'',
      previewVisible: false,
      previewImage: '',
      btnStyle:{
        "fontSize":'small',
        "top":'60vh',
        "left":'90vw'
      },
      //缩略与大图数据源
      swiperId: 1,
      //轮播配置
      swiperOptionTop: {
        zoom: true,
        loop: false,
        loopedSlides: 5, // looped slides should be the same
        spaceBetween: 10,
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        // autoplay: {  //自动轮播
        //   delay: 2000,
        //   disableOnInteraction: false
        // },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      },
      swiperOptionThumbs: {
        loop: false,
        loopedSlides: 5, // looped slides should be the same
        spaceBetween: 10,
        centeredSlides: true,
        slidesPerView: 'auto',
        touchRatio: 0.2,
        slideToClickedSlide: true,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      },
      /**无数据图片*/
      noDataPng: noDataPng,
      url: {
        "getInfoDataById": "/smsCheck/customerInfo/queryById",
        "getInfoDataByInfoId": "/smsCheck/customerData/queryDataLogByInfoId",
        // 上传文件
        "minioUpload": "/smsCheck/customerData/uploadMinio",
      },
      //是否批量上传
      batchImproves: false,
      // 稽核结果
      specialResult: {},
      // 全局是否是在加载中
      uploading: false,
      //上级传参
      query: {
        data: {},
      },
      // 客户资料信息
      notes:"",
      phoneList:'',
      infoModel: {
        staffName:"",
        customerNo :"",
        userNo:"",
        networkAccessTime:"",
        infoId:"",
        //是否完成整改
        isComplete:"",
        //资料是否完整
        isAll:"",
        //签约号码与证书下发码号是否一致
        isSigningNumber:"",
        //是否为CSP商
        isCsp:"",
        //码号证书营业执照合同签约方主体是否一致
        codeNumberBusinessLicense:"",
        //码号使用单位联系人手机号
        codeNumberContactPhone:"",
        //客户经理手机号
        managePhone:"",
        //用户发展员工
        staffNo:"",
        //号码用途
        numberUse:"",
        //码号
        codeNumber:"",
        //用户状态
        userState:"",
        // 材料补不全有特审
        materialLabel: "0",
        // 用户类型
        userLable: "0",
        // 申请复开号码
        openingNumber: "",
        // 客户名称
        customerName: "",
        // 最后一次关停时间
        shutdownTime: "",
        // 关停标签
        shutdownLabel: "0",
        // 关停标签-其他
        shutdownLabelOther: "",
        //合同到期时间
        contractDate:[{}],
        contractDateDateIs:"",
        contractDateDate:"",
        contractDateRemark:"",
        //'营业执照到期时间
        businessLicenseDate:[{}],
        businessLicenseDateDate:"",
        businessLicenseDateDateIs:"",
        businessLicenseDateRemark:"",
        //码号证书到期时间
        codeNumberDate:[{}],
        codeNumberDateDate:"",
        codeNumberDateDateIs:"",
        codeNumberDateRemark:"",
        //'备案通知到期时间
        filingsDate:[{}],
        filingsDateDate:"",
        filingsDateDateIs:"",
        filingsDateRemark:"",
        //增值业务许可证到期时间
        permitDate:[{}],
        permitDateDate:"",
        permitDateRemark:"",
        permitDateDateIs:"",
        //法人/责任人证件
        corporationCard:[{}],
        corporationCardRemark:"",
        //责任人授权书
        personResponsible:[{}],
        personResponsibleRemark:"",
        //经办人证件
        operatorCard:[{}],
        operatorCardRemark:"",
        //经办人手持身份证照片（背景需为电信营业厅或白墙)
        operatorCardPhone:[{}],
        operatorCardPhoneRemark:"",
        //机房设备照片'
        devicePhone:[{}],
        devicePhoneRemark:"",
        //短信模板'
        textMessage:[{}],
        textMessageRemark:"",
        //端口类短信业务责任承诺书'
        textMessageBook:[{}],
        textMessageBookRemark:"",
        //信息安全责任承诺书
        secureBook:[{}],
        secureBookRemark:"",
        //特殊资费审批（标准资费无需提供
        special:[{}],
        specialRemark:"",
        //入网签报
        networkAccess:[{}],
        networkAccessRemark:"",
        //集团价格审批
        groupPriceApproval:[{}],
        groupPriceApprovalRemark:"",

      },
      //表单验证
      rules: {
        permitDateDate:[
          {required: true, message: '必须输增值业务许可证到期时间'},
        ],
        filingsDateDate:[
          {required: true, message: '必须输备案证书到期时间'},
        ],
        codeNumberDateDate:[
          {required: true, message: '必须输码号证书到期时间'},
        ],
        openingNumber: [
          {required: true, message: '必须输入手机号'},
        ],
        contractDateDate: [
          {required: true, message: '必须输入合同到期时间'},
        ],
        businessLicenseDateDate: [
          {required: true, message: '必须输入营业执照到期时间'},
        ],
        codeNumberContactPhone: [
          {required: true, message: '请输入单位联系人手机号!', trigger: 'blur'}, {validator: this.isPhone}
        ],
        managePhone: [
          {required: true, message: '请输入客户经理手机号!', trigger: 'blur'}, {validator: this.isPhone}
        ],
        customerName: [
          {required: true, message: '必须输入客户名称'},
        ],
        userState: [
          {required: true, message: '必须输入用户状态'},
        ],
        codeNumber : [
          {required: true, message: '必须输入码号'},
        ],
        numberUse: [
          {required: true, message: '必须输入号码用途'},
        ],
        staffNo: [
          {required: true, message: '必须输入用户发展员工'},
        ],
        isCsp: [
          {required: true, message: '必须输入是否为isCsp商'},
        ],
        codeNumberBusinessLicense: [
          {required: true, message: '必须选择是否一致'},
        ],
        isSigningNumber: [
          {required: true, message: '请选择是否一致'},
        ],
        isAll: [
          {required: true, message: '必须选择资料是否完整'},
        ],
        isComplete: [
          {required: true, message: '必须选择是否完成整改'},
        ],
        contractDateDateIs: [
          {required: true, message: '必须选择合同到期时间是否长期'},
        ],
        businessLicenseDateDateIs: [
          {required: true, message: '必须选择营业执照到期时间是否长期'},
        ],
        codeNumberDateDateIs: [
          {required: true, message: '必须选择码号证书有效期是否长期'},
        ],
        filingsDateDateIs: [
          {required: true, message: '必须选择备案通知是否长期'},
        ],
        permitDateDateIs:[
          {required: true, message: '必须选择增值业务许可证是否长期'},
        ],
      },
      labelCol4: {
        labelCol: {
          xs: {span: 24},
          sm: {span: 10},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 12},
        }
      },
      labelCol5: {
        labelCol: {
          xs: {span: 24},
          sm: {span: 14},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 8},
        }
      },
      labelCol1: {
        labelCol: {
          xs: {span: 24},
          sm: {span: 2},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 22},
        }
      },
      labelCol6: {
        labelCol: {
          xs: {span: 24},
          sm: {span:10},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 12},
        }
      },
      labelCol8: {
        labelCol: {
          xs: {span: 24},
          sm: {span: 10},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 12},
        }
      },
      labelCol1Note: {
        labelCol: {
          xs: {span: 24},
          sm: {span: 4},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 14},
        }
      },
      labelCol1Note2: {
        labelCol: {
          xs: {span: 24},
          sm: {span: 6},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 14},
        }
      },
      isPhoneshow:false,
      // 步骤条相关
      steps: {
        // 当前所在第几部
        current: 0,
        currentId: "",
        stepsNow: {},
        steps00: [
          {
            title: '上传合同资料',
            content: 'First-content',
            id: "contractDate",
            status: "wait"
          },
          {
            title: '上传营业执照资料',
            content: 'First-content',
            id: "businessLicenseDate",
            status: "wait"
          },
          {
            title: '上传码号证书资料',
            content: 'First-content',
            id: "codeNumberDate",
            status: "wait"
          },
          {
            title: '上传备案通知资料',
            content: 'First-content',
            id: "filingsDate",
            status: "wait"
          },{
            title: '上传增值业务许可证资料',
            content: 'First-content',
            id: "permitDate",
            status: "wait"
          }, {
            title: '上传法人/责任人证件资料',
            content: 'First-content',
            id: "corporationCard",
            status: "wait"
          },{
            title: '上传责任人授权书资料',
            content: 'First-content',
            id: "personResponsible",
            status: "wait"
          },{
            title: '上传经办人证件资料',
            content: 'First-content',
            id: "operatorCard",
            status: "wait"
          },{
            title: '上传入网签报资料',
            content: 'First-content',
            id: "networkAccess",
            status: "wait"
          },{
            title: '上传集团价格审批资料',
            content: 'First-content',
            id: "groupPriceApproval",
            status: "wait"
          },{
            title: '上传机房设备照片',
            content: 'First-content',
            id: "devicePhone",
            status: "wait"
          }, {
            title: '上传短信模板',
            content: 'First-content',
            id: "textMessage",
            status: "wait"
          },{
            title: '上传信息安全责任承诺书',
            content: 'First-content',
            id: "secureBook",
            status: "wait"
          },{
            title: '上传经办人手持身份证照片（背景需为电信营业厅或白墙）',
            content: 'First-content',
            id: "operatorCardPhone",
            status: "wait"
          },
          {
            title: '上传端口类短信业务责任承诺书',
            content: 'First-content',
            id: "textMessageBook",
            status: "wait"
          },{
            title: '上传特殊资费审批（标准资费无需提供）资料',
            content: 'First-content',
            id: "special",
            status: "wait"
          },
        ],

        // 单位户
        stepUserLable1: [
          {
            title: '使用人证件',
            content: 'First-content',
            id: "userCertificate",
            status: "wait"
          },
          {
            title: '营业执照副本(盖公章)',
            content: 'First-content',
            id: "businessLicense",
            status: "wait"
          },
          {
            title: '介绍信',
            content: 'First-content',
            id: "letterIntroduction",
            status: "wait"
          }
        ],
        // 个人户
        stepUserLable0: [
          {
            title: '号卡照片',
            content: 'First-content',
            id: "numberCard",
            status: "wait"
          },
        ],
        // 材料标签
        shutdownLabel0: [
          {
            title: '消费凭证',
            content: 'First-content',
            id: "consumptionVoucher",
            status: "wait"
          },
        ],
        // 承诺视频
        shutdownLabel5: [
          {
            title: '承诺视频',
            content: 'First-content',
            id: "commitmentVideo",
            status: "wait"
          },
        ],


      },

    }
  },
  computed: {
    importMinioUploadAction() {
      return window._CONFIG['domianURL'] + this.url.minioUpload;
    },
    tokenHeader() {
      let head = {'X-Access-Token': Vue.ls.get(ACCESS_TOKEN)}
      let tenantid = Vue.ls.get(TENANT_ID)
      if (tenantid) {
        head['tenant-id'] = tenantid
      }
      return head;
    }
  },
  props: {
    itemWidth: {            // 按钮宽度
      type: Number,
      default: 55
    },
    itemHeight: {           // 按钮高度
      type: Number,
      default: 55
    },
    gapWidth: {             // 距离左右两边距离
      type: Number,
      default: 15
    },
    coefficientHeight: {    // 从上到下距离比例
      type: Number,
      default: 0.55
    }
    },
  watch: {},
  created() {
    // 是否批量上传
    this.infoModel.infoId=this.$route.query.id;
    this.batchImproves = this.$route.query.batchImproves;
    // 步骤条默认公用
    this.steps.stepsNow = this.steps.steps00;
    this.steps.currentId = this.steps.stepsNow[0].id
    if (this.batchImproves) {
      //批量上传id
      this.ids = this.$route.query.ids;
    } else {
      //客户ID
      this.query.infoId = this.$route.query.id;
      this.getInfoDataByInfoId(this.query.infoId);
      // 获取客户基础信息
      this.getInfoDataById(this.query.infoId);

    }


  },
  mounted() {
    // 实现swiper双向控制
    this.$nextTick(() => {
      const swiperTop = this.$refs.swiperTop.swiper
      const swiperThumbs = this.$refs.swiperThumbs.swiper
      swiperTop.controller.control = swiperThumbs
      swiperThumbs.controller.control = swiperTop
    })
    // /**监听视频拨放*/
    // this.$refs.myVideo.addEventListener("play", () => {
    //   this.openTimer();
    // });
    // /**监听视频暂停*/
    // this.$refs.myVideo.addEventListener("pause", () => {
    //   this.closeTimer();
    // });
  },

  methods: {
    handleCancel() {
      this.previewVisible = false;
    },
    async handlePreview(file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj);
      }
      this.previewImage = file.url || file.preview ||file.urlBase ;
      this.previewVisible = true;
    },
    handleChange({ fileList }) {
      this.fileList = fileList;
    },
    showPhone(isShow,msg){
      var data = {
        customerNo:  this.infoModel.customerNo,
        stepsId: this.steps.stepsNow[this.steps.current].id,
        //1:行短稽核 2：物联网业务稽核 3.复开审批 4.中继线稽核
        type:'1'
      }
      getAction('/smsCheck/customerInfo/phone/customerPhone', data).then((res) => {
        if (res.success) {
          this.phoneList=JSON.parse(res.result);
          if (this.phoneList!==null && this.phoneList.length!==0){
            this.fileShoppingNumber = this.phoneList.length
            if (this.isPhoneshow === false && isShow) {
              this.isPhoneshow = true;
            }else {
              this.isPhoneshow = false;
            }
          }else {
            this.fileShoppingNumber = 0 ;
            if (msg){
              this.$message.warning("此类无历史上传");
            }
          }
        }else {
          this.fileShoppingNumber = 0 ;
        }
      })
    },
    hoverBtnClick(){
      alert('触发点击事件');
    },
    backDate(name){
      if (name==='contractDate'){
        this.infoModel.contractDateDateIs="1"
        this.infoModel.contractDateDate=""
      }
      if (name==='businessLicenseDate'){
        this.infoModel.businessLicenseDateDateIs="1"
        this.infoModel.businessLicenseDateDate=""
      }
      if (name==='codeNumberDate'){
        this.infoModel.codeNumberDateDateIs="1"
        this.infoModel.codeNumberDateDate=""
      }
      if (name==='filingsDate'){
        this.infoModel.filingsDateDateIs="1"
        this.infoModel.filingsDateDate=""
      }
      if (name==='permitDate'){
        this.infoModel.permitDateDateIs="1"
        this.infoModel.permitDateDate=""
      }
    },
    isPhone(rule, value, callback) {
      if (!value || new RegExp(/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/).test(value)) {
        callback();
      } else {
        callback("您的手机号码格式不正确!");
      }

    },
    // 点击方法 url为传入的第三方链接或网址 如'www.baidu.com' url前面不要加协议哦！
    jumpUrl(url){
      var a = document.createElement("a");
      a.setAttribute("href", url);
      a.setAttribute("target", "_blank");
      a.click();
     },
    /**备注坚听*/
    textareaChange(name, nameRemark) {
      if (this.infoModel[nameRemark].length > 0) {
        this.steps.stepsNow[this.steps.current].status = "finish"
      } else if (this.infoModel[name].length > 0 && this.infoModel[name][0].urlBase) {
        this.steps.stepsNow[this.steps.current].status = "finish"
      } else {
        this.steps.stepsNow[this.steps.current].status = "wait"
      }
    },
    // 步骤条动态变化
    stepLoading() {
      this.steps.stepsNow = this.steps.stepsNow.splice(0, 16)
      //材料不全有特审步骤条
      this.stepsMaterialLabel()
      /**用户标签点击事件*/
      this.userLableClick()
      /**材料标签点击事件*/
      this.shutdownLabelClick()
    },
    //材料不全有特审步骤条
    stepsMaterialLabel() {
      if (this.infoModel.materialLabel == "0" || this.infoModel.shutdownLabel == "999") {
        let stepsMaterial = this.steps.stepsMaterial;
        for (var i in stepsMaterial) {
          this.steps.stepsNow.push(stepsMaterial[i])
        }
      }
   },
    /**用户标签点击事件*/
    userLableClick() {
      if (this.infoModel[name].length > 0) {
        this.steps.stepsNow[this.steps.current].status = "finish"
      } else if (this.infoModel[name].length > 0 && this.infoModel[name][0].urlBase) {
        this.steps.stepsNow[this.steps.current].status = "finish"
      } else {
        this.steps.stepsNow[this.steps.current].status = "wait"
      }
    },
    /**材料标签点击事件*/
    shutdownLabelClick() {
      var that = this;
      //材料不全有特审步骤条
      //that.stepsMaterialLabel();
      let shutdownLabel = that.infoModel.shutdownLabel;
      switch (shutdownLabel) {
        case "0":
          let shutdownLabel0 = this.steps.shutdownLabel0;
          for (var i in shutdownLabel0) {
            this.steps.stepsNow.push(shutdownLabel0[i])
          }
          break;
        case "5":
          let shutdownLabel5 = this.steps.shutdownLabel5;
          for (var j in shutdownLabel5) {
            this.steps.stepsNow.push(shutdownLabel5[j])
          }
          break;
      }
      if (this.infoModel.shutdownLabel == "999"){
        let shutdownLabel0 = this.steps.shutdownLabel0;
        for (var i in shutdownLabel0) {
          this.steps.stepsNow.push(shutdownLabel0[i])
        }
        let shutdownLabel5 = this.steps.shutdownLabel5;
        for (var j in shutdownLabel5) {
          this.steps.stepsNow.push(shutdownLabel5[j])
        }
      }
    },

    /**移除文件*/
    removeFile(fileData, fileAttribute) {
      let that = this.infoModel;
      //处理轮播数据
      let swiperImg = that[fileAttribute];
      if (swiperImg) {
        let number = swiperImg.indexOf(fileData);
        swiperImg.splice(number, 1)
        if (swiperImg.length == 0) {
          swiperImg.push({})
          let textId = fileAttribute + "Remark";
          if (this.infoModel[textId].trim() > 0) {
            this.steps.stepsNow[this.steps.current].status = "finish"
          } else {
            this.steps.stepsNow[this.steps.current].status = "wait"
          }
        } else {
          this.steps.stepsNow[this.steps.current].status = "finish"
        }
        that[fileAttribute] = swiperImg
      }
    },
    selfUploadContractView(item) {
      this.idCurrent= this.steps.stepsNow[this.steps.current].id;
      var fileAttribute =this.steps.stepsNow[this.steps.current].id;
      var that = this;

      that.swiperId = that.swiperId + 1;
      console.log(that.swiperId)
      //文件链接
      let swipData = item;
      if (that.infoModel[fileAttribute][0].urlBase) {
        that.infoModel[fileAttribute].push(swipData)
      } else {
        that.infoModel[fileAttribute] = []
        //数据发生变化
        that.infoModel[fileAttribute][0] = swipData;
      }
      // 改变步骤条状态
      if (that.infoModel[fileAttribute].length > 0) {
        that.steps.stepsNow[that.steps.current].status = "finish"
      } else {
        that.steps.stepsNow[that.steps.current].status = "wait"
      }
      this.$message.success(that.steps.stepsNow[that.steps.current].title+"上传成功");
    },
    /**自定义的上传文件方法*/
    selfUploadContract(data, fileAttribute) {
      var that = this;
      if (data.file) {
        let formData = new FormData();
        formData.append('file', data.file)
        postAction(this.url.minioUpload, formData).then((res) => {
          if (res.success) {
            that.swiperId = that.swiperId + 1;
            console.log(that.swiperId)
            //文件链接
            let filePath = res.message;
            let swipData = {
              id: that.swiperId,
              urlBase: window._CONFIG['onlinePreviewDomainURL'] + '?url='
                + encodeURIComponent(
                  Base64.encode(
                    (filePath)
                  )),
              url: filePath,
              fileName: data.file.name
            }
            if (that.infoModel[fileAttribute][0].urlBase) {
              that.infoModel[fileAttribute].push(swipData)
            } else {
              that.infoModel[fileAttribute] = []
              //数据发生变化
              that.infoModel[fileAttribute][0] = swipData;
            }
            // 改变步骤条状态
            if (that.infoModel[fileAttribute].length > 0) {
              that.steps.stepsNow[that.steps.current].status = "finish"
            } else {
              that.steps.stepsNow[that.steps.current].status = "wait"
            }
          }

        })
      }
    },
    /**文件格式限制*/
    importBeforeUpload(file) {
      var fileType = file.type;
      if (fileType === 'image') {
        if (fileType.indexOf('image') < 0) {
          this.$message.warning('请上传图片');
          return false;
        }
      } else if (fileType === 'file') {
        if (fileType.indexOf('image') >= 0) {
          this.$message.warning('请上传文件');
          return false;
        }
      }
      return true
    },
    /**文件上传成功后回调*/
    importHandleChange(info) {
    },

    dataListToStr(data){
      if (data.contractDate!==null && data.contractDate!==undefined){
        data.contractDate=JSON.stringify(data.contractDate);
      }

      if (data.businessLicenseDate!==null&& data.businessLicenseDate!==undefined){
        data.businessLicenseDate=JSON.stringify(data.businessLicenseDate);
      }

      if (data.codeNumberDate!==null && data.codeNumberDate!==undefined){
        data.codeNumberDate=JSON.stringify(data.codeNumberDate);
      }
      if (data.filingsDate!==null && data.filingsDate!==undefined){
        data.filingsDate=JSON.stringify(data.filingsDate);
      }
      if (data.permitDate!==null && data.permitDate!==undefined){
        data.permitDate=JSON.stringify(data.permitDate);
      }
      if (data.corporationCard!==null && data.corporationCard!==undefined){
        data.corporationCard=JSON.stringify(data.corporationCard);
      }
      if (data.personResponsible!==null && data.personResponsible!==undefined){
        data.personResponsible=JSON.stringify(data.personResponsible);
      }
      if (data.operatorCard!==null && data.operatorCard!==undefined){
        data.operatorCard=JSON.stringify(data.operatorCard);
      }
      if (data.operatorCardPhone!==null && data.operatorCardPhone!==undefined){
        data.operatorCardPhone=JSON.stringify(data.operatorCardPhone);
      }
      if (data.devicePhone!==null && data.devicePhone!==undefined){
        data.devicePhone=JSON.stringify(data.devicePhone);
      }
      if (data.textMessage!==null && data.textMessage!==undefined){
        data.textMessage=JSON.stringify(data.textMessage);
      }
      if (data.textMessageBook!==null && data.textMessageBook!==undefined){
        data.textMessageBook=JSON.stringify(data.textMessageBook);
      }
      if (data.secureBook!==null && data.secureBook!==undefined){
        data.secureBook=JSON.stringify(data.secureBook);
      }
      if (data.special!==null && data.special!==undefined){
        data.special=JSON.stringify(data.special);
      }
      if (data.networkAccess!==null && data.networkAccess!==undefined){
        data.networkAccess=JSON.stringify(data.networkAccess);
      }
      if (data.groupPriceApproval!==null && data.groupPriceApproval!==undefined){
        data.groupPriceApproval=JSON.stringify(data.groupPriceApproval);
      }
      return data;
    },

    /**暂存*/
    addIsStaging() {
      this.uploading = true;
      var that = this;
      var data=that.infoModel ;
      //data =this.dataListToStr(data);
      postAction("/smsCheck/customerData/addIsStaging", data).then((res) => {
        if (res.success) {
          this.uploading = false;
          this.$message.success("提交成功", 3);
          this.addIng == true
         // this.$router.push({path: '/sms/check/task/check', query: {id: data.taskId}});
          this.closeCurrent();
        } else {
          this.uploading = false;
          if (  res.message  !==null){
            this.$message.error( res.message);
          }else {
            this.$message.error("提交失败");
          }
        }
      }).finally(() => {
        this.uploading = false;
      })
    },
    /*提交*/
    submitAuditLot() {
      this.uploading = true;
      var info = "yes";
      this.$refs.form.validate(valid => {
        // 验证通过
        if (!valid) {
          info = "infoNo";
          this.uploading = false;
        }}
      )
      var text= "";
      for (var i in this.steps.stepsNow) {
        if (this.steps.stepsNow[i].status !== "finish") {
         // text+= '111<br/> ';
          var str=this.steps.stepsNow[i].title;
          text+=  str+"资料或备注都未上传!!!"+'<br/><br/>';
          //this.$message.warn( this.steps.stepsNow[i].title +"资料或备注都未上传!!!");
           info="no";
        }
      }

      if (this.infoModel.isCsp==='1'){
        if ((this.infoModel.permitDateDate==="" ||this.infoModel.permitDateDate===null
        ) && (this.infoModel.permitDateDateIs==="" ||this.infoModel.permitDateDateIs===null ||this.infoModel.permitDateDateIs==='0') ){
          info="no";
          this.$message.warn( "增值业务许可证到期时间未填写!!!");
        }
      }
      var stringToHTML = function (str) {
        var dom = document.createElement('div');
        dom.innerHTML = str;
        return dom;

      };
      console.log(stringToHTML('<h1>Hello world!</h1><p>How are you today?</p>'));
      if (info==="no"){
        this.$warning({
        title: '提示',
          dangerouslyUseHTMLString: true,
          content:(h) => {
          return h('div', {
            domProps: {
              innerHTML: text
            },
          }, []);
        }
        })
        return
      }
      if (info==="infoNo"){
        this.$warning({
          title: '提示',
          dangerouslyUseHTMLString: true,
          content:(h) => {
            return h('div', {
              domProps: {
                innerHTML: "基本信息校验未通过！！！"
              },
            }, []);
          }
        })
        return
      }
      var that = this;
      var data=that.infoModel ;
      //data =this.dataListToStr(data);
      postAction("/smsCheck/customerData/add", data).then((res) => {
        if (res.success) {
          this.uploading = false;
          this.$message.success("提交成功", 3);
          this.addIng == true

         // this.$router.push({path: '/sms/check/task/check', query: {id: data.taskId}});
          this.closeCurrent();
        } else {
          this.uploading = false;
          if (  res.message  !==null){
            this.$message.error( res.message);
          }else {
            this.$message.error("提交失败");
          }
        }
      }).finally(() => {
        this.uploading = false;
      })
    },
    HTMLEncode(str) {
      var stringToHTML = function (str) {
        var dom = document.createElement('div');
        dom.innerHTML = str;
        return dom;

      };
      console.log(stringToHTML('<h1>Hello world!</h1><p>How are you today?</p >'));
    },
    /**步骤条点击事件*/
    stepsClick(current) {
      this.steps.current = current;
      this.steps.currentId = this.steps.stepsNow[current].id
      for (var i in this.steps.stepsNow) {
        if (this.steps.stepsNow[i].status != "finish") {
          this.steps.stepsNow[i].status = "wait"
        }
        if (this.steps.stepsNow[i].status === "finish") {
          this.steps.stepsNow[i].status === "finish"
        }
      }
      if (this.steps.stepsNow[current].status!== "finish") {
        this.steps.stepsNow[current].status = "process"
      }
      this.showPhone(false,false);
    },
    /**返回上一级*/
    back() {
      this.$router.go(-1);
      //关闭当前页
      this.closeCurrent();
    },
    /**获取客户信息*/
    getInfoDataById(id,resultA) {
      var that = this;
      if (id) {
        var data = {
          "id": id,
        }
        getAction(this.url.getInfoDataById, data).then((res) => {
          if (res.success) {
            let result = res.result;
            //用户状态
            that.infoModel.userState =result.userState;
            //用户发展员工
            that.infoModel.staffNo =result.staffNo;
            that.infoModel.customerNo =result.customerNo;
            that.infoModel.userNo =result.userNo;
            that.infoModel.networkAccessTime =result.networkAccessTime;
            that.infoModel.staffName =result.staffName;
            that.notes =result.notes;
            this.showPhone();
          }
        })
      }
      if (resultA!==undefined){
        resultA.userState=that.infoModel.userState
      }
      return resultA
    },
    /**获取客户信息*/
    getInfoDataByInfoId(infoId) {
      var that = this;
      if (infoId) {
        var data = {
          "infoId": infoId,
        }
        getAction(this.url.getInfoDataByInfoId, data).then((res) => {
          if (res.success) {
            let result = res.result;
            result=this.getInfoDataById(infoId,result)
            that.infoModel=result;
            that.infoModel.contractDate= JSON.parse(result.contractDate);
            that.infoModel.businessLicenseDate= JSON.parse(result.businessLicenseDate);
            that.infoModel.codeNumberDate= JSON.parse(result.codeNumberDate);
            that.infoModel.filingsDate= JSON.parse(result.filingsDate);
            that.infoModel.permitDate= JSON.parse(result.permitDate);
            that.infoModel.corporationCard= JSON.parse(result.corporationCard);
            that.infoModel.personResponsible= JSON.parse(result.personResponsible);
            that.infoModel.operatorCard= JSON.parse(result.operatorCard);
            that.infoModel.operatorCardPhone= JSON.parse(result.operatorCardPhone);
            that.infoModel.devicePhone= JSON.parse(result.devicePhone);
            that.infoModel.textMessage= JSON.parse(result.textMessage);
            that.infoModel.textMessageBook= JSON.parse(result.textMessageBook);
            that.infoModel.secureBook= JSON.parse(result.secureBook);
            that.infoModel.special= JSON.parse(result.special);
            that.infoModel.networkAccess= JSON.parse(result.networkAccess);
            that.infoModel.groupPriceApproval= JSON.parse(result.groupPriceApproval);
            // that.infoModel.contractDate=
            //   [{
            //     "id":4,
            //     "urlBase":"http://223.223.177.220:8012/onlinePreview?url=aHR0cDovLzIyMy4yMjMuMTc3LjIyMDo5MDAxL2RlZmF1bHQv5oiq5bGPMjAyMy0xMC0yMzExLjA0LjA3XzE2OTgwMzAyNjAyMzkucG5n",
            //     "url":"http://223.223.177.220:9001/default/截屏2023-10-2311.04.07_1698030260239.png",
            //     "fileName":"截屏2023-10-23 11.04.07.png"
            //   }]

            for (var i in that.steps.stepsNow) {
              for (var j in result[that.steps.stepsNow[i].id]){
                if (result[that.steps.stepsNow[i].id][0].urlBase!==undefined){
                  that.steps.stepsNow[i].status = "finish"
                }
                if (result[that.steps.stepsNow[i].id+'Remark'][0]!==undefined){
                  that.steps.stepsNow[i].status = "finish"
                }
              }
            }

          }
        })
      }
    }
  }

}
</script>
<style lang="less">
.ant-input[disabled] {
  color: #1e80ff;
  background-color: #f5f5f5;
  cursor: not-allowed;
  opacity: 1;
}

.ant-radio-button-wrapper-disabled.ant-radio-button-wrapper-checked {
  color: #fff;
  background-color: #1e80ff;
  border-color: #d9d9d9;
  box-shadow: none;
}

</style>
<style lang="less">
#common-video {
  position: relative;

  .video-box {
    box-sizing: border-box;
    border: 0;
    display: block;
    width: 470px;
    height: 500px;
    outline: none !important;
  }

  .isShow {
    //进度条
    video::-webkit-media-controls-timeline {
      display: none;
    }
  }

  video::-webkit-media-controls-play-button {
    visibility: hidden;
  }

  .operate-btn {
    display: block;
    width: 60px;
    height: 60px;
    position: absolute;
    top: calc(50% - 30px);
    left: calc(50% - 30px);
  }

  .operate-btn:hover {
    opacity: 0.8;
  }

  .fade-out {
    opacity: 0;
  }
}

.thumb-example {
  width: 921px;
  margin-top: 20px;
  left: 6%;
  // background: #000;
}
.thumb-example1 {
  width: 1200px;
  margin-top: 20px;
  // background: #000;
}
.swiper-slide {
  background-size: cover;
  background-position: center;
}

.gallery-top {
  // height: 80% !important;
  /*height: 600px;*/
  width: 100%;
  left: 10%;
  margin-bottom: 30px
}
.gallery-top1 {
  // height: 80% !important;
  /*height: 600px;*/
  width: 100%;
  left: 10%;
  margin-bottom: -40px
}
.gallery-thumbs {
  height: 20% !important;
  box-sizing: border-box;
  padding: 10px 0px;
    width: 948px;
  margin-left: 2px;

  .swiper-button-next {
    right: 0px;
  }

  .swiper-button-prev {
    left: 0px;
  }

  .swiper-button-next,
  .swiper-button-prev {

    width: 45px;
    text-align: center;
    height: 101px;
    top: 26%;

    div {
      margin-top: 30px;
      background: rgb(207, 205, 205);
      height: 45px;
      border-radius: 50%;

      img {
        margin: 7px 0 0 2px;
        width: 30px;
      }
    }
  }

  .swiper-button-next:hover div {
    background: rgb(189, 186, 186);
  }

  .swiper-button-prev:hover div {
    background: rgb(189, 186, 186);
  }
}

.gallery-thumbs .swiper-slide {
  width: 20%;
  height: 80px;
  // opacity: 0.4;
}

.gallery-thumbs .swiper-slide-active {
  border: 2px solid red;
}

.markdown ul > li {
  color: #000000d9;
  font-size: 15px;
  line-height: 3;
  margin-left: 20px;
  padding-left: 4px;
  list-style-type: circle;
}

.float-info{
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
  position: fixed;
  bottom: 50px;
  right: 30px;
  width: 55px;
  height: 55px;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  z-index: 999;
  background: #1890FF;
  border-radius: 50%;
  cursor: pointer;
}
.float-infoPhone{
  margin-bottom:10px;
  float: left;
  right: 11%;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
  position: fixed;
  bottom:3%;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  z-index: 999;
  //background: #b3d4fc;
   cursor: pointer;
}
.floating-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  border-radius: 50%;
  color: #fff;
  font-size: 24px;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  transition: all 0.2s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
.floating-button:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  transform: translateY(-5px);
}
.floating-button:active {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transform: translateY(2px);
}
</style>