tnc-fe/src/views/specialApply/modules/TaskCheckDetails.vue

<template>
  <a-spin :spinning="uploading" size="large" tip="正在提交资料，请勿关闭当前网页...">
    <div>
      <a-card :bordered="false" :title="'特审复开资料填写'" style="margin-top: 10px;">
        <a-form-model
          ref="form"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          :model="model"
          :rules="rules"
        >
          <!--   业务基本情况内容   -->
          <a-card :bordered="true">
            <div slot="title">
              基础信息
              <span v-show="specialResult.basicInfoState == '1'">✅</span>
              <span v-show="specialResult.basicInfoState == '0'">❌</span>
            </div>
            <a-row>
              <a-col :span="24">
                <a-form-model-item label="用户选择" prop="userOpenState" v-bind="labelCol1">
                  <a-radio-group v-model="model.userLable" button-style="solid" @change="changeUserLable()">
                    <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="24">
                <a-form-model-item label="申请复开号码" prop="openingNumber" v-bind="labelCol1">
                  <a-input :disabled="true" v-model="model.openingNumber" placeholder="申请复开号码"></a-input>
                </a-form-model-item>
              </a-col>

              <a-col :span="24">
                <a-form-model-item label="客户名称(使用人)" prop="customerName" v-bind="labelCol1">
                  <a-input :disabled="true" v-model="model.customerName" placeholder="客户名称/使用人名称"></a-input>
                </a-form-model-item>
              </a-col>

              <a-col :span="24" v-if="model.userLable == '1'">
                <a-form-model-item label="单位名称" prop="customerName" v-bind="labelCol1">
                  <a-input v-model="model.unitName" placeholder="单位名称"></a-input>
                </a-form-model-item>
              </a-col>

              <a-col :span="24">
                <a-form-model-item label="关停时间" prop="shutdownTime" v-bind="labelCol1">
                  <a-date-picker :disabled="true" :style="{width:'100%'}" v-model="model.shutdownTime"
                                 format="YYYY-MM-DD HH:mm:ss"
                                 showTime valueFormat="YYYY-MM-DD HH:mm:ss"/>
                </a-form-model-item>
              </a-col>

              <a-col :span="24">
                <a-form-model-item label="申请复开原因" prop="reasonReopening" v-bind="labelCol1">
                  <a-input :disabled="true" v-model="model.reasonReopening" placeholder="申请复开原因"></a-input>
                </a-form-model-item>
              </a-col>

              <a-col :span="24">
                <a-form-model-item label="材料标签选择" prop="userOpenState" v-bind="labelCol1">
                  <a-radio-group v-model="model.materialLabel" button-style="solid">
                    <a-radio-button v-if="model.materialLabel == '0'" value="0">材料不全（有特审）</a-radio-button>
                    <a-radio-button v-if="model.materialLabel == '1'" value="1">材料齐全（无特审）</a-radio-button>
                  </a-radio-group>
                </a-form-model-item>
              </a-col>


              <a-col :span="24">
                <a-form-model-item label="关停标签选择" prop="userOpenState" v-bind="labelCol1">
                  <a-radio-group v-model="model.shutdownLabel" button-style="solid">
                    <a-radio-button v-if="model.shutdownLabel == '0'" value="0">安防停机（高危漫游地）</a-radio-button>
                    <a-radio-button v-if="model.shutdownLabel == '1'" value="1">安防关停（紫名单）</a-radio-button>
                    <a-radio-button v-if="model.shutdownLabel == '2'" value="2">安防停机（专班研判）</a-radio-button>
                    <a-radio-button v-if="model.shutdownLabel == '3'" value="3">安防停机（可复开)</a-radio-button>
                    <a-radio-button v-if="model.shutdownLabel == '4'" value="4">沉默移动卡保护性单停</a-radio-button>
                    <a-radio-button v-if="model.shutdownLabel == '5'" value="5">集团一点停复机（单停）</a-radio-button>
                    <a-radio-button v-if="model.shutdownLabel == '6'" value="6">大数据保护停机单停</a-radio-button>
                    <a-radio-button v-if="model.shutdownLabel == '7'" value="7">工信部断卡单停</a-radio-button>
                    <a-radio-button v-if="model.shutdownLabel == '8'" value="8">实人核验未通过关停（单停）</a-radio-button>
                  </a-radio-group>
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-card>

          <!--          系统实名制截图-->
          <a-card :bordered="true">
            <div slot="title">
              系统实名制截图
              <span v-show="specialResult.nameFindComplianceState == '1'">✅</span>
              <span v-show="specialResult.nameFindComplianceState == '0'">❌</span>
            </div>
            <div class="clearfix">
              <div style="width: 50%;left: 25%;position: relative">
                <!-- swiper1 -->
                <swiper
                  class="swiper gallery-top"
                  :options="swiperOptionTop"
                  ref="swiperTop"
                >
                  <swiper-slide class="slide-1" v-for="(item, index) in nameFindCompliance" :key="item.id">
                    <iframe
                      v-if="item.urlBase"
                      frameborder="1"
                      :src="item.urlBase"
                      ref="ifr"
                      width="80%"
                      height="400px"
                      scrolling="auto">
                    </iframe>
                    <img style="width: 80%;height: 400px;border: 1px solid;"
                         v-if="!item.urlBase" :src="noDataPng" border="1">
                    <a-button v-if="item.urlBase && specialResult.nameFindComplianceState != '1'"
                              style="display: block;margin-top: 10px;border-color: red;color: red"
                              danger @click="removeFile(item,'nameFindCompliance')">移除
                    </a-button>

                  </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 nameFindCompliance"
                    :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
                      v-if="specialResult.nameFindComplianceState != '1'"
                      listType="picture-card"
                      name="file"
                      :multiple="false"
                      :action="importMinioUploadAction"
                      :customRequest="e => selfUploadContract(e, 'nameFindCompliance')"
                      :headers="tokenHeader"
                      :showUploadList="false"
                      :beforeUpload="importBeforeUpload"
                      @change="importHandleChange"
                    >
                      <div v-if="nameFindCompliance.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>


              <a-form-model-item style="left: 20%;width: 80%" label="实名制截图备注：" v-bind="labelCol1Plus">
                <a-textarea :disabled="specialResult.nameFindComplianceState == 1 ? true : false" style="height: 50px"
                            v-model="nameFindComplianceRemark"
                            placeholder="如没有系统实名制截图，需要说明原因"
                />
                <!--            :auto-size="{ minRows: 3, maxRows: 5 }"-->
              </a-form-model-item>

              <!--              备注-->
              <li style="color: red"
                  v-if="specialResult.nameFindComplianceState == 0 && specialResult.nameFindComplianceNote != null">
                稽核结果备注：{{ specialResult.nameFindComplianceNote }}
              </li>
            </div>
          </a-card>

          <!--          材料齐不全有特审核-->
          <a-card v-if="model.materialLabel == '0'" :bordered="true">
            <div slot="title">
              特审单
              <span v-show="specialResult.specialReviewFormState == '1'">✅</span>
              <span v-show="specialResult.specialReviewFormState == '0'">❌</span>
            </div>
            <div class="clearfix">
              <div class="clearfix">
                <div style="width: 50%;left: 25%;position: relative">
                  <!-- swiper1 -->
                  <swiper
                    class="swiper gallery-top"
                    :options="swiperOptionTop"
                    ref="swiperTop"
                  >
                    <swiper-slide class="slide-1" v-for="(item, index) in specialReviewForm" :key="item.id">
                      <iframe
                        v-if="item.urlBase"
                        frameborder="1"
                        :src="item.urlBase"
                        ref="ifr"
                        width="80%"
                        height="400px"
                        scrolling="auto">
                      </iframe>
                      <img style="width: 80%;height: 400px;border: 1px solid;"
                           v-if="!item.urlBase" :src="noDataPng" border="1">
                      <a-button v-if="item.urlBase && specialResult.specialReviewFormState != '1'"
                                style="display: block;margin-top: 10px;border-color: red;color: red"
                                danger @click="removeFile(item,'specialReviewForm')">移除
                      </a-button>

                    </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 specialReviewForm"
                      :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
                        v-if="specialResult.specialReviewFormState != '1'"
                        listType="picture-card"
                        name="file"
                        :multiple="false"
                        :action="importMinioUploadAction"
                        :customRequest="e => selfUploadContract(e, 'specialReviewForm')"
                        :headers="tokenHeader"
                        :showUploadList="false"
                        :beforeUpload="importBeforeUpload"
                        @change="importHandleChange"
                      >
                        <div v-if="nameFindCompliance.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>
              <!--              备注-->
              <li style="color: red"
                  v-if="specialResult.specialReviewFormState == 0 && specialResult.specialReviewFormNote != null">
                稽核结果备注：{{ specialResult.specialReviewFormNote }}
              </li>
            </div>
          </a-card>

          <!--   附件资料   -->
          <a-card :bordered="true">
            <div slot="title">
              身份证照片/正反面
              <span v-show="specialResult.idCardState == '1'">✅</span>
              <span v-show="specialResult.idCardState == '0'">❌</span>
            </div>
            <div class="clearfix">
              <div style="width: 50%;left: 25%;position: relative">
                <!-- swiper1 -->
                <swiper
                  class="swiper gallery-top"
                  :options="swiperOptionTop"
                  ref="swiperTop"
                >
                  <swiper-slide class="slide-1" v-for="(item, index) in fileListIdCard" :key="item.id">
                    <iframe
                      v-if="item.urlBase"
                      frameborder="1"
                      :src="item.urlBase"
                      ref="ifr"
                      width="80%"
                      height="400px"
                      scrolling="auto">
                    </iframe>
                    <img style="width: 80%;height: 400px;border: 1px solid;"
                         v-if="!item.urlBase" :src="noDataPng" border="1">
                    <a-button v-if="item.urlBase && specialResult.idCardState != '1'"
                              style="display: block;margin-top: 10px;border-color: red;color: red"
                              danger @click="removeFile(item,'fileListIdCard')">移除
                    </a-button>

                  </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 fileListIdCard"
                    :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
                      v-if="specialResult.idCardState != '1'"
                      listType="picture-card"
                      name="file"
                      :multiple="false"
                      :action="importMinioUploadAction"
                      :customRequest="e => selfUploadContract(e, 'fileListIdCard')"
                      :headers="tokenHeader"
                      :showUploadList="false"
                      :beforeUpload="importBeforeUpload"
                      @change="importHandleChange"
                    >
                      <div v-if="fileListIdCard.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>

              <!--              备注-->
              <li style="color: red" v-if="specialResult.idCardState == 0 && specialResult.idCardNote != null">
                稽核结果备注：{{ specialResult.idCardNote }}
              </li>

            </div>
          </a-card>

          <!--          手持证件半身照片-->
          <a-card :bordered="true">
            <div slot="title">
              手持证件半身照片
              <span v-show="specialResult.handCertificateState == '1'">✅</span>
              <span v-show="specialResult.handCertificateState == '0'">❌</span>
            </div>
            <div class="clearfix">
              <div style="width: 50%;left: 25%;position: relative">
                <!-- swiper1 -->
                <swiper
                  class="swiper gallery-top"
                  :options="swiperOptionTop"
                  ref="swiperTop"
                >
                  <swiper-slide class="slide-1" v-for="(item, index) in fileListHandCertificate" :key="item.id">
                    <iframe
                      v-if="item.urlBase"
                      frameborder="1"
                      :src="item.urlBase"
                      ref="ifr"
                      width="80%"
                      height="400px"
                      scrolling="auto">
                    </iframe>
                    <img style="width: 80%;height: 400px;border: 1px solid;"
                         v-if="!item.urlBase" :src="noDataPng" border="1">
                    <a-button v-if="item.urlBase && specialResult.handCertificateState != '1'"
                              style="display: block;margin-top: 10px;border-color: red;color: red"
                              danger @click="removeFile(item,'fileListHandCertificate')">移除
                    </a-button>

                  </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 fileListHandCertificate"
                    :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
                      v-if="specialResult.handCertificateState != '1'"
                      listType="picture-card"
                      name="file"
                      :multiple="false"
                      :action="importMinioUploadAction"
                      :customRequest="e => selfUploadContract(e, 'fileListHandCertificate')"
                      :headers="tokenHeader"
                      :showUploadList="false"
                      :beforeUpload="importBeforeUpload"
                      @change="importHandleChange"
                    >
                      <div v-if="fileListHandCertificate.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>
              <!--              备注-->
              <li style="color: red"
                  v-if="specialResult.handCertificateState == 0 && specialResult.handCertificateNote != null">
                稽核结果备注：{{ specialResult.handCertificateNote }}
              </li>
            </div>
          </a-card>

          <!--          号卡照片-->
          <a-card v-if="model.userLable == '0'" :bordered="true">
            <div slot="title">
              号卡照片
              <span v-show="specialResult.numberCardState == '1'">✅</span>
              <span v-show="specialResult.numberCardState == '0'">❌</span>
            </div>
            <div class="clearfix">
              <div style="width: 50%;left: 25%;position: relative">
                <!-- swiper1 -->
                <swiper
                  class="swiper gallery-top"
                  :options="swiperOptionTop"
                  ref="swiperTop"
                >
                  <swiper-slide class="slide-1" v-for="(item, index) in fileListNumberCard" :key="item.id">
                    <iframe
                      v-if="item.urlBase"
                      frameborder="1"
                      :src="item.urlBase"
                      ref="ifr"
                      width="80%"
                      height="400px"
                      scrolling="auto">
                    </iframe>
                    <img style="width: 80%;height: 400px;border: 1px solid;"
                         v-if="!item.urlBase" :src="noDataPng" border="1">
                    <a-button v-if="item.urlBase && specialResult.numberCardState != '1'"
                              style="display: block;margin-top: 10px;border-color: red;color: red"
                              danger @click="removeFile(item,'fileListNumberCard')">移除
                    </a-button>

                  </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 fileListNumberCard"
                    :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
                      v-if="specialResult.numberCardState != '1'"
                      listType="picture-card"
                      name="file"
                      :multiple="false"
                      :action="importMinioUploadAction"
                      :customRequest="e => selfUploadContract(e, 'fileListNumberCard')"
                      :headers="tokenHeader"
                      :showUploadList="false"
                      :beforeUpload="importBeforeUpload"
                      @change="importHandleChange"
                    >
                      <div v-if="fileListNumberCard.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>
              <!--              备注-->
              <li style="color: red" v-if="specialResult.numberCardState == 0 && specialResult.numberCardNote != null">
                稽核结果备注：{{ specialResult.numberCardNote }}
              </li>
            </div>
          </a-card>

          <!--          使用人证件-->
          <a-card v-if="model.userLable == '1'" :bordered="true">
            <div slot="title">
              使用人证件
              <span v-show="specialResult.userCertificateState == '1'">✅</span>
              <span v-show="specialResult.userCertificateState == '0'">❌</span>
            </div>
            <div class="clearfix">
              <div style="width: 50%;left: 25%;position: relative"></div>
              <!-- swiper1 -->
              <swiper
                class="swiper gallery-top"
                :options="swiperOptionTop"
                ref="swiperTop"
              >
                <swiper-slide class="slide-1" v-for="(item, index) in fileListUserCertificate" :key="item.id">
                  <iframe
                    v-if="item.urlBase"
                    frameborder="1"
                    :src="item.urlBase"
                    ref="ifr"
                    width="80%"
                    height="400px"
                    scrolling="auto">
                  </iframe>
                  <img style="width: 80%;height: 400px;border: 1px solid;"
                       v-if="!item.urlBase" :src="noDataPng" border="1">
                  <a-button v-if="item.urlBase && specialResult.userCertificateState != '1'"
                            style="display: block;margin-top: 10px;border-color: red;color: red"
                            danger @click="removeFile(item,'fileListUserCertificate')">移除
                  </a-button>

                </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 fileListUserCertificate"
                  :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
                    v-if="specialResult.userCertificateState != '1'"
                    listType="picture-card"
                    name="file"
                    :multiple="false"
                    :action="importMinioUploadAction"
                    :customRequest="e => selfUploadContract(e, 'fileListUserCertificate')"
                    :headers="tokenHeader"
                    :showUploadList="false"
                    :beforeUpload="importBeforeUpload"
                    @change="importHandleChange"
                  >
                    <div v-if="fileListUserCertificate.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>
              <!--              备注-->
              <li style="color: red"
                  v-if="specialResult.userCertificateState == 0 && specialResult.userCertificateNote != null">
                稽核结果备注：{{ specialResult.userCertificateNote }}
              </li>

            </div>
          </a-card>

          <!--          营业执照副本(盖公章)-->
          <a-card v-if="model.userLable == '1'" :bordered="true">
            <div slot="title">
              营业执照副本(盖公章)
              <span v-show="specialResult.businessLicenseState == '1'">✅</span>
              <span v-show="specialResult.businessLicenseState == '0'">❌</span>
            </div>

            <div class="clearfix">
              <div style="width: 50%;left: 25%;position: relative">
                <!-- swiper1 -->
                <swiper
                  class="swiper gallery-top"
                  :options="swiperOptionTop"
                  ref="swiperTop"
                >
                  <swiper-slide class="slide-1" v-for="(item, index) in fileListBusiness" :key="item.id">
                    <iframe
                      v-if="item.urlBase"
                      frameborder="1"
                      :src="item.urlBase"
                      ref="ifr"
                      width="80%"
                      height="400px"
                      scrolling="auto">
                    </iframe>
                    <img style="width: 80%;height: 400px;border: 1px solid;"
                         v-if="!item.urlBase" :src="noDataPng" border="1">
                    <a-button v-if="item.urlBase && specialResult.businessLicenseState != '1'"
                              style="display: block;margin-top: 10px;border-color: red;color: red"
                              danger @click="removeFile(item,'fileListBusiness')">移除
                    </a-button>

                  </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 fileListBusiness"
                    :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
                      v-if="specialResult.businessLicenseState != '1'"
                      listType="picture-card"
                      name="file"
                      :multiple="false"
                      :action="importMinioUploadAction"
                      :customRequest="e => selfUploadContract(e, 'fileListBusiness')"
                      :headers="tokenHeader"
                      :showUploadList="false"
                      :beforeUpload="importBeforeUpload"
                      @change="importHandleChange"
                    >
                      <div v-if="fileListBusiness.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>

              <!--              备注-->
              <li style="color: red"
                  v-if="specialResult.businessLicenseState == 0 && specialResult.businessLicenseNote != null">
                稽核结果备注：{{ specialResult.businessLicenseNote }}
              </li>


            </div>
          </a-card>

          <!--          介绍信-->
          <a-card v-if="model.userLable == '1'" :bordered="true">
            <div slot="title">
              介绍信
              <span v-show="specialResult.letterIntroductionState == '1'">✅</span>
              <span v-show="specialResult.letterIntroductionState == '0'">❌</span>
            </div>
            <div class="clearfix">
              <!-- swiper1 -->
              <swiper
                class="swiper gallery-top"
                :options="swiperOptionTop"
                ref="swiperTop"
              >
                <swiper-slide class="slide-1" v-for="(item, index) in fileListIntroduction" :key="item.id">
                  <iframe
                    v-if="item.urlBase"
                    frameborder="1"
                    :src="item.urlBase"
                    ref="ifr"
                    width="80%"
                    height="400px"
                    scrolling="auto">
                  </iframe>
                  <img style="width: 80%;height: 400px;border: 1px solid;"
                       v-if="!item.urlBase" :src="noDataPng" border="1">
                  <a-button v-if="item.urlBase && specialResult.letterIntroductionState != '1'"
                            style="display: block;margin-top: 10px;border-color: red;color: red"
                            danger @click="removeFile(item,'fileListIntroduction')">移除
                  </a-button>

                </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 fileListIntroduction"
                  :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
                    v-if="specialResult.letterIntroductionState != '1'"
                    listType="picture-card"
                    name="file"
                    :multiple="false"
                    :action="importMinioUploadAction"
                    :customRequest="e => selfUploadContract(e, 'fileListIntroduction')"
                    :headers="tokenHeader"
                    :showUploadList="false"
                    :beforeUpload="importBeforeUpload"
                    @change="importHandleChange"
                  >
                    <div v-if="fileListIntroduction.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>

              <!--              备注-->
              <li style="color: red"
                  v-if="specialResult.letterIntroductionState == 0 && specialResult.letterIntroductionNote != null">
                稽核结果备注：{{ specialResult.letterIntroductionNote }}
              </li>
            </div>
          </a-card>

          <!--          防诈骗承诺涵（使用人签署）-->
          <a-card :bordered="true">
            <div slot="title">
              防诈骗承诺涵（使用人签署）
              <span v-show="specialResult.fraudPreventionState == '1'">✅</span>
              <span v-show="specialResult.fraudPreventionState == '0'">❌</span>
            </div>

            <div class="clearfix">
              <div style="width: 50%;left: 25%;position: relative">
                <!-- swiper1 -->
                <swiper
                  class="swiper gallery-top"
                  :options="swiperOptionTop"
                  ref="swiperTop"
                >
                  <swiper-slide class="slide-1" v-for="(item, index) in fileListLetter" :key="item.id">
                    <iframe
                      v-if="item.urlBase"
                      frameborder="1"
                      :src="item.urlBase"
                      ref="ifr"
                      width="80%"
                      height="400px"
                      scrolling="auto">
                    </iframe>
                    <img style="width: 80%;height: 400px;border: 1px solid;"
                         v-if="!item.urlBase" :src="noDataPng" border="1">
                    <a-button v-if="item.urlBase && specialResult.fraudPreventionState != '1'"
                              style="display: block;margin-top: 10px;border-color: red;color: red"
                              danger @click="removeFile(item,'fileListLetter')">移除
                    </a-button>

                  </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 fileListLetter"
                    :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
                      v-if="specialResult.fraudPreventionState != '1'"
                      listType="picture-card"
                      name="file"
                      :multiple="false"
                      :action="importMinioUploadAction"
                      :customRequest="e => selfUploadContract(e, 'fileListLetter')"
                      :headers="tokenHeader"
                      :showUploadList="false"
                      :beforeUpload="importBeforeUpload"
                      @change="importHandleChange"
                    >
                      <div v-if="fileListLetter.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>
              <!--              备注-->
              <li style="color: red"
                  v-if="specialResult.fraudPreventionState == 0 && specialResult.fraudPreventionNote != null">
                稽核结果备注：{{ specialResult.fraudPreventionNote }}
              </li>

            </div>
          </a-card>

          <!--          消费凭证-->
          <a-card v-if="model.shutdownLabel == '0'" :bordered="true">
            <div slot="title">
              消费凭证
              <span v-show="specialResult.consumptionVoucherState == '1'">✅</span>
              <span v-show="specialResult.consumptionVoucherState == '0'">❌</span>
            </div>
            <div class="clearfix">
              <div style="width: 50%;left: 25%;position: relative">
                <!-- swiper1 -->
                <swiper
                  class="swiper gallery-top"
                  :options="swiperOptionTop"
                  ref="swiperTop"
                >
                  <swiper-slide class="slide-1" v-for="(item, index) in fileListVoucher" :key="item.id">
                    <iframe
                      v-if="item.urlBase"
                      frameborder="1"
                      :src="item.urlBase"
                      ref="ifr"
                      width="80%"
                      height="400px"
                      scrolling="auto">
                    </iframe>
                    <img style="width: 80%;height: 400px;border: 1px solid;"
                         v-if="!item.urlBase" :src="noDataPng" border="1">
                    <a-button v-if="item.urlBase && specialResult.consumptionVoucherState != '1'"
                              style="display: block;margin-top: 10px;border-color: red;color: red"
                              danger @click="removeFile(item,'fileListVoucher')">移除
                    </a-button>

                  </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 fileListVoucher"
                    :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
                      v-if="specialResult.consumptionVoucherState != '1'"
                      listType="picture-card"
                      name="file"
                      :multiple="false"
                      :action="importMinioUploadAction"
                      :customRequest="e => selfUploadContract(e, 'fileListVoucher')"
                      :headers="tokenHeader"
                      :showUploadList="false"
                      :beforeUpload="importBeforeUpload"
                      @change="importHandleChange"
                    >
                      <div v-if="fileListVoucher.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>
              <!--              备注-->
              <li style="color: red"
                  v-if="specialResult.consumptionVoucherState == 0 && specialResult.consumptionVoucherNote != null">
                稽核结果备注：{{ specialResult.consumptionVoucherNote }}
              </li>

            </div>
          </a-card>

          <!--          承诺视频-->
          <a-card v-if="model.shutdownLabel == '5'" title="承诺视频" :bordered="true">
            <div slot="title">
              承诺视频
              <span v-show="specialResult.commitmentVideoState == '1'">✅</span>
              <span v-show="specialResult.commitmentVideoState == '0'">❌</span>
            </div>
            <div class="clearfix">
              <div style="width: 50%;left: 25%;position: relative">
                <!-- swiper1 -->
                <swiper
                  class="swiper gallery-top"
                  :options="swiperOptionTop"
                  ref="swiperTop"
                >
                  <swiper-slide class="slide-1" v-for="(item, index) in fileListVideo" :key="item.id">
                    <iframe
                      v-if="item.urlBase"
                      frameborder="1"
                      :src="item.urlBase"
                      ref="ifr"
                      width="80%"
                      height="400px"
                      scrolling="auto">
                    </iframe>
                    <img style="width: 80%;height: 400px;border: 1px solid;"
                         v-if="!item.urlBase" :src="noDataPng" border="1">
                    <a-button v-if="item.urlBase && specialResult.commitmentVideoState != '1'"
                              style="display: block;margin-top: 10px;border-color: red;color: red"
                              danger @click="removeFile(item,'fileListVideo')">移除
                    </a-button>

                  </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 fileListVideo"
                    :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
                      v-if="specialResult.commitmentVideoState != '1'"
                      listType="picture-card"
                      name="file"
                      :multiple="false"
                      :action="importMinioUploadAction"
                      :customRequest="e => selfUploadContract(e, 'fileListVideo')"
                      :headers="tokenHeader"
                      :showUploadList="false"
                      :beforeUpload="importBeforeUpload"
                      @change="importHandleChange"
                    >
                      <div v-if="fileListVideo.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>
              <!--              备注-->
              <li style="color: red"
                  v-if="specialResult.commitmentVideoState == 0 && specialResult.commitmentVideoNote != null">
                稽核结果备注：{{ specialResult.commitmentVideoNote }}
              </li>
            </div>

          </a-card>

        </a-form-model>
      </a-card>
    </div>
  </a-spin>


