<template>
  <div class="app-container" style="padding-top: 20px;height: (120vh - 100px);"  >
    <div class="ntgs nhgytw">
      <img src="../../../assets/images/pic_jsbt_db.png" alt="" style="margin-left: 50%;transform: translateX(-50%);margin-top: 50px;">
      <div style="width: 70%; margin-left: 50%;transform: translateX(-50%);margin-top: 50px;">
        <div style="display: flex; justify-content: space-between;">
          <div style="display: flex; ">
            <div  class="soush" style="" @click="istuw(0)">
              <img src="../../../assets/images/pic_jsl_lxxz_selected.png" alt="" v-if="iszhao == 0">
              <img src="../../../assets/images/pic_jsl_lxxz_normal.png" alt="" v-else>
              <p style="margin: 0;">找人</p>
            </div>
            <div  class="soush" @click="istuw(1)">
              <img src="../../../assets/images/pic_jsl_lxxz_selected.png" alt="" v-if="iszhao == 1">
              <img src="../../../assets/images/pic_jsl_lxxz_normal.png" alt="" v-else>
              <p style="margin: 0;">找机动车</p>
            </div>
            <div  class="soush" @click="istuw(2)">
              <img src="../../../assets/images/pic_jsl_lxxz_selected.png" alt="" v-if="iszhao == 2">
              <img src="../../../assets/images/pic_jsl_lxxz_normal.png" alt="" v-else>
              <p style="margin: 0;">找非机动车</p>
            </div>
          </div>
          <div style="display: flex;">
            <div style="display: flex; align-items: center;margin-right: 10px;" @click="ditun(0)" >
              <img src="../../../assets/images/icon_jsl_fwxz_selected.png" alt="" style="margin-right: 5px;" v-if="ishoewdit == 0" >
              <img src="../../../assets/images/icon_jsl_fwxz_normal.png" alt="" style="margin-right: 5px;" v-else>

              <p class="dit">地图内查找</p>
            </div>
            <div style="display: flex; align-items: center;" @click="ditun(1)">
              <img src="../../../assets/images/icon_jsl_fwxz_selected.png" alt="" style="margin-right: 5px;" v-if="ishoewdit == 1">
             <img src="../../../assets/images/icon_jsl_fwxz_normal.png" alt="" style="margin-right: 5px;" v-else >

              <p class="dit">园区内查找</p>
            </div>
          </div>
        </div>
      </div>
      <div :class="isshe == true? 'acitw acitwis' : 'acitw'" >
        <div class="shutw ">
           <div style="position: relative;">
             <el-input style="width: 92%;" v-model="form.staffPhone" placeholder="请输入外貌特征（如：身着服装款式、颜色等）" />
             <div style="position: absolute;right: -5px;top: -8px;">
              <img src="../../../assets/images/icon_jsl_jss.png" alt="" style="margin-right: 5px;">
             </div>
           </div>
           <div style="margin-top: 20px;width: 100%; display: flex;justify-content: space-between;">
             <div class="inmghe" style="cursor: pointer; display: flex;align-items: center;position: relative;width: 100%;">
               <img src="../../../assets/images/icon_jsl_sj.png" alt="">
               <el-select style="width: 90px;" v-model="value" placeholder="">
                   <el-option
                     v-for="item in options"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
                   </el-option>
                 </el-select>
                 <img src="../../../assets/images/icon_jsl_xl.png" alt="" style="position: absolute; left: 90px;">
                 <el-time-picker
                 style="width: 200px;"
                     is-range
                     v-model="value1"
                     range-separator="至"
                     start-placeholder="开始时间"
                     end-placeholder="结束时间"
                     placeholder="选择时间范围">
                   </el-time-picker>
                   <img src="../../../assets/images/icon_jsl_xl.png" alt="" style="position: absolute; left: 290px;">
                    <img src="../../../assets/images/icon_jsl_fg.png" alt=""  style="margin: 10px;">
                    <img src="../../../assets/images/icon_jsl_tp.png" alt=""  style="margin: 10px;">
                    <img src="../../../assets/images/icon_jsl_xsd.png" alt=""  style="margin: 10px;">
                    <img src="../../../assets/images/icon_jsl_qc.png" alt=""  style="margin: 10px;">
                    <img src="../../../assets/images/icon_jsl_cx.png" alt="" >
             </div>
              <div style="display: flex;align-items: center; cursor: pointer;">
                <img src="../../../assets/images/icon_jsl_zk.png" alt=""  st @click="nglqw" >
              </div>
           </div>
        </div>

      </div>
      <div style=" position: relative; width: 80%; display: flex; justify-content: center; margin-left: 50%;transform: translateX(-50%); margin-top: 50px;">
        <div v-if="isshe" class="uplsh" >
            <div style="width: 100%;height: 1px; background-color: #DADADA;"></div>
            <div class="imgs">
              <p style="width: 80px;">以图搜寻</p>
              <div style="flex: 1;display: flex; align-items: center; justify-content: flex-end;">
                <div style="flex: 1;display: flex; align-items: center; justify-content: flex-end;">
                  <p style="width: 60px; " >相似度</p>
                  <el-slider @input="changehu" v-model="buzhout" :show-input="true" :show-input-controls="false"></el-slider>
                  <span style="font-weight: 500;font-size: 13px;color: #3D455B; margin-left: 5px;">%</span>
                </div>
              </div>
            </div>
            <div class="ungshin">
                <image-uploadrss :limit="10" v-model="form.staffImage"/>
            </div>
        </div>
        <div style="width: 33.33%; display: flex;position: relative;">
          <div>
                    <img src="../../../assets/images/icon_jsdb_gn1.png" alt=""  style="margin-top: 20px;margin-right: 20px;">
                  </div>
                  <div>
                    <p style="font-weight: bold;
          font-size: 13px;
          color: #3D455B;">时空回溯 动态还原</p>
                    <p style="font-weight: 500;
          font-size: 13px; margin: 0;
          color: #9DA2B0;">跨摄像头智能串联<br>
          一键完整还原动态移动轨迹</p>
                  <img src="../../../assets/images/icon_jsdb_fg.png" alt="" style="position: absolute;right: 0;top:50%;transform: translateY(-50%);">
                  </div>
        </div>
        <div style="width: 33.33%; display: flex;position: relative; justify-content: center;">
          <div>
                    <img src="../../../assets/images/icon_jsdb_gn2.png" alt=""  style="margin-top: 20px;margin-right: 20px;">
                  </div>
                  <div>
                    <p style="font-weight: bold;
          font-size: 13px;
          color: #3D455B;">以图搜寻 特征解析</p>
                    <p style="font-weight: 500;
          font-size: 13px; margin: 0;
          color: #9DA2B0;">无需文字描述，用图片来说话<br>
