<!--随手拍详情-->
<template>
  <div class="page-container snapshot-snapshotInfo">
    <div class="page-top-title-box">
      <p class="page-top-title-name-p">{{lookInfoType?'详情':(addForm.photoId?'编辑':'新增')}}</p>
      <p class="page-top-title-out-p" @click="backPage">返回</p>
      <p class="page-top-title-add-p" v-if="!lookInfoType" @click="submitForm">提交</p>
    </div>
    <div class="content-box scrollbar-box">
      <el-form class="add-form-box" :model="addForm" ref="form" :rules="lookInfoType||propsData.rectify?noRules:rules" label-width="104px">
        <p class="content-right-title-p">
          基本信息
          <span :class="itemShowType_1?'el-icon-arrow-down':'el-icon-arrow-up'" @click="itemShowButton(1)"></span>
        </p>
        <div v-if="itemShowType_1" class="show-box">
          <div class="content-flex-box">
            <el-form-item label="实验室" prop="subId">
              <el-select
                :disabled="lookInfoType||propsData.rectify"
                style="width:300px;"
                v-model="addForm.subId"
                filterable
                remote
                clearable
                reserve-keyword
                @change="selectChange"
                @clear="selectClear"
                placeholder="搜索选择实验室"
                :remote-method="laboratorySubRelInfoGetRelList">
                <el-option
                  v-for="item in subOptions"
                  :key="item.subId"
                  :label="item.subName"
                  :value="item.subId">
                </el-option>
              </el-select>
            </el-form-item>
            <div class="right-text-box">
              <p class="right-text-name-p" style="width:138px;">分级分类</p>
              <div class="right-text-title-box">
                <p v-if="addForm.classLevelName||addForm.classTypeNames" style="color:#333;">
                  {{addForm.classLevelName}}{{addForm.classLevelName&&addForm.classTypeNames?' | ':''}}{{addForm.classTypeNames}}
                </p>
                <p v-else="addForm.classLevelName||addForm.classTypeNames" style="color:#999;">搜索选择实验室</p>
              </div>
            </div>
            <div class="right-text-box">
              <p class="right-text-name-p" style="width:138px;">学院单位</p>
              <div class="right-text-title-box">
                <p :style="!addForm.deptName?'color:#999;':'color:#333;'">{{addForm.deptName?addForm.deptName:'搜索选择实验室'}}</p>
              </div>
            </div>
          </div>
          <div class="content-flex-box">
            <div class="right-text-box">
              <p class="right-text-name-p">楼栋楼层</p>
              <div class="right-text-title-box">
                <p v-if="addForm.buildName||addForm.floorName" style="color:#333;">
                  {{addForm.buildName}}{{addForm.buildName&&addForm.floorName?'-':''}}{{addForm.floorName}}
                </p>
                <p v-else="addForm.buildName||addForm.floorName" style="color:#999;">搜索选择实验室</p>
              </div>
            </div>
            <div class="right-text-box" v-if="lookInfoType||propsData.rectify">
              <p class="right-text-name-p" style="width:138px;">上报人</p>
              <div class="right-text-title-box">
                <p :style="!addForm.deptName?'color:#999;':'color:#333;'">{{addForm.createName}}-{{addForm.account}}</p>
              </div>
            </div>
            <div class="right-text-box" v-if="lookInfoType||propsData.rectify">
              <p class="right-text-name-p" style="width:138px;">上报时间</p>
              <div class="right-text-title-box">
                <p :style="!addForm.deptName?'color:#999;':'color:#333;'">{{parseTime(addForm.createTime,"{y}-{m}-{d} {h}:{i}")}}</p>
              </div>
            </div>
          </div>
        </div>
        <p class="content-right-title-p">
          检查内容
          <span :class="itemShowType_2?'el-icon-arrow-down':'el-icon-arrow-up'" @click="itemShowButton(2)"></span>
        </p>
        <div v-if="itemShowType_2" class="show-box">
          <el-form-item label="检查项目" prop="hazardCheckId" v-if="!propsData.rectify||(propsData.rectify&&addForm.hazardCheckId)">
            <el-cascader
              :disabled="lookInfoType||propsData.rectify"
              clearable
              :placeholder="lookInfoType||propsData.rectify?'未选择检查项目':'请选择检查项目'"
              style="width:704px;"
              v-model="addForm.hazardCheckId"
              filterable
              :options="options"
              :props="{ value: 'id', label: 'labelName',emitPath:false }"
              @change="handleChange"></el-cascader>
          </el-form-item>
          <p class="dangers-num-p" v-if="dangersNum>0">此检查项在当前实验室累计出现 <span>{{dangersNum}}</span> 次隐患</p>
          <div class="right-text-box">
            <p class="right-text-name-p">检查要点</p>
            <div class="right-text-title-box" style="min-height: 80px;width:704px;">
              <p :style="!addForm.hazardCheckPoint?'color:#C0C4CC;':'color:#333;'" v-if="lookInfoType||propsData.rectify">{{addForm.hazardCheckPoint?addForm.hazardCheckPoint:'未选择检查项目'}}</p>
              <p :style="!addForm.hazardCheckPoint?'color:#C0C4CC;':'color:#333;'" v-if="!lookInfoType&&!propsData.rectify">{{addForm.hazardCheckPoint?addForm.hazardCheckPoint:'请选择检查项目'}}</p>
            </div>
          </div>
          <!--<div class="right-text-box">-->
            <!--<p class="right-text-name-p">隐患等级</p>-->
            <!--<div class="right-text-title-box" style="width:301px;">-->
              <!--<p :style="!addForm.hazardLevel?'color:#999;':'color:#333;'">-->
                <!--{{addForm.hazardLevel==1?'轻微隐患':(addForm.hazardLevel==2?'一般隐患':(addForm.hazardLevel==3?'重大隐患':'请选择检查项目'))}}-->
              <!--</p>-->
            <!--</div>-->
          <!--</div>-->
        </div>
        <p class="content-right-title-p">
          隐患信息
          <span :class="itemShowType_3?'el-icon-arrow-down':'el-icon-arrow-up'" @click="itemShowButton(3)"></span>
        </p>
        <div v-if="itemShowType_3" class="show-box">
          <el-form-item label="隐患描述" prop="hazardDescribe">
            <el-input placeholder="请输入隐患描述" maxLength='200' type="textarea" style="width:704px;"
                      :disabled="lookInfoType||propsData.rectify"
                      resize="none" v-model="addForm.hazardDescribe" show-word-limit :rows="3"></el-input>
          </el-form-item>
          <el-form-item label="现场照片" prop="imgDtoList">
            <div class="snapshotManagement-for-img-box" v-for="(img,imgIndex) in addForm.imgDtoList" :key="imgIndex">
              <img class="for-img" :src="img.fileUrl" @click="fullScreenViewClick(addForm.imgDtoList,imgIndex)">
              <p class="for-del-button el-icon-circle-close" v-if="!lookInfoType&&!propsData.rectify" @click="delImg(imgIndex)"></p>
            </div>
            <el-upload
              v-if="(addForm.imgDtoList.length<6&&!lookInfoType)&&!propsData.rectify"
              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" v-if="!lookInfoType&&!propsData.rectify">支持jpg/png/bmp/gif格式，且不超过2M，最多上传6张</p>
          </el-form-item>
        </div>
        <div v-if="lookInfoType&&addForm.rectifyStatus!=0">
          <p class="content-right-title-p">
            隐患整改
            <span :class="itemShowType_4?'el-icon-arrow-down':'el-icon-arrow-up'" @click="itemShowButton(4)"></span>
          </p>
          <div v-if="itemShowType_4" class="show-box">
            <el-form-item label="整改结果">
              <p :style="'line-height:40px;'+(addForm.rectifyStatus==1?'color:#009519;':'color:#FF8C00;')">{{addForm.rectifyStatus==1?'已整改':(addForm.rectifyStatus==2?'暂无法整改':'')}}</p>
            </el-form-item>
            <el-form-item label="整改措施">
              <el-input placeholder="" maxLength='200' type="textarea" style="width:704px;"
                        :disabled="lookInfoType||propsData.rectify"
                        resize="none" v-model="addForm.rectifyDescribe" show-word-limit :rows="3"></el-input>
            </el-form-item>
            <el-form-item label="现场照片">
              <div class="snapshotManagement-for-img-box" v-for="(img,imgIndex) in addForm.zgDtoList" :key="imgIndex">
                <img class="for-img" :src="img.fileUrl" @click="fullScreenViewClick(addForm.zgDtoList,imgIndex)">
                <p class="for-del-button el-icon-circle-close" v-if="!lookInfoType&&!propsData.rectify" @click="delImg(imgIndex)"></p>
              </div>
            </el-form-item>
            <!--<el-form-item label="整改方案" v-if="addForm.rectifyStatus==2">-->
              <!--<div class="up-file-box" v-if="addForm.rectifyProjectUrl" @click="fullScreenFileLookClick">-->
                <!--<img src="@/assets/ZDimages/safetyCheck/icon_dr_wj.png">-->
                <!--<p>{{addForm.rectifyProjectName}}</p>-->
              <!--</div>-->
            <!--</el-form-item>-->
            <div style="display: flex">
              <el-form-item label="整改人">
                <p class="user-time-p">{{addForm.rectifyUserName}}-{{addForm.rectifyUserAccount}}</p>
              </el-form-item>
              <el-form-item label="处理时间">
                <p class="user-time-p">{{ parseTime(addForm.rectifyTime,"{y}-{m}-{d} {h}:{i}") }}</p>
              </el-form-item>
            </div>
          </div>
        </div>
        <!--整改-->
        <snapshotRectificationComponent v-if="propsData.rectify" ref="snapshotRectificationComponent" :recheckComponentPropsData="recheckComponentPropsData"></snapshotRectificationComponent>
      </el-form>
    </div>
    <fullScreenView :fullScreenViewProps="fullScreenViewProps" ref="fullScreenView"></fullScreenView>
    <fullScreenFileLook ref="fullScreenFileLook"></fullScreenFileLook>
  </div>
