<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 title="基础信息" :bordered="true">
            <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 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 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 :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 title="身份证照片/正反面" :bordered="true">

            <div class="clearfix">
              <a-upload
                listType="picture-card"
                :fileList="fileListIdCard"
                :beforeUpload="beforeUploadIdCard"
                :multiple="true"
                :remove="handleRemoveIdCard"
                @preview="handlePreview"
              >
                <div v-if="fileListIdCard.length < 2">
                  <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>

            </div>
          </a-card>

          <a-card title="手持证件半身照片" :bordered="true">

            <div class="clearfix">
              <a-upload
                listType="picture-card"
                :fileList="fileListHandCertificate"
                :beforeUpload="beforeUploadCertificate"
                :multiple="true"
                :remove="handleRemoveCertificate"
                @preview="handlePreview"
              >
                <div v-if="fileListHandCertificate.length < 1">
                  <a-icon type="plus"/>
                  <div class="ant-upload-text">点我上传手持身份证</div>
                </div>
              </a-upload>
            </div>
          </a-card>

          <a-card v-if="model.userLable == '0'" title="号卡照片" :bordered="true">

            <div class="clearfix">
              <a-upload
                listType="picture-card"
                :fileList="fileListNumberCard"
                :beforeUpload="beforeUploadNumberCard"
                :multiple="true"
                :remove="handleRemoveNumberCard"
                @preview="handlePreview"
              >
                <div v-if="fileListNumberCard.length < 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>

            </div>
          </a-card>

          <a-card v-if="model.userLable == '1'" title="使用人证件" :bordered="true">
            <div class="clearfix">
              <a-upload
                listType="picture-card"
                :fileList="fileListUserCertificate"
                :beforeUpload="beforeUploadUserCertificate"
                :multiple="true"
                :remove="handleRemoveUserCertificate"
                @preview="handlePreview"
              >

                <div v-if="fileListUserCertificate.length < 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>

            </div>
          </a-card>

          <a-card v-if="model.userLable == '1'" title="营业执照副本(盖公章)" :bordered="true">
            <div class="clearfix">
              <a-upload
                listType="picture-card"
                :fileList="fileListBusiness"
                :beforeUpload="beforeUploadBusiness"
                :multiple="true"
                :remove="handleRemoveBusiness"
                @preview="handlePreview"
              >

                <div v-if="fileListBusiness.length < 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>

            </div>
          </a-card>

          <a-card v-if="model.userLable == '1'" title="介绍信" :bordered="true">
            <div class="clearfix">
              <a-upload
                listType="picture-card"
                :fileList="fileListIntroduction"
                :beforeUpload="beforeUploadIntroduction"
                :multiple="true"
                :remove="handleRemoveIntroduction"
                @preview="handlePreview"
              >

                <div v-if="fileListIntroduction.length < 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>

            </div>
          </a-card>

          <a-card title="防诈骗承诺涵（使用人签署）" :bordered="true">

            <div class="clearfix">
              <a-upload
                listType="picture-card"
                :fileList="fileListLetter"
                :beforeUpload="beforeUploadLetter"
                :multiple="true"
                :remove="handleRemoveLetter"
                @preview="handlePreview"
              >
                <div v-if="fileListLetter.length < 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>

            </div>
          </a-card>

          <a-card v-if="model.shutdownLabel == '0'" title="消费凭证" :bordered="true">
            <div class="clearfix">
              <a-upload
                listType="picture-card"
                :fileList="fileListVoucher"
                :beforeUpload="beforeUploadVoucher"
                :multiple="true"
                :remove="handleRemoveVoucher"
                @preview="handlePreview"
              >

                <div v-if="fileListVoucher.length < 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>

            </div>
          </a-card>

          <a-card v-if="model.shutdownLabel == '5'" title="承诺视频" :bordered="true">
            <div class="clearfix">
              <a-upload
                listType="picture-card"
                :fileList="fileListVideo"
                :beforeUpload="beforeUploadVideo"
                :multiple="true"
                :remove="handleRemoveVideo"
                @preview="handlePreviewVideo"
              >

                <div v-if="fileListVideo.length < 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>

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

export default {
  name: 'TaskAdd',
  data() {
    return {
      model: {
        "shutdownLabel": "0",
        "materialLabel": "0",
        "userLable": "0",
        "openingNumber":""
      },
      //身份证正反面
      fileListIdCard: [],
      //手持证件照片
      fileListHandCertificate: [],
      //号卡照片
      fileListNumberCard: [],
      //防诈骗承诺涵
      fileListLetter: [],
      //营业执照副本
      fileListBusiness: [],
      //介绍信
      fileListIntroduction: [],
      //使用人证件
      fileListUserCertificate: [],
      //消费凭证
      fileListVoucher: [],
      //承诺视频
      fileListVideo: [],
      //表单验证
      rules: {
        openingNumber: [
          {required: true, message: '必须输入手机号'},
        ],

        customerName: [
          {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},
        }
      },

      url: {
        importExcel: window._CONFIG['domainURL'] + "/smsCheck/task/importCustomerExcel",
        minioUpload: "/special/examination/upload/files",
      },


      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
    }
  },
  mounted() {
    // 监听视频播放
    this.$refs.myVideo.addEventListener("play", () => {
      this.openTimer();
    });
    // 监听视频暂停
    this.$refs.myVideo.addEventListener("pause", () => {
      this.closeTimer();
    });
  },
  watch: {
    // 监听操作
    videoData(val, oldVal) {
      const {currentTime, duration} = val;
      if (currentTime && duration && currentTime < duration) {
        this.hintOperate();
      }
    }
  },
  methods: {
    // 开启定时器
    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;
      }
    },

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

    //删除身份证
    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
    },
    //排除相同图片
    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() {
      const formData = new FormData();
      //身份证正反面
      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)
      });
      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(res.message);
            this.$router.push({path: '/specialApply/DataMain'});
          } 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>