<template>
  <a-spin :spinning="this.uploading" size="large" tip="正在提交资料，请勿关闭当前网页...">
    <!--  客户信息-->
    <a-page-header
      style="background-color: #FFFFFF;margin-bottom:10px"
      title="行短稽核资料填写"
      :sub-title='notes'
      @back="back"
    >
      <a-descriptions :title="infoModel.customerName" :column="3" :bordered="false">
      </a-descriptions>
      <a-row>
        <a-col :span="6">
          <a-form-model-item label="客户编号" prop="openingNumber" v-bind="labelCol4">
            <span   class="cornflowerblue">{{ infoModel.customerNo }}</span>
          </a-form-model-item>
        </a-col>
        <a-col :span="6">
          <a-form-model-item label="客户名称" prop="openingNumber" v-bind="labelCol4">
            <span   class="cornflowerblue">{{ infoModel.customerName }}</span>
          </a-form-model-item>
        </a-col>
        <a-col :span="6">
          <a-form-model-item label="单位联系人手机号" prop="openingNumber" v-bind="labelCol4">
            <span   class="cornflowerblue">{{ infoModel.codeNumberContactPhone }}</span>
          </a-form-model-item>
        </a-col>

        <a-col :span="6">
          <a-form-model-item label="客户经理手机号" prop="openingNumber" v-bind="labelCol4">
            <span   class="cornflowerblue">{{ infoModel.managePhone }}</span>
          </a-form-model-item>
        </a-col>
        <a-col :span="6">
          <a-form-model-item label="用户状态" prop="openingNumber" v-bind="labelCol4">
            <span  class="cornflowerblue"v-if='userState==="1"'  >在用</span>
            <span  class="cornflowerblue"v-if='userState==="2"'  >停机</span>
            <span  class="cornflowerblue"v-if='userState==="3"'  >拆机</span>
          </a-form-model-item>
        </a-col>
        <a-col :span="6">
          <a-form-model-item label="码号编号" prop="openingNumber" v-bind="labelCol4">
            <span   class="cornflowerblue">{{ infoModel.codeNumber }}</span>
          </a-form-model-item>
        </a-col>
        <a-col :span="6">
          <a-form-model-item label="增值业务许可证到期时间" prop="openingNumber" v-bind="labelCol6">
            <span   class="cornflowerblue">{{ infoModel.permitDateDate==="" ?"长期": infoModel.permitDateDate }}</span>
          </a-form-model-item>
        </a-col>
        <a-col :span="6">
          <a-form-model-item label="是否完成整改" prop="openingNumber" v-bind="labelCol4">
            <span   class="cornflowerblue">{{ infoModel.isComplete==='1' ?'是':  infoModel.isComplete===''?'':'否'   }}</span>
          </a-form-model-item>
        </a-col>
        <a-col :span="6">
          <a-form-model-item label="用户发展员工" prop="openingNumber" v-bind="labelCol4">
            <span   class="cornflowerblue">{{ infoModel.staffNo }}</span>
          </a-form-model-item>
        </a-col>
        <a-col :span="6">
          <a-form-model-item label="入网时间" prop="openingNumber" v-bind="labelCol4">
            <span   class="cornflowerblue">{{ infoModel.networkAccessTime }}</span>
          </a-form-model-item>
        </a-col>

        <a-col :span="6">
          <a-form-model-item label="码号证书营业执照合同签约方主体是否一致" prop="openingNumber" v-bind="labelCol7">
            <span   class="cornflowerblue">{{ infoModel.codeNumberBusinessLicense==='1'?'是':infoModel.codeNumberBusinessLicense===''?'':'否'  }}</span>
          </a-form-model-item>
        </a-col>
        <a-col :span="6">
          <a-form-model-item label="是否为CSP商" prop="openingNumber" v-bind="labelCol4">
            <span   class="cornflowerblue">{{ infoModel.isCsp==='1'?'是':infoModel.isCsp===''?'':'否'  }}</span>
          </a-form-model-item>
        </a-col>


        <a-col :span="6">
          <a-form-model-item label="用户编号" prop="userNo" v-bind="labelCol4">
            <span   class="cornflowerblue">{{ infoModel.customerName }}</span>
          </a-form-model-item>
        </a-col>
        <a-col :span="6">
          <a-form-model-item label="资料是否完整" prop="openingNumber" v-bind="labelCol4">
            <span   class="cornflowerblue">{{ infoModel.isAll==='1'?'是':infoModel.isAll===''?'':'否'  }}</span>
          </a-form-model-item>
        </a-col>
        <a-col :span="6">
          <a-form-model-item label="签约号码与证书下发码号是否一致" prop="openingNumber" v-bind="labelCol6">
            <span   class="cornflowerblue">{{ infoModel.isSigningNumber==='1'?'是':infoModel.isSigningNumber===''?'':'否'  }}</span>
          </a-form-model-item>
        </a-col>


        <a-col :span="6">
          <a-form-model-item label="用户发展员工姓名" prop="openingNumber" v-bind="labelCol4">
            <span   class="cornflowerblue">{{ infoModel.staffName }}</span>
          </a-form-model-item>
        </a-col>
        <a-col :span="6">
          <a-form-model-item label="合同到期时间" prop="openingNumber" v-bind="labelCol4">
            <span   class="cornflowerblue">{{ infoModel.contractDateDate==="" ?"长期": infoModel.contractDateDate }}</span>
          </a-form-model-item>
        </a-col>
        <a-col :span="6">
          <a-form-model-item label="营业执照到期时间" prop="openingNumber" v-bind="labelCol4">
            <span   class="cornflowerblue">{{  infoModel.businessLicenseDateDate==="" ?"长期": infoModel.businessLicenseDateDate }}</span>
          </a-form-model-item>
        </a-col>
        <a-col :span="6">
          <a-form-model-item label="码号证书到期时间" prop="openingNumber" v-bind="labelCol4">
            <span   class="cornflowerblue">{{ infoModel.codeNumberDateDate==="" ?"长期":infoModel.codeNumberDateDate }}</span>
          </a-form-model-item>
        </a-col>
        <a-col :span="6">
          <a-form-model-item label="备案通知到期时间" prop="openingNumber" v-bind="labelCol4">
            <span   class="cornflowerblue">{{ infoModel.filingsDateDate==="" ?"长期": infoModel.filingsDateDate }}</span>
          </a-form-model-item>
        </a-col>

        <a-col :span="6">
          <a-form-model-item label="号码详细用途" prop="openingNumber" v-bind="labelCol4">
            <span   class="cornflowerblue">{{ infoModel.numberUse }}</span>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-page-header>

    <a-card  style="margin-bottom:10px;">
      <a-descriptions title="预警字段重新填写" :column="3" :bordered="false">
      </a-descriptions>
      <a-form-model
        ref="form"
        :model="shotInfoModel"
        :rules="rules"
      >
      <a-row>

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

        </a-col>
        <a-col :span="8" v-if=' shortNowPermitDateIs =="1"&&(shotInfoModel.permitDateDateIs==="" || shotInfoModel.permitDateDateIs===null || shotInfoModel.permitDateDateIs==="1" ) '>
          <a-form-model-item label="增值业务许可证是否长期"    prop='filingsDateDateIs'  v-bind="labelCol8">
            <a-radio-group    v-model="shotInfoModel.permitDateDateIs" button-style="solid"  >
              <a-radio-button value="0">否</a-radio-button>
              <a-radio-button value="1">是</a-radio-button>
            </a-radio-group>
          </a-form-model-item>
        </a-col>
        <a-col :span="8"  v-if=' shortNowPermitDateIs =="1"&&shotInfoModel.permitDateDateIs==="0" ' >
          <a-form-model-item label="增值业务许可证到期时间"  prop='filingsDateDateIs'  v-bind="labelCol8">
            <a-date-picker   style="min-width:50px; width: 68% "  v-model="shotInfoModel.permitDateDate"
                            format="YYYY-MM-DD"
                            showTime valueFormat="YYYY-MM-DD"/>
            <a-button    @click="backDate('permitDate')" >长期</a-button>
          </a-form-model-item>
        </a-col>
      </a-row>
      </a-form-model>
    </a-card>
    <!--    步骤条-->
    <a-card style="margin-bottom:10px;width: 15%;float: left">
      <a-steps direction="vertical" :current="steps.current" size="small" @change="stepsClick">
        <a-step v-for="item in steps.stepsNow" :key="item.title" :title="item.title" :status="item.status"/>
      </a-steps>
