<template>
  <a-spin :spinning="uploading" size="large" tip="正在提交资料，请勿关闭当前网页...">
    <!--  客户信息-->
    <a-page-header
      style="background-color: #FFFFFF;margin-bottom:10px"
      title="行短资料稽核"
      :sub-title="notes"
      @back="back"
    >
      <div>
        <a-form-model
          ref="form"
          :model="infoModel"
          :rules="rules"
        >
          <a-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 v-if='userState==="1"'  >在用</span>
                <span v-if='userState==="2"'  >停机</span>
                <span 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-form-model>
      </div>
    </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="6"  v-if=' shortNowPermitDateIs =="1"'>
            <a-form-model-item label="增值业务许可证到期时间" prop="openingNumber" v-bind="labelCol6">
              <span   class="cornflowerblue">{{ shotInfoModel.permitDateDate==="" ?"长期": shotInfoModel.permitDateDate }}</span>
            </a-form-model-item>
          </a-col>

          <a-col :span="6"  v-if=' shortNowContractDateIs =="1"'>
            <a-form-model-item label="合同到期时间" prop="openingNumber" v-bind="labelCol4">
              <span   class="cornflowerblue">{{ shotInfoModel.contractDateDate==="" ?"长期": shotInfoModel.contractDateDate }}</span>
            </a-form-model-item>
          </a-col>

          <a-col :span="6" v-if=' shortNowCodeNumberDateIs =="1"'>
            <a-form-model-item label="码号证书到期时间"  prop="openingNumber" v-bind="labelCol4">
              <span   class="cornflowerblue">{{ shotInfoModel.codeNumberDateDate==="" ?"长期":shotInfoModel.codeNumberDateDate }}</span>
            </a-form-model-item>
          </a-col>
          <a-col :span="6"  v-if=' shortNowFilingsDataIs =="1"'>
            <a-form-model-item label="备案通知到期时间" prop="openingNumber" v-bind="labelCol4">
              <span   class="cornflowerblue">{{ shotInfoModel.filingsDateDate==="" ?"长期": shotInfoModel.filingsDateDate }}</span>
            </a-form-model-item>
          </a-col>

        </a-row>
        <a-row  >
          <a-col :span="6">
            <a-form-model-item label="稽核状态是否通过" prop="basicCheckState" v-bind="labelCol4">
              <a-radio-group button-style="solid"   @change='sizeColor'
                             v-model='shotInfoModel.warningInfo'>
                <a-radio :value="'1'">是</a-radio>
                <a-radio :value="'2'">否</a-radio>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item  label="稽核结果" prop="basicCheckNote" v-bind="labelCol1">
              <a-textarea style="height: 50px" v-model=shotInfoModel.warningInfoRemark
                          placeholder="请输入上述信息的稽核结果"/>
              <!--            :auto-size="{ minRows: 3, maxRows: 5 }"-->
            </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"   :status="item.status">
          <a-icon v-if="item.solution" style='color: #faad14;' :type="item.type"  :slot="item.slot" />
          <a-icon v-if="item.solutionGreen" style='color: #52c41a;' :type="item.type"  :slot="item.slot" />
          <span v-if="item.solutionGreen" style='color: #52c41a;'   slot="title" >{{item.title}}</span>
          <span v-else-if='item.status==="error"'  style='color: red' slot="title" >{{item.title}}</span>
          <span v-else-if='item.yellow'  style='color: sandybrown' slot="title" >{{item.title}}</span>
          <span v-else    slot="title" >{{item.title}}</span>
        </a-step>

      </a-steps>
      <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 style="width: 100%;margin-left: 12%">
        <a-list size="large"  >
          <template>
            <a-list-item style='height: 60px' >
              <a-col :span="6" >
                <div>
                  <div style="float:left;margin: 50px 3px;" id="directRequirements">稽核是否通过：</div>
                  <div style="float:left;margin: 50px 10px;" >
                    <a-radio-group  button-style="solid"  @change="basicCheckClick(shotInfoModel.contractDateResult)" v-model='shotInfoModel.contractDateResult'>
                      <a-radio :value="'1'">是</a-radio>
                      <a-radio :value="'2'">否</a-radio>
                    </a-radio-group>
                  </div>
                </div>
              </a-col>
            </a-list-item>
          </template>
        </a-list>
      </div>
      <!--      附件-->
      <div>
        <a-form-model-item style="left: 5%;width: 100%;" label="稽核结果备注：" v-bind="labelCol1Note">
          <a-textarea style="height: 77px"
                      v-model="shotInfoModel.contractDateResultRemark"
                      placeholder="请输入稽核结果"
          />
        </a-form-model-item>
        <a-form-model-item style="left: 10%;width: 70%;" label="上传资料备注：" v-bind="labelCol1Note">
          <a-tag class="font-size-14" color="orange">{{ shotInfoModel.contractDateRemark }}</a-tag>
          <!--            :auto-size="{ minRows: 3, maxRows: 5 }"-->
        </a-form-model-item>
      </div>
      <div style="height: 70%;position: relative;left: 10%">
        <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">
                <a-button  style="float:left;display: block;position: relative;margin-top: 1px;border-color: #1890FF;color: #1890FF"
                           v-if="  item.urlBase "
                           @click="downloadFile(item.url)">下载
                </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>

            </swiper-slide>

          </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="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 style="width: 100%;margin-left: 12%">
        <a-list size="large"  >
          <template>
            <a-list-item style='height: 60px' >
              <a-col :span="6" >
                <div>
                  <div style="float:left;margin: 50px 3px;" id="directRequirements">稽核是否通过</div>
                  <div style="float:left;margin: 50px 10px;" >
                    <a-radio-group  button-style="solid"  @change="basicCheckClick(shotInfoModel.codeNumberDateResult)" v-model='shotInfoModel.codeNumberDateResult'>
                      <a-radio :value="'1'">是</a-radio>
                      <a-radio :value="'2'">否</a-radio>
                    </a-radio-group>
                  </div>
                </div>
              </a-col>
            </a-list-item>
          </template>
        </a-list>
      </div>
      <!--      附件-->
      <div>
        <a-form-model-item style="left: 10%;width: 100%;" label="稽核结果备注：" v-bind="labelCol1Note">
          <a-textarea style="height: 77px"
                      v-model="shotInfoModel.codeNumberDateResultRemark"

                      placeholder="请输入稽核结果"
          />
        </a-form-model-item>
        <a-form-model-item style="left: 10%;width: 70%;" label="上传资料备注：" v-bind="labelCol1Note">
          <a-tag class="font-size-14" color="orange">{{ shotInfoModel.codeNumberDateRemark }}</a-tag>
          <!--            :auto-size="{ minRows: 3, maxRows: 5 }"-->
        </a-form-model-item>
      </div>
      <!--      文件上传-->
      <div style="height: 70%;position: relative;left: 10%">
        <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  style="float:left;display: block;position: relative;margin-top: 1px;border-color: #1890FF;color: #1890FF"
                           v-if="  item.urlBase "
                           @click="downloadFile(item.url)">下载
                </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>
          </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="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 style="width: 100%;margin-left: 12%">
        <a-list size="large"  >
          <template>
            <a-list-item style='height: 60px' >
              <a-col :span="6" >
                <div>
                  <div style="float:left;margin: 50px 3px;" id="directRequirements">稽核是否通过</div>
                  <div style="float:left;margin: 50px 10px;" >
                    <a-radio-group  button-style="solid"  @change="basicCheckClick(shotInfoModel.filingsDateResult)" v-model='shotInfoModel.filingsDateResult'>
                      <a-radio :value="'1'">是</a-radio>
                      <a-radio :value="'2'">否</a-radio>
                    </a-radio-group>
                  </div>
                </div>
              </a-col>
            </a-list-item>
          </template>
        </a-list>
      </div>
      <!--      附件-->
      <div>
        <a-form-model-item style="left: 5%;width: 100%;" label="稽核结果备注：" v-bind="labelCol1Note">
          <a-textarea style="height: 77px"
                      v-model="shotInfoModel.filingsDateResultRemark"

                      placeholder="请输入稽核结果"
          />
        </a-form-model-item>
        <a-form-model-item style="left: 10%;width: 70%;" label="上传资料备注：" v-bind="labelCol1Note">
          <a-tag class="font-size-14" color="orange">{{ shotInfoModel.filingsDateRemark }}</a-tag>
          <!--            :auto-size="{ minRows: 3, maxRows: 5 }"-->
        </a-form-model-item>
      </div>
      <!--      文件上传-->
      <div style="height: 70%;position: relative;left: 10%">
        <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  style="float:left;display: block;position: relative;margin-top: 1px;border-color: #1890FF;color: #1890FF"
                           v-if="  item.urlBase "
                           @click="downloadFile(item.url)">下载
                </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>
          </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="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 style="width: 100%;margin-left: 12%">
        <a-list size="large"  >
          <template>
            <a-list-item style='height: 60px' >
              <a-col :span="6" >
                <div>
                  <div style="float:left;margin: 50px 3px;" id="directRequirements">稽核是否通过</div>
                  <div style="float:left;margin: 50px 10px;" >
                    <a-radio-group  button-style="solid"  @change="basicCheckClick(shotInfoModel.permitDateResult)" v-model='shotInfoModel.permitDateResult'>
                      <a-radio :value="'1'">是</a-radio>
                      <a-radio :value="'2'">否</a-radio>
                    </a-radio-group>
                  </div>
                </div>
              </a-col>
            </a-list-item>
          </template>
        </a-list>
      </div>
      <!--      附件-->
      <div>
        <a-form-model-item style="left: 5%;width: 100%;" label="稽核结果备注：" v-bind="labelCol1Note">
          <a-textarea style="height: 77px"
                      v-model="shotInfoModel.permitDateResultRemark"

                      placeholder="请输入稽核结果"
          />
        </a-form-model-item>
        <a-form-model-item style="left: 10%;width: 70%;" label="上传资料备注：" v-bind="labelCol1Note">
          <a-tag class="font-size-14" color="orange">{{ shotInfoModel.permitDateRemark }}</a-tag>
          <!--            :auto-size="{ minRows: 3, maxRows: 5 }"-->
        </a-form-model-item>
      </div>
      <div style="height: 70%;position: relative;left: 10%">
        <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  style="float:left;display: block;position: relative;margin-top: 1px;border-color: #1890FF;color: #1890FF"
                           v-if="  item.urlBase "
                           @click="downloadFile(item.url)">下载
                </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>
          </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="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";