</template>

<script>
  import { getToken } from "@/utils/auth";
  import {
    securityCheckPhotoDetail,
    securityCheckOptionList,
    securityCheckOptionSelAllList,
    securityCheckPhotoMyAdd,
    securityCheckPhotoUpdate,
    securityCheckPhotoGetCheckNumBySub,
  } from '@/api/safetyCheck/index'
  import {
    laboratorySubRelInfoGetRelList,
  } from '@/api/commonality/noPermission'
  import fullScreenView from "@/components/fullScreenView/fullScreenView.vue";
  import fullScreenFileLook from "@/components/fullScreenFileLook/fullScreenFileLook.vue";
  import snapshotRectificationComponent from "./snapshotRectificationComponent.vue";
  export default {
    name: 'snapshotInfo',
    components: {
      fullScreenView,
      fullScreenFileLook,
      snapshotRectificationComponent,
    },
    props:{
      propsData:{},
      //rectify:是否整改
      //showType:是否详情
    },
    data(){
      return{
        //上传相关
        uploadImgUrl: this.uploadUrl(), // 上传的图片服务器地址
        headers: {
          Authorization:getToken(),
        },
        //图片组件数据
        fullScreenViewProps:[],
        //详情模式
        lookInfoType:false,
        //实验室列表
        subOptions:[],
        //学院列表
        deptOptions:[],
        //楼栋列表
        buildOptions:[],
        //分类
        typeOptions: [],
        //分级
        levelOptions: [],
        //隐患次数
        dangersNum: 0,
        //提交表单
        addForm:{
          deptId:'',
          deptName:'',
          subId:'',
          subName:'',
          subRoom:'',
          buildId:'',
          buildName:'',
          floorId:'',
          floorName:'',
          typeId:'',
          classTypeNames:'',
          levelId:'',
          classLevelName:'',
          hazardCheckId1:'',
          hazardCheckName1:'',
          hazardCheckCode1:'',
          hazardCheckId2:'',
          hazardCheckName2:'',
          hazardCheckCode2:'',
          hazardCheckId:'',
          hazardCheckName:'',
          hazardCheckCode:'',
          hazardCheckPoint:'',
          hazardLevel:'',
          hazardDescribe:'',
          imgDtoList:[],
        },
        noRules:{},
        rules:{
          subId: [
            { required: true, message: "搜索选择实验室", trigger: "blur" },
          ],
          hazardDescribe: [
            { required: true, message: "请输入隐患描述", trigger: "blur" },
            { required: true, message: '请输入隐患描述', validator: this.spaceJudgment, trigger: "blur" }
          ],
          imgDtoList: [
            { required: true, message: "请上传现场照片", trigger: "blur" },
          ],
        },
        //子项展开状态
        itemShowType_1:true,
        itemShowType_2:true,
        itemShowType_3:true,
        itemShowType_4:true,
        options:[],
        //历史记录组件数据
        historyRecordsComponentPropsData:{},
        recheckComponentPropsData:{},
      }
    },
    created(){
      if(this.propsData.showType){
        this.securityCheckOptionSelAllList();
      } else {
        this.securityCheckOptionList();
      }
      this.initialize();
    },
    mounted(){

    },
    methods:{
      //初始化
      initialize(){
        if(this.propsData.showType){
          this.$set(this,'lookInfoType',true);
          this.securityCheckPhotoDetail();
        }else{
          this.$set(this,'lookInfoType',false);
          if(this.propsData.photoId){
            this.securityCheckPhotoDetail();
          }
        }
      },
      //上报详情接口
      securityCheckPhotoDetail(){
        securityCheckPhotoDetail({photoId:this.propsData.photoId}).then(response => {
          response.data.imgDtoList = response.data.yhDtoList;
          this.$set(this,'subOptions',[{subId:response.data.subId,subName:response.data.subName}]);
          this.$set(this,'addForm',response.data);
          this.securityCheckPhotoGetCheckNumBySub()
        });
      },
      //查询检查项列表
      securityCheckOptionList(){
        securityCheckOptionList({}).then( response => {
          this.$set(this,'options',this.listChildrenDel(response.data));
          this.getCascaderData(this.options)
        });
      },
      //查询检查项列表-查询所有
      securityCheckOptionSelAllList(){
        securityCheckOptionSelAllList({}).then( response => {
          this.$set(this,'options',this.listChildrenDel(response.data));
          this.getCascaderData(this.options)
        });
      },
      // tree 结构转化成一维数组
      listChildrenDel(list) {
        let listOptions = JSON.parse(JSON.stringify(list))
        for (let i = 0; i < listOptions.length; i++) {
          if (listOptions[i].children){
            if(listOptions[i].children[0]){
              for(let o=0; o< listOptions[i].children.length;o++){
                if(!listOptions[i].children[o].children){
                  listOptions[i].children.splice(o,1);
                  o--
                }else if(!listOptions[i].children[o].children[0]){
                  listOptions[i].children.splice(o,1);
                  o--
                }
              }
            }else{
              listOptions.splice(i,1);
              i--
            }
          } else {
            listOptions.splice(i,1);
            i--
          }
        }
        for (let i = 0; i < listOptions.length; i++) {
          if (!listOptions[i].children){
            listOptions.splice(i,1);
            i--
          } else if(!listOptions[i].children[0]){
            listOptions.splice(i,1);
            i--
          }
        }
        return listOptions;
      },
      //联级选择器数据处理
      getCascaderData(list){
        let self = this;
        for(let i=0;i<list.length;i++){
          list[i].labelName = list[i].code? list[i].code +' '+ list[i].name:list[i].name
          if(list[i].level == 1 || list[i].level == 2){
            self.getCascaderData(list[i].children)
          }else{
            delete list[i].children
          }
        }
      },
      // 返回按钮
      backPage(){
        this.$parent.tableButton(6);
      },
      /** 提交按钮 */
      submitForm() {
        if (this.propsData.rectify){
          // 整改
          this.securityCheckPhotoUpdate();
        } else {
          this.securityCheckPhotoMyAdd();
        }
      },
      // 新增
      securityCheckPhotoMyAdd(){
        let self = this;
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.$confirm('是否确认提交?', "警告", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(function() {
              securityCheckPhotoMyAdd(self.addForm).then(response => {
                self.msgSuccess(response.message)
                self.$parent.tableButton(6);
              });
            }).then(() => {
            }).catch(() => {});
          }
        })
      },
      // 整改
      async securityCheckPhotoUpdate(){
        let self = this;
        let obj = await this.$refs["snapshotRectificationComponent"].submitData();
        obj.photoId = this.addForm.photoId;
        this.$confirm('是否确认提交?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          securityCheckPhotoUpdate(obj).then(response => {
            self.msgSuccess(response.message)
            self.$parent.tableButton(6);
          });
        }).then(() => {
        }).catch(() => {});
      },
      handleChange(value) {
        let self = this;
        if(value){
          for(let i=0;i<self.options.length;i++){
            if(self.options[i].children){
              for(let o=0;o<self.options[i].children.length;o++){
                if(self.options[i].children[o].children){
                  for(let x=0;x<self.options[i].children[o].children.length;x++){
                    if (value == self.options[i].children[o].children[x].id){
                      self.$set(self.addForm,'hazardCheckId1',self.options[i].id);
                      self.$set(self.addForm,'hazardCheckName1',self.options[i].name);
                      self.$set(self.addForm,'hazardCheckCode1',self.options[i].code);
                      self.$set(self.addForm,'hazardCheckId2',self.options[i].children[o].id);
                      self.$set(self.addForm,'hazardCheckName2',self.options[i].children[o].name);
                      self.$set(self.addForm,'hazardCheckCode2',self.options[i].children[o].code);
                      self.$set(self.addForm,'hazardCheckId',self.options[i].children[o].children[x].id);
                      self.$set(self.addForm,'hazardCheckName',self.options[i].children[o].children[x].name);
                      self.$set(self.addForm,'hazardCheckCode',self.options[i].children[o].children[x].code);
                      self.$set(self.addForm,'hazardCheckPoint',self.options[i].children[o].children[x].mainPoint);
                      self.$set(self.addForm,'hazardLevel',self.options[i].children[o].children[x].level);
                    }
                  }
                }
              }
            }
          }
          this.securityCheckPhotoGetCheckNumBySub();
        }else{
          self.$set(self.addForm,'hazardCheckId1','');
          self.$set(self.addForm,'hazardCheckName1','');
          self.$set(self.addForm,'hazardCheckCode1','');
          self.$set(self.addForm,'hazardCheckId2','');
          self.$set(self.addForm,'hazardCheckName2','');
          self.$set(self.addForm,'hazardCheckCode2','');
          self.$set(self.addForm,'hazardCheckId','');
          self.$set(self.addForm,'hazardCheckName','');
          self.$set(self.addForm,'hazardCheckCode','');
          self.$set(self.addForm,'hazardCheckPoint','');
          self.$set(self.addForm,'hazardLevel','');
          self.$set(self,'dangersNum',0);
        }
      },
      //子项展开隐藏按钮
      itemShowButton(type){
        if(type == 1){
          this.$set(this,'itemShowType_1',!this.itemShowType_1);
        }else if(type == 2){
          this.$set(this,'itemShowType_2',!this.itemShowType_2);
        }else if(type == 3){
          this.$set(this,'itemShowType_3',!this.itemShowType_3);
        }else if(type == 4){
          this.$set(this,'itemShowType_4',!this.itemShowType_4);
        }
      },
      //查询隐患发生次数
      securityCheckPhotoGetCheckNumBySub() {
        if(this.addForm.subId&&this.addForm.hazardCheckId){
          securityCheckPhotoGetCheckNumBySub({
            subId: this.addForm.subId,
            hazardCheckId: this.addForm.hazardCheckId
          }).then(response => {
            this.$set(this, 'dangersNum', response.data)
          })
        }
      },
      //懒加载实验室
      laboratorySubRelInfoGetRelList(e){
        laboratorySubRelInfoGetRelList({searchValue:e}).then(response => {
          this.subOptions = response.data;
        });
      },
      //实验室选择
      selectChange(e){
        let self = this;
        for(let i=0;i<self.subOptions.length;i++){
          if(self.subOptions[i].subId == e){
            self.$set(self.addForm,"deptId",self.subOptions[i].deptId);
            self.$set(self.addForm,"deptName",self.subOptions[i].deptName);
            self.$set(self.addForm,"subId",self.subOptions[i].subId);
            self.$set(self.addForm,"subName",self.subOptions[i].subName);
            self.$set(self.addForm,"subRoom",self.subOptions[i].roomNum);
            self.$set(self.addForm,"buildId",self.subOptions[i].buildId);
            self.$set(self.addForm,"buildName",self.subOptions[i].buildName);
            self.$set(self.addForm,"floorId",self.subOptions[i].floorId);
            self.$set(self.addForm,"floorName",self.subOptions[i].floorName);
            self.$set(self.addForm,"typeId",self.subOptions[i].typeId);
            self.$set(self.addForm,"classTypeNames",self.subOptions[i].classTypeNames);
            self.$set(self.addForm,"levelId",self.subOptions[i].levelId);
            self.$set(self.addForm,"classLevelName",self.subOptions[i].classLevelName);
          }
        }
        this.securityCheckPhotoGetCheckNumBySub();
      },
      //实验室清除
      selectClear(){
        let self = this;
        self.$set(self.addForm,"deptId",'');
        self.$set(self.addForm,"deptName",'');
        self.$set(self.addForm,"subId",'');
        self.$set(self.addForm,"subName",'');
        self.$set(self.addForm,"subRoom",'');
        self.$set(self.addForm,"buildId",'');
        self.$set(self.addForm,"buildName",'');
        self.$set(self.addForm,"floorId",'');
        self.$set(self.addForm,"floorName",'');
        self.$set(self.addForm,"typeId",'');
        self.$set(self.addForm,"classTypeNames",'');
        self.$set(self.addForm,"levelId",'');
        self.$set(self.addForm,"classLevelName",'');
      },
      //文件预览
      fullScreenFileLookClick(){
        let item = {
          fileName:this.addForm.rectifyProjectName,
          fileUrl:this.addForm.rectifyProjectUrl,
        }
        //判断类型
        let type = '';
        if(item.fileUrl.split('.')[1] == 'docx'){
          type = 'docx'
        }else if(item.fileUrl.split('.')[1] == 'xlsx'){
          type = 'excel'
        }else if(item.fileUrl.split('.')[1] == 'pdf'){
          type = 'pdf'
        }
        let url = localStorage.getItem('fileBrowseEnvironment')+item.fileUrl;
        this.$refs['fullScreenFileLook'].initialize(item.fileName,url,type);
      },
      /*==========上传相关==========*/
      handleAvatarSuccess(res) {
        this.$set(this,'loading',false);
        if(this.addForm.imgDtoList.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,
        };
        this.addForm.imgDtoList.push(obj);
        this.$forceUpdate()
      },
      beforeAvatarUpload(file) {
        if(this.addForm.imgDtoList.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.imgDtoList.splice(imgIndex,1);
      },
      //照片预览
      fullScreenViewClick(list,index){
        let newList = [];
        for(let i=0;i<list.length;i++){
          newList.push(list[i].fileUrl)
        }
        this.$set(this,'fullScreenViewProps',newList);
        this.$refs['fullScreenView'].initialize(index);
      },
    },
  }