上传图片，自动提取特征
</p>
                  <img src="../../../assets/images/icon_jsdb_fg.png" alt="" style="position: absolute;right: 0;top:50%;transform: translateY(-50%);">
                  </div>
        </div>
        <div style="width: 33.33%; display: flex;position: relative;justify-content: center;">
          <div>
                    <img src="../../../assets/images/icon_jsdb_gn1.png" alt=""  style="margin-top: 20px;margin-right: 20px;">
                  </div>
                  <div>
                    <p style="font-weight: bold;
          font-size: 13px;
          color: #3D455B;">模糊搜索 概率可调</p>
                    <p style="font-weight: 500;
          font-size: 13px; margin: 0;
          color: #9DA2B0;">从“大概特征”到“精确匹配”<br> 自由滑动阈值，智能筛选结果</p>
                  <!-- <img src="../../../assets/images/icon_jsdb_fg.png" alt="" style="position: absolute;right: 0;top:50%;transform: translateY(-50%);"> -->
                  </div>
        </div>
      </div>
	</div>

  </div>
</template>

<script>
  import CProgress from '../../../components/Cprogress'
  import { listWarnManage, getWarnManage, delWarnManage, addWarnManage, updateWarnManage } from "@/api/manage/warnManage"
// import { listPost, getPost, delPost, addPost, updatePost,updateFs,updateGx } from "@/api/kaoch/renyuan";
// import { listReservat,camera,cameraIndexCode, listReservatd, getReservat, delReservat, addReservat, updateReservat,setPass,delReservathx,openDz,closeDz } from "@/api/tonggi/houtai";
// import vueQr from "vue-qr";
// import videojs from 'video.js'
// import 'video.js/dist/video-js.css'
// import {videoPlayer} from 'vue-video-player'
// import 'videojs-flash'
// import flvjs from 'flv.js/dist/flv.min.js'
// import flvjs from "flv.js";
import Bscroll from "better-scroll";
export default {
  name: "Post",
  dicts: ['sys_normal_disable','sys_yes_no','youke','tjzh','youkes','lafafen','fange','jluly'],
  components: {
      CProgress,
    },
  data() {
    return {
      // 遮罩层
      loading: true,
	  opent:false,
	  bg:null,
    titles:'',
    isshe:false,
    form:{
      staffImage:null
    },
    isDragEnd: false,
    ruleForm:{
      b:0
    },
    buzhout:0,
    iszhao:0,
    ishoewdit:0

    };
  },
  created() {

    // this.getList();

  },
  mounted() {


  },
   beforeDestroy() {

    },
  methods: {
    // 地图内
    ditun(row){
      this.ishoewdit = row
    },
    // 找人
    istuw(row){
      this.iszhao = row
    },

    /** 提交按钮 */
    submitForm: function() {
      this.$refs["form"].validate(valid => {
              if (valid) {
                // if (this.form.reservatId != null) {
                  updateReservat(this.form).then(response => {
                    this.$modal.msgSuccess("操作成功");
                    this.open = false;
                    this.getList();
                  });
                // } else {
                //   addReservat(this.form).then(response => {
                //     this.$modal.msgSuccess("新增成功");
                //     this.open = false;
                //     this.getList();
                //   });
                // }
              }
            });
    },


	nglqw(val){
		this.isshe = !this.isshe

	},


	iszheg(event){
	 console.log(event);


	 // 校验身份证：
	 console.log(reg.test(this.form.idCard),23741)
	 		if ( reg.test(this.form.idCard)|| _IDre15.test(this.form.idCard)) {
	 			// this.idea();
	 			this.go(this.form.idCard);
	 			// callback()
	 		} else {
	   if(ncjsle.test(this.form.idCard) || nhyeli.test(this.form.idCard)){
	      console.log(3)
	   }else{
	     if(gnse.test(this.form.idCard)  ){
	         console.log(4)
	     }else{
	       if(tw.test(this.form.idCard) || twe.test(this.form.idCard)){
	         console.log(5)
	       }else{
	         this.$message.error('证件格式不正确');
	       }
	     }

	   }
	 		}
	},


  }
};
</script>

