tnc-fe/src/views/specialApply/TaskUploadData.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 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 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="userOpenState" v-bind="labelCol1">
                  <a-radio-group v-model="model.shutdownLabel" button-style="solid">
                    <a-radio-button value="0">安防停机（高危漫游地）</a-radio-button>
                    <a-radio-button value="1">安防关停（紫名单）</a-radio-button>
                    <a-radio-button value="2">安防停机（专班研判）</a-radio-button>
                    <a-radio-button value="3">安防停机（可复开)</a-radio-button>
                    <a-radio-button value="4">沉默移动卡保护性单停</a-radio-button>
                    <a-radio-button value="5">集团一点停复机（单停）</a-radio-button>
                    <a-radio-button value="6">大数据保护停机单停</a-radio-button>
                    <a-radio-button value="7">工信部断卡单停</a-radio-button>
                    <a-radio-button 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">
              <a-upload
                listType="picture-card"
                :fileList="nameFindCompliance"
                :beforeUpload="beforeUploadNameFindCompliance"
                :multiple="true"
                :remove="handleRemoveNameFindCompliance"
                @preview="handlePreview"
              >
                <div v-if="nameFindCompliance.length < 2 && specialResult.nameFindComplianceState != 1">
                  <a-icon type="plus"/>
                  <div class="ant-upload-text">点我上传特审单</div>
                </div>
              </a-upload>
              <!-- 放大预览窗口 -->
              <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                <img alt="example" style="width: 100%" :src="previewImage"/>
              </a-modal>

              <a-form-model-item  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">
              <a-upload
                listType="picture-card"
                :fileList="specialReviewForm"
                :beforeUpload="beforeUploadSpecialReviewForm"
                :multiple="true"
                :remove="handleRemoveSpecialReviewForm"
                @preview="handlePreview"
              >
                <div v-if="specialReviewForm.length < 2 && specialResult.specialReviewFormState != 1">
                  <a-icon type="plus"/>
                  <div class="ant-upload-text">点我上传特审单</div>
                </div>
              </a-upload>

              <!-- 放大预览窗口 -->
              <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                <img alt="example" style="width: 100%" :src="previewImage"/>
              </a-modal>

              <!--              备注-->
              <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">
              <a-upload
                listType="picture-card"
                :fileList="fileListIdCard"
                :beforeUpload="beforeUploadIdCard"
                :multiple="true"
                :remove="handleRemoveIdCard"
                @preview="handlePreview"
              >
                <div v-if="fileListIdCard.length < 2 && specialResult.idCardState != 1">
                  <a-icon type="plus"/>
                  <div class="ant-upload-text">点我上传身份证正/反面</div>
                </div>
              </a-upload>

              <!-- 放大预览窗口 -->
              <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                <img alt="example" style="width: 100%" :src="previewImage"/>
              </a-modal>

              <!--              备注-->
              <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">
              <a-upload
                listType="picture-card"
                :fileList="fileListHandCertificate"
                :beforeUpload="beforeUploadCertificate"
                :multiple="true"
                :remove="handleRemoveCertificate"
                @preview="handlePreview"
              >
                <div v-if="fileListHandCertificate.length < 2 && specialResult.handCertificateState != 1" >
                  <a-icon type="plus"/>
                  <div class="ant-upload-text">点我上传手持身份证</div>
                </div>
              </a-upload>

              <!--              备注-->
              <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">
              <a-upload
                listType="picture-card"
                :fileList="fileListNumberCard"
                :beforeUpload="beforeUploadNumberCard"
                :multiple="true"
                :remove="handleRemoveNumberCard"
                @preview="handlePreview"
              >
                <div v-if="fileListNumberCard.length < 2  && specialResult.numberCardState != 1">
                  <a-icon type="plus"/>
                  <div class="ant-upload-text">点我上传号卡照片</div>
                </div>
              </a-upload>
              <!-- 放大预览窗口 -->
              <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                <img alt="example" style="width: 100%" :src="previewImage"/>
              </a-modal>
              <!--              备注-->
              <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">
              <a-upload
                listType="picture-card"
                :fileList="fileListUserCertificate"
                :beforeUpload="beforeUploadUserCertificate"
                :multiple="true"
                :remove="handleRemoveUserCertificate"
                @preview="handlePreview"
              >

                <div v-if="fileListUserCertificate.length < 2  && specialResult.userCertificateState != 1 ">
                  <a-icon type="plus"/>
                  <div class="ant-upload-text">点我上传使用人证件</div>
                </div>

              </a-upload>
              <!-- 放大预览窗口 -->
              <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                <img alt="example" style="width: 100%" :src="previewImage"/>
              </a-modal>

              <!--              备注-->
              <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">
              <a-upload
                listType="picture-card"
                :fileList="fileListBusiness"
                :beforeUpload="beforeUploadBusiness"
                :multiple="true"
                :remove="handleRemoveBusiness"
                @preview="handlePreview"
              >

                <div v-if="fileListBusiness.length < 2  && specialResult.businessLicenseState != 1">
                  <a-icon type="plus"/>
                  <div class="ant-upload-text">点我上传营业执照副本（盖公章）</div>
                </div>

              </a-upload>
              <!-- 放大预览窗口 -->
              <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                <img alt="example" style="width: 100%" :src="previewImage"/>
              </a-modal>

              <!--              备注-->
              <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">
              <a-upload
                listType="picture-card"
                :fileList="fileListIntroduction"
                :beforeUpload="beforeUploadIntroduction"
                :multiple="true"
                :remove="handleRemoveIntroduction"
                @preview="handlePreview"
              >

                <div v-if="fileListIntroduction.length < 2  && specialResult.letterIntroductionState != 1">
                  <a-icon type="plus"/>
                  <div class="ant-upload-text">点我上传介绍信</div>
                </div>

              </a-upload>
              <!-- 放大预览窗口 -->
              <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                <img alt="example" style="width: 100%" :src="previewImage"/>
              </a-modal>

              <!--              备注-->
              <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">
              <a-upload
                listType="picture-card"
                :fileList="fileListLetter"
                :beforeUpload="beforeUploadLetter"
                :multiple="true"
                :remove="handleRemoveLetter"
                @preview="handlePreview"
              >
                <div v-if="fileListLetter.length < 2  && specialResult.fraudPreventionState != 1">
                  <a-icon type="plus"/>
                  <div class="ant-upload-text">点我上传防诈骗承若涵（使用人签署）</div>
                </div>
              </a-upload>
              <!-- 放大预览窗口 -->
              <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                <img alt="example" style="width: 100%" :src="previewImage"/>
              </a-modal>

              <!--              备注-->
              <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">
              <a-upload
                listType="picture-card"
                :fileList="fileListVoucher"
                :beforeUpload="beforeUploadVoucher"
                :multiple="true"
                :remove="handleRemoveVoucher"
                @preview="handlePreview"
              >

                <div v-if="fileListVoucher.length < 2  && specialResult.consumptionVoucherState != 1 ">
                  <a-icon type="plus"/>
                  <div class="ant-upload-text">点我上传消费凭证</div>
                </div>

              </a-upload>
              <!-- 放大预览窗口 -->
              <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                <img alt="example" style="width: 100%" :src="previewImage"/>
              </a-modal>

              <!--              备注-->
              <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">
              <a-upload
                listType="picture-card"
                :fileList="fileListVideo"
                :beforeUpload="beforeUploadVideo"
                :multiple="true"
                :remove="handleRemoveVideo"
                @preview="handlePreviewVideo"
              >

                <div v-if="fileListVideo.length < 1  && specialResult.commitmentVideoState != 1">
                  <a-icon type="plus"/>
                  <div class="ant-upload-text">点我上传承诺视频</div>
                </div>
              </a-upload>
              <!-- 放大预览窗口 -->
              <a-modal :visible="previewVideo" :footer="null" @cancel="handleVideoCancel">
                <!--                <img alt="example" style="width: 100%" :src="previewImage"/>-->
                <video
                  ref="myVideo"
                  :poster="poster"
                  :src="previewImage"
                  :controls="controls"
                  oncontextmenu="return false"
                  @timeupdate="timeupdate"
                  controlslist="nodownload"
                  class="video-box"
                  style="width: 470px;height:330px"
                ></video>

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


            </div>

          </a-card>

          <!--  提交申请  -->
          <a-form-model-item :wrapper-col="{ span: 14, offset: 10 }" style="margin-top: 10px;">
            <a-space>
              <a-button type="primary" @click="handleUpload">
                提交申请
              </a-button>
            </a-space>
          </a-form-model-item>

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


