tnc-fe/src/views/truckCheck/TaskUploadData.vue

<template>
  <div>
    <a-spin :spinning="uploading" size="large" tip="正在提交资料，请勿关闭当前网页...">
      <a-page-header
        style="background-color: #FFFFFF;margin-bottom:10px"
        title="上传资料"
        :sub-title="notes"
        @back="goBack"
      >
        <a-form-model
          ref="form"
          :model="infoModel"
          :rules="rules"
        >
          <a-card style="margin-bottom:10px;color: #000000d9;font-size: 15px;line-height: 2.5;">
          <div>
            <span>1.请选择客户类型</span>
          </div>
          <a-radio-group style="position: relative;left: 30px"
                         @change="controlChange" prop='customType' v-model:value="infoModel.customType">
            <a-radio :value="0">一类客户（党政军、大型企事业单位）</a-radio>
            <a-radio :value="1">二类客户（其余用户）</a-radio>
          </a-radio-group>

            <a-tooltip placement="topLeft" >
              <template slot="title">
                <span>1、不管是一类还是二类客户，场景为经营性呼叫中心和经营性会议电话的，还需提供短号码证书或者400接入合同，注意事项：必须使用400（95/96,12等）服务号码开通外呼功能，不可以使用八位用户服务号码进行外呼，须签署本地中继线和短号码接入合同后，在单独签署外显合同，短号码不可授权使用。
                   </span>
               </template>
              <template slot="title">
               <span>  2、不管是一类还是二类客户，场景为自用型呼叫中心的，还需提供短号码证书或者400接入合同，注意事项：如果有短号码外呼，需要提供短号码证书或者400接入合同，同时须签署本地中继线和短号码接入合同后，在单独签署外显合同，短号码不可授权使用。</span>
            </template>
              <a-icon  type="question-circle" style='margin-left: 30px;color: red' />
            </a-tooltip>
          <div>
            <span style="display: block">2.请选择使用场景</span>
            <a-radio-group style="position: relative;left: 30px;"
                           @change="controlChange" v-model:value="infoModel.scene"  prop='scene'>
              <a-radio :value="'0'">办公自用</a-radio>
              <a-radio :value="'1'">自用型呼叫中心</a-radio>
              <a-radio :value="'2'">经营型呼叫中心</a-radio>
              <a-radio :value="'3'">经营型会议电话</a-radio>
            </a-radio-group>
          </div>
            <div>
              <span style="display: block">3.是否突破价格管控</span>
              <a-radio-group style="position: relative;left: 30px;"
                             @change="controlChange" v-model:value="infoModel.control"  prop='scene'>
                <a-radio :value="'0'">否</a-radio>
                <a-radio :value="'1'">是</a-radio>
              </a-radio-group>
            </div>
        </a-card>
          <a-card style="margin-bottom:10px;color: #000000d9;font-size: 15px;line-height: 2.5;">
          <a-row>
            <a-col :span="6">
              <a-form-model-item label="客户编号"prop="customerNo" v-bind="labelCol4" >
                <a-input    class="cornflowerblue" 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="用户发展员工" prop="staffNo" v-bind="labelCol4">
                <a-input   class="cornflowerblue" :disabled='true'  v-model="infoModel.staffNo" placeholder="用户发展员工"  ></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item label="发展员工姓名" prop="staffNo" v-bind="labelCol4">
                <a-input  class="cornflowerblue" :disabled='true'  v-model="infoModel.staffName" placeholder="发展员工姓名"  ></a-input>
              </a-form-model-item>
            </a-col>
<!--            <a-col :span="6">-->
<!--              <a-form-model-item label="用户号码" prop="userCode" v-bind="labelCol4">-->
<!--                <a-input :disabled='true'  v-model="infoModel.userCode" placeholder="用户号码"  ></a-input>-->
<!--              </a-form-model-item>-->
<!--            </a-col>-->
            <a-col :span="6">
              <a-form-model-item label="用户编号"  v-bind="labelCol4" >
                <a-input   class="cornflowerblue" v-model="infoModel.userNo" placeholder="用户编号" :disabled='true'></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item label="入网时间" prop="networkAccessTime"   v-bind="labelCol4" >
                <a-input  class="cornflowerblue"  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="firstActivationDate" v-bind="labelCol4">
                <a-input  class="cornflowerblue" :disabled='true'  v-model="infoModel.firstActivationDate" placeholder="首次激活时间"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item label="账户编码" prop="accountCode" v-bind="labelCol4">
                <a-input   class="cornflowerblue" :disabled='true'  v-model="infoModel.accountCode" placeholder="账户编码"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item label="楼宇名称" prop="floorName" v-bind="labelCol4">
                <a-input   class="cornflowerblue" :disabled='true' v-model="infoModel.floorName" placeholder="楼宇名称"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col  :span="6">
              <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="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="floorCode" v-bind="labelCol4">-->