<!--      <a-button @click="addIsStaging" style="width: 100%" type="warn">暂存</a-button>-->
      <a-button @click="submitAuditLot" style="width: 100%;position: relative;top: 10px" type="primary">提交申请</a-button>
    </a-card>
    <!--    合同到期时间（YYYY-MM-DD）-->
    <a-card v-if="steps.currentId == 'contractDate'"
            style="margin-bottom:10px;
              float: left;width: 83%;left: 2%">
      <div slot="title">
        <span style="float: left;position: relative;top: 4px">合同资料</span>
      </div>
      <!--      文件上传-->
      <!--      附件-->

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

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

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

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

            </div>

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

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

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

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

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

            </div>

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

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

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

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

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

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

            </div>

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

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

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

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

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

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

            </div>

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

    </a-card>

  </a-spin>

</template>

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


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

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

      },
      //表单验证
      rules: {
        permitDateDate:[
          {required: true, message: '必须输增值业务许可证到期时间'},
        ],
        filingsDateDate:[
          {required: true, message: '必须输备案证书到期时间'},
        ],
        codeNumberDateDate:[
          {required: true, message: '必须输码号证书到期时间'},
        ],
        openingNumber: [
          {required: true, message: '必须输入手机号'},
        ],
        contractDateDate: [
          {required: true, message: '必须输入合同到期时间'},
        ],
        businessLicenseDateDate: [
          {required: true, message: '必须输入营业执照到期时间'},
        ],
        codeNumberContactPhone: [
          {required: true, message: '请输入单位联系人手机号!', trigger: 'blur'}, {validator: this.isPhone}
        ],
        managePhone: [
          {required: true, message: '请输入客户经理手机号!', trigger: 'blur'}, {validator: this.isPhone}
        ],
        customerName: [
          {required: true, message: '必须输入客户名称'},
        ],
        userState: [
          {required: true, message: '必须输入用户状态'},
        ],
        codeNumber : [
          {required: true, message: '必须输入码号'},
        ],
        numberUse: [
          {required: true, message: '必须输入号码用途'},
        ],
        staffNo: [
          {required: true, message: '必须输入用户发展员工'},
        ],
        isCsp: [
          {required: true, message: '必须输入是否为isCsp商'},
        ],
        codeNumberBusinessLicense: [
          {required: true, message: '必须选择是否一致'},
        ],
        isSigningNumber: [
          {required: true, message: '请选择是否一致'},
        ],
        isAll: [
          {required: true, message: '必须选择资料是否完整'},
        ],
        isComplete: [
          {required: true, message: '必须选择是否完成整改'},
        ],
        contractDateDateIs: [
          {required: true, message: '必须选择合同到期时间是否长期'},
        ],
        businessLicenseDateDateIs: [
          {required: true, message: '必须选择营业执照到期时间是否长期'},
        ],
        codeNumberDateDateIs: [
          {required: true, message: '必须选择码号证书有效期是否长期'},
        ],
        filingsDateDateIs: [
          {required: true, message: '必须选择备案通知是否长期'},
        ],
        permitDateDateIs:[
          {required: true, message: '必须选择增值业务许可证是否长期'},
        ],
      },
      labelCol7: {
        labelCol: {
          xs: {span: 24},
          sm: {span: 21},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 3},
        }
      },
      labelCol4: {
        labelCol: {
          xs: {span: 24},
          sm: {span: 10},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 12},
        }
      },
      labelCol5: {
        labelCol: {
          xs: {span: 24},
          sm: {span: 14},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 8},
        }
      },
      labelCol1: {
        labelCol: {
          xs: {span: 24},
          sm: {span: 2},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 22},
        }
      },
      labelCol6: {
        labelCol: {
          xs: {span: 24},
          sm: {span: 17},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 7},
        }
      },
      labelCol8: {
        labelCol: {
          xs: {span: 24},
          sm: {span: 10},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 12},
        }
      },
      labelCol1Note: {
        labelCol: {
          xs: {span: 24},
          sm: {span: 4},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 14},
        }
      },
      labelCol1Note2: {
        labelCol: {
          xs: {span: 24},
          sm: {span: 6},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 14},
        }
      },
      isPhoneshow:false,
      // 步骤条相关
      steps: {
        // 当前所在第几部
        current: 0,
        currentId: "",
        stepsNow: {},
        steps00: [

        ],

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

      this.getInfoByInfoId( this.query.infoId);
      // 获取客户基础信息
      this.getInfoDataById(this.query.infoId);


    }


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

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

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

    /**移除文件*/
    removeFile(fileData, fileAttribute) {
      let that = this.shotInfoModel;
      //处理轮播数据
      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.shotInfoModel[textId].trim() > 0) {
            this.steps.stepsNow[this.steps.current].status = "finish"
          } else {
            this.steps.stepsNow[this.steps.current].status = "wait"
          }
        } else {
          this.steps.stepsNow[this.steps.current].status = "finish"
        }
        that[fileAttribute] = swiperImg
      }
    },
    selfUploadContractView(item) {
      this.idCurrent= this.steps.stepsNow[this.steps.current].id;
      var fileAttribute =this.steps.stepsNow[this.steps.current].id;
      var that = this;

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

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

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

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

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

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

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

      };
      console.log(stringToHTML('<h1>Hello world!</h1><p>How are you today?</p >'));
    },
    /**步骤条点击事件*/
    stepsClick(current) {
      this.steps.current = current;
      this.steps.currentId = this.steps.stepsNow[current].id
      for (var i in this.steps.stepsNow) {
        if (this.steps.stepsNow[i].status != "finish") {
          this.steps.stepsNow[i].status = "wait"
        }
        if (this.steps.stepsNow[i].status === "finish") {
          this.steps.stepsNow[i].status === "finish"
        }
      }
      if (this.steps.stepsNow[current].status!== "finish") {
        this.steps.stepsNow[current].status = "process"
      }
      this.showPhone(false,false);
    },
    /**返回上一级*/
    back() {
      this.$router.go(-1);
      //关闭当前页
      this.closeCurrent();
    },
    getDueInfoDataById(dueId) {
      var data = {
        "id": dueId,
      }
      getAction(this.url.warningById, data).then((res) => {

        if (res.success) {
          let result = res.result;
          this.shortNowContractDateIs=result.shortNowContractDateIs
          this.shortNowCodeNumberDateIs=result.shortNowCodeNumberDateIs
          this.shortNowFilingsDataIs=result.shortNowFilingsDataIs
          this.shortNowPermitDateIs=result.shortNowPermitDateIs
          this.steps.steps00=[];
          if (result.shortNowContractDateIs=='1'){
            this.steps.steps00.push( {
              title: '上传合同资料',
              content: 'First-content',
              id: "contractDate",
              status: "wait"
            })
          }
          if (result.shortNowCodeNumberDateIs=='1'){
            this.steps.steps00.push( {
              title: '上传码号证书资料',
              content: 'First-content',
              id: "codeNumberDate",
              status: "wait"
            })
          }
          if (result.shortNowFilingsDataIs=='1'){
            this.steps.steps00.push(
              {
                title: '上传备案通知资料',
                content: 'First-content',
                id: "filingsDate",
                status: "wait"
              }
            )
          }
          if (result.shortNowPermitDateIs=='1'){
            this.steps.steps00.push( {
                title: '上传增值业务许可证资料',
                content: 'First-content',
                id: "permitDate",
                status: "wait"
              }
            )
          }
          this.steps.stepsNow = this.steps.steps00;
          this.steps.currentId = this.steps.stepsNow[0].id
          this.getInfoDataByInfoId(this.infoModel.dueId);
        }

      })
    },
    /**获取客户信息*/
    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;
            //alert("result.userState"+result.userState)
            //用户状态
            that.userState =result.userState;
            //用户发展员工
            that.infoModel.staffNo =result.staffNo;
            that.infoModel.customerNo =result.customerNo;
            that.infoModel.userNo =result.userNo;
            that.infoModel.networkAccessTime =result.networkAccessTime;
            that.infoModel.staffName =result.staffName;
            that.notes =result.notes;
          }
        })
      }
      if (resultA!==undefined){
        resultA.userState=that.infoModel.userState
      }
      return resultA
    },

    getInfoByInfoId(infoId) {
      var that = this;
      if (infoId) {
        var data = {
          "infoId": infoId,
        }
        getAction("/smsCheck/customerData/queryDataLogByInfoId", data).then((res) => {
          if (res.success) {
            let result = res.result;
            result=this.getInfoDataById(infoId,result)

            that.infoModel.staffName=result.staffName;
            that.infoModel.customerNo =result.customerNo;
            that.infoModel.userNo=result.userNo;
            that.infoModel.networkAccessTime=result.networkAccessTime;
            that.infoModel.infoId=result.infoId;
            that.infoModel.isComplete=result.isComplete;
            that.infoModel.isAll=result.isAll;
            that.infoModel.isSigningNumber=result.isSigningNumber;
            that.infoModel.isCsp=result.isCsp;
            that.infoModel.codeNumberBusinessLicense=result.codeNumberBusinessLicense;
            that.infoModel.codeNumberContactPhone=result.codeNumberContactPhone;

            that.infoModel.contractDateDate=result.contractDateDate;
            that.infoModel.contractDateDateIs=result.contractDateDateIs;
            that.infoModel.codeNumberDateDate=result.codeNumberDateDate;
            that.infoModel.codeNumberDateDateIs=result.codeNumberDateDateIs;
            that.infoModel.filingsDateDate=result.filingsDateDate;
            that.infoModel.filingsDateDateIs=result.filingsDateDateIs;
            that.infoModel.permitDateDateIs=result.permitDateDateIs;
            that.infoModel.permitDateDate=result.permitDateDate;
            //客户经理手机号
            that.infoModel.managePhone=result.managePhone;
              //用户发展员工
            that.infoModel.staffNo=result.staffNo;
              //号码用途
            that.infoModel.numberUse=result.numberUse;
              //码号
            that.infoModel.codeNumber=result.codeNumber;
              //用户状态
            that.infoModel.userState=result.userState;
              // 客户名称
            that.infoModel.customerName=result.customerName;


          }
        })
      }
    },
    /**获取客户信息*/
    getInfoDataByInfoId(dueId) {
      //alert(1)
      var that = this;
      if (dueId) {
        var data = {
          "dueId": dueId,
        }
        getAction(this.url.getInfoDataByInfoId, data).then((res) => {
          if (res.success) {
            let result = res.result;
            that.shotInfoModel=result;
            that.shotInfoModel.contractDate= JSON.parse(result.contractDate);
            that.shotInfoModel.codeNumberDate= JSON.parse(result.codeNumberDate);
            that.shotInfoModel.filingsDate= JSON.parse(result.filingsDate);
            that.shotInfoModel.permitDate= JSON.parse(result.permitDate);

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

          }
        })
      }
    }
  }

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

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

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

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

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

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

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

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

  .fade-out {
    opacity: 0;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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