let Base64 = require('js-base64').Base64
export default {
  name: 'TaskUploadData',
  inject: ['closeCurrent'],
  components: {
    noDataPng
  },
  data() {
    return {
      open:false,
      columns:[
        { title: '编辑时间', width: 100, dataIndex: 'updateDate', key: 'updateDate'  },
        { title: '修改字段', width: 100, dataIndex: 'updateField', updateField: 'age'  },
        { title: '修改内容', width: 100, dataIndex: 'context', key: 'context' },
      ],
      //缩略与大图数据源
      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,
      infoDataStatus:"",
      url: {
        "warningById":"/smsCheck/customerInfo/warningById",
        "getInfoDataById": "/smsCheck/customerInfo/queryById",
        "getInfoDataByInfoId": "/smsCheck/customerData/queryWarningDataLogByInfoId",
        // 上传文件
        "minioUpload": "/smsCheck/customerData/uploadMinio",
      },
      //是否批量上传
      batchImproves: false,
      // 稽核结果
      specialResult: {},
      // 全局是否是在加载中
      uploading: false,
      //上级传参
      query: {
        data: {},
      },
      shotInfoModel:{
        dueId:'',
        logId:"",
        dataId:"",
        //合同到期时间
        contractDate:[{}],
        contractDateDateIs:"",
        contractDateDate:"",
        contractDateRemark:"",
        contractDateResult:'',
        contractDateResultRemark:'',
        //码号证书到期时间
        codeNumberDate:[{}],
        codeNumberDateDate:"",
        codeNumberDateDateIs:"",
        codeNumberDateRemark:"",
        codeNumberDateResult:'',
        codeNumberDateResultRemark:'',
        //'备案通知到期时间
        filingsDate:[{}],
        filingsDateDate:"",
        filingsDateDateIs:"",
        filingsDateRemark:"",
        filingsDateResult:'',
        filingsDateResultRemark:'',
        //增值业务许可证到期时间
        permitDate:[{}],
        permitDateDate:"",
        permitDateRemark:"",
        permitDateDateIs:"",
        permitDateResult:'',
        permitDateResultRemark:'',
        warningInfo:"",
        warningInfoRemark:"",
      },
      userState:"",
      notes:"",
      // 客户资料信息
      /** 行短码号证书是否到期 */
      shortNowCodeNumberDateIs:"",
      /** 行短备案通知是否到期 */
      shortNowFilingsDataIs:"",
      /** 行短增值业务许可证是否到期 */
      shortNowPermitDateIs:"",
      /** 行短合同是否到期 */
      shortNowContractDateIs:"",
      history:"",
      dataList:[],
      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: {
      },
      labelCol4: {
        labelCol: {
          xs: {span: 24},
          sm: {span: 12},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 12},
        }
      },
      labelCol6: {
        labelCol: {
          xs: {span: 24},
          sm: {span: 17},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 7},
        }
      },
      labelCol7: {
        labelCol: {
          xs: {span: 24},
          sm: {span: 21},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 3},
        }
      },
      labelCol1: {
        labelCol: {
          xs: {span: 24},
          sm: {span: 2},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 22},
        }
      },
      labelCol1Note: {
        labelCol: {
          xs: {span: 24},
          sm: {span: 4},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 16},
        }
      },
      labelCol1Note2: {
        labelCol: {
          xs: {span: 24},
          sm: {span: 6},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 14},
        }
      },
      // 步骤条相关
      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: {},
  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: {
    downloadFile(url){
      const a = document.createElement('a')
      a.style.display='none';
      a.href=url
      document.body.appendChild(a)
      a.click()
    },
    showModal() {
      this.open = true;
    },
    handleOk() {
      this.open = false;
    },
    historys() {
      this.showModal()
    },
    jumpUrl(url){
      var a = document.createElement("a");
      a.setAttribute("href", url);
      a.setAttribute("target", "_blank");
      a.click();
    },
    sizeColor(){
      if (this.infoModel.infoResult==="2"){
        var element = document.getElementById('directRequirements');
        element.style.color = 'red';
      }
      if (this.infoModel.infoResult==="1"){
        var element = document.getElementById('directRequirements');
        element.style.color = 'black';
      }
    },
    /**节点状态*/
    basicCheckClick(state) {
      let boolean = state == "1" ? true : false;
      if (boolean) {
        if ( (this.steps.stepsNow[this.steps.current]["status"] === "wait"||   this.steps.stepsNow[this.steps.current]["status"] ==="process")
          &&   this.steps.stepsNow[this.steps.current]["type"] !== "solution" || !this.steps.stepsNow[this.steps.current].Isyellow){
          this.steps.stepsNow[this.steps.current]["status"] = "finish";

        }else {
          this.steps.stepsNow[this.steps.current]["status"] = "finish";
          this.steps.stepsNow[this.steps.current].solutionGreen = true;
          this.steps.stepsNow[this.steps.current].yellow = false;
          this.steps.stepsNow[this.steps.current].slot="icon"
          this.steps.stepsNow[this.steps.current].type="solution"
          this.steps.stepsNow[this.steps.current].solution = false;
        }
      } else {
        this.steps.stepsNow[this.steps.current].solutionGreen = false;
        this.steps.stepsNow[this.steps.current].solution = false;
        this.steps.stepsNow[this.steps.current].slot=""
        this.steps.stepsNow[this.steps.current].status = "error";
        this.steps.stepsNow[this.steps.current].type=""
      }
      //若以前稽核整改过
      if ( this.steps.stepsNow[this.steps.current].Isyellow && !this.steps.stepsNow[this.steps.current].solutionGreen){
        this.steps.stepsNow[this.steps.current].type="solution"
        this.steps.stepsNow[this.steps.current].slot="icon"
        this.steps.stepsNow[this.steps.current].status = "finish"
        this.steps.stepsNow[this.steps.current].solution = true;
        this.steps.stepsNow[this.steps.current].yellow = true;
      }
    },
    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;
    },
    /*提交*/
    submitAuditLot() {
      /*if (this.infoDataStatus=='5'){
        this.$message.warn( "该数据稽核未达终态...");
        return
      }*/
      this.uploading=true;
      var info = "yes";
      if (this.shotInfoModel.warningInfo==="" || this.shotInfoModel.warningInfo===undefined || this.shotInfoModel.warningInfo===null){
        info = "infoNo";
        this.$message.warn( "预警字段未进行稽核...");
        this.uploading = false;
      }

      var text= "";
      for (var i in this.steps.stepsNow) {
        if (this.steps.stepsNow[i].status !== "finish" && this.steps.stepsNow[i].status !== "error") {
          // text+= '111<br/> ';
          var str=this.steps.stepsNow[i].title;
          text+=  str+"资料或备注都未稽核!!!"+'<br/><br/>';
          //this.$message.warn( this.steps.stepsNow[i].title +"资料或备注都未上传!!!");
          info="no";
        }
      }
      if (info==="infoNo"){
        this.$warning({
          title: '提示',
          dangerouslyUseHTMLString: true,
          content:(h) => {
            return h('div', {
              domProps: {
                innerHTML: "预警字段未进行稽核！！！"
              },
            }, []);
          }
        })
      }
      if (info==="no"){
        this.$warning({
          title: '提示',
          dangerouslyUseHTMLString: true,
          content:(h) => {
            return h('div', {
              domProps: {
                innerHTML: text
              },
            }, []);
          }
        })
      }
      if (info==="no"){
        this.uploading=false;
        return
      }
      var that = this;
      var data=that.shotInfoModel ;
      //var dataToStr =this.dataListToStr(data);
      //data=dataToStr;
      postAction("/smsCheck/customerData/addWarningLog", data).then((res) => {
        if (res.success) {
          this.uploading=false;
          this.$message.success("提交成功", 3);
          this.addIng == true
          this.$router.push({path: '/smscheck/TaskCheckList'});
          this.closeCurrent();
        } else {
          this.uploading=false;
          if (  res.message  !==null){
            this.$message.error( res.message);
          }else {
            this.$message.error("提交失败");
          }
        }
      }).finally(() => {
        this.uploading = false;
      })
    },
    /**步骤条点击事件*/
    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!== "error") {
          this.steps.stepsNow[i].status = "wait"
        }
        if (this.steps.stepsNow[i].status === "finish") {
          this.steps.stepsNow[i].status === "finish"
        }
        if (this.steps.stepsNow[i].status === "error") {
          this.steps.stepsNow[i].status === "error"
        }
      }
      if (this.steps.stepsNow[current].status!== "finish" && this.steps.stepsNow[current].status!== "error" ) {
        this.steps.stepsNow[current].status = "process"
      }

    },
    /**返回上一级*/
    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) {

      if (id) {
        var data = {
          "id": id,
        }
        getAction(this.url.getInfoDataById, data).then((res) => {
          if (res.success) {
            let result = res.result;
            //用户发展员工
            this.infoModel.staffNo =result.staffNo;
            //用户状态
            this.userState =result.userState;
            this.infoModel.customerNo=result.customerNo;
            this.infoModel.networkAccessTime=result.networkAccessTime;
            this.notes =result.notes;
          }

        })
      }
      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;

            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) {
      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);
            that.shotInfoModel.dataId= result.dataId ;
            that.infoDataStatus=result.infoDataStatus;
            that.shotInfoModel.logId= result.logId ;
            for (var i in that.steps.stepsNow) {
              for (var j in result[that.steps.stepsNow[i].id]){
                if (result[that.steps.stepsNow[i].id+'Result']!=undefined &&result[that.steps.stepsNow[i].id+'Result']!=null&&result[that.steps.stepsNow[i].id+'Result'][0]!==undefined){
                  if (result[that.steps.stepsNow[i].id+'Result'][0]==='1'){
                    that.steps.stepsNow[i].status = "finish"
                  }else {
                    that.steps.stepsNow[i].type="solution"
                    that.steps.stepsNow[i].slot="icon"
                    that.steps.stepsNow[i].status = "finish"
                    that.steps.stepsNow[i].solution = true;
                    that.steps.stepsNow[i].yellow = true;
                    that.steps.stepsNow[i].Isyellow = true;
                  }
                }
              }
            }
            if (that.infoModel.infoResult==="2"){
              var element = document.getElementById('directRequirements');
              element.style.color = 'red';
            }
            if (that.infoModel.infoResult==="1"){
              var element = document.getElementById('directRequirements');
              element.style.color = 'black';
            }
            //that.getInfoDataById(infoId)
          }
        })
      }

    }

  }


}
</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;
}

.swiper-slide {
  background-size: cover;
  background-position: center;
}

.gallery-top {
  // height: 80% !important;
  /*height: 600px;*/
  width: 100%;
  left: 10%;
  margin-bottom: 30px
}

.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 {
    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;
}
.cornflowerblue {
  color: cornflowerblue;
}


.font-size-14 {
  font-size:14px
}
</style>