<style lang="scss">
  .ungshin{
    .el-upload-dragger{
      border: none;
      width: 100%;
    }
    .el-upload--picture-card{
      border: none;
       width: 100%;
    }
    .component-upload-image{
      width: 100%;
      margin-top: 20px;
    }
  }
  .imgs{

    .el-slider__bar{
      background-color:#00B278;
    }
    .el-slider__button{
      border-color: #00B278;
    }
    .el-slider {
      width: 40%;
    }
    .el-slider__runway.show-input{
      width: 74%;
    }
    .el-progress-bar__inner:before{
      content:'';
      	  display: block;
      	  width: 15px;
      	  height: 15px;
      	  background-image: url('../../../assets/images/icon_js_xsd_hk.png');
      	  background-size: 100% 100%;
      	  margin-top:-3px;
          // margin-right: 0;
          float: right;
    }
    .el-slider__input{
      width: 55px;
    }
    .el-input-number.is-without-controls .el-input__inner{
      padding: 0;
    }
  }
  .inmghe{
    .el-icon-time:before{
      content:''
    }
    .el-icon-arrow-up:before{
      content:''
    }
    .el-input__icon:after{
      content:''
    }
    .el-input__icon{
      width: 0;
    }
  }
  .shutw{
    .el-input__inner{
      border: none;
      width: 97%;
      padding-right: 0;
    }
  }
	.isjses{
		.el-tabs--left .el-tabs__nav-wrap.is-left::after{
			width:6px;
		}
		.el-tabs--left .el-tabs__active-bar.is-left,{
			width:6px;
		}
	}
	.ingaqe{
		.el-input--medium{
			width:100%;
		}
	}
	.nhgrls{
		.el-dialog__body{
			padding: 0;
		}
	}
  .hyr{
    span{
      text-decoration:underline;
    }
  }
</style>

