<template>
  <div>
    <a-card :bordered="false">
      <div slot="title">
        <a-page-header
          size="small"
          style="background-color: #FFFFFF;"
          title="特审复开资料申请列表 / 资料详情"
          sub-title=""
          @back="goBack"
        ></a-page-header>
      </div>

      <a-form-model
        ref="form"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        :model="model"
      >
        <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">
                  <a-radio-button v-if="model.userLable == '0'" value="0">个人户</a-radio-button>
                  <a-radio-button v-if="model.userLable == '1'" value="1">单位户</a-radio-button>
                </a-radio-group>
              </a-form-model-item>
            </a-col>
          </a-row>


          <a-col :span="24">
            <a-form-model-item label="申请复开号码" prop="openingNumber" v-bind="labelCol1">
              <a-input style="color: #000c17" :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 style="color: #000c17" :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 style="color: #000c17" :disabled="true" 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-input style="color: #000c17" :disabled="true" v-model="model.shutdownTime"
                       placeholder="单位名称"></a-input>
            </a-form-model-item>
          </a-col>

          <a-col :span="24">
            <a-form-model-item label="申请复开原因" prop="reasonReopening" v-bind="labelCol1">
              <a-input style="color: #000c17" :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-card>

        <a-card title="身份证照片/正反面" :bordered="true">

          <div class="clearfix">
            <a-upload
              listType="picture-card"
              :fileList="fileListIdCard"
              :multiple="true"
              @preview="handlePreview"
            >
            </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"
              :multiple="true"
              @preview="handlePreview"
            >
            </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"
              :multiple="true"
              @preview="handlePreview"
            >
            </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"
              :multiple="true"
              @preview="handlePreview"
            >
            </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"
              :multiple="true"
              @preview="handlePreview"
            >


            </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"
              :multiple="true"
              @preview="handlePreview"
            >


            </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"
              :multiple="true"
              @preview="handlePreview"
            >

            </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"
              :multiple="true"
              @preview="handlePreview"
            >

            </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"
              :multiple="true"
              @preview="handlePreviewVideo"
            >
            </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>

      <a-form-model
        ref="form"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        :model="model"
      >

        <a-form-model-item style="margin-top: 10px;">
          <a-col :span="8"></a-col>
          <a-col :span="6">

            <a-button style="width: 100px" type="vertical" @click="rejectSpecial">
              驳回
            </a-button>

          </a-col>
          <a-col :span="6">

            <a-button style="width: 100px" type="primary" @click="adoptSpecial">
              通过
            </a-button>

            <a-modal v-model:visible="adoptVisible" title="设置复开时间" @ok="adoptOk">

              <a-form-item :wrapper-col="{ span: 14, offset: 2}">
                <span>复开时间：</span>
                <a-date-picker valueFormat="YYYY-MM-DD HH:mm:ss" v-model="reopenTime" show-time placeholder="请选择复开时间"/>
              </a-form-item>


            </a-modal>


          </a-col>

          <a-col :span="24">
            <a-alert :message=tipsMessage :type=tipType show-icon />
          </a-col>


        </a-form-model-item>


      </a-form-model>

    </a-card>
  </div>

</template>

<script>
import '@/assets/less/TableExpand.less'
import {mixinDevice} from '@/utils/mixin'
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
import {postAction, deleteAction, httpAction} from "@api/manage";

import {message} from 'ant-design-vue'

export default {
  name: "Details",

  data() {
    return {
      description: '详情页面',
      model: {
        "shutdownLabel": "0",
        "materialLabel": "0",
        "userLable": "0",
        "openingNumber": ""
      },
      //身份证正反面
      fileListIdCard: [],
      //手持证件照片
      fileListHandCertificate: [],
      //号卡照片
      fileListNumberCard: [],
      //防诈骗承诺涵
      fileListLetter: [],
      //营业执照副本
      fileListBusiness: [],
      //介绍信
      fileListIntroduction: [],
      //使用人证件
      fileListUserCertificate: [],
      //消费凭证
      fileListVoucher: [],
      //承诺视频
      fileListVideo: [],

      previewVisible: false,
      previewVideo: false,
      previewImage: "",

      adoptVisible: false,
      reopenTime: "",

      tipsMessage: "",
      tipType: "",

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

      info: {},

      url: {
        findById: "/special/examination/find/id",
        adopt: "/special/examination/status/adopt",
      },

      result: {},

    }
  },
  props: {
    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
    }
  },
  created() {
    this.info.id = this.$route.query.id;

  },
  mounted() {
    this.findById(this.info.id)

  },

  methods: {

    adoptOk() {
      if (this.reopenTime == null || this.reopenTime.length == 0) {
        message.error('请设置复开时间');
        return;
      }

      let model = {
        "id": this.info.id,
        reopenTime: this.reopenTime
      }
      postAction(this.url.adopt, model)
        .then((res) => {
          if (res.success) {
            this.adoptVisible = false
            this.reopenTime = ""
            message.success('审核通过')
          } else {
            this.$message.error(res.message);
          }
        }).finally(() => {

      })


    },


    //驳回
    rejectSpecial() {

    },

    //通过
    adoptSpecial() {
      this.adoptVisible = true;
    },


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


    // 开启定时器
    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;
      }
    },

    formateDate(date) {
      const arr = date.split('T');
      const d = arr[0];
      const darr = d.split('-');

      const t = arr[1];
      const tarr = t.split('.000');
      const marr = tarr[0].split(':');

      const dd =
        parseInt(darr[0]) +
        '-' +
        parseInt(darr[1]) +
        '-' +
        parseInt(darr[2]) +
        ' ' +
        parseInt(marr[0]) +
        ':' +
        parseInt(marr[1]) +
        ':' +
        parseInt(marr[2]);
      return dd;
    },


    // 返回上一级
    goBack() {
      this.$router.go(-1);
      //this.closeCurrent();
    },

    findById(id) {
      let model = {
        "id": id,
      }
      postAction(this.url.findById, model)
        .then((res) => {
          if (res.success) {
            this.result = res.result;
            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.model.status = this.result.status;
            if (this.model.status == 1){
                this.tipType = "success"
                this.tipsMessage = "审批通过 复开时间："
            }

            if (this.model.status == 2){
              this.tipType = "error"
            }

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



          } else {
            this.$message.error("查询失败");
          }
        }).finally(() => {

      })

    },

    //点击关闭图片预览
    handleCancel() {//点击关闭图片预览
      this.previewVisible = 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;
    },
  },


}
</script>

<style scoped>

</style>