</template>

<script>
import {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 {
      //缩略与大图数据源
      swiperId: 0 + 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,
      //结果
      specialResult: {},
      //上级传参
      query: {},
      //客户信息ID
      infoId: "",
      //客户资料ID
      dataId: "",
      model: {
        "shutdownLabel": "0",
        "materialLabel": "0",
        "userLable": "0",
        "openingNumber": ""
      },
      //系统实名制截图
      nameFindCompliance: [{}],
      //系统实名制截图备注
      nameFindComplianceRemark: "",
      //特审单
      specialReviewForm: [{}],
      //身份证正反面
      fileListIdCard: [{}],
      //手持证件照片
      fileListHandCertificate: [{}],
      //号卡照片
      fileListNumberCard: [{}],
      //防诈骗承诺涵
      fileListLetter: [{}],
      //营业执照副本
      fileListBusiness: [{}],
      //介绍信
      fileListIntroduction: [{}],
      //使用人证件
      fileListUserCertificate: [{}],
      //消费凭证
      fileListVoucher: [{}],
      //承诺视频
      fileListVideo: [{}],
      //表单验证
      rules: {
        openingNumber: [
          {required: true, message: '必须输入手机号'},
        ],

        customerName: [
          {required: true, message: '必须输入客户名称'},
        ],
        shutdownTime: [
          {required: true, message: '必须选择关停时间'},
        ]
      },
      previewVisible: false,
      previewVideo: false,
      previewImage: "",
      uploading: false,


      formState: {},
      labelCol: {span: 1},
      wrapperCol: {span: 23},
      // 1列
      labelCol1: {
        labelCol: {
          xs: {span: 24},
          sm: {span: 2},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 21},
        }
      },
      // 2列
      labelCol2: {
        labelCol: {
          xs: {span: 24},
          sm: {span: 4},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 18},
        }
      },
      labelCol1Plus: {
        labelCol: {
          xs: {span: 24},
          sm: {span: 2},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 15},
        }
      },

      url: {
        importExcel: window._CONFIG['domainURL'] + "/smsCheck/task/importCustomerExcel",
        minioUpload: "/smsCheck/customerData/uploadMinio",
        findById: "/special/examination/find/id",
        findCheckState: "/special/examination/find/check/log",
        editInfo:"/special/examination/edit/info"
      },


      videoState: false, // 视频播放状态
      // 学时
      studyTime: {
        currentTime: 0, // 当前已学时长
        duration: 0 // 总时长
      },
      timer: {}, // 定时器
      pauseTimer: {} // 暂停定时器

    }
  },
  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: {
    taskInfo: {
      type: Object,
      require: true
    },
    poster: {
      type: String,
      required: false,
      default: ""
    },
    src: {
      type: String,
      required: true
    },
    controls: {
      type: Boolean,
      required: false,
      default: true
    },
    control: {
      type: Boolean,
      required: false,
      default: false
    },
    videoData: {
      type: Object,
      required: true
    }
  },
  watch: {
    // 监听操作
    videoData(val, oldVal) {
      const {currentTime, duration} = val;
      if (currentTime && duration && currentTime < duration) {
        this.hintOperate();
      }
    }
  },
  created() {
    this.infoId = this.$route.query.id;
    this.query.data = this.$route.query.data;
    //复开号码
    this.model.openingNumber = this.query.data.smsNumber
    //客户名称
    this.model.customerName = this.query.data.customerName
    //关停时间
    this.model.shutdownTime = this.query.data.shutdownLabelDate

    if (this.$route.query.rectification) {
      //整改操作获取回填信息
      this.findById(this.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: {

    /**文件上传成功后回调*/
    importHandleChange(info) {
    },
    /**文件格式限制*/
    importBeforeUpload(file) {
      var fileType = file.type;
      if (fileType === 'image') {
        if (fileType.indexOf('image') < 0) {
          this.$message.warning('请上传图片');
          return false;
        }
      } else if (fileType === 'file') {
        if (fileType.indexOf('image') >= 0) {
          this.$message.warning('请上传文件');
          return false;
        }
      }
      return true
    },
    /**移除文件*/
    removeFile(fileData, fileAttribute) {
      let that = this;
      //处理轮播数据
      let swiperImg = that[fileAttribute];
      if (swiperImg) {
        let number = swiperImg.indexOf(fileData);
        swiperImg.splice(number, 1)
        if (swiperImg.length == 0) {
          swiperImg.push({})
        }
        that[fileAttribute] = swiperImg
      }
    },
    /**自定义的上传文件方法*/
    selfUploadContract(data, fileAttribute) {
      let 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;
            //文件链接
            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[fileAttribute][0].urlBase) {
              that[fileAttribute].push(swipData)
            } else {
              that[fileAttribute] = []
              //数据发生变化
              that[fileAttribute][0] = swipData;
            }
            console.log(that.nameFindCompliance)
          }
        })
      }
    },

    /**获取稽核结果*/
    findCheckState(id) {
      let that = this;
      let model = {
        "dataId": id,
      }
      postAction(this.url.findCheckState, model)
        .then((res) => {
          if (res.success) {
            that.specialResult = res.result;
          }
        })
    },
    /**包装轮播数据*/
    packageArr(data) {
      let id = 0;
      let newArr = []
      if (data == null) {
        newArr.push({})
        return newArr;
      }
      let splice = data.split(",");
      for (var i in splice) {
        id = id + 1;
        let filePath = splice[i];
        if (filePath == "") {
          break;
        }
        let fileName = filePath.split("/");
        fileName = fileName[fileName.length - 1];
        let swipData = {
          id: id,
          urlBase: window._CONFIG['onlinePreviewDomainURL'] + '?url='
            + encodeURIComponent(
              Base64.encode(
                (filePath)
              )),
          url: filePath,
          fileName: fileName
        }
        newArr.push(swipData);
      }
      return newArr;
    },

    /**整改操作获取回填信息*/
    findById(id) {
      let that = this;
      let model = {
        "infoId": id,
      }
      postAction(this.url.findById, model)
        .then((res) => {
          if (res.success) {
            this.result = res.result;
            that.dataId = this.result.id;
            //获取稽核结果
            that.findCheckState(that.dataId)
            this.model.userLable = this.result.userLable.toString();
            this.model.openingNumber = this.result.openingNumber;
            this.model.customerName = this.result.customerName;
            this.model.unitName = this.result.unitName;
            this.model.shutdownTime = this.result.shutdownTime
            this.model.reasonReopening = this.result.reasonReopening
            this.model.materialLabel = this.result.materialLabel.toString();
            this.model.shutdownLabel = this.result.shutdownLabel.toString();
            this.specialNote = this.result.specialNote;
            this.model.status = this.result.status;

            //身份证正反面
            this.fileListIdCard = this.packageArr(this.result.idCard);
            //手持证件照片
            this.fileListHandCertificate = this.packageArr(this.result.handCertificate);
            //号卡照片
            //号卡照片
            this.fileListNumberCard = this.packageArr(this.result.numberCard);
            //使用人证件
            this.fileListUserCertificate = this.packageArr(this.result.userCertificate);
            //营业执照副本
            this.fileListBusiness = this.packageArr(this.result.businessLicense);
            //介绍信
            this.fileListIntroduction = this.packageArr(this.result.letterIntroduction);
            //防诈骗承诺涵
            this.fileListLetter = this.packageArr(this.result.fraudPrevention);
            //消费凭证
            this.fileListVoucher = this.packageArr(this.result.consumptionVoucher);
            //承诺视频
            this.fileListVideo = this.packageArr(this.result.commitmentVideo);
            //系统实名制截图
            this.nameFindCompliance = this.packageArr(this.result.nameFindCompliance);
            if (this.result.nameFindComplianceRemark != null) {
              this.nameFindComplianceRemark = this.result.nameFindComplianceRemark
            }
            //特审单截图
            this.specialReviewForm = this.packageArr(this.result.specialReviewForm);
          } else {
            this.$message.error("查询失败");
          }
        }).finally(() => {

      })
    },

    // 开启定时器
    openTimer() {
      this.timer = setInterval(() => {
        this.$emit("videoStudyTime", this.studyTime);
      }, 5000);
    },
    // 关闭定时器
    closeTimer() {
      clearInterval(this.timer);
      this.$emit("videoStudyTime", this.studyTime);
    },
    // 开启暂停定时器
    openPauseTimer() {
      this.pauseTimer = setInterval(() => {
        this.hintOperate();
      }, 600000);
    },
    // 关闭暂停定时器
    closePauseTimer() {
      clearInterval(this.pauseTimer);
    },
    // 提示操作
    hintOperate() {
      this.operateVideo();
      this.$alert("请点击确认继续学习", "提示", {
        confirmButtonText: "确定",
        confirmButtonClass: "hint-btn",
        showClose: false,
        callback: action => {
          this.$refs.myVideo.currentTime = this.videoData.currentTime;
          this.operateVideo();
          this.openPauseTimer();
        }
      });
    },
    // 获取当前播放位置
    timeupdate(e) {
      this.studyTime.currentTime = e.target.currentTime;
      this.studyTime.duration = e.target.duration ? e.target.duration : 0;
    },
    // 操作视频播放、暂停
    operateVideo() {
      if (!this.src) {
        this.$message({message: "暂无视频资源，请查看其他视频！"});
        return false;
      }
      if (this.$refs.myVideo.paused) {
        this.$refs.myVideo.play();
        this.videoState = true;
      } else {
        this.$refs.myVideo.pause();
        this.videoState = false;
      }
    },

    beforeUploadNameFindCompliance(file) {
      if (this.nameFindCompliance.length > 2) {//判断上传的图片数量
        return false
      }
      this.exeBaseSpecialNameFindCompliance(file)
      return false
    },

    beforeUploadSpecialReviewForm(file) {
      if (this.specialReviewForm.length > 2) {//判断上传的图片数量
        return false
      }
      this.exeBaseSpecialReviewForm(file)
      return false
    },


    beforeUploadIdCard(file) {
      if (this.fileListIdCard.length > 2) {//判断上传的图片数量
        return false
      }
      this.exeBaseIdCard(file)
      return false
    },

    beforeUploadCertificate(file) {
      if (this.fileListHandCertificate.length > 1) {//判断上传的图片数量
        return false
      }
      this.exeBaseCertificate(file)
      return false
    },

    beforeUploadNumberCard(file) {
      if (this.fileListNumberCard.length > 1) {//判断上传的图片数量
        return false
      }
      this.exeBaseNumberCard(file)
      return false
    },
    beforeUploadLetter(file) {
      if (this.fileListLetter.length > 1) {//判断上传的图片数量
        return false
      }
      this.exeBaseLetter(file)
      return false
    },
    beforeUploadBusiness(file) {
      if (this.fileListBusiness.length > 1) {//判断上传的图片数量
        return false
      }
      this.exeBaseBusiness(file)
      return false
    },

    beforeUploadIntroduction(file) {
      if (this.fileListIntroduction.length > 1) {//判断上传的图片数量
        return false
      }
      this.exeBaseIntroduction(file)
      return false
    },

    beforeUploadUserCertificate(file) {
      if (this.fileListUserCertificate.length > 1) {//判断上传的图片数量
        return false
      }
      this.exeBaseUserCertificate(file)
      return false
    },
    beforeUploadVoucher(file) {
      if (this.fileListVoucher.length > 1) {//判断上传的图片数量
        return false
      }
      this.exeBaseVocher(file)
      return false
    },
    beforeUploadVideo(file) {
      if (this.fileListVideo.length > 1) {//判断上传的图片数量
        return false
      }
      this.exeBaseVideo(file)
      return false
    },

    async exeBaseSpecialNameFindCompliance(file) {
      await this.getBase64(file, (imageUrl) => {
        if (this.nameFindCompliance.length < 2 && this.preventSpecialNameFindCompliance(imageUrl)) {//判断图片数量及去重
          const file2 = file
          file2.url = imageUrl
          this.nameFindCompliance = [...this.nameFindCompliance, file]
          this.loading = false
        }
      }).then((result) => {
        console.log(result)
      })
    },

    async exeBaseSpecialReviewForm(file) {
      await this.getBase64(file, (imageUrl) => {
        if (this.specialReviewForm.length < 2 && this.preventSpecialReviewForm(imageUrl)) {//判断图片数量及去重
          const file2 = file
          file2.url = imageUrl
          this.specialReviewForm = [...this.specialReviewForm, file]
          this.loading = false
        }
      }).then((result) => {
        console.log(result)
      })
    },


    async exeBaseIdCard(file) {
      await this.getBase64(file, (imageUrl) => {
        if (this.fileListIdCard.length < 2 && this.preventRepeatIdCard(imageUrl)) {//判断图片数量及去重
          const file2 = file
          file2.url = imageUrl
          this.fileListIdCard = [...this.fileListIdCard, file]
          this.loading = false
        }
      }).then((result) => {
        console.log(result)
      })
    },

    async exeBaseCertificate(file) {
      await this.getBase64(file, (imageUrl) => {
        if (this.fileListHandCertificate.length < 1 && this.preventRepeatCertificate(imageUrl)) {//判断图片数量及去重
          const file2 = file
          file2.url = imageUrl
          this.fileListHandCertificate = [...this.fileListHandCertificate, file]
          this.loading = false
        }
      }).then((result) => {
        console.log(result)
      })
    },

    async exeBaseNumberCard(file) {
      await this.getBase64(file, (imageUrl) => {
        if (this.fileListNumberCard.length < 1 && this.preventRepeatNumberCard(imageUrl)) {//判断图片数量及去重
          const file2 = file
          file2.url = imageUrl
          this.fileListNumberCard = [...this.fileListNumberCard, file]
          this.loading = false
        }
      }).then((result) => {
        console.log(result)
      })
    },

    async exeBaseLetter(file) {
      await this.getBase64(file, (imageUrl) => {
        if (this.fileListLetter.length < 1 && this.preventRepeatLetter(imageUrl)) {//判断图片数量及去重
          const file2 = file
          file2.url = imageUrl
          this.fileListLetter = [...this.fileListLetter, file]
          this.loading = false
        }
      }).then((result) => {
        console.log(result)
      })
    },

    async exeBaseBusiness(file) {
      await this.getBase64(file, (imageUrl) => {
        if (this.fileListBusiness.length < 1 && this.preventRepeatBusiness(imageUrl)) {//判断图片数量及去重
          const file2 = file
          file2.url = imageUrl
          this.fileListBusiness = [...this.fileListBusiness, file]
          this.loading = false
        }
      }).then((result) => {
        console.log(result)
      })
    },

    async exeBaseIntroduction(file) {
      await this.getBase64(file, (imageUrl) => {
        if (this.fileListIntroduction.length < 1 && this.preventRepeatIntroduction(imageUrl)) {//判断图片数量及去重
          const file2 = file
          file2.url = imageUrl
          this.fileListIntroduction = [...this.fileListIntroduction, file]
          this.loading = false
        }
      }).then((result) => {
        console.log(result)
      })
    },

    async exeBaseUserCertificate(file) {
      await this.getBase64(file, (imageUrl) => {
        if (this.fileListUserCertificate.length < 1 && this.preventRepeatUserCertificate(imageUrl)) {//判断图片数量及去重
          const file2 = file
          file2.url = imageUrl
          this.fileListUserCertificate = [...this.fileListUserCertificate, file]
          this.loading = false
        }
      }).then((result) => {
        console.log(result)
      })
    },

    async exeBaseVocher(file) {
      await this.getBase64(file, (imageUrl) => {
        if (this.fileListVoucher.length < 1 && this.preventRepeatVoucher(imageUrl)) {//判断图片数量及去重
          const file2 = file
          file2.url = imageUrl
          this.fileListVoucher = [...this.fileListVoucher, file]
          this.loading = false
        }
      }).then((result) => {
        console.log(result)
      })
    },

    async exeBaseVideo(file) {
      await this.getBase64(file, (imageUrl) => {
        if (this.fileListVideo.length < 1 && this.preventRepeatVideo(imageUrl)) {//判断图片数量及去重
          const file2 = file
          file2.url = imageUrl
          this.fileListVideo = [...this.fileListVideo, file]
          this.loading = false
        }
      }).then((result) => {
        console.log(result)
      })
    },

    //删除实名制截图
    handleRemoveNameFindCompliance(file) {//删除图片
      const index = this.nameFindCompliance.indexOf(file)
      const newFileList = this.nameFindCompliance.slice()
      newFileList.splice(index, 1)
      this.nameFindCompliance = newFileList
    },
    //删除特审单
    handleRemoveSpecialReviewForm(file) {//删除图片
      const index = this.specialReviewForm.indexOf(file)
      const newFileList = this.specialReviewForm.slice()
      newFileList.splice(index, 1)
      this.specialReviewForm = newFileList
    },

    //删除身份证
    handleRemoveIdCard(file) {//删除图片
      const index = this.fileListIdCard.indexOf(file)
      const newFileList = this.fileListIdCard.slice()
      newFileList.splice(index, 1)
      this.fileListIdCard = newFileList
    },
    //删除手持身份证
    handleRemoveCertificate(file) {//删除图片
      const index = this.fileListHandCertificate.indexOf(file)
      const newFileList = this.fileListHandCertificate.slice()
      newFileList.splice(index, 1)
      this.fileListHandCertificate = newFileList
    },
    //删除号卡
    handleRemoveNumberCard(file) {
      const index = this.fileListNumberCard.indexOf(file)
      const newFileList = this.fileListNumberCard.slice()
      newFileList.splice(index, 1)
      this.fileListNumberCard = newFileList
    },
    //删除防诈骗承诺涵
    handleRemoveLetter(file) {
      const index = this.fileListLetter.indexOf(file)
      const newFileList = this.fileListLetter.slice()
      newFileList.splice(index, 1)
      this.fileListLetter = newFileList
    },
    //删除营业执照副本
    handleRemoveBusiness(file) {
      const index = this.fileListBusiness.indexOf(file)
      const newFileList = this.fileListBusiness.slice()
      newFileList.splice(index, 1)
      this.fileListBusiness = newFileList
    },
    //删除介绍信
    handleRemoveIntroduction(file) {
      const index = this.fileListIntroduction.indexOf(file)
      const newFileList = this.fileListIntroduction.slice()
      newFileList.splice(index, 1)
      this.fileListIntroduction = newFileList
    },
    //删除使用人证件
    handleRemoveUserCertificate(file) {
      const index = this.fileListUserCertificate.indexOf(file)
      const newFileList = this.fileListUserCertificate.slice()
      newFileList.splice(index, 1)
      this.fileListUserCertificate = newFileList
    },
    //消费凭证
    handleRemoveVoucher(file) {
      const index = this.fileListVoucher.indexOf(file)
      const newFileList = this.fileListVoucher.slice()
      newFileList.splice(index, 1)
      this.fileListVoucher = newFileList
    },
    //承诺视频
    handleRemoveVideo(file) {
      const index = this.fileListVideo.indexOf(file)
      const newFileList = this.fileListVideo.slice()
      newFileList.splice(index, 1)
      this.fileListVideo = newFileList
    },


    //排除相同图片
    preventRepeatCertificate(url) {
      // 排除相同图片
      for (let i = 0, len = this.fileListHandCertificate.length; i < len; i++) {
        if (this.fileListIdCard[i].url === url) {
          return false
        }
      }
      return true
    },
    //排除相同图片
    preventSpecialNameFindCompliance(url) {
      // 排除相同图片
      for (let i = 0, len = this.nameFindCompliance.length; i < len; i++) {
        if (this.nameFindCompliance[i].url === url) {
          return false
        }
      }
      return true
    },
    //排除相同图片
    preventSpecialReviewForm(url) {
      // 排除相同图片
      for (let i = 0, len = this.specialReviewForm.length; i < len; i++) {
        if (this.specialReviewForm[i].url === url) {
          return false
        }
      }
      return true
    },

    //排除相同图片
    preventRepeatIdCard(url) {
      // 排除相同图片
      for (let i = 0, len = this.fileListIdCard.length; i < len; i++) {
        if (this.fileListIdCard[i].url === url) {
          return false
        }
      }
      return true
    },
    //排除相同图片
    preventRepeatNumberCard(url) {
      // 排除相同图片
      for (let i = 0, len = this.fileListNumberCard.length; i < len; i++) {
        if (this.fileListNumberCard[i].url === url) {
          return false
        }
      }
      return true
    },
    //排除相同图片
    preventRepeatLetter(url) {
      // 排除相同图片
      for (let i = 0, len = this.fileListLetter.length; i < len; i++) {
        if (this.fileListLetter[i].url === url) {
          return false
        }
      }
      return true
    },

    preventRepeatBusiness(url) {
      // 排除相同图片
      for (let i = 0, len = this.fileListBusiness.length; i < len; i++) {
        if (this.fileListBusiness[i].url === url) {
          return false
        }
      }
      return true
    },
    preventRepeatIntroduction(url) {
      // 排除相同图片
      for (let i = 0, len = this.fileListIntroduction.length; i < len; i++) {
        if (this.fileListIntroduction[i].url === url) {
          return false
        }
      }
      return true
    },

    preventRepeatUserCertificate(url) {
      // 排除相同图片
      for (let i = 0, len = this.fileListUserCertificate.length; i < len; i++) {
        if (this.fileListUserCertificate[i].url === url) {
          return false
        }
      }
      return true
    },

    preventRepeatVoucher(url) {
      // 排除相同图片
      for (let i = 0, len = this.fileListVoucher.length; i < len; i++) {
        if (this.fileListVoucher[i].url === url) {
          return false
        }
      }
      return true
    },

    preventRepeatVideo(url) {
      // 排除相同图片
      for (let i = 0, len = this.fileListVideo.length; i < len; i++) {
        if (this.fileListVideo[i].url === url) {
          return false
        }
      }
      return true
    },


    getBase64(file, callback) {
      return new Promise((resolve) => {
        let reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = () => {
          callback(reader.result)
          resolve('成功')
        }
      })
    },
    //点击关闭图片预览
    handleCancel() {//点击关闭图片预览
      this.previewVisible = false;
    },

    handleVideoCancel() {
      this.previewVideo = false;
    },

    //点击查看大图
    async handlePreview(file) {//点击查看大图
      let reader = new FileReader();
      reader.readAsArrayBuffer(file);
      reader.onload = (loadEvent) => {
        let arrayBuffer = loadEvent.target.result;
        this.previewImage = arrayBuffer
      };
      this.previewVisible = true;
      if (!file.url && !file.preview) {
        file.preview = await this.getBase64(file.originFileObj);
      }
      this.previewImage = file.url || file.preview;
      console.log(this.previewImage)
      this.previewVisible = true;
    },
    //点击查看视频大图
    async handlePreviewVideo(file) {//点击查看大图
      if (!file.url && !file.preview) {
        file.preview = await this.getBase64(file.originFileObj);
      }
      this.previewImage = file.url || file.preview;
      this.previewVideo = true;
    },

    //提交申请
    handleUpload() {
      //材料不全有特审
      if (this.model.materialLabel == '0') {
        if (this.specialReviewForm.length == 0 || !this.specialReviewForm[0].urlBase) {
          this.$warning({
            title: '提示',
            content: '材料不全请上特审单',
          })
          return;
        }
      }
      //系统实名制截图
      if ((this.nameFindCompliance.length == 0 || !this.nameFindCompliance[0].urlBase) && this.nameFindComplianceRemark.length == 0) {
        this.$warning({
          title: '提示',
          content: '请上传系统实名制截图，如没有截图则填写备注信息',
        })
        return
      }

      if (this.model.materialLabel == '1' && (this.fileListIdCard.length == 0 || !this.fileListIdCard[0].urlBase ||
        this.fileListHandCertificate.length == 0 || !this.fileListHandCertificate[0].urlBase || this.fileListNumberCard.length == 0
        || !this.fileListNumberCard[0].urlBase
        || this.fileListLetter.length == 0 || !this.fileListLetter[0].urlBase
        || this.fileListVoucher.length == 0 || !this.fileListVoucher[0].urlBase)) {
        this.$warning({
          title: '提示',
          content: '无特审，请上传全部材料',
        })
        return
      }
      let formData = {
        infoId:this.infoId,
        idCard:this.urlBaseJoin(this.fileListIdCard,"url"),
        handCertificate:this.urlBaseJoin(this.fileListHandCertificate,"url"),
        numberCard:this.urlBaseJoin(this.fileListNumberCard,"url"),
        fraudPrevention:this.urlBaseJoin(this.fileListLetter,"url"),
        businessLicense:this.urlBaseJoin(this.fileListBusiness,"url"),
        letterIntroduction:this.urlBaseJoin(this.fileListIntroduction,"url"),
        userCertificate:this.urlBaseJoin(this.fileListUserCertificate,"url"),
        consumptionVoucher:this.urlBaseJoin(this.fileListVoucher,"url"),
        commitmentVideo:this.urlBaseJoin(this.fileListVideo,"url"),
        nameFindCompliance:this.urlBaseJoin(this.nameFindCompliance,"url"),
        nameFindComplianceRemark:this.nameFindComplianceRemark,
        specialReviewForm:this.urlBaseJoin(this.specialReviewForm,"url"),
      };

      //基础信息
      for (var i in this.model) {
        let modelElement = this.model[i];
        formData[i] = modelElement;
      }

      this.uploading = true;

      httpAction(this.url.editInfo, formData, "POST")
        .then((res) => {
          if (res.success) {
            this.uploading = false;
            this.$message.success("提交成功");
            this.$router.go(-1);
            this.closeCurrent();
          } else {
            this.uploading = false;
            this.$error({
              title: '提示',
              content: res.message,
            })
          }
        }).finally(() => {
        this.uploading = false;
      })

    },

    urlBaseJoin(dataArray, name) {
      let newDataArr = [];
      for (var i in dataArray) {
        let dataArrayElementElement = dataArray[i][name];
        newDataArr.push(dataArrayElementElement);
      }
      return newDataArr.toString();
    },

    //用户选择点击事件
    changeUserLable() {
      /* //身份证正反面
       this.cfileListIdCard = []
       //手持证件照片
       this.fileListHandCertificate= []
       //号卡照片
       this.fileListNumberCard = []
       //防诈骗承诺涵
       this.fileListLetter = []
       //营业执照副本
       this.fileListBusiness = []
       //介绍信
       this.fileListIntroduction = []
       //使用人证件
       this.fileListUserCertificate= []
       //消费凭证
       this.fileListVoucher = []
       //承诺视频
       this.fileListVideo = []*/
    },
    //提交特殊申请
    applySpecial() {

    }
  }


}
</script>

<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: 864px;
  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-thumbs {
  height: 20% !important;
  box-sizing: border-box;
  padding: 10px 0px;
  /*  width: 864px;*/
  margin-left: 2px;

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

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

  .swiper-button-next,
  .swiper-button-prev {
    background: #fff;
    width: 45px;
    text-align: center;
    height: 101px;
    top: 26%;

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

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

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

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

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

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

.markdown ul > li {
  color: #000000d9;
  font-size: 15px;
  line-height: 3;
  margin-left: 20px;
  padding-left: 4px;
  list-style-type: circle;
}
.ant-form-item-children>span{
  white-space: normal;
  overflow-wrap: break-word;
}

</style>