<style scoped lang="scss">
  .shutw{
padding: 25px;
    padding-bottom: 15px;
    height: 100%;
    position: relative;
  }
  .soush{
      position: relative;
      width: 138px;
      height: 36px;
      // margin-right: 5px;
      img{
        position: absolute;
        z-index: 1;
      }
      p{
        width: 100%;
        position: absolute;
        z-index: 2;
        // top:50%;
        left: 50%;
         height: 36px;
        transform: translateY(-50%);
        transform: translateX(-50%);
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 15px;
        color: #9DA2B0;
        text-align: center;
        line-height: 36px;
        margin: 0;

      }
  }
  .dit{
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 13px;
    color: #3D455B;
    margin: 0;
  }
	.nghwgq{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 90px;
		div{
			color:#aaa;
		}
	}
	.ihgswq{
		// width:100%;
		// overflow-x: hidden;
		// margin-top: 30px;
	}
	.fijge{
		// width: 110%;
		display: flex;
		display: -webkit-flex;
		justify-content: space-between;
		.shotw{
			position: relative;
			// width:32%;
			width: 238px;
			height: 140px;
			margin-left: 0;
			margin-right: 20px;
			margin-bottom: 15px;
			img{
				height: 100%;
				cursor:pointer;
			}
		  p{
			  // bottom:-10px;
			  margin: 0;
			  font-weight: bold;
			  font-size: 16px;
			   padding: 5px  10px;
			   cursor:pointer;
		  }
		  .iges{
			position: absolute;
			top:50%;
			left:50%;
			width:30px;
			height: 30px;
			transform: translate(-50%,-50%);
			cursor:pointer;
		  }
		}
	}
	.nhgwesvq{
		width:1610px !important;
	}
	.shotw{
		position: relative;
		margin-left: -20px;
		margin-right: -20px;
		img{
			width:100%;
			height: 80vh;
		}
	  p{
	     position: absolute;
		 bottom: 0;
		 left:0;
		 background-color: rgba(0, 0, 0, .5);
		 width: 100%;
		 padding: 13px  5px;
		 color:#fff;
		 font-weight: bold;
		 font-size: 18px;
	  }
	  .p{
		  top:0px;
		  height: 60px;
		  margin: 0;
		  padding-left: 20px;
	  }
	}


	.ksfpo{
		background-color: #3464EB;
		padding: 6px 12px;
		border-radius: 4px ;
		color:#fff;
		cursor:pointer;
	}
	.ksfpok{
		background-color: #FFFFFF;
		padding: 5px 11px;
		border-radius: 4px;
		color:#3464EB;
		border: 1px solid #3464EB;
		margin-left: 10px;
		cursor:pointer;
	}
	.ksfpofg{
		background-color: #75DB75;
		padding: 5px 11px;
		border-radius: 4px;
		color:#FFFFFF;
		border: 1px solid #75DB75;
		margin-left: 10px;
		cursor:pointer;
	}
  .iuer{
    display: flex;
    justify-content: space-between;
    align-items: center;
    .ite{
      display: flex;
      justify-content: space-between;
      align-items: center;
      p{
        cursor:pointer;
        margin: 0;
        font-size: 15px;
        font-family: PingFang SC;
        font-weight: 500;
        color:#666666;
        padding: 4px 12px;
        background: #Fff;
        border-radius: 4px;
        margin-right: 20px;
		position: relative;
      }
      .actt{
        background: #fff;
        // border-bottom: 3px solid #5974E0;
        // border-radius: 0;
		// border-bottom-right-radius: 4px;
        color: #5974E0;
      }
	  .actt{
		    &::after {
		          content: "";
		          width: 40%;
		          height: 5px;
				  border-radius: 3px;
		          transform: translate(-50%);
		          background-color: #5974E0;
		          position: absolute;
		          left: 50%;
		          bottom:-3px;
		        }

	  }

    }
  }
  .lqw{
    padding: 0 10px;
    margin: 0;
    margin-bottom: 20px;
  }
.nhgel{
  height: 170px;
  background-color: #313b61;
  width: 100%;
  position: absolute;
  top:0;
  left:0;
  z-index: 0;
}
	.app-container{
		background-color: #f3f4f6;
		padding-top: 10px;
		height: 180vh;

	}
	.ntgs{
	position: relative;
		// background-color: #fff;
		padding: 5px;
		// border-radius: 5px;
		padding-top: 10px;
	     padding: 10px 20px;
		.pagination-container{
			height: 50px;
		}
	}
  .nhgytw{
    height: 100%;
    background: url('../../../assets/images/pic_jsbg.png') no-repeat;
  }
	.nghfs{
	position: relative;
		background-color: #fff;
		padding-top: 18px !important;
		padding: 5px;
		// border-radius: 5px;
		// margin-bottom: 20px;
	}
	.ksf{
		img{
			width:100%;
			height: 100%;
		}
	}
   .ingwfaq{
	   font-weight: bold;
	   font-size: 16px;
   }
   .acitw{
     width: 70%; height: 130px;box-shadow: 0px 0px 3px 0px #D1E5E1;
     border-radius: 10px; margin-top: 4px;
     border: 1px solid #E6E6E6;background: #FFFFFF; margin-left: 50%;transform: translateX(-50%);
     position: relative; border-top-left-radius: 0;
   }
   .acitwis{
     border: 0;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
   }
   .uplsh{
     width: 87.5%;
     height: 280px;
     background-color: #fff;
     box-shadow: 0px 0px 1px 0px #D1E5E1;
     border-bottom-left-radius: 10px;
     border-bottom-right-radius: 10px;
     position: absolute; top: -50px; z-index: 999;
     padding:10px;
     padding-top: 0;
   }
   .imgs{
     margin-top: 10px;
     padding: 15px;
     padding-top: 0;
     padding-bottom: 0;
     display: flex;
     justify-content: space-between;
     align-items: center;
     p{
       margin: 0;
       font-family: PingFang SC;
       font-weight: 800;
       font-size: 15px;
       color: #3D455B;
     }
   }
</style>