<!--                <a-input  v-model="infoModel.floorCode" placeholder="楼宇编号"></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="installationAddress" v-bind="labelCol4">
                <a-input   v-model="infoModel.installationAddress" placeholder="实际装机地址"></a-input>
              </a-form-model-item>
            </a-col>



            <!--风险评估等级（非办公自用需提供）-->

            <a-col :span="9" v-if='infoModel.contractDateIs==="" || infoModel.contractDateIs===null || infoModel.contractDateIs==="1" '>
              <a-form-model-item label="合同到期时间是否长期" prop="contractDateIs" v-bind="labelCol5">
                <a-radio-group  v-model="infoModel.contractDateIs" 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="9"  v-if='infoModel.contractDateIs==="0" ' >
              <a-form-model-item label="合同到期时间" prop="contractDate" v-bind="labelCol6">
                <a-date-picker    style="min-width:50px; width: 67% " v-model="infoModel.contractDate"
                                 format="YYYY-MM-DD"
                                 showTime valueFormat="YYYY-MM-DD"/>
                <a-button  @click="back('contractDate')" >长期</a-button>
              </a-form-model-item>
            </a-col>

            <a-col :span="9" v-if='infoModel.businessLicenseDateIs==="" || infoModel.businessLicenseDateIs===null || infoModel.businessLicenseDateIs==="1" '>
              <a-form-model-item label="营业执照有效期是否长期" prop="businessLicenseDateIs" v-bind="labelCol5">
                <a-radio-group    v-model="infoModel.businessLicenseDateIs" 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="9" v-if='infoModel.businessLicenseDateIs==="0"'>
              <a-form-model-item label="营业执照到期时间" prop="businessLicenseDate" v-bind="labelCol4">
                <a-date-picker      style="min-width:50px; width: 67% " v-model="infoModel.businessLicenseDate"
                                   format="YYYY-MM-DD"
                                   showTime valueFormat="YYYY-MM-DD"/>
                <a-button  @click="back('businessLicenseDate')" >长期</a-button>
              </a-form-model-item>

            </a-col>
            <!--        （第一类客户办公自用除外，不需提供）-->
            <a-col :span="10" v-if='infoModel.customType=="1"'>
              <a-form-model-item label="房屋租赁合同到期时间"  prop="houseDate"   v-bind="labelCol4">
                <a-date-picker     style="width: 210px" v-model="infoModel.houseDate"
                                   format="YYYY-MM-DD"
                                   showTime valueFormat="YYYY-MM-DD"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="11" v-if='infoModel.scene==="2" ||infoModel.scene==="3" '>
              <a-form-model-item label="经营型呼叫中心增值许可证到期日 " prop="zZBusinessLicenseDate" v-bind="labelCol4">
                <a-date-picker     style="width: 210px" v-model="infoModel.zZBusinessLicenseDate"
                                   format="YYYY-MM-DD"
                                   showTime valueFormat="YYYY-MM-DD"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="13" v-if='infoModel.scene!=="0"'>
              <a-form-model-item label="风险评估等级（非办公自用需提供)" prop="riskGrade"   v-bind="labelCol4">
                <a-radio-group  v-model="infoModel.riskGrade" button-style="solid"  >
                  <a-radio-button value="0">较低风险</a-radio-button>
                  <a-radio-button value="1">低风险</a-radio-button>
                  <a-radio-button value="2">中风险</a-radio-button>
                  <a-radio-button value="3">高风险</a-radio-button>
                </a-radio-group>
              </a-form-model-item>
            </a-col>
          </a-row>

        </a-card>
        </a-form-model>
      </a-page-header>
    </a-spin>
    <!--    步骤条-->
    <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>
    <!--    入网申请签报 -->
   <a-card v-if="steps.currentId === 'applySign'" style="margin-bottom:10px; float: left;width: 83%;left: 2%; ">
      <div slot="title">
        <span style="float: left;position: relative;top: 4px">入网申请签报</span>
      </div>
      <div class="a-card-25">
        <a-alert
          message="注意事项（必看）"
          type="warning"
          style="height: 100vh"
        >
          <div slot="description" class="markdown" style="position: relative;top:30px">
            <ul>
              <li>1）18年9月以后入网的需要</li>
            </ul>
          </div>
        </a-alert>
      </div>
      <div class="a-card-70">
        <div>
           <a-form-model-item style="left: -2%" label="上传资料备注：" v-bind="labelCol1Note">
            <a-textarea class="a-textarea-line-30"
                        v-model="infoModel.applySignRemark"
                        @change="textareaChange('applySign','applySignRemark')"
                        placeholder="如没有上传资料备注，需要说明原因"
            />
            <!--            :auto-size="{ minRows: 3, maxRows: 5 }"-->
          </a-form-model-item>
        </div>
       
              <a-upload
                name="file"
                :multiple="true"
                :action="importMinioUploadAction"
                :customRequest="e => selfUploadContract(e, 'applySign')"
                :headers="tokenHeader"
                :showUploadList="false"
                :beforeUpload="importBeforeUpload"
                @change="importHandleChange"
                style='margin-left: 125px;line-height: 50px'
              >
                <a-button> <a-icon type="upload" /> 上传文件 </a-button>
              </a-upload>

             <div style="height: 70%">
          <div class="thumb-example">
            <swiper
              class="swiper gallery-top"
              :options="swiperOptionTop"
              ref="swiperTop"
            >
              <swiper-slide class="slide-1" v-for="(item, index) in infoModel.applySign" :key="item.id">
                <iframe
                  v-if="item.urlBase"
                  frameborder="1"
                  :src="item.urlBase"
                  ref="ifr"
                 width="70%"
                  height="500px"
                  scrolling="auto">
                </iframe>
                <img style="width: 70%;height: 70%;border: 1px solid;"
                     v-if="!item.urlBase" :src="noDataPng" border="1">
                <div><a-button v-if="item.urlBase" style="display: block;margin-top: 1px;border-color: red;color: red;float: left"
                          danger @click="removeFile(item,'applySign')">移除
                </a-button>
                  <a-button  style="display: block;position: relative;left:20px;margin-top: 10px;border-color: #1890FF;color: #1890FF"
                             v-if="  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.applySign"
                :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, 'applySign')"
                  :headers="tokenHeader"
                  :showUploadList="false"
                  :beforeUpload="importBeforeUpload"
                  @change="importHandleChange"
                >
                  <div>
                    <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>
      </div>


    </a-card>

    <!--    中继线营业执照 -->
    <a-card v-if="steps.currentId === 'businessLicense'" style="margin-bottom:10px; float: left;width: 83%;left: 2%; ">
      <div slot="title">
        <span style="float: left;position: relative;top: 4px">中继线营业执照</span>
      </div>
      <div class="a-card-25">
        <a-alert
          message="注意事项（必看）"
          type="warning"
          style="height: 100vh"
        >
          <div slot="description" class="markdown" style="position: relative;top:30px">
            <ul>
              <li>1）请按材料如实上传</li>
            </ul>
          </div>
        </a-alert>
      </div>
      <div class="a-card-70">
        <div>
          <a-form-model-item style="left: -2%" label="上传资料备注：" v-bind="labelCol1Note">
            <a-textarea class="a-textarea-line-30"
                        v-model="infoModel.businessLicenseRemark"
                        @change="textareaChange('businessLicense','businessLicenseRemark')"
                        placeholder="如没有上传资料备注，需要说明原因"
            />
            <!--            :auto-size="{ minRows: 3, maxRows: 5 }"-->
          </a-form-model-item>
        </div>

        <a-upload
          name="file"
          :multiple="true"
          :action="importMinioUploadAction"
          :customRequest="e => selfUploadContract(e, 'businessLicense')"
          :headers="tokenHeader"
          :showUploadList="false"
          :beforeUpload="importBeforeUpload"
          @change="importHandleChange"
          style='margin-left: 125px;line-height: 50px'
        >
          <a-button> <a-icon type="upload" /> 上传文件 </a-button>
        </a-upload>

        <div style="height: 70%">
          <div class="thumb-example">
            <swiper
              class="swiper gallery-top"
              :options="swiperOptionTop"
              ref="swiperTop"
            >
              <swiper-slide class="slide-1" v-for="(item, index) in infoModel.businessLicense" :key="item.id">
                <iframe
                  v-if="item.urlBase"
                  frameborder="1"
                  :src="item.urlBase"
                  ref="ifr"
                  width="70%"
                  height="500px"
                  scrolling="auto">
                </iframe>
                <img style="width: 70%;height: 70%;border: 1px solid;"
                     v-if="!item.urlBase" :src="noDataPng" border="1">
                <div><a-button v-if="item.urlBase" style="display: block;margin-top: 1px;border-color: red;color: red;float: left"
                               danger @click="removeFile(item,'businessLicense')">移除
                </a-button>
                  <a-button  style="display: block;position: relative;left:20px;margin-top: 10px;border-color: #1890FF;color: #1890FF"
                             v-if="  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.businessLicense"
                :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, 'businessLicense')"
                  :headers="tokenHeader"
                  :showUploadList="false"
                  :beforeUpload="importBeforeUpload"
                  @change="importHandleChange"
                >
                  <div>
                    <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>
      </div>


    </a-card>
    <!--    三张现场照片 -->
    <a-card v-if="steps.currentId === 'threePhotos'" style="margin-bottom:10px; float: left;width: 83%;left: 2%; ">
      <div slot="title">
        <span style="float: left;position: relative;top: 4px">三张现场照片</span>
      </div>
      <div class="a-card-25">
        <a-alert
          message="注意事项（必看）"
          type="warning"
          style="height: 100vh"
        >
          <div slot="description" class="markdown" style="position: relative;top:30px">
          <ul>
            <li >1) 客户办公现场、装机地址（交换机和配线架等）、公司logo照片（客户经理必须到现场，照片客户经理需体现）</li>
          </ul>
          </div>
        </a-alert>
      </div>
      <div class="a-card-70">
        <div>
           <a-form-model-item style="left: -2%" label="上传资料备注：" v-bind="labelCol1Note">
            <a-textarea class="a-textarea-line-30"
                        v-model="infoModel.threePhotosRemark"
                        @change="textareaChange('threePhotos','threePhotosRemark')"
                        placeholder="如没有上传资料备注，需要说明原因"
            />
            <!--            :auto-size="{ minRows: 3, maxRows: 5 }"-->
          </a-form-model-item>
        </div>
       
              <a-upload
                name="file"
                :multiple="true"
                :action="importMinioUploadAction"
                :customRequest="e => selfUploadContract(e, 'threePhotos')"
                :headers="tokenHeader"
                :showUploadList="false"
                :beforeUpload="importBeforeUpload"
                @change="importHandleChange"
                style='margin-left: 125px;line-height: 50px'
              >
                <a-button> <a-icon type="upload" /> 上传文件 </a-button>
              </a-upload>

             <div style="height: 70%">
          <div class="thumb-example">
            <swiper
              class="swiper gallery-top"
              :options="swiperOptionTop"
              ref="swiperTop"
            >
              <swiper-slide class="slide-1" v-for="(item, index) in infoModel.threePhotos" :key="item.id">
                <iframe
                  v-if="item.urlBase"
                  frameborder="1"
                  :src="item.urlBase"
                  ref="ifr"
                 width="70%"
                  height="500px"
                  scrolling="auto">
                </iframe>
                <img style="width: 70%;height: 70%;border: 1px solid;"
                     v-if="!item.urlBase" :src="noDataPng" border="1">
                <div><a-button v-if="item.urlBase" style="display: block;margin-top: 1px;border-color: red;color: red;float: left"
                          danger @click="removeFile(item,'threePhotos')">移除
                </a-button>
                  <a-button  style="display: block;position: relative;left:20px;margin-top: 10px;border-color: #1890FF;color: #1890FF"
                             v-if="  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.threePhotos"
                :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, 'threePhotos')"
                  :headers="tokenHeader"
                  :showUploadList="false"
                  :beforeUpload="importBeforeUpload"
                  @change="importHandleChange"
                >
                  <div>
                    <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>
      </div>


    </a-card>
    <!--    DID(含中继线)业务的责任承诺函-->
    <a-card v-if="steps.currentId === 'commitmentBook'" style="margin-bottom:10px; float: left;width: 83%;left: 2%; ">
      <div slot="title">
        <span style="float: left;position: relative;top: 4px">DID(含中继线)业务的责任承诺函</span>
      </div>
      <div class="a-card-25">
        <a-alert
          message="注意事项（必看）"
          type="warning"
          style="height: 100vh"
        >
          <div slot="description" class="markdown" style="position: relative;top:30px">
          <ul>
            <li >1） 需写明使用号段、中继线引示号、中继线条数等信息，盖公章。</li>
          </ul>
          </div>
        </a-alert>
      </div>
      <div class="a-card-70">
        <div>
           <a-form-model-item style="left: -2%" label="上传资料备注：" v-bind="labelCol1Note">
            <a-textarea class="a-textarea-line-30"
                        v-model="infoModel.commitmentBookRemark"
                        @change="textareaChange('commitmentBook','commitmentBookRemark')"
                        placeholder="如没有上传资料备注，需要说明原因"
            />
            <!--            :auto-size="{ minRows: 3, maxRows: 5 }"-->
          </a-form-model-item>
        </div>
       
              <a-upload
                name="file"
                :multiple="true"
                :action="importMinioUploadAction"
                :customRequest="e => selfUploadContract(e, 'commitmentBook')"
                :headers="tokenHeader"
                :showUploadList="false"
                :beforeUpload="importBeforeUpload"
                @change="importHandleChange"
                style='margin-left: 125px;line-height: 50px'
              >
                <a-button> <a-icon type="upload" /> 上传文件 </a-button>
              </a-upload>

             <div style="height: 70%">
          <div class="thumb-example">
            <swiper
              class="swiper gallery-top"
              :options="swiperOptionTop"
              ref="swiperTop"
            >
              <swiper-slide class="slide-1" v-for="(item, index) in infoModel.commitmentBook" :key="item.id">
                <iframe
                  v-if="item.urlBase"
                  frameborder="1"
                  :src="item.urlBase"
                  ref="ifr"
                 width="70%"
                  height="500px"
                  scrolling="auto">
                </iframe>
                <img style="width: 70%;height: 70%;border: 1px solid;"
                     v-if="!item.urlBase" :src="noDataPng" border="1">
                <div><a-button v-if="item.urlBase" style="display: block;margin-top: 1px;border-color: red;color: red;float: left"
                          danger @click="removeFile(item,'commitmentBook')">移除
                </a-button>
                  <a-button  style="display: block;position: relative;left:20px;margin-top: 10px;border-color: #1890FF;color: #1890FF"
                             v-if="  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.commitmentBook"
                :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, 'commitmentBook')"
                  :headers="tokenHeader"
                  :showUploadList="false"
                  :beforeUpload="importBeforeUpload"
                  @change="importHandleChange"
                >
                  <div>
                    <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>
      </div>


    </a-card>
    <!--    价格审批表-->
    <a-card v-if="steps.currentId === 'isPriceApproval'" style="margin-bottom:10px; float: left;width: 83%;left: 2%; ">
      <div slot="title">
        <span style="float: left;position: relative;top: 4px">价格审批表</span>
      </div>
      <div class="a-card-25">
        <a-alert
          message="注意事项（必看）"
          type="warning"
          style="height: 100vh"
        >
          <div slot="description" class="markdown" style="position: relative;top:30px">
          <ul>
            <li >1）如有价格审批表请进行上传</li>
          </ul>
          </div>
        </a-alert>
      </div>
      <div class="a-card-70">
        <div>
           <a-form-model-item style="left: -2%" label="上传资料备注：" v-bind="labelCol1Note">
            <a-textarea class="a-textarea-line-30"
                        v-model="infoModel.isPriceApprovalRemark"
                        @change="textareaChange('isPriceApproval','isPriceApprovalRemark')"
                        placeholder="如没有上传资料备注，需要说明原因"
            />
            <!--            :auto-size="{ minRows: 3, maxRows: 5 }"-->
          </a-form-model-item>
        </div>
       
              <a-upload
                name="file"
                :multiple="true"
                :action="importMinioUploadAction"
                :customRequest="e => selfUploadContract(e, 'isPriceApproval')"
                :headers="tokenHeader"
                :showUploadList="false"
                :beforeUpload="importBeforeUpload"
                @change="importHandleChange"
                style='margin-left: 125px;line-height: 50px'
              >
                <a-button> <a-icon type="upload" /> 上传文件 </a-button>
              </a-upload>

             <div style="height: 70%">
          <div class="thumb-example">
            <swiper
              class="swiper gallery-top"
              :options="swiperOptionTop"
              ref="swiperTop"
            >
              <swiper-slide class="slide-1" v-for="(item, index) in infoModel.isPriceApproval" :key="item.id">
                <iframe
                  v-if="item.urlBase"
                  frameborder="1"
                  :src="item.urlBase"
                  ref="ifr"
                 width="70%"
                  height="500px"
                  scrolling="auto">
                </iframe>
                <img style="width: 70%;height: 70%;border: 1px solid;"
                     v-if="!item.urlBase" :src="noDataPng" border="1">
                <div><a-button v-if="item.urlBase" style="display: block;margin-top: 1px;border-color: red;color: red;float: left"
                          danger @click="removeFile(item,'isPriceApproval')">移除
                </a-button>
                  <a-button  style="display: block;position: relative;left:20px;margin-top: 10px;border-color: #1890FF;color: #1890FF"
                             v-if="  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.isPriceApproval"
                :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, 'isPriceApproval')"
                  :headers="tokenHeader"
                  :showUploadList="false"
                  :beforeUpload="importBeforeUpload"
                  @change="importHandleChange"
                >
                  <div>
                    <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>
      </div>


    </a-card>
    <!--    法人身份证-->
    <a-card v-if="steps.currentId === 'legalIdCard'" style="margin-bottom:10px; float: left;width: 83%;left: 2%; ">
      <div slot="title">
        <span style="float: left;position: relative;top: 4px">法人身份证</span>
      </div>
      <div class="a-card-25">
        <a-alert
          message="注意事项（必看）"
          type="warning"
          style="height: 100vh"
        >
          <div slot="description" class="markdown" style="position: relative;top:30px">
          <ul>
            <li >非党政军客户需具备</li>
          </ul>
          </div>
        </a-alert>
      </div>
      <div class="a-card-70">
        <div>
           <a-form-model-item style="left: -2%" label="上传资料备注：" v-bind="labelCol1Note">
            <a-textarea class="a-textarea-line-30"
                        v-model="infoModel.legalIdCardRemark"
                        @change="textareaChange('legalIdCard','legalIdCardRemark')"
                        placeholder="如没有上传资料备注，需要说明原因"
            />
            <!--            :auto-size="{ minRows: 3, maxRows: 5 }"-->
          </a-form-model-item>
        </div>
       
              <a-upload
                name="file"
                :multiple="true"
                :action="importMinioUploadAction"
                :customRequest="e => selfUploadContract(e, 'legalIdCard')"
                :headers="tokenHeader"
                :showUploadList="false"
                :beforeUpload="importBeforeUpload"
                @change="importHandleChange"
                style='margin-left: 125px;line-height: 50px'
              >
                <a-button> <a-icon type="upload" /> 上传文件 </a-button>
              </a-upload>

             <div style="height: 70%">
          <div class="thumb-example">
            <swiper
              class="swiper gallery-top"
              :options="swiperOptionTop"
              ref="swiperTop"
            >
              <swiper-slide class="slide-1" v-for="(item, index) in infoModel.legalIdCard" :key="item.id">
                <iframe
                  v-if="item.urlBase"
                  frameborder="1"
                  :src="item.urlBase"
                  ref="ifr"
                 width="70%"
                  height="500px"
                  scrolling="auto">
                </iframe>
                <img style="width: 70%;height: 70%;border: 1px solid;"
                     v-if="!item.urlBase" :src="noDataPng" border="1">
                <div><a-button v-if="item.urlBase" style="display: block;margin-top: 1px;border-color: red;color: red;float: left"
                          danger @click="removeFile(item,'legalIdCard')">移除
                </a-button>
                  <a-button  style="display: block;position: relative;left:20px;margin-top: 10px;border-color: #1890FF;color: #1890FF"
                             v-if="  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.legalIdCard"
                :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, 'legalIdCard')"
                  :headers="tokenHeader"
                  :showUploadList="false"
                  :beforeUpload="importBeforeUpload"
                  @change="importHandleChange"
                >
                  <div>
                    <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>
      </div>


    </a-card>
    <!--    经办人身份证-->
    <a-card v-if="steps.currentId === 'operatorIdCard'" style="margin-bottom:10px; float: left;width: 83%;left: 2%; ">
      <div slot="title">
        <span style="float: left;position: relative;top: 4px">经办人身份证</span>
      </div>
      <div class="a-card-25">
        <a-alert
          message="注意事项（必看）"
          type="warning"
          style="height: 100vh"
        >
          <div slot="description" class="markdown" style="position: relative;top:30px">
          <ul>
            <li >1）如有经办人身份证请进行上传</li>
          </ul>
          </div>
        </a-alert>
      </div>
      <div class="a-card-70">
        <div>
           <a-form-model-item style="left: -2%" label="上传资料备注：" v-bind="labelCol1Note">
            <a-textarea class="a-textarea-line-30"
                        v-model="infoModel.operatorIdCardRemark"
                        @change="textareaChange('operatorIdCard','operatorIdCardRemark')"
                        placeholder="如没有上传资料备注，需要说明原因"
            />
            <!--            :auto-size="{ minRows: 3, maxRows: 5 }"-->
          </a-form-model-item>
        </div>
       
              <a-upload
                name="file"
                :multiple="true"
                :action="importMinioUploadAction"
                :customRequest="e => selfUploadContract(e, 'operatorIdCard')"
                :headers="tokenHeader"
                :showUploadList="false"
                :beforeUpload="importBeforeUpload"
                @change="importHandleChange"
                style='margin-left: 125px;line-height: 50px'
              >
                <a-button> <a-icon type="upload" /> 上传文件 </a-button>
              </a-upload>

             <div style="height: 70%">
          <div class="thumb-example">
            <swiper
              class="swiper gallery-top"
              :options="swiperOptionTop"
              ref="swiperTop"
            >
              <swiper-slide class="slide-1" v-for="(item, index) in infoModel.operatorIdCard" :key="item.id">
                <iframe
                  v-if="item.urlBase"
                  frameborder="1"
                  :src="item.urlBase"
                  ref="ifr"
                 width="70%"
                  height="500px"
                  scrolling="auto">
                </iframe>
                <img style="width: 70%;height: 70%;border: 1px solid;"
                     v-if="!item.urlBase" :src="noDataPng" border="1">
                <div><a-button v-if="item.urlBase" style="display: block;margin-top: 1px;border-color: red;color: red;float: left"
                          danger @click="removeFile(item,'operatorIdCard')">移除
                </a-button>
                  <a-button  style="display: block;position: relative;left:20px;margin-top: 10px;border-color: #1890FF;color: #1890FF"
                             v-if="  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.operatorIdCard"
                :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, 'operatorIdCard')"
                  :headers="tokenHeader"
                  :showUploadList="false"
                  :beforeUpload="importBeforeUpload"
                  @change="importHandleChange"
                >
                  <div>
                    <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>
      </div>


    </a-card>
    <!--    授权函-->
    <a-card v-if="steps.currentId === 'authorizeBook'" style="margin-bottom:10px; float: left;width: 83%;left: 2%; ">
      <div slot="title">
        <span style="float: left;position: relative;top: 4px">授权函</span>
      </div>
      <div class="a-card-25">
        <a-alert
          message="注意事项（必看）"
          type="warning"
          style="height: 100vh"
        >
          <div slot="description" class="markdown" style="position: relative;top:30px">
          <ul>
            <li >1）如有授权函请进行上传</li>
          </ul>
          </div>
        </a-alert>
      </div>
      <div class="a-card-70">
        <div>
           <a-form-model-item style="left: -2%" label="上传资料备注：" v-bind="labelCol1Note">
            <a-textarea class="a-textarea-line-30"
                        v-model="infoModel.authorizeBookRemark"
                        @change="textareaChange('authorizeBook','authorizeBookRemark')"
                        placeholder="如没有上传资料备注，需要说明原因"
            />
            <!--            :auto-size="{ minRows: 3, maxRows: 5 }"-->
          </a-form-model-item>
        </div>
       
              <a-upload
                name="file"
                :multiple="true"
                :action="importMinioUploadAction"
                :customRequest="e => selfUploadContract(e, 'authorizeBook')"
                :headers="tokenHeader"
                :showUploadList="false"
                :beforeUpload="importBeforeUpload"
                @change="importHandleChange"
                style='margin-left: 125px;line-height: 50px'
              >
                <a-button> <a-icon type="upload" /> 上传文件 </a-button>
              </a-upload>

             <div style="height: 70%">
          <div class="thumb-example">
            <swiper
              class="swiper gallery-top"
              :options="swiperOptionTop"
              ref="swiperTop"
            >
              <swiper-slide class="slide-1" v-for="(item, index) in infoModel.authorizeBook" :key="item.id">
                <iframe
                  v-if="item.urlBase"
                  frameborder="1"
                  :src="item.urlBase"
                  ref="ifr"
                 width="70%"
                  height="500px"
                  scrolling="auto">
                </iframe>
                <img style="width: 70%;height: 70%;border: 1px solid;"
                     v-if="!item.urlBase" :src="noDataPng" border="1">
                <div><a-button v-if="item.urlBase" style="display: block;margin-top: 1px;border-color: red;color: red;float: left"
                          danger @click="removeFile(item,'authorizeBook')">移除
                </a-button>
                  <a-button  style="display: block;position: relative;left:20px;margin-top: 10px;border-color: #1890FF;color: #1890FF"
                             v-if="  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.authorizeBook"
                :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, 'authorizeBook')"
                  :headers="tokenHeader"
                  :showUploadList="false"
                  :beforeUpload="importBeforeUpload"
                  @change="importHandleChange"
                >
                  <div>
                    <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>
      </div>


    </a-card>
    <!--    经营性呼叫中心增值业务许可证-->
    <a-card v-if="steps.currentId === 'zZBusinessLicense'" style="margin-bottom:10px; float: left;width: 83%;left: 2%; ">
      <div slot="title">
        <span style="float: left;position: relative;top: 4px">经营性呼叫中心增值业务许可证</span>
      </div>
      <div class="a-card-25">
        <a-alert
          message="注意事项（必看）"
          type="warning"
          style="height: 100vh"
        >
          <div slot="description" class="markdown" style="position: relative;top:30px">
          <ul>
            <li >1）需在有效期内</li>
          </ul>
          </div>
        </a-alert>
      </div>
      <div class="a-card-70">
        <div>
           <a-form-model-item style="left: -2%" label="上传资料备注：" v-bind="labelCol1Note">
            <a-textarea class="a-textarea-line-30"
                        v-model="infoModel.zZBusinessLicenseRemark"
                        @change="textareaChange('zZBusinessLicense','zZBusinessLicenseRemark')"
                        placeholder="如没有上传资料备注，需要说明原因"
            />
            <!--            :auto-size="{ minRows: 3, maxRows: 5 }"-->
          </a-form-model-item>
        </div>
       
              <a-upload
                name="file"
                :multiple="true"
                :action="importMinioUploadAction"
                :customRequest="e => selfUploadContract(e, 'zZBusinessLicense')"
                :headers="tokenHeader"
                :showUploadList="false"
                :beforeUpload="importBeforeUpload"
                @change="importHandleChange"
                style='margin-left: 125px;line-height: 50px'
              >
                <a-button> <a-icon type="upload" /> 上传文件 </a-button>
              </a-upload>

             <div style="height: 70%">
          <div class="thumb-example">
            <swiper
              class="swiper gallery-top"
              :options="swiperOptionTop"
              ref="swiperTop"
            >
              <swiper-slide class="slide-1" v-for="(item, index) in infoModel.zZBusinessLicense" :key="item.id">
                <iframe
                  v-if="item.urlBase"
                  frameborder="1"
                  :src="item.urlBase"
                  ref="ifr"
                 width="70%"
                  height="500px"
                  scrolling="auto">
                </iframe>
                <img style="width: 70%;height: 70%;border: 1px solid;"
                     v-if="!item.urlBase" :src="noDataPng" border="1">
                <div><a-button v-if="item.urlBase" style="display: block;margin-top: 1px;border-color: red;color: red;float: left"
                          danger @click="removeFile(item,'zZBusinessLicense')">移除
                </a-button>
                  <a-button  style="display: block;position: relative;left:20px;margin-top: 10px;border-color: #1890FF;color: #1890FF"
                             v-if="  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.zZBusinessLicense"
                :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, 'zZBusinessLicense')"
                  :headers="tokenHeader"
                  :showUploadList="false"
                  :beforeUpload="importBeforeUpload"
                  @change="importHandleChange"
                >
                  <div>
                    <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>
      </div>


    </a-card>
    <!--    呼叫中心业务说明-->
    <a-card v-if="steps.currentId === 'centerBusiness'" style="margin-bottom:10px; float: left;width: 83%;left: 2%; ">
      <div slot="title">
        <span style="float: left;position: relative;top: 4px">呼叫中心业务说明</span>
      </div>
      <div class="a-card-25">
        <a-alert
          message="注意事项（必看）"
          type="warning"
          style="height: 100vh"
        >
          <div slot="description" class="markdown" style="position: relative;top:30px">
          <ul>
            <li >自用型呼叫中心、经营型呼叫中心、经营型会议电话均需提供</li>
          </ul>
          </div>
        </a-alert>
      </div>
      <div class="a-card-70">
        <div>
           <a-form-model-item style="left: -2%" label="上传资料备注：" v-bind="labelCol1Note">
            <a-textarea class="a-textarea-line-30"
                        v-model="infoModel.centerBusinessRemark"
                        @change="textareaChange('centerBusiness','centerBusinessRemark')"
                        placeholder="如没有上传资料备注，需要说明原因"
            />
            <!--            :auto-size="{ minRows: 3, maxRows: 5 }"-->
          </a-form-model-item>
        </div>
       
              <a-upload
                name="file"
                :multiple="true"
                :action="importMinioUploadAction"
                :customRequest="e => selfUploadContract(e, 'centerBusiness')"
                :headers="tokenHeader"
                :showUploadList="false"
                :beforeUpload="importBeforeUpload"
                @change="importHandleChange"
                style='margin-left: 125px;line-height: 50px'
              >
                <a-button> <a-icon type="upload" /> 上传文件 </a-button>
              </a-upload>

             <div style="height: 70%">
          <div class="thumb-example">
            <swiper
              class="swiper gallery-top"
              :options="swiperOptionTop"
              ref="swiperTop"
            >
              <swiper-slide class="slide-1" v-for="(item, index) in infoModel.centerBusiness" :key="item.id">
                <iframe
                  v-if="item.urlBase"
                  frameborder="1"
                  :src="item.urlBase"
                  ref="ifr"
                 width="70%"
                  height="500px"
                  scrolling="auto">
                </iframe>
                <img style="width: 70%;height: 70%;border: 1px solid;"
                     v-if="!item.urlBase" :src="noDataPng" border="1">
                <div><a-button v-if="item.urlBase" style="display: block;margin-top: 1px;border-color: red;color: red;float: left"
                          danger @click="removeFile(item,'centerBusiness')">移除
                </a-button>
                  <a-button  style="display: block;position: relative;left:20px;margin-top: 10px;border-color: #1890FF;color: #1890FF"
                             v-if="  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.centerBusiness"
                :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, 'centerBusiness')"
                  :headers="tokenHeader"
                  :showUploadList="false"
                  :beforeUpload="importBeforeUpload"
                  @change="importHandleChange"
                >
                  <div>
                    <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>
      </div>


    </a-card>
    <!--    房屋租赁合同或房产证明-->
    <a-card v-if="steps.currentId === 'contractOrProve'" style="margin-bottom:10px; float: left;width: 83%;left: 2%; ">
      <div slot="title">
        <span style="float: left;position: relative;top: 4px">房屋租赁合同或房产证明</span>
      </div>
      <div class="a-card-25">
        <a-alert
          message="注意事项（必看）"
          type="warning"
          style="height: 100vh"
        >
          <div slot="description" class="markdown" style="position: relative;top:30px">
          <ul>
            <li >1）二类客户需具备</li>
            <li >2）需在有效期内</li>
            <li>3)房屋租赁合同或房屋产权证明（加盖公章）</li>
          </ul>
          </div>
        </a-alert>
      </div>
      <div class="a-card-70">
        <div>
           <a-form-model-item style="left: -2%" label="上传资料备注：" v-bind="labelCol1Note">
            <a-textarea class="a-textarea-line-30"
                        v-model="infoModel.contractOrProveRemark"
                        @change="textareaChange('contractOrProve','contractOrProveRemark')"
                        placeholder="如没有上传资料备注，需要说明原因"
            />
            <!--            :auto-size="{ minRows: 3, maxRows: 5 }"-->
          </a-form-model-item>
        </div>
       
              <a-upload
                name="file"
                :multiple="true"
                :action="importMinioUploadAction"
                :customRequest="e => selfUploadContract(e, 'contractOrProve')"
                :headers="tokenHeader"
                :showUploadList="false"
                :beforeUpload="importBeforeUpload"
                @change="importHandleChange"
                style='margin-left: 125px;line-height: 50px'
              >
                <a-button> <a-icon type="upload" /> 上传文件 </a-button>
              </a-upload>

             <div style="height: 70%">
          <div class="thumb-example">
            <swiper
              class="swiper gallery-top"
              :options="swiperOptionTop"
              ref="swiperTop"
            >
              <swiper-slide class="slide-1" v-for="(item, index) in infoModel.contractOrProve" :key="item.id">
                <iframe
                  v-if="item.urlBase"
                  frameborder="1"
                  :src="item.urlBase"
                  ref="ifr"
                 width="70%"
                  height="500px"
                  scrolling="auto">
                </iframe>
                <img style="width: 70%;height: 70%;border: 1px solid;"
                     v-if="!item.urlBase" :src="noDataPng" border="1">
                <div><a-button v-if="item.urlBase" style="display: block;margin-top: 1px;border-color: red;color: red;float: left"
                          danger @click="removeFile(item,'contractOrProve')">移除
                </a-button>
                  <a-button  style="display: block;position: relative;left:20px;margin-top: 10px;border-color: #1890FF;color: #1890FF"
                             v-if="  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.contractOrProve"
                :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, 'contractOrProve')"
                  :headers="tokenHeader"
                  :showUploadList="false"
                  :beforeUpload="importBeforeUpload"
                  @change="importHandleChange"
                >
                  <div>
                    <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>
      </div>


    </a-card>
    <!--    风险评估表-->
    <a-card v-if="steps.currentId === 'riskTable'" style="margin-bottom:10px; float: left;width: 83%;left: 2%; ">
      <div slot="title">
        <span style="float: left;position: relative;top: 4px">风险评估表</span>
      </div>
      <div class="a-card-25">
        <a-alert
          message="注意事项（必看）"
          type="warning"
          style="height: 100vh"
        >
          <div slot="description" class="markdown" style="position: relative;top:30px">
          <ul>
            <li >非办公自用需提供</li>
          </ul>
          </div>
        </a-alert>
      </div>
      <div class="a-card-70">
        <div>
           <a-form-model-item style="left: -2%" label="上传资料备注：" v-bind="labelCol1Note">
            <a-textarea class="a-textarea-line-30"
                        v-model="infoModel.riskTableRemark"
                        @change="textareaChange('riskTable','riskTableRemark')"
                        placeholder="如没有上传资料备注，需要说明原因"
            />
            <!--            :auto-size="{ minRows: 3, maxRows: 5 }"-->
          </a-form-model-item>
        </div>
       
              <a-upload
                name="file"
                :multiple="true"
                :action="importMinioUploadAction"
                :customRequest="e => selfUploadContract(e, 'riskTable')"
                :headers="tokenHeader"
                :showUploadList="false"
                :beforeUpload="importBeforeUpload"
                @change="importHandleChange"
                style='margin-left: 125px;line-height: 50px'
              >
                <a-button> <a-icon type="upload" /> 上传文件 </a-button>
              </a-upload>

             <div style="height: 70%">
          <div class="thumb-example">
            <swiper
              class="swiper gallery-top"
              :options="swiperOptionTop"
              ref="swiperTop"
            >
              <swiper-slide class="slide-1" v-for="(item, index) in infoModel.riskTable" :key="item.id">
                <iframe
                  v-if="item.urlBase"
                  frameborder="1"
                  :src="item.urlBase"
                  ref="ifr"
                 width="70%"
                  height="500px"
                  scrolling="auto">
                </iframe>
                <img style="width: 70%;height: 70%;border: 1px solid;"
                     v-if="!item.urlBase" :src="noDataPng" border="1">
                <div><a-button v-if="item.urlBase" style="display: block;margin-top: 1px;border-color: red;color: red;float: left"
                          danger @click="removeFile(item,'riskTable')">移除
                </a-button>
                  <a-button  style="display: block;position: relative;left:20px;margin-top: 10px;border-color: #1890FF;color: #1890FF"
                             v-if="  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.riskTable"
                :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, 'riskTable')"
                  :headers="tokenHeader"
                  :showUploadList="false"
                  :beforeUpload="importBeforeUpload"
                  @change="importHandleChange"
                >
                  <div>
                    <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>
      </div>


    </a-card>
    <!--    中继线预审表-->
    <a-card v-if="steps.currentId === 'trunkTable'" style="margin-bottom:10px; float: left;width: 83%;left: 2%; ">
      <div slot="title">
        <span style="float: left;position: relative;top: 4px">中继线预审表</span>
      </div>
      <div class="a-card-25">
        <a-alert
          message="注意事项（必看）"
          type="warning"
          style="height: 100vh"
        >
          <div slot="description" class="markdown" style="position: relative;top:30px">
          <ul>
            <li >1）如有中继线预审表请进行上传</li>
          </ul>
          </div>
        </a-alert>
      </div>
      <div class="a-card-70">
        <div>
           <a-form-model-item style="left: -2%" label="上传资料备注：" v-bind="labelCol1Note">
            <a-textarea class="a-textarea-line-30"
                        v-model="infoModel.trunkTableRemark"
                        @change="textareaChange('trunkTable','trunkTableRemark')"
                        placeholder="如没有上传资料备注，需要说明原因"
            />
            <!--            :auto-size="{ minRows: 3, maxRows: 5 }"-->
          </a-form-model-item>
        </div>
       
              <a-upload
                name="file"
                :multiple="true"
                :action="importMinioUploadAction"
                :customRequest="e => selfUploadContract(e, 'trunkTable')"
                :headers="tokenHeader"
                :showUploadList="false"
                :beforeUpload="importBeforeUpload"
                @change="importHandleChange"
                style='margin-left: 125px;line-height: 50px'
              >
                <a-button> <a-icon type="upload" /> 上传文件 </a-button>
              </a-upload>

             <div style="height: 70%">
          <div class="thumb-example">
            <swiper
              class="swiper gallery-top"
              :options="swiperOptionTop"
              ref="swiperTop"
            >
              <swiper-slide class="slide-1" v-for="(item, index) in infoModel.trunkTable" :key="item.id">
                <iframe
                  v-if="item.urlBase"
                  frameborder="1"
                  :src="item.urlBase"
                  ref="ifr"
                  width="70%"
                  height="500px"
                  scrolling="auto">
                </iframe>
                <img style="width: 70%;height: 70%;border: 1px solid;"
                     v-if="!item.urlBase" :src="noDataPng" border="1">
                <div><a-button v-if="item.urlBase" style="display: block;margin-top: 1px;border-color: red;color: red;float: left"
                          danger @click="removeFile(item,'trunkTable')">移除
                </a-button>
                  <a-button  style="display: block;position: relative;left:20px;margin-top: 10px;border-color: #1890FF;color: #1890FF"
                             v-if="  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.trunkTable"
                :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, 'trunkTable')"
                  :headers="tokenHeader"
                  :showUploadList="false"
                  :beforeUpload="importBeforeUpload"
                  @change="importHandleChange"
                >
                  <div>
                    <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>
      </div>


    </a-card>
    <!--    中继线合同-->
    <a-card v-if="steps.currentId === 'trunkContract'" style="margin-bottom:10px; float: left;width: 83%;left: 2%; ">
      <div slot="title">
        <span style="float: left;position: relative;top: 4px">中继线合同</span>
      </div>
      <div class="a-card-25">
        <a-alert
          message="注意事项（必看）"
          type="warning"
          style="height: 100vh"
        >
          <div slot="description" class="markdown" style="position: relative;top:30px">
            <ul>
              <li> 1)必须是正规合同，不能是业务申请单</li>
                <li>2)标准文本合同（明确装机地址、分配号段、交换机型号、业务类型和防范通讯信息诈骗的相关责任条款）</li>
            </ul>
          </div>
        </a-alert>
      </div>

      <div class="a-card-70">
        <div>
          <a-form-model-item style="left: -2%;" label="上传资料备注：" v-bind="labelCol1Note">
            <a-textarea class="a-textarea-line-30"
                        v-model="infoModel.trunkContractRemark"
                        @change="textareaChange('trunkContract','trunkContractRemark')"
                        placeholder="如没有上传资料备注，需要说明原因"
            />
            <!--            :auto-size="{ minRows: 3, maxRows: 5 }"-->
          </a-form-model-item>
        </div>

              <a-upload
                name="file"
                :multiple="true"
                :action="importMinioUploadAction"
                :customRequest="e => selfUploadContract(e, 'trunkContract')"
                :headers="tokenHeader"
                :showUploadList="false"
                :beforeUpload="importBeforeUpload"
                @change="importHandleChange"
                class="a-upload-line-30"
              >
                <a-button> <a-icon type="upload" /> 上传文件 </a-button>
              </a-upload>
       
             <div style="height: 70%">
          <div class="thumb-example">
            <swiper
              class="swiper gallery-top"
              :options="swiperOptionTop"
              ref="swiperTop"
            >
              <swiper-slide class="slide-1" v-for="(item, index) in infoModel.trunkContract" :key="item.id">
                <iframe
                  v-if="item.urlBase"
                  frameborder="1"
                  :src="item.urlBase"
                  ref="ifr"
                  width="70%"
                  height="500px"
                  scrolling="auto">
                </iframe>
                <img style="width: 70%;height: 70%;border: 1px solid;"
                     v-if="!item.urlBase" :src="noDataPng" border="1">
                <div>
                <div><a-button v-if="item.urlBase" style="display: block;margin-top: 1px;border-color: red;color: red;float: left"
                          danger @click="removeFile(item,'trunkContract')">移除
                </a-button>
                  <a-button  style="display: block;position: relative;left:20px;margin-top: 10px;border-color: #1890FF;color: #1890FF"
                             v-if="  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.trunkContract"
                :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, 'trunkContract')"
                  :headers="tokenHeader"
                  :showUploadList="false"
                  :beforeUpload="importBeforeUpload"
                  @change="importHandleChange"
                >
                  <div>
                    <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>
      </div>


    </a-card>

    <!--    回访表-->
    <a-card v-if="steps.currentId === 'accessTable'" style="margin-bottom:10px; float: left;width: 83%;left: 2%; ">
      <div slot="title">
        <span style="float: left;position: relative;top: 4px">回访表</span>
      </div>
      <div class="a-card-25">
        <a-alert
          message="注意事项（必看）"
          type="warning"
          style="height: 100vh"
        >
          <div slot="description" class="markdown" style="position: relative;top:30px">
          <ul>
            <li >2023年7月26日后入网的需要</li>
          </ul>
          </div>
        </a-alert>
      </div>
      <div class="a-card-70">
        <div>
          <a-form-model-item style="left: -2%" label="上传资料备注：" v-bind="labelCol1Note">
            <a-textarea class="a-textarea-line-30"
                        v-model="infoModel.accessTableRemark"
                        @change="textareaChange('accessTable','accessTableRemark')"
                        placeholder="如没有上传资料备注，需要说明原因"
            />
            <!--            :auto-size="{ minRows: 3, maxRows: 5 }"-->
          </a-form-model-item>
        </div>
       
              <a-upload
                name="file"
                :multiple="true"
                :action="importMinioUploadAction"
                :customRequest="e => selfUploadContract(e, 'accessTable')"
                :headers="tokenHeader"
                :showUploadList="false"
                :beforeUpload="importBeforeUpload"
                @change="importHandleChange"
                style='margin-left: 125px;line-height: 50px'
              >
                <a-button> <a-icon type="upload" /> 上传文件 </a-button>
              </a-upload>

             <div style="height: 70%">
          <div class="thumb-example">
            <swiper
              class="swiper gallery-top"
              :options="swiperOptionTop"
              ref="swiperTop"
            >
              <swiper-slide class="slide-1" v-for="(item, index) in infoModel.accessTable" :key="item.id">
                <iframe
                  v-if="item.urlBase"
                  frameborder="1"
                  :src="item.urlBase"
                  ref="ifr"
                 width="70%"
                  height="500px"
                  scrolling="auto">
                </iframe>
                <img style="width: 70%;height: 70%;border: 1px solid;"
                     v-if="!item.urlBase" :src="noDataPng" border="1">
                <div><a-button v-if="item.urlBase" style="display: block;margin-top: 1px;border-color: red;color: red;float: left"
                          danger @click="removeFile(item,'accessTable')">移除
                </a-button>
                  <a-button  style="display: block;position: relative;left:20px;margin-top: 10px;border-color: #1890FF;color: #1890FF"
                             v-if="  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.accessTable"
                :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, 'accessTable')"
                  :headers="tokenHeader"
                  :showUploadList="false"
                  :beforeUpload="importBeforeUpload"
                  @change="importHandleChange"
                >
                  <div>
                    <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>
      </div>


    </a-card>
    <!--    电话回访截图-->
    <a-card v-if="steps.currentId === 'accessPhone'" style="margin-bottom:10px; float: left;width: 83%;left: 2%; ">
      <div slot="title">
        <span style="float: left;position: relative;top: 4px">电话回访截图</span>
      </div>
      <div class="a-card-25">
        <a-alert
          message="注意事项（必看）"
          type="warning"
          style="height: 100vh"
        >
          <div slot="description" class="markdown" style="position: relative;top:30px">
          <ul>
            <li >客户经理在业务开通后48小时内完成电话回访，存在无人接听、持续忙音、回铃音异常等异常情况的，予以停机核验。</li>
          </ul>
          </div>
        </a-alert>
      </div>
      <div class="a-card-70">
        <div>
          <a-form-model-item style="left: -2%" label="上传资料备注：" v-bind="labelCol1Note">
            <a-textarea class="a-textarea-line-30"
                        v-model="infoModel.accessPhoneRemark"
                        @change="textareaChange('accessPhone','accessPhoneRemark')"
                        placeholder="如没有上传资料备注，需要说明原因"
            />
            <!--            :auto-size="{ minRows: 3, maxRows: 5 }"-->
          </a-form-model-item>
        </div>
       
              <a-upload
                name="file"
                :multiple="true"
                :action="importMinioUploadAction"
                :customRequest="e => selfUploadContract(e, 'accessPhone')"
                :headers="tokenHeader"
                :showUploadList="false"
                :beforeUpload="importBeforeUpload"
                @change="importHandleChange"
                style='margin-left: 125px;line-height: 50px'
              >
                <a-button> <a-icon type="upload" /> 上传文件 </a-button>
              </a-upload>

             <div style="height: 70%">
          <div class="thumb-example">
            <swiper
              class="swiper gallery-top"
              :options="swiperOptionTop"
              ref="swiperTop"
            >
              <swiper-slide class="slide-1" v-for="(item, index) in infoModel.accessPhone" :key="item.id">
                <iframe
                  v-if="item.urlBase"
                  frameborder="1"
                  :src="item.urlBase"
                  ref="ifr"
                 width="70%"
                  height="500px"
                  scrolling="auto">
                </iframe>
                <img style="width: 70%;height: 70%;border: 1px solid;"
                     v-if="!item.urlBase" :src="noDataPng" border="1">
                <div><a-button v-if="item.urlBase" style="display: block;margin-top: 1px;border-color: red;color: red;float: left"
                          danger @click="removeFile(item,'accessPhone')">移除
                </a-button>
                  <a-button  style="display: block;position: relative;left:20px;margin-top: 10px;border-color: #1890FF;color: #1890FF"
                             v-if="  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.accessPhone"
                :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, 'accessPhone')"
                  :headers="tokenHeader"
                  :showUploadList="false"
                  :beforeUpload="importBeforeUpload"
                  @change="importHandleChange"
                >
                  <div>
                    <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>
      </div>


    </a-card>
    <!--    现场回访照片-->
    <a-card v-if="steps.currentId === 'accessPhoto'" style="margin-bottom:10px; float: left;width: 83%;left: 2%; ">
      <div slot="title">
        <span style="float: left;position: relative;top: 4px">现场回访照片</span>

      </div>
      <div class="a-card-25">
        <a-alert
          message="注意事项（必看）"
          type="warning"
          style="height: 100vh"
        >
          <div slot="description" class="markdown" style="position: relative;top:30px">
          <ul>
            <li >1）客户经理在业务开通后3日内的工作时间里完成客户装机现场复核，客户使用场景及报备话术复核。一经发现异常，有发展部门研判、予以关停。</li>
          </ul>
          </div>
        </a-alert>
      </div>
      <div class="a-card-70">
        <div>
          <a-form-model-item style="left: -2%" label="上传资料备注：" v-bind="labelCol1Note">
            <a-textarea class="a-textarea-line-30"
                        v-model="infoModel.accessPhotoRemark"
                        @change="textareaChange('accessPhoto','accessPhotoRemark')"
                        placeholder="如没有上传资料备注，需要说明原因"
            />
            <!--            :auto-size="{ minRows: 3, maxRows: 5 }"-->
          </a-form-model-item>
        </div>
       
              <a-upload
                name="file"
                :multiple="true"
                :action="importMinioUploadAction"
                :customRequest="e => selfUploadContract(e, 'accessPhoto')"
                :headers="tokenHeader"
                :showUploadList="false"
                :beforeUpload="importBeforeUpload"
                @change="importHandleChange"
                style='margin-left: 125px;line-height: 50px'
              >
                <a-button> <a-icon type="upload" /> 上传文件 </a-button>
              </a-upload>

             <div style="height: 70%">
          <div class="thumb-example">
            <swiper
              class="swiper gallery-top"
              :options="swiperOptionTop"
              ref="swiperTop"
            >
              <swiper-slide class="slide-1" v-for="(item, index) in infoModel.accessPhoto" :key="item.id">
                <iframe
                  v-if="item.urlBase"
                  frameborder="1"
                  :src="item.urlBase"
                  ref="ifr"
                 width="70%"
                  height="500px"
                  scrolling="auto">
                </iframe>
                <img style="width: 70%;height: 70%;border: 1px solid;"
                     v-if="!item.urlBase" :src="noDataPng" border="1">
                <div><a-button v-if="item.urlBase" style="display: block;margin-top: 1px;border-color: red;color: red;float: left"
                          danger @click="removeFile(item,'accessPhoto')">移除
                </a-button>
                  <a-button  style="display: block;position: relative;left:20px;margin-top: 10px;border-color: #1890FF;color: #1890FF"
                             v-if="  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.accessPhoto"
                :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, 'accessPhoto')"
                  :headers="tokenHeader"
                  :showUploadList="false"
                  :beforeUpload="importBeforeUpload"
                  @change="importHandleChange"
                >
                  <div>
                    <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>
      </div>


    </a-card>

    <!--承诺涵-其他材料(非必填)-->
    <a-card v-if="steps.currentId === 'commitment'" style="margin-bottom:10px; float: left;width: 83%;left: 2%; ">
      <div slot="title">
        <span style="float: left;position: relative;top: 4px">其他材料(非必填)</span>
      </div>
      <div class="a-card-25">
        <a-alert
          message="注意事项（必看）"
          type="warning"
          style="height: 100vh"
        >
          <div slot="description" class="markdown" style="position: relative;top:30px">
            <ul>
              <li>1）如有其他材料(非必填)请进行上传</li>
            </ul>
          </div>
        </a-alert>
      </div>
      <div class="a-card-70">
        <div>
          <a-form-model-item style="left: -2%;" label="上传资料备注：" v-bind="labelCol1Note">
            <a-textarea class="a-textarea-line-30"
                        v-model="infoModel.commitmentRemark"
                        @change="textareaChange('commitment','commitmentRemark')"
                        placeholder="如没有上传资料备注，需要说明原因"
            />
            <!--            :auto-size="{ minRows: 3, maxRows: 5 }"-->
          </a-form-model-item>
        </div>
        <a-upload
          name="file"
          :multiple="true"
          :action="importMinioUploadAction"
          :customRequest="e => selfUploadContract(e, 'commitment')"
          :headers="tokenHeader"
          :showUploadList="false"
          :beforeUpload="importBeforeUpload"
          @change="importHandleChange"
          class="a-upload-line-30"
        >
          <a-button>
            <a-icon type="upload"/>
            上传文件
          </a-button>
        </a-upload>
        <div style="height: 70%">
          <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.commitment" :key="item.id">
                <iframe
                  v-if="item.urlBase"
                  frameborder="1"
                  :src="item.urlBase"
                  ref="ifr"
                  width="70%"
                  height="500px"
                  scrolling="auto">
                </iframe>
                <img style="width: 70%;height: 70%;border: 1px solid;"
                     v-if="!item.urlBase" :src="noDataPng" border="1">
                <div><a-button v-if="item.urlBase"
                               style="display: block;margin-top: 1px;border-color: red;color: red;float: left"
                               danger @click="removeFile(item,'commitment')">移除
                </a-button>
                  <a-button  style="display: block;position: relative;left:20px;margin-top: 10px;border-color: #1890FF;color: #1890FF"
                             v-if="  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.commitment"
                :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,'commitment')"
                  :headers="tokenHeader"
                  :showUploadList="false"
                  :beforeUpload="importBeforeUpload"
                  @change="importHandleChange"
                >
                  <div>
                    <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>
      </div>
    </a-card>
    <a-card  v-if='isPhoneshow'    ref="floatButton"
             class="float-infoPhone">
      <div class="thumb-example1"  >
        <!-- swiper1 -->
        <swiper
          class="swiper gallery-topview"
          :options="swiperOptionTop"
          ref="swiperTop"
        >

        </swiper>
        <!-- swiper2 Thumbs -->
        <swiper
          class="swiper gallery-thumbsview"
          :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>
  </div>

