<!--复核-->
<template>
  <div class="page-container initiateInspect-recheckComponent">
    <!--当前审核-->
    <el-form class="add-form-box" :model="addForm" ref="addForm" :rules="rules" label-width="110px">
      <p class="content-right-title-min-p">
        复查验证
        <span :class="itemShowType?'el-icon-arrow-down':'el-icon-arrow-up'" @click="itemShowButton()"></span>
      </p>
      <div v-if="itemShowType" style="margin-top:20px;">
        <el-form-item label="复查结果" prop="examineResult">
          <div class="right-text-box">
            <div :class="addForm.examineResult == 1?'right-check-box':'right-no-check-box'" @click="checkButton(1)">
              <div>
                <p></p>
              </div>
              <p class="right-check-title-p">复查完毕</p>
            </div>
            <div :class="addForm.examineResult == 0?'right-check-box':'right-no-check-box'" @click="checkButton(0)">
              <div>
                <p></p>
              </div>
              <p class="right-check-title-p">退回整改</p>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="验证情况" prop="examineOpinion">
          <el-input placeholder="请输入验证情况" maxLength='200' type="textarea" style="width:704px;"
                    resize="none" v-model="addForm.examineOpinion" show-word-limit :rows="3"></el-input>
        </el-form-item>
        <el-form-item label="现场照片" prop="examineUploadList">
          <div class="snapshotManagement-for-img-box" v-for="(img,imgIndex) in addForm.examineUploadList" :key="imgIndex">
            <img class="for-img" :src="img.fileUrl" @click="lookImg(addForm.examineUploadList,imgIndex)">
            <p class="for-del-button el-icon-circle-close" @click="delImg(imgIndex)"></p>
          </div>
          <el-upload
            v-if="addForm.examineUploadList.length<6"
            style="display: inline-block;overflow: hidden"
            class="avatar-uploader"
            :action="uploadImgUrl"
            :show-file-list="false"
            :on-success="(res)=>handleAvatarSuccess(res)"
            :headers="headers"
            :before-upload="(res)=>beforeAvatarUpload(res)">
            <p class="el-icon-plus up-img-p" style="display: inline-block"></p>
          </el-upload>
          <p class="up-img-text">支持jpg/png/bmp/gif格式，且不超过2M，最多上传6张</p>
        </el-form-item>
      </div>
    </el-form>
    <fullScreenView :fullScreenViewProps="fullScreenViewProps" ref="fullScreenView"></fullScreenView>
  </div>
</template>

<script>
  import { getToken } from "@/utils/auth";
  import fullScreenView from "@/components/fullScreenView/fullScreenView.vue";
  export default {
    name: 'recheckComponent',
    components: {
      fullScreenView,
    },
    props:{
      recheckComponentPropsData:{},
    },
    data(){
      return{
        loading:false,
        //上传相关
        uploadImgUrl: this.uploadUrl(), // 上传的图片服务器地址
        headers: {
          Authorization:getToken(),
        },
        //图片组件数据
        fullScreenViewProps:[],
        itemShowType:true,
        addForm:{
          examineResult:null,
          examineOpinion:'',
          examineUploadList:[],
        },
        rules:{
          examineResult: [
            { required: true, message: "请选择复查结果", trigger: "blur" },
            { required: true, message: "请选择复查结果", validator: this.spaceJudgment, trigger: "blur" }
          ],
        },
        upDataName:'',
      }
    },
    created(){

    },
    mounted(){

    },
    methods:{
      submitData(){
        return new Promise(resolve=>{
          this.$refs["addForm"].validate(valid => {
            if (valid) {
              resolve(this.addForm)
            }
          })
        })
      },
      //子项展开隐藏按钮
      itemShowButton(){
        this.$set(this,'itemShowType',!this.itemShowType);
      },
      checkButton(type){
        if(this.addForm.examineResult != type){
          this.$set(this.addForm,'examineResult',type);
          if(type == 1){
            this.$set(this,'rules',{
              examineResult: [
                { required: true, message: "请选择复查结果", trigger: "blur" },
                { required: true, message: "请选择复查结果", validator: this.spaceJudgment, trigger: "blur" }
              ],
            });
          }else if(type == 0){
            this.$set(this,'rules',{
              examineResult: [
                { required: true, message: "请选择复查结果", trigger: "blur" },
                { required: true, message: "请选择复查结果", validator: this.spaceJudgment, trigger: "blur" }
              ],
              examineOpinion: [
                { required: true, message: "请输入验证情况", trigger: "blur" },
                { required: true, message: "请输入验证情况", validator: this.spaceJudgment, trigger: "blur" }
              ],
              examineUploadList: [
                { required: true, message: "请上传现场照片", trigger: "blur" },
              ],
            });
          }
          this.$nextTick(()=>{
            this.$forceUpdate();
            this.$refs['addForm'].clearValidate()
          })
        }
      },
      /*==========上传相关==========*/
      handleAvatarSuccess(res) {
        this.$set(this,'loading',false);
        if(this.addForm.examineUploadList.length>5){
          this.msgError('最多只可上传6张')
          return
        }
        let suffixName= this.upDataName.split('.')[this.upDataName.split('.').length - 2]
        //判断文件名中是否有逗号和分号
        if(suffixName.indexOf(',')==-1 && suffixName.indexOf(';')==-1){
        }else{
          this.msgError('文件名里包含逗号或分号，请修改后重新上传！')
          return
        }
        let obj ={
          fileName:this.upDataName,
          fileUrl:res.data.url,
          fileType:2,
        };
        this.addForm.examineUploadList.push(obj);
        this.$forceUpdate()
      },
      beforeAvatarUpload(file) {
        if(this.addForm.examineUploadList.length>5){
          this.msgError('最多只可上传6张')
          return false
        }
        let type = false;
        if (file.type == 'image/png' || file.type == 'image/jpeg' || file.type == 'image/jpg' || file.type == 'image/gif' || file.type == 'image/bmp') {
          if(file.size> 2100000){
            this.msgError('上传图片大小不能超过2M')
            return false
          }
          this.$set(this,'loading',true);
          this.upDataName = file.name;
          type = true;
        }else{
          this.msgError('仅支持jpeg/jpg/png/bmp/gif格式')
          type = false;
        }
        return type;
      },
      //删除照片
      delImg(imgIndex){
        this.addForm.examineUploadList.splice(imgIndex,1);
      },
      //照片预览
      lookImg(list,index){
        this.$parent.fullScreenViewClick(list,index);
      },

    },
  }
