<template>
  <div class="pendingInfo">
    <div class="pendingInfo-page">
      <div class="photonote-pending-drawer-drawer-content">
        <div class="photonote-pending-drawer-drawer-content-min">
          <p>问题反馈人：</p>
          <p>{{drawerData.applyName}}</p>
        </div>
        <div class="photonote-pending-drawer-drawer-content-min">
          <p>反馈时间：</p>
          <p>{{drawerData.createTimeStr2}}</p>
        </div>
        <div class="photonote-pending-drawer-drawer-content-min">
          <p>实验室名称：</p>
          <p>{{drawerData.subName}}</p>
        </div>
        <div class="photonote-pending-drawer-drawer-content-min">
          <p>描述：</p>
          <p>{{drawerData.describe}}</p>
        </div>
        <div class="img-box">
          <p>现场照片：</p>
          <div>
            <img class="photonote-pending-drawer-drawer-content-img"
                 @click="lockImg(item)"
                 :src="item" v-for="(item,index) in drawerData.imgUrl" :key="index">
          </div>
        </div>
        <el-form ref="form" :model="form" :rules="rules">
          <div class="photonote-pending-drawer-drawer-content-min">
            <p>处理描述：</p>
            <el-form-item label="" prop="text">
              <el-input type="textarea" v-model="form.text" resize="none"
                        :autosize="{ minRows: 4, maxRows: 4}" maxLength="250" placeholder="请输入处理描述"
                        style="width:350px;"/>
            </el-form-item>
          </div>
          <div class="photonote-pending-drawer-drawer-content-min-one">
            <p class="left-title">处理后照片：</p>
            <div class="up-img--box">
              <img class="for-img" :src="item" v-for="(item,index) in form.imgList" :key="index" @click="lockImg(item)">
              <el-upload
                v-if="form.imgList.length<5"
                class="up-img-el-upload-box"
                :action="uploadImgUrl"
                :show-file-list="false"
                accept="image/jpeg,image/jpg,image/gif,image/png"
                :on-success="handleAvatarSuccess"
                :headers="headers"
                :before-upload="beforeAvatarUpload">
                <div class="up-button-box">
                  <p>+</p>
                  <p>添加照片</p>
                </div>
              </el-upload>
            </div>
          </div>
        </el-form>
      </div>
    </div>
    <div class="bottom-button-box">
      <p class="reset-button-one" @click="outClick">返回</p>
      <p class="add-button-one-90" @click="handle(drawerData.id)">处理</p>
    </div>
    <el-dialog title="查看" :visible.sync="open" width="800px" append-to-body :close-on-click-modal="false">
      <!--查看图片-->
      <div class="scrollbar-box" style="width:760px;max-height:700px;overflow-y: scroll;">
        <img :src="imgUrl" style="width:760px;">
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { handlePhotonote } from "@/api/securityCheck/index";
  import { getToken } from "@/utils/auth";
export default {
    props:{
      drawerData: {},
    },
    name: 'pendingInfo',
    data() {
      return {
        uploadImgUrl: this.uploadUrl(), // 上传的图片服务器地址
        headers: {
          Authorization: "Bearer " + getToken(),
        },
        open:false,
        imgUrl:"",
        form:{
          text:"",
          imgList:[],
        },
        rules:{
          text: [
            { required: true, message: "请输入处理描述", trigger: "blur" },
            { required: true, message: "请输入处理描述", validator: this.spaceJudgment, trigger: "blur" }
          ],
        },
      }
    },
    methods:{
      //上传
      handleAvatarSuccess(res, file) {
        this.form.imgList.push(res.data.url);
        this.$forceUpdate()
      },
      beforeAvatarUpload(file) {
        let type = false;
        if (file.type == 'image/png' || file.type == 'image/jpeg' || file.type == 'image/jpg' || file.type == 'image/gif') {
          type = true;
        }else{
          this.msgError('只能上传png/jpeg/jpg/gif格式图片');
          type = false;
        }
        return type;
      },
      //查看
      lockImg(url){
        this.open = true;
        this.imgUrl = url;
      },
      outClick(){
        this.$parent.offPage();
      },
      /**处理随手拍 */
      handle(id){
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.$confirm('是否确认处理?', "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(() => {
              let obj ={
                id:id,
                handleDescribe:this.form.text,
                handleImg:this.form.imgList+''
              }
              handlePhotonote(obj).then( response => {
                this.msgSuccess("处理成功");
                this.$parent.offPage();
              });
            }).catch(() => {});
          }
        })
      },
    },
  }
</script>

<style scoped lang="scss">
  .pendingInfo{
    flex:1;
    display: flex!important;
    flex-direction: column;
    .pendingInfo-page{
      flex:1;

      .photonote-pending-drawer-drawer-content{
        flex:1;
        padding-top:20px;
        .photonote-pending-drawer-drawer-content-min{
          margin-bottom:20px;
          display:flex;
          p{
            font-size:16px;
            margin:0;
          }
          p:nth-child(1){
            color:#999;
            width:128px;
            line-height:30px;
            text-align:right;
          }
          p:nth-child(2){
            width:410px;
            color:#333;
            line-height:30px;
            text-align:left;
          }
        }
        .photonote-pending-drawer-drawer-content-min-one{
          margin-bottom:20px;
          display:flex;
          .left-title{
            font-size:16px;
            margin:0;
            color:#999;
            width:128px;
            line-height:30px;
            text-align:right;
          }
          .up-img--box{
            .up-img-el-upload-box{
              width:120px;
              height:120px;
              display: inline-block;
              overflow: hidden;
              margin:0 10px 10px 0;
              .up-button-box{
                width:120px;
                height:120px;
                border:1px dashed #E0E0E0;
                *{
                  margin:0;
                }
                p:nth-child(1){
                  line-height:34px;
                  margin-top:30px;
                  font-size:28px;
                  color: #E0E0E0;
                }
                p:nth-child(2){
                  margin-top:6px;
                  font-size:12px;
                  color: #E0E0E0;

                }
              }
            }
            .for-img{
              width:120px;
              height:120px;
              display: inline-block;
              overflow: hidden;
              margin:0 10px 10px 0;
            }
          }
        }
        .img-box{
          margin-bottom:20px;
          display: flex;
          border-bottom:1px dashed #E0E0E0;
          p:nth-child(1){
            color:#999;
            width:128px;
            line-height:30px;
            text-align:right;
          }
          div{
            flex:1;
          }
          img{
            width:120px;
            height:120px;
            display: inline-block;
            margin:0 20px 20px 0;

          }
        }
        .photonote-pending-drawer-drawer-content-img{
          display: block;
        }
      }
    }
    .bottom-button-box{
      display: flex;
      padding:20px 0 0;
      margin:0 auto;
      width:220px;
      p:nth-child(1){
        width:100px;
        margin-right:20px;
      }
      p:nth-child(2){
        width:100px;
      }
    }
  }
</style>