</template>

<script>
import reqwest from 'reqwest';
import {httpAction, postAction} from "@api/manage";
import dayjs, {Dayjs} from 'dayjs';
import VueAMap from "vue-amap";

export default {
  name: 'TaskUploadData',
  inject: ['closeCurrent'],
  data() {
    return {
      //结果
      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: "/special/examination/upload/files",
        findById: "/special/examination/find/id",
        findCheckState: "/special/examination/find/check/log",
      },


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

    }
  },
  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() {
    // 监听视频播放
    this.$refs.myVideo.addEventListener("play", () => {
      this.openTimer();
    });
    // 监听视频暂停
    this.$refs.myVideo.addEventListener("pause", () => {
      this.closeTimer();
    });
  },
  methods: {


    /**获取稽核结果*/
    findCheckState(id) {
      let that = this;
      let model = {
        "dataId": id,
      }
      postAction(this.url.findCheckState, model)
        .then((res) => {
          if (res.success) {
            that.specialResult = res.result;
          }
        })
    },


    /**整改操作获取回填信息*/
    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;
            // //身份证正反面
            if (this.result.idCard != null) {
              let fileListIdCard = this.result.idCard.split(",");
              for (var i in fileListIdCard) {
                let data = {
                  uid: "-" + i,
                  name: 'image.png',
                  status: 'done',
                  url: fileListIdCard[i],
                }
                this.fileListIdCard.push(data)
              }
            }
            //手持证件照片
            if (this.result.handCertificate != null) {
              let handCertificate = this.result.handCertificate.split(",");
              for (var i in handCertificate) {
                let data = {
                  uid: "-" + i,
                  name: 'image.png',
                  status: 'done',
                  url: handCertificate[i],
                }
                this.fileListHandCertificate.push(data)
              }
            }
            //号卡照片
            if (this.result.numberCard != null) {
              let numberCard = this.result.numberCard.split(",");
              for (var i in numberCard) {
                let data = {
                  uid: "-" + i,
                  name: 'image.png',
                  status: 'done',
                  url: numberCard[i],
                }
                this.fileListNumberCard.push(data)
              }
            }
            //使用人证件
            if (this.result.userCertificate != null) {
              let userCertificate = this.result.userCertificate.split(",");
              for (var i in userCertificate) {
                let data = {
                  uid: "-" + i,
                  name: 'image.png',
                  status: 'done',
                  url: userCertificate[i],
                }
                this.fileListUserCertificate.push(data)
              }
            }
            //营业执照副本
            if (this.result.businessLicense != null) {
              let businessLicense = this.result.businessLicense.split(",");
              for (var i in businessLicense) {
                let data = {
                  uid: "-" + i,
                  name: 'image.png',
                  status: 'done',
                  url: businessLicense[i],
                }
                this.fileListBusiness.push(data)
              }
            }
            //介绍信
            if (this.result.letterIntroduction != null) {
              let letterIntroduction = this.result.letterIntroduction.split(",");
              for (var i in letterIntroduction) {
                let data = {
                  uid: "-" + i,
                  name: 'image.png',
                  status: 'done',
                  url: letterIntroduction[i],
                }
                this.fileListIntroduction.push(data)
              }
            }
            //防诈骗承诺涵
            if (this.result.letterCommitment != null) {
              let letterCommitment = this.result.letterCommitment.split(",");
              for (var i in letterCommitment) {
                let data = {
                  uid: "-" + i,
                  name: 'image.png',
                  status: 'done',
                  url: letterCommitment[i],
                }
                this.fileListLetter.push(data)
              }
            }
            //消费凭证
            if (this.result.consumptionVoucher != null) {
              let consumptionVoucher = this.result.consumptionVoucher.split(",");
              for (var i in consumptionVoucher) {
                let data = {
                  uid: "-" + i,
                  name: 'image.png',
                  status: 'done',
                  url: consumptionVoucher[i],
                }
                this.fileListVoucher.push(data)
              }
            }
            //承诺视频
            if (this.result.commitmentVideo != null) {
              let commitmentVideo = this.result.commitmentVideo.split(",");
              for (var i in commitmentVideo) {
                let data = {
                  uid: "-" + i,
                  name: 'image.png',
                  status: 'done',
                  url: commitmentVideo[i],
                }
                this.fileListVideo.push(data)
              }
            }
            //系统实名制截图
            if (this.result.nameFindCompliance != null) {
              let nameFindCompliance = this.result.nameFindCompliance.split(",");
              for (var i in nameFindCompliance) {
                let data = {
                  uid: "-" + i,
                  name: 'image.png',
                  status: 'done',
                  url: nameFindCompliance[i],
                }
                this.nameFindCompliance.push(data)
              }
            }
            if (this.result.nameFindComplianceRemark != null) {
              this.nameFindComplianceRemark = this.result.nameFindComplianceRemark
            }
            //特审单截图
            if (this.result.specialReviewForm != null) {
              let specialReviewForm = this.result.specialReviewForm.split(",");
              for (var i in specialReviewForm) {
                let data = {
                  uid: "-" + i,
                  name: 'image.png',
                  status: 'done',
                  url: specialReviewForm[i],
                }
                this.specialReviewForm.push(data)
              }
            }
          } 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) {//点击查看大图
      if (!file.url && !file.preview) {
        file.preview = await this.getBase64(file.originFileObj);
      }
      this.previewImage = file.url || file.preview;
      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.$message.error("材料不全请上特审单");
          return
        }
      }
      //系统实名制截图
      if (this.nameFindCompliance.length == 0 && this.nameFindComplianceRemark.length == 0) {
        this.$message.error("请上传系统实名制截图，如没有截图则填写备注信息");
        return
      }

      if (this.model.materialLabel == '1' && (this.fileListIdCard.length == 0 ||
        this.fileListHandCertificate.length == 0 || this.fileListNumberCard.length == 0
        || this.fileListLetter.length == 0 || this.fileListVoucher.length == 0)) {
        this.$message.error("无特审，请上传全部材料");
        return
      }


      const formData = new FormData();
      formData.append('infoId', this.infoId)
      //身份证正反面
      this.fileListIdCard.forEach(file => {
        formData.append('fileListIdCard', file)
      });
      //手持证件照片
      this.fileListHandCertificate.forEach(file => {
        formData.append('fileListHandCertificate', file)
      });
      //号卡照片
      this.fileListNumberCard.forEach(file => {
        formData.append('fileListNumberCard', file)
      });
      //防诈骗承诺涵
      this.fileListLetter.forEach(file => {
        formData.append('fileListLetter', file)
      });
      //营业执照副本
      this.fileListBusiness.forEach(file => {
        formData.append('fileListBusiness', file)
      });
      //介绍信
      this.fileListIntroduction.forEach(file => {
        formData.append('fileListIntroduction', file)
      });
      //使用人证件
      this.fileListUserCertificate.forEach(file => {
        formData.append('fileListUserCertificate', file)
      });
      //消费凭证
      this.fileListVoucher.forEach(file => {
        formData.append('fileListVoucher', file)
      });
      //承诺视频
      this.fileListVideo.forEach(file => {
        formData.append('fileListVideo', file)
      });
      //系统实名制截图
      this.nameFindCompliance.forEach(file => {
        formData.append('nameFindCompliance', file)
      });
      //系统实名制截图备注
      formData.append('nameFindComplianceRemark', this.nameFindComplianceRemark)
      //特审单
      this.specialReviewForm.forEach(file => {
        formData.append('specialReviewForm', file)
      });
      //基础信息
      for (var i in this.model) {
        let modelElement = this.model[i];
        formData.append(i, modelElement)
      }

      this.uploading = true;

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

    },

    //用户选择点击事件
    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;
  }
}

</style>