</script>

<style scoped lang="scss">
  .initiateInspect-recheckComponent{
    .add-form-box{
      border:1px solid #E0E0E0;
      border-top:none;
      .content-right-title-min-p{
        line-height:40px;
        background: #F5F5F5;
        padding-left:23px;
        border-top:1px solid #E0E0E0;
        border-bottom:1px solid #E0E0E0;
        span{
          float: right;
          font-size:20px;
          line-height:40px;
          margin-right:20px;
          cursor: pointer;
        }
      }
      .right-text-box{
        display: flex;
        .right-text-name-p{
          width:90px;
          line-height:40px;
          text-align: right;
          margin-right:14px;
          font-size:16px;
        }
        .right-text-title-box{
          font-size:14px;
          width:300px;
          padding:10px 20px;
          background-color: #f5f5f5;
          border: 1px solid #E0E0E0;
          border-radius: 4px 4px 4px 4px;
          p{
            line-height:20px;
            /*单行省略号*/
            display:block;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
          }
        }
        .right-text-text-box{
          font-size:14px;
          width:300px;
          padding:10px 20px;
          background-color: #f5f5f5;
          border: 1px solid #E0E0E0;
          border-radius: 4px 4px 4px 4px;
          p{
            line-height:20px;
          }
        }
        .right-no-check-box{
          height:40px;
          margin-right:20px;
          overflow: hidden;
          display: flex;
          cursor: pointer;
          div{
            margin:13px 0 0;
            width:16px;
            height:16px;
            border:1px solid #999;
            border-radius:50%;
            p{
              height:10px;
              width:10px;
              margin:2px;
              border-radius:50%;
            }
          }
          .right-check-title-p{
            margin-left:8px;
            height:40px;
            line-height:40px;
            color:#333;
            font-size:16px;
          }
        }
        .right-check-box{
          height:40px;
          margin-right:20px;
          overflow: hidden;
          display: flex;
          cursor: pointer;
          div{
            margin:13px 0 0;
            width:16px;
            height:16px;
            border:1px solid #0183FA;
            border-radius:50%;
            p{
              height:10px;
              width:10px;
              margin:2px;
              border-radius:50%;
              background-color: #0183FA;
            }
          }
          .right-check-title-p{
            margin-left:8px;
            height:40px;
            line-height:40px;
            color:#0183FA;
            font-size:16px;
          }
        }
        img{
          cursor: pointer;
          display: block;
          width:100px;
          height:100px;
          margin-right:20px;
        }
      }
      ::v-deep .snapshotManagement-for-img-box{
        width:80px;
        height:80px;
        border-radius:4px;
        display: inline-block;
        overflow: hidden;
        margin-right:20px;
        position: relative;
        .for-img{
          width:80px;
          height:80px;
          display: inline-block;
          overflow: hidden;
        }
        .for-del-button{
          background: rgba(0,0,0,0.7);
          width:20px;
          height:20px;
          line-height: 20px;
          text-align: center;
          color:#fff;
          border-bottom-left-radius:4px;
          cursor: pointer;
          position: absolute;
          top:0;
          right:0;
        }
      }
      ::v-deep .up-img-p{
        height:80px;
        width:80px;
        line-height:80px;
        text-align: center;
        font-size:16px;
        border-radius:4px;
        border:1px dashed #E0E0E0;
      }
      .up-img-text{
        line-height:40px;
        margin-bottom:20px;
        font-size:14px;
        color:#999;
      }
    }
  }
</style>