</template>

<script>

import { getAction, httpAction, postAction } from '@api/manage'
/*无数据图片*/
import noDataPng from '@/assets/nodata.png'
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
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",
  mixins: [JeecgListMixin],
  inject: ['closeCurrent'],
  components: {noDataPng},
  data() {
    return {
      // 购物车图标数
      fileShoppingNumber:0,
      fileShopping: fileShopping,
      idCurrent :'',
      isPhoneshow:false,
      phoneList:'',
      btnStyle:{
        "fontSize":'small',
        "top":'60vh',
        "left":'90vw'
      },
      selectDateTime: '',
      timeScopedPre: {
        近七日: [ ],//加上今天一共是七天，subtract方法是传6,往后推6天
        近14日: [ ],
        近30日: [ ]
      },
      currentId: "businessLicense",
      noDataPng: noDataPng,
      //加载状态
      loading: false,
      //弹窗
      previewImage: "",
      previewVisible: false,
      url: {
        "getInfoDataByInfoId": "/smsTurck/customerData/queryDataLogByInfoId",
        "getTask":"/smsTurck/customerData/query/getTask",
        "getInfoDataById": "/smsCheck/customerInfo/queryById",
        updateFile: "/smsCheck/customerData/updateFile",
        //"getInfoDataByInfoId": "/smsTurck/customerData/query/infoId",
        minioUpload: "/smsCheck/customerData/uploadMinio",
        list: "/smsCheck/customerData/list",
        addOrEdit: "/smsTurck/customerData/edit/info"
      },
      //步骤条数据
      // current: 0,
      // steps: "",
      steps: {
        // 当前所在第几部
        current: 0,
        currentId: "",
        stepsNow: {},
        steps00: [
          //不分类型与场景 中继线合同  （必须是正规合同，不能是业务申请单）
          {
            title: '中继线合同',
            content: 'First-content',
            id: "trunkContract",
          },
          //是否有入网申请签报 
          {
            title: '入网申请签报 ',
            content: 'First-content',
            id: "applySign",
          },
          {
            title: '中继线营业执照',
            content: 'First-content',
            id: "businessLicense",
          },
          //不分类型与场景 三张现场照片
          {
            title: '三张现场照片 ',
            content: 'First-content',
            id: "threePhotos",
          },
          //不分类型与场景 是否有DID(含中继线)业务的责任承诺函
          {
            title: 'DID(含中继线)业务的责任承诺函',
            content: 'First-content',
            id: "commitmentBook",
          },
          //不分类型与场景  价格审批表
          {
            title: '价格审批表',
            content: 'First-content',
            id: "isPriceApproval",
          },
          //不分类型与场景  授权函
          {
            title: '授权函',
            content: 'First-content',
            id: "authorizeBook",
          },
          // 不分类型与场景 经营性呼叫中心增值业务许可证到期时间
          // {
          //   title: '经营性呼叫中心增值业务许可证',
          //   content: 'First-content',
          //   id: "zZBusinessLicense",
          // },
          //不分类型与场景
          {
            title: '中继线预审表',
            content: 'First-content',
            id: "trunkTable",
          },
          //经办人身份证 不分类型与场景
          {
            title: '经办人身份证',
            content: 'First-content',
            id: "operatorIdCard",
          },
          {
            title: '回访表',
            content: 'First-content',
            id: "accessTable",
          }, {
            title: '电话回访截图',
            content: 'First-content',
            id: "accessPhone",
          }, {
            title: '现场回访照片',
            content: 'First-content',
            id: "accessPhoto",
          },
        ],
        steps01: [
          //不分类型与场景 中继线合同  （必须是正规合同，不能是业务申请单）
          {
            title: '中继线合同',
            content: 'First-content',
            id: "trunkContract",
          },
          //是否有入网申请签报 
          {
            title: '入网申请签报 ',
            content: 'First-content',
            id: "applySign",
          },
          {
            title: '中继线营业执照',
            content: 'First-content',
            id: "businessLicense",
          },
          //不分类型与场景 三张现场照片
          {
            title: '三张现场照片 ',
            content: 'First-content',
            id: "threePhotos",
          },
          //不分类型与场景 是否有DID(含中继线)业务的责任承诺函
          {
            title: 'DID(含中继线)业务的责任承诺函',
            content: 'First-content',
            id: "commitmentBook",
          },
          //不分类型与场景  价格审批表
          {
            title: '价格审批表',
            content: 'First-content',
            id: "isPriceApproval",
          },
          //经办人身份证 不分类型与场景
          {
            title: '经办人身份证',
            content: 'First-content',
            id: "operatorIdCard",
          },
          //不分类型与场景  授权函
          {
            title: '授权函',
            content: 'First-content',
            id: "authorizeBook",
          },
          // 不分类型与场景 经营性呼叫中心增值业务许可证到期时间
          // {
          //   title: '经营性呼叫中心增值业务许可证',
          //   content: 'First-content',
          //   id: "zZBusinessLicense",
          // },
          //中心业务是否有说明  自用型呼叫中心、经营型呼叫中心、经营型会议电话均需提供
          {
            title: '呼叫中心业务说明',
            content: 'First-content',
            id: "centerBusiness",
          },
          //非办公自用需提供  风险评估表
          {
            title: '风险评估表',
            content: 'First-content',
            id: "riskTable",
          },
          //不分类型与场景
          {
            title: '中继线预审表',
            content: 'First-content',
            id: "trunkTable",
          }, {
            title: '回访表',
            content: 'First-content',
            id: "accessTable",
          }, {
            title: '电话回访截图',
            content: 'First-content',
            id: "accessPhone",
          }, {
            title: '现场回访照片',
            content: 'First-content',
            id: "accessPhoto",
          },

        ],
        steps02: [
          //不分类型与场景 中继线合同  （必须是正规合同，不能是业务申请单）
          {
            title: '中继线合同',
            content: 'First-content',
            id: "trunkContract",
          },
          //是否有入网申请签报 
          {
            title: '入网申请签报 ',
            content: 'First-content',
            id: "applySign",
          },
          {
            title: '中继线营业执照',
            content: 'First-content',
            id: "businessLicense",
          },
          //不分类型与场景 三张现场照片
          {
            title: '三张现场照片 ',
            content: 'First-content',
            id: "threePhotos",
          },
          //不分类型与场景 是否有DID(含中继线)业务的责任承诺函
          {
            title: 'DID(含中继线)业务的责任承诺函',
            content: 'First-content',
            id: "commitmentBook",
          },
          //不分类型与场景  价格审批表
          {
            title: '价格审批表',
            content: 'First-content',
            id: "isPriceApproval",
          },
          //经办人身份证 不分类型与场景
          {
            title: '经办人身份证',
            content: 'First-content',
            id: "operatorIdCard",
          },
          //不分类型与场景  授权函
          {
            title: '授权函',
            content: 'First-content',
            id: "authorizeBook",
          },
          // 不分类型与场景 经营性呼叫中心增值业务许可证到期时间
          {
            title: '经营性呼叫中心增值业务许可证',
            content: 'First-content',
            id: "zZBusinessLicense",
          },
          //中心业务是否有说明  自用型呼叫中心、经营型呼叫中心、经营型会议电话均需提供
          {
            title: '呼叫中心业务说明',
            content: 'First-content',
            id: "centerBusiness",
          },
          //非办公自用需提供  风险评估表
          {
            title: '风险评估表',
            content: 'First-content',
            id: "riskTable",
          },
          //不分类型与场景
          {
            title: '中继线预审表',
            content: 'First-content',
            id: "trunkTable",
          }, {
            title: '回访表',
            content: 'First-content',
            id: "accessTable",
          }, {
            title: '电话回访截图',
            content: 'First-content',
            id: "accessPhone",
          }, {
            title: '现场回访照片',
            content: 'First-content',
            id: "accessPhoto",
          },

        ],
        steps10: [
          //不分类型与场景 中继线合同  （必须是正规合同，不能是业务申请单）
          {
            title: '中继线合同',
            content: 'First-content',
            id: "trunkContract",
          },
          //是否有入网申请签报 
          {
            title: '入网申请签报 ',
            content: 'First-content',
            id: "applySign",
          },
          {
            title: '中继线营业执照',
            content: 'First-content',
            id: "businessLicense",
          },
          //不分类型与场景 三张现场照片
          {
            title: '三张现场照片 ',
            content: 'First-content',
            id: "threePhotos",
          },
          //不分类型与场景 是否有DID(含中继线)业务的责任承诺函
          {
            title: 'DID(含中继线)业务的责任承诺函',
            content: 'First-content',
            id: "commitmentBook",
          },
          //不分类型与场景  价格审批表
          {
            title: '价格审批表',
            content: 'First-content',
            id: "isPriceApproval",
          },
          //是否有法人身份证 （非党政军客户需具备）
          {
            title: '法人身份证',
            content: 'First-content',
            id: "legalIdCard",
          },
          //经办人身份证 不分类型与场景
          {
            title: '经办人身份证',
            content: 'First-content',
            id: "operatorIdCard",
          },
          //不分类型与场景  授权函
          {
            title: '授权函',
            content: 'First-content',
            id: "authorizeBook",
          },
          // 不分类型与场景 经营性呼叫中心增值业务许可证到期时间
          // {
          //   title: '经营性呼叫中心增值业务许可证',
          //   content: 'First-content',
          //   id: "zZBusinessLicense",
          // },
          //房屋租赁合同或房产证明   二类客户需具备
          {
            title: '房屋租赁合同或房产证明',
            content: 'First-content',
            id: "contractOrProve",
          },
          //不分类型与场景
          {
            title: '中继线预审表',
            content: 'First-content',
            id: "trunkTable",
          }, {
            title: '回访表',
            content: 'First-content',
            id: "accessTable",
          }, {
            title: '电话回访截图',
            content: 'First-content',
            id: "accessPhone",
          }, {
            title: '现场回访照片',
            content: 'First-content',
            id: "accessPhoto",
          },

        ],
        steps11: [
          //不分类型与场景 中继线合同  （必须是正规合同，不能是业务申请单）
          {
            title: '中继线合同',
            content: 'First-content',
            id: "trunkContract",
          },
          //是否有入网申请签报 
          {
            title: '入网申请签报 ',
            content: 'First-content',
            id: "applySign",
          },
          {
            title: '中继线营业执照',
            content: 'First-content',
            id: "businessLicense",
          },
          //不分类型与场景 三张现场照片
          {
            title: '三张现场照片 ',
            content: 'First-content',
            id: "threePhotos",
          },
          //不分类型与场景 是否有DID(含中继线)业务的责任承诺函
          {
            title: 'DID(含中继线)业务的责任承诺函',
            content: 'First-content',
            id: "commitmentBook",
          },
          //不分类型与场景  价格审批表
          {
            title: '价格审批表',
            content: 'First-content',
            id: "isPriceApproval",
          },
          //是否有法人身份证 （非党政军客户需具备）
          {
            title: '法人身份证',
            content: 'First-content',
            id: "legalIdCard",
          },
          //经办人身份证 不分类型与场景
          {
            title: '经办人身份证',
            content: 'First-content',
            id: "operatorIdCard",
          },
          //不分类型与场景  授权函
          {
            title: '授权函',
            content: 'First-content',
            id: "authorizeBook",
          },
          // 不分类型与场景 经营性呼叫中心增值业务许可证到期时间
          // {
          //   title: '经营性呼叫中心增值业务许可证',
          //   content: 'First-content',
          //   id: "zZBusinessLicense",
          // },
          //中心业务是否有说明  自用型呼叫中心、经营型呼叫中心、经营型会议电话均需提供
          {
            title: '呼叫中心业务说明',
            content: 'First-content',
            id: "centerBusiness",
          },
          //房屋租赁合同或房产证明   二类客户需具备
          {
            title: '房屋租赁合同或房产证明',
            content: 'First-content',
            id: "contractOrProve",
          },
          //非办公自用需提供  风险评估表
          {
            title: '风险评估表',
            content: 'First-content',
            id: "riskTable",
          },
          //不分类型与场景
          {
            title: '中继线预审表',
            content: 'First-content',
            id: "trunkTable",
          }, {
            title: '回访表',
            content: 'First-content',
            id: "accessTable",
          }, {
            title: '电话回访截图',
            content: 'First-content',
            id: "accessPhone",
          }, {
            title: '现场回访照片',
            content: 'First-content',
            id: "accessPhoto",
          },
        ],
        steps12: [
          //不分类型与场景 中继线合同  （必须是正规合同，不能是业务申请单）
          {
            title: '中继线合同',
            content: 'First-content',
            id: "trunkContract",
          },
          //是否有入网申请签报 
          {
            title: '入网申请签报 ',
            content: 'First-content',
            id: "applySign",
          },
          {
            title: '中继线营业执照',
            content: 'First-content',
            id: "businessLicense",
          },
          //不分类型与场景 三张现场照片
          {
            title: '三张现场照片 ',
            content: 'First-content',
            id: "threePhotos",
          },
          //不分类型与场景 是否有DID(含中继线)业务的责任承诺函
          {
            title: 'DID(含中继线)业务的责任承诺函',
            content: 'First-content',
            id: "commitmentBook",
          },
          //不分类型与场景  价格审批表
          {
            title: '价格审批表',
            content: 'First-content',
            id: "isPriceApproval",
          },
          //是否有法人身份证 （非党政军客户需具备）
          {
            title: '法人身份证',
            content: 'First-content',
            id: "legalIdCard",
          },
          //经办人身份证 不分类型与场景
          {
            title: '经办人身份证',
            content: 'First-content',
            id: "operatorIdCard",
          },
          //不分类型与场景  授权函
          {
            title: '授权函',
            content: 'First-content',
            id: "authorizeBook",
          },
          //经营性呼叫中心增值业务许可证到期时间
          {
            title: '经营性呼叫中心增值业务许可证',
            content: 'First-content',
            id: "zZBusinessLicense",
          },
          //中心业务是否有说明  自用型呼叫中心、经营型呼叫中心、经营型会议电话均需提供
          {
            title: '呼叫中心业务说明',
            content: 'First-content',
            id: "centerBusiness",
          },
          //房屋租赁合同或房产证明   二类客户需具备
          {
            title: '房屋租赁合同或房产证明',
            content: 'First-content',
            id: "contractOrProve",
          },
          //非办公自用需提供  风险评估表
          {
            title: '风险评估表',
            content: 'First-content',
            id: "riskTable",
          },
          //不分类型与场景
          {
            title: '中继线预审表',
            content: 'First-content',
            id: "trunkTable",
          }, {
            title: '回访表',
            content: 'First-content',
            id: "accessTable",
          }, {
            title: '电话回访截图',
            content: 'First-content',
            id: "accessPhone",
          }, {
            title: '现场回访照片',
            content: 'First-content',
            id: "accessPhoto",
          },

        ],
      },
      uploading: false,
      rules:{
        scene: [
          {required: true, message: '必须输入'},
        ],
        customType: [
          {required: true, message: '必须输入'},
        ],
        customerName: [
          {required: true, message: '必须输入'},
        ],
        houseDate:[
          {required: true, message: '必须输入'},
        ],
        zZBusinessLicenseDate:[
          {required: true, message: '必须输入'},
        ],
        businessLicenseDateIs:[
          {required: true, message: '必须输入'},
        ],
        businessLicenseDate:[
          {required: true, message: '必须输入'},
        ],
        contractDate:[
          {required: true, message: '必须输入'},
        ],
        riskGrade:[
          {required: true, message: '必须输入'},
        ],
        installationAddress:[
          {required: true, message: '必须输入'},
        ],
        floorName:[
          {required: true, message: '必须输入'},
        ],
        firstActivationDate:[
          {required: true, message: '必须输入'},
        ],
        customerNo:[
          {required: true, message: '必须输入'},
        ],
        userNo:[
          {required: true, message: '必须输入'},
        ],
        networkAccessTime:[
          {required: true, message: '必须输入'},
        ],
        userState:[
          {required: true, message: '必须输入'},
        ],
        contractDateIs:[
          {required: true, message: '必须输入'},
        ],
        staffNo:[
          {required: true, message: '必须输入'},
        ],
        codeNumber:[
          {required: true, message: '必须输入'},
        ],
        accountCode:[
          {required: true, message: '必须输入'},
        ],
        floorCode:[
          {required: true, message: '必须输入'},
        ],
        userCode:[
          {required: true, message: '必须输入'},
        ],
        managePhone: [
          {required: true, message: '请输入客户经理手机号!', trigger: 'blur'}, {validator: this.isPhone}
        ],
      },
      taskId:"",
      notes:"",
      infoModel:{
        control:'0',
        staffName:"",
        dataId:"",
        logId:"",
        infoId:"",
        managePhone:"",
        //客户类型
        customType: 0,
        //使用场景
        scene:'0',
        houseDate:"",
        zZBusinessLicenseDate:"",
        businessLicenseDateIs:"",
        businessLicenseDate:"",
        contractDate:"",
        riskGrade:"",
        installationAddress:"",
        floorName:"",
        firstActivationDate:"",
        customerNo:"",
        userNo:"",
        networkAccessTime:"",
        customerName:"",
        userState:"",
        contractDateIs:"",
        staffNo:"",
        codeNumber:"",
        accountCode:"",
        floorCode:"",
        userCode:"",
        //入网申请签报 applySign
        applySign:[{}],
        applySignRemark:"",

        businessLicense:[{}],
        businessLicenseRemark:"",
        //三张现场照片 threePhotos
        threePhotos:[{}],
        threePhotosRemark:"",
        //DID(含中继线)业务的责任承诺函
        commitmentBook:[{}],
        commitmentBookRemark:"",
        //价格审批表
        isPriceApproval:[{}],
        isPriceApprovalRemark:"",
        //法人身份证
        legalIdCard:[{}],
        legalIdCardRemark:"",
        //经办人身份证.
        operatorIdCard:[{}],
        operatorIdCardRemark:"",
        //授权函.
        authorizeBook:[{}],
        authorizeBookRemark:"",
        //经营性呼叫中心增值业务许可证.
        zZBusinessLicense:[{}],
        zZBusinessLicenseRemark:"",
        //呼叫中心业务说明.
        centerBusiness:[{}],
        centerBusinessRemark:"",
        //房屋租赁合同或房产证明.
        contractOrProve:[{}],
        contractOrProveRemark:"",
        //风险评估表
        riskTable:[{}],
        riskTableRemark:"",
        //中继线预审表
        trunkTable:[{}],
        trunkTableRemark:"",
        //中继线合同
        trunkContract:[{}],
        trunkContractRemark:"",

        accessTable:[{}],
        accessTableRemark:"",

        accessPhone:[{}],
        accessPhoneRemark:"",

        accessPhoto:[{}],
        accessPhotoRemark:"",

        commitment: [{}],
        commitmentRemark: '',
      },

      next: "",
      prev: "",

      //客户信息ID
      infoId: "",
      lotData: {
        //客户类型
        customType: "0",
        //使用场景
        scene: "0",
        //正式卡/测试卡
        blockType: "model",
        //价格管控
        control: "controlN",
        //合同文件
        contractFiles: [],
        //责任人和经办人授权书
        empowerFiles: [],
        //责任人和经办人身份证
        idCardFiles: [],
        //客户证件扫描
        scanningFiles: [],
        //风险评估表
        riskFiles: [],
        //价格审批表
        priceFiles: [],
        //测试卡申请单
        testCardApplication: []
      },
      truckData: {
        //客户类型
        customType: "0",
        //使用场景
        scene: "0",
      },
      //缩略与大图数据源
      swiperId: 0 + 1,
      swiperImg: [{}],
      //轮播配置
      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'
        }
      },
      labelCol6: {
        labelCol: {
          xs: {span: 24},
          sm: {span:10},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 12},
        }
      },
      labelCol4: {
        labelCol: {
          xs: {span: 24},
          sm: {span: 10},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 12},
        }
      },
      labelCol5: {
        labelCol: {
          xs: {span: 24},
          sm: {span: 12},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 12},
        }
      },
      labelCol1Note: {
        labelCol: {
          xs: {span: 24},
          sm: {span: 4},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 20},
        }
      },
      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'
        }
      }
    };
  },
  created() {
    this.infoId = this.$route.query.id;
    this.controlChange();
    //this.steps.stepsNow = this.steps.steps00;
    this.steps.currentId = this.steps.stepsNow[0].id;

    this.infoModel.infoId = this.$route.query.id;
    this.getInfoDataById(this.$route.query.id);
    this.getTask(this.$route.query.id);
    this.getInfoDataByInfoId(this.$route.query.id)
  },
  computed: {
    importMinioUploadAction() {
      return window._CONFIG['domianURL'] + this.url.minioUpload;
    },
  },
  props: {
    poster: {
      type: String,
      required: false,
      default: ""
    },
    controls: {
      type: Boolean,
      required: false,
      default: true
    },
    control: {
      type: Boolean,
      required: false,
      default: false
    },
  },
  watch: {
    // 监听操作
    videoData(val, oldVal) {
      const {currentTime, duration} = val;
      if (currentTime && duration && currentTime < duration) {
        this.hintOperate();
      }
    }
  },
  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.steps = this.steps00;
  },
  methods: {
    jumpUrl(url){
      var a = document.createElement("a");
      a.setAttribute("href", url);
      a.setAttribute("target", "_blank");
      a.click();
    },
    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,
        type:'4'
      }
      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 ;
          }
      })
    },
    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("您的手机号码格式不正确!");
      }

    },
    getTask(infoId){
      var that = this;
      var data = {
        "infoId": infoId,
      }
      postAction(this.url.getTask, data).then((res) => {
          if (res.success) {
          that.taskId=res.result.taskId;
          }
      })
    },
    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.applySign= JSON.parse(result.applySign);
            that.infoModel.threePhotos= JSON.parse(result.threePhotos);
            that.infoModel.commitmentBook= JSON.parse(result.commitmentBook);
            that.infoModel.isPriceApproval= JSON.parse(result.isPriceApproval);
            that.infoModel.legalIdCard= JSON.parse(result.legalIdCard);
            that.infoModel.operatorIdCard= JSON.parse(result.operatorIdCard);
            that.infoModel.authorizeBook= JSON.parse(result.authorizeBook);
            that.infoModel.zZBusinessLicense= JSON.parse(result.zZBusinessLicense);
            that.infoModel.businessLicense= JSON.parse(result.businessLicense);
            that.infoModel.centerBusiness= JSON.parse(result.centerBusiness);
            that.infoModel.contractOrProve= JSON.parse(result.contractOrProve);
            that.infoModel.riskTable= JSON.parse(result.riskTable);
            that.infoModel.trunkTable= JSON.parse(result.trunkTable);
            that.infoModel.trunkContract= JSON.parse(result.trunkContract);
            that.infoModel.accessPhone= JSON.parse(result.accessPhone);
            that.infoModel.accessPhoto= JSON.parse(result.accessPhoto);
            that.infoModel.accessTable= JSON.parse(result.accessTable);
            that.infoModel.commitment = JSON.parse(result.commitment);
            that.controlChange();
            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"
                }
              }
            }

          }
        })
      }
    },
    /**获取客户信息*/
    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.firstActivationDate =result.firstActivationDate;
            that.infoModel.userCode =result.userCode;
            that.infoModel.accountCode =result.accountCode;
            that.infoModel.floorName =result.floorName;
            that.infoModel.staffName =result.staffName;
            that.notes =result.notes;
            this.showPhone();
          }
        })
      }
      return resultA
    },
    /**备注坚听*/
    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"
      }
    },
    /**步骤条点击事件*/
    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(name){
      if (name==='contractDate'){
        this.infoModel.contractDateIs="1"
        this.infoModel.contractDate=""
      }
      if (name==='businessLicenseDate'){
        this.infoModel.businessLicenseDateIs="1"
        this.infoModel.businessLicenseDate=""
      }
    },
    /**暂存*/
    addIsStaging() {
      this.uploading = true;
      var that = this;
      var data=that.infoModel ;
      //data =this.dataListToStr(data);
      postAction("/smsTurck/customerData/addIsStaging", data).then((res) => {
        if (res.success) {
          this.uploading = false;
          this.$message.success("提交成功", 3);
          this.addIng == true
          this.$router.push({path: '/truck/check/task/check', query: {id: that.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 = "no";
          this.uploading = false;
        }}
      )
      var text= "";
      for (var i in this.steps.stepsNow) {
        if (this.steps.stepsNow[i].status !== "finish"&&  this.steps.stepsNow[i].id !=='commitment') {
          // text+= '111<br/> ';
          var str=this.steps.stepsNow[i].title;
          text+=  str+"资料或备注都未上传!!!"+'<br/><br/>';
          //this.$message.warn( this.steps.stepsNow[i].title +"资料或备注都未上传!!!");
          info="no";
        }
      }
debugger
      if (this.infoModel.customType===1){
        if (this.infoModel.houseDate==="" ||this.infoModel.houseDate===null){
          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
      }
      var that = this;
      var data=that.infoModel ;
      //data =this.dataListToStr(data);
      postAction("/smsTurck/customerData/add", data).then((res) => {
        if (res.success) {
          this.uploading = false;
          this.$message.success("提交成功", 3);
          this.addIng == true

          this.$router.push({path: '/truck/check/task/check', query: {id: that.taskId}});
          this.closeCurrent();
        } else {
          this.uploading = false;
          if (  res.message  !==null){
            this.$message.error( res.message);
          }else {
            this.$message.error("提交失败");
          }
        }
      }).finally(() => {
        this.uploading = false;
      })
    },
    //客户类型与使用场景监听
    controlChange(a, event) {
      this.current = 0;
      this.steps.currentId = "trunkContract";
      let customType = this.infoModel.customType;
      let scene = this.infoModel.scene;
      if (customType ===0) {
        if (scene ==='0') {
          this.steps.stepsNow = this.steps.steps00
        }
        if (scene ==='1') {
          this.steps.stepsNow = this.steps.steps01
        }
        if (scene ==='2') {
          this.steps.stepsNow= this.steps.steps02
        }
        if (scene ==='3') {
          this.steps.stepsNow = this.steps.steps02
        }
      }
      if (customType ===1) {
        if (scene ==='0') {
          this.steps.stepsNow = this.steps.steps10
        }
        if (scene ==='1') {
          this.steps.stepsNow = this.steps.steps11
        }
        if (scene ==='2') {
          this.steps.stepsNow = this.steps.steps12
        }
        if (scene ==='3') {
          this.steps.stepsNow = this.steps.steps12
        }
      }
      if (this.infoModel.control==='0'){
        for (var i = 0; i <this.steps.stepsNow.length; i++) {
          if (this.steps.stepsNow[i].id==='isPriceApproval'){
            this.steps.stepsNow.splice(i, 1);
          }
        }
      }
      if (this.infoModel.control==='1'){
        var info ='';
        for (var i = 0; i <this.steps.stepsNow.length; i++) {
          if (this.steps.stepsNow[i].id==='isPriceApproval'){
            info ='yes';
          }
        }
        if (info!=='yes'){
            this.steps.stepsNow.push({
              title: '价格审批表',
              content: 'First-content',
              id: "isPriceApproval",
            });
          }
      }

      var info2='';
      for (var i = 0; i <this.steps.stepsNow.length; i++) {
        if (this.steps.stepsNow[i].id==='commitment'){
          info2 ='yes';
        }
      }
      if (info2!=='yes'){
        this.steps.stepsNow.push({
          title: '其他材料(非必填)',
          content: 'First-content',
          id: "commitment",
        });
      }

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

    },
    /**移除文件*/
    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+"上传成功");
    },
    //分割数组
    spliceArr(data, fileData) {
      let indexOf = data.indexOf(fileData);
      return data.splice(indexOf, 1)
    },

    /**自定义的上传文件方法*/
    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"
            }
          }

        })
      }
    },
    //文件上传成功后回调
    importHandleChange(info) {

    },
    //文件格式限制
    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
    },
    //返回上一菜单
    goBack() {
      this.$router.go(-1);
      this.closeCurrent();
    },
    // //下一步骤
    // nextSteps() {
    //   if (this.swiperImg.length == 0) {
    //     this.$message.warn("请先上传文件！")
    //     return;
    //   }
    //   if (this.swiperImg.length == 1) {
    //     if (!this.swiperImg[0].urlBase) {
    //       this.$message.warn("请先上传文件！")
    //       return;
    //     }
    //   }
    //   if (this.current < this.steps.length) {
    //     this.current = this.current + 1;
    //     this.currentId = this.steps[this.current].id;
    //     //步骤文件类型对应
    //     this.currentFileType(this.steps[this.current].id);
    //   }
    // },
    // //上一步骤
    // prevSteps() {
    //   if (this.current != 0) {
    //     this.current = this.current - 1;
    //     this.currentId = this.steps[this.current].id;
    //     //步骤文件类型对应
    //     this.currentFileType(this.currentId);
    //   }
    // },
    //上传步骤文件类型对应
    currentFileType(currentId) {
      let that = this;
      this.swiperImg = {}
      switch (currentId) {
        case 'businessLicense':
          that.swiperImg = that.infoModel.businessLicense
          break;
        case 'idCard':
          that.swiperImg = that.infoModel.idCard
          break;
        case 'contract':
          that.swiperImg = that.infoModel.contract
          break;
        case 'prequaliFication':
          that.swiperImg = that.infoModel.prequaliFication
          break;
        case 'risk':
          that.swiperImg = that.infoModel.risk
          break;
        case 'coverLetter':
          that.swiperImg = that.infoModel.coverLetter
          break;
        case 'addedLicense':
          that.swiperImg = that.infoModel.addedLicense
          break;
        case 'registeredCapital':
          that.swiperImg = that.infoModel.registeredCapital
          break;
        case 'ownershipCertificate':
          that.swiperImg = that.infoModel.ownershipCertificate
          break;
        case 'creditInquiry':
          that.swiperImg = that.infoModel.creditInquiry
          break;
        case 'legalPersonality':
          that.swiperImg = that.infoModel.legalPersonality
          break;
        case 'takePhotos':
          that.swiperImg = that.infoModel.takePhotos
          break;
        default:
          that.swiperImg = [];


      }
      //拒绝下标为空 影响轮播样式
      if (that.swiperImg.length == 0) {
        that.swiperImg.push({})
      }
    },
    //步骤文件类型对应
    uploadCurrentFileType(currentId) {
      let that = this;
      switch (currentId) {
        case 'businessLicense':
          that.infoModel.businessLicense = that.swiperImg
          break;
        case 'idCard':
          that.infoModel.idCard = that.swiperImg
          break;
        case 'contract':
          that.infoModel.contract = that.swiperImg
          break;
        case 'prequaliFication':
          that.infoModel.prequaliFication = that.swiperImg
          break;
        case 'risk':
          that.infoModel.risk = that.swiperImg
          break;
        case 'coverLetter':
          that.infoModel.coverLetter = that.swiperImg
          break;
        case 'addedLicense':
          that.infoModel.addedLicense = that.swiperImg
          break;
        case 'registeredCapital':
          that.infoModel.registeredCapital = that.swiperImg
          break;
        case 'ownershipCertificate':
          that.infoModel.ownershipCertificate = that.swiperImg
          break;
        case 'creditInquiry':
          that.infoModel.creditInquiry = that.swiperImg
          break;
        case 'legalPersonality':
          that.infoModel.legalPersonality = that.swiperImg
          break;
        case 'takePhotos':
          that.infoModel.takePhotos = that.swiperImg
          break;
      }
    },

    /**提交稽核*/
    submitLot() {
      let that = this;
      let data = {};
      //客户类型
      data['customType'] = that.infoModel.customType;
      //使用场景
      data['scene'] = that.infoModel.scene;
      let steps = that.steps;
      steps.forEach(function (value) {
        data[value.id] = that.urlBaseJoin(that.infoModel[value.id], "url")
      });
      this.postLotInfo(data);
    },
    postLotInfo(data) {
      //任务Id
      data["infoId"] = this.infoId;
      postAction(this.url.addOrEdit, data).then((res) => {
        if (res.success) {
          this.$message.success("提交成功");
          this.$router.go(-1);
          this.closeCurrent();
          //this.$router.push({path: '/lot/check/task/check', query: {id: record.id}});
        } else {
          this.$message.error(res.message);
        }
      });
    },
    urlBaseJoin(dataArray, name) {
      let newDataArr = [];
      for (var i in dataArray) {
        let dataArrayElementElement = dataArray[i][name];
        newDataArr.push(dataArrayElementElement);
      }
      return newDataArr.toString();
    }

  }
};
</script>

<style lang="less" scoped>
h3 {
  margin: 20px 0 0 10px;
}

.thumb-example {
  //width: 650px;
  margin-top: 20px;
  // 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: 15%;
  margin-bottom: 50px
}
.gallery-topview {
  // height: 80% !important;
  /*height: 600px;*/
  width: 100%;
  left: 15%;
}
.gallery-thumbs {
  height: 20% !important;
  box-sizing: border-box;
  padding: 10px 0px;
  /*  width: 864px;*/
  margin-left: 10%;

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

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

  .swiper-button-next,
  .swiper-button-prev {
    background: #fff;
    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-thumbsview {
  height: 20% !important;
  box-sizing: border-box;
  padding: 10px 0px;
  /*  width: 864px;*/
  margin-left: 2px;

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

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

  .swiper-button-next,
  .swiper-button-prev {
    background: #fff;
    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);
}

.a-upload-line-30 {
  line-height: 30px;
  left: 15%;
  position: relative
}

.a-textarea-line-30 {
  height: 77px;
  width: 80vh
}

.a-card-70 {
  width: 72%;
  float: left;
  left: 2%;
  position: relative
}

.a-card-25 {
  float: left;
  width: 25%
}
.cornflowerblue {
  color: cornflowerblue;
}
</style>