</script>

<style scoped lang="scss">
  .snapshot-snapshotInfo{
    padding-bottom:20px;
    :v-deep .el-cascader-menu{
      width:470px;
    }
    .content-box{
      flex:1;
      display: flex;
      padding:20px;
      .flex-null{
        flex:1;
      }
      .add-form-box{
        flex:1;
        .show-box{
          border:1px solid #E0E0E0;
          border-top:none;
          padding-top:20px;
        }
      }
      .content-flex-box{
        display: flex;
      }
      .content-right-title-p:nth-child(1){
        border-top: 1px solid #E0E0E0;
      }
      .content-right-title-p{
        line-height:40px;
        background: #F5F5F5;
        border: 1px solid #E0E0E0;
        border-top:none;
        padding-left:23px;
        span{
          float: right;
          font-size:20px;
          line-height:40px;
          margin-right:20px;
          cursor: pointer;
        }
      }
      .dangers-num-p {
        margin-left: 110px;
        margin-bottom: 20px;
        font-size: 14px;
        color: #333;
        display: block;
        span {
          color: #FF0000;
        }
      }
      .right-text-box{
        display: flex;
        margin-bottom:20px;
        .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 14px;
          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-no-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 .el-form-item--medium .el-form-item__label{
        font-size:16px;
      }
      ::v-deep .el-input.is-disabled .el-input__inner{
        background-color: #f5f5f5;
        border: 1px solid #E0E0E0;
        color:#333;
        cursor: auto;
      }
      ::v-deep .el-range-editor.is-disabled{
        background-color: #f5f5f5;
        border: 1px solid #E0E0E0;
        color:#333;
        cursor: auto;
      }
      ::v-deep .el-range-editor.is-disabled input{
        background-color: #f5f5f5;
        color:#333;
        cursor: auto;
      }
      ::v-deep .el-textarea.is-disabled .el-textarea__inner{
        background-color: #f5f5f5;
        border: 1px solid #E0E0E0;
        color:#333;
        cursor: auto;
      }
      ::v-deep .el-radio__input.is-disabled.is-checked .el-radio__inner{
        border-color: #1890ff;
        background: #1890ff;
      }
      ::v-deep .el-radio__input.is-disabled.is-checked .el-radio__inner::after{
        background: #fff;
      }
      ::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:20px;
        font-size:14px;
        color:#999;
      }
      .up-file-box{
        display: flex;
        height:40px;
        img{
          margin-top:12px;
          width:16px;
          height:16px;
          display: block;
        }
        p:nth-child(2){
          line-height:40px;
          font-size:14px;
          margin:0 30px 0 15px;
          cursor: pointer;
        }
      }
      .user-time-p{
        font-size:14px;
        color:#333;
        width:300px;
        height:40px;
        line-height:40px;
        background-color: #f5f5f5;
        border-radius:4px;
        border:1px solid #e0e0e0;
        padding-left:14px;
        color:#333;
      }
    }
  }
</style>
