<template>
  <div id="popupDetail">
    <div class="content" v-if="type=='parkSearchInfo'">
      <div class="left">
        <div class="item">
          <span>人脸图片</span>
          <img v-if="detailData.face" :src="detailData.face" class="img"></img>
        </div>
        <div class="item">
          <span>姓名</span>
          <span>{{getVal(detailData.realName)}}</span>
        </div>
        <div class="item">
          <span>手机号</span>
          <span>{{getVal(detailData.phone)}}</span>
        </div>
        <div class="item">
          <span>园区位置</span>
          <span>{{getVal(detailData.residentialName)}}</span>
        </div>

      </div>
      <div class="left">
        <div class="item">
          <span>所属公司</span>
          <span>{{getVal(detailData.enterpriseName)}}</span>
        </div>
        <div class="item">
          <span>所在园区</span>
          <span>{{getVal(detailData.agencyName)}}</span>
        </div>
        <div class="item">
          <span>性别</span>
          <span>{{getSexType(detailData.sex)}}</span>
        </div>
        <div class="item">
          <span>身份证</span>
          <span>{{getVal(detailData.idcard)}}</span>
        </div>

      </div>
    </div>

    <div class="content" v-if="type=='parkOutCar'">
      <div class="left">
        <div class="item">
          <span>抓拍图片</span>
          <img v-if="detailData.outImgPath" :src="detailData.outImgPath" class="img"></img>
        </div>
        <div class="item">
          <span>进入时间</span>
          <span>{{getVal(detailData.outTime)}}</span>
        </div>
        <div class="item">
          <span>车牌号</span>
          <span>{{getVal(detailData.carNo)}}</span>
        </div>
        <div class="item">
          <span>设备位置</span>
          <span>{{getVal(detailData.outGateName)}}</span>
        </div>
        <div class="item">
          <span>总额</span>
          <span>{{getVal(detailData.totalAmount)}}</span>
        </div>
      </div>
      <div class="left">
        <div class="item">
          <span>管理员</span>
          <span>{{getVal(detailData.enterOperatorName)}}</span>
        </div>
        <div class="item">
          <span>车辆类型</span>
          <span>{{getVal(detailData.carTypeNo)}}</span>
        </div>
        <div class="item">
          <span>车辆锁定</span>
          <span>{{getVal(detailData.lockCar)}}</span>
        </div>
        <div class="item">
          <span>订单号</span>
          <span>{{getVal(detailData.orderNo)}}</span>
        </div>
        <div class="item">
          <span>停车场编号</span>
          <span>{{getVal(detailData.parkKey)}}</span>
        </div>
      </div>
    </div>

    <div class="content" v-if="type=='parkInCar'">
      <div class="left">
        <div class="item">
          <span>抓拍图片</span>
          <img v-if="detailData.enterImgPath" :src="detailData.enterImgPath" class="img"></img>
        </div>
        <div class="item">
          <span>进入时间</span>
          <span>{{getVal(detailData.enterTime)}}</span>
        </div>
        <div class="item">
          <span>车牌号</span>
          <span>{{getVal(detailData.carNo)}}</span>
        </div>
        <div class="item">
          <span>设备位置</span>
          <span>{{getVal(detailData.enterGateName)}}</span>
        </div>
      </div>
      <div class="left">
        <div class="item">
          <span>管理员</span>
          <span>{{getVal(detailData.enterOperatorName)}}</span>
        </div>
        <div class="item">
          <span>车辆类型</span>
          <span>{{getVal(detailData.carTypeNo)}}</span>
        </div>
        <div class="item">
          <span>车辆锁定</span>
          <span>{{getVal(detailData.lockCar)}}</span>
        </div>
        <div class="item">
          <span>订单号</span>
          <span>{{getVal(detailData.orderNo)}}</span>
        </div>
        <div class="item">
          <span>停车场编号</span>
          <span>{{getVal(detailData.parkKey)}}</span>
        </div>
      </div>
    </div>

    <div class="content" v-if="type=='peopleThermometryInfo'">
      <div class="left">
        <div class="item">
          <span>抓拍图片</span>
          <img v-if="detailData.faceUrl" :src="detailData.faceUrl" class="img"></img>
        </div>
        <div class="item">
          <span>时间</span>
          <span>{{getVal(detailData.recogTime)}}</span>
        </div>
        <div class="item">
          <span>抓拍机</span>
          <span>{{getVal(detailData.cameraName)}}</span>
        </div>
        <div class="item">
          <span>设备位置</span>
          <span>{{getVal(detailData.deviceName)}}</span>
        </div>
        <div class="item">
          <span>对比度</span>
          <span>{{getVal(detailData.matchValue)}}</span>
        </div>
        <div class="item">
          <span>停车场</span>
          <span>{{getVal(detailData.parkName)}}</span>
        </div>
      </div>
      <div class="left">
        <div class="item">
          <span>体温</span>
          <span>{{getVal(detailData.temperature)}}</span>
        </div>
        <div class="item">
          <span>地址</span>
          <span>{{getVal(detailData.address)}}</span>
        </div>
        <div class="item">
          <span>年龄</span>
          <span>{{getVal(detailData.age)}}</span>
        </div>
        <div class="item">
          <span>性别</span>
          <span>{{getSexType(detailData.gender)}}</span>
        </div>
        <div class="item">
          <span>姓名</span>
          <span>{{getVal(detailData.personName)}}</span>
        </div>
        <div class="item">
          <span>电话</span>
          <span>{{getVal(detailData.phone)}}</span>
        </div>
      </div>
    </div>

    <div class="content" v-if="type=='inCarInfo'">
      <div class="left">
        <div class="item">
          <span>抓拍图片</span>
          <img v-if="detailData.image" :src="detailData.image" class="img"></img>
        </div>
        <div class="item">
          <span>车牌号</span>
          <span>{{getVal(detailData.vplNumber)}}</span>
        </div>
        <div class="item">
          <span>进车时间</span>
          <span>{{getVal(detailData.inTime)}}</span>
        </div>
        <div class="item">
          <span>抓拍设备</span>
          <span>{{getVal(detailData.deviceName)}}</span>
        </div>
        <div class="item">
          <span>停车场</span>
          <span>{{getVal(detailData.parkName)}}</span>
        </div>
      </div>
      <div class="left">
        <div class="item">
          <span>业主名称</span>
          <span>{{getVal(detailData.carOwnerName)}}</span>
        </div>
        <div class="item">
          <span>业主电话</span>
          <span>{{getVal(detailData.carOwnerPhone)}}</span>
        </div>
        <div class="item">
          <span>车颜色</span>
          <span>{{getCarColorByColorType(detailData.vplColor)}}</span>
        </div>
        <div class="item">
          <span>车辆类型</span>
          <span>{{getCarType(detailData.vplType)}}</span>
        </div>
      </div>
    </div>

    <div class="content" v-if="type=='outCarInfo'">
      <div class="left">
        <div class="item">
          <span>抓拍图片</span>
          <img v-if="detailData.image" :src="detailData.image" class="img"></img>
        </div>
        <div class="item">
          <span>车牌号</span>
          <span>{{getVal(detailData.vplNumber)}}</span>
        </div>
        <div class="item">
          <span>出车时间</span>
          <span>{{getVal(detailData.outTime)}}</span>
        </div>
        <div class="item">
          <span>抓拍设备</span>
          <span>{{getVal(detailData.deviceName)}}</span>
        </div>
        <div class="item">
          <span>停车场</span>
          <span>{{getVal(detailData.parkName)}}</span>
        </div>
      </div>
      <div class="left">
        <div class="item">
          <span>业主名称</span>
          <span>{{getVal(detailData.carOwnerName)}}</span>
        </div>
        <div class="item">
          <span>业主电话</span>
          <span>{{getVal(detailData.carOwnerPhone)}}</span>
        </div>
        <div class="item">
          <span>停车缴费总额</span>
          <span>{{getVal(detailData.parkingCharge)}}</span>
        </div>
        <div class="item">
          <span>出车应付金额</span>
          <span>{{getVal(detailData.calcCharge)}}</span>
        </div>
        <div class="item">
          <span>车颜色</span>
          <span>{{getCarColorByColorType(detailData.vplColor)}}</span>
        </div>
        <div class="item">
          <span>车辆类型</span>
          <span>{{getCarType(detailData.vplType)}}</span>
        </div>
      </div>
    </div>

    <div class="content" v-if="type=='searchInfo'">
      <div class="left">
        <div class="item">
          <span>姓名</span>
          <span>{{getVal(detailData.name)}}</span>
        </div>
        <div class="item">
          <span>性别</span>
          <span>{{getSexType(detailData.sex)}}</span>
        </div>
        <div class="item">
          <span>电话</span>
          <span>{{getVal(detailData.tel)}}</span>
        </div>
        <div class="item">
          <span>身份证</span>
          <span>{{getVal(detailData.idCard)}}</span>
        </div>
        <div class="item">
          <span>人员类型</span>
          <span>{{getPersionType(detailData.personType)}}</span>
        </div>
      </div>
      <div class="left">
        <div class="item">
          <span>车牌</span>
          <span>{{getVal(detailData.carNumber)}}</span>
        </div>
        <div class="item">
          <span>社区</span>
          <span>{{getVal(detailData.agencyName)}}</span>
        </div>
        <div class="item">
          <span>小区</span>
          <span>{{getVal(detailData.residentialName)}}</span>
        </div>
        <div class="item">
          <span>单元</span>
          <span>{{getVal(detailData.unitName)}}</span>
        </div>
        <div class="item">
          <span>房间</span>
          <span>{{getVal(detailData.roomName)}}</span>
        </div>
      </div>
    </div>

    <div class="content" v-if="type=='flowPeopleInfo'">
      <div class="left">
        <div class="item">
          <span>抓拍图片</span>
          <img v-if="detailData.faceUrl" :src="detailData.faceUrl" class="img"></img>
        </div>
        <div class="item">
          <span>姓名</span>
          <span>{{getVal(detailData.userName)}}</span>
        </div>
        <div class="item">
          <span>时间</span>
          <span>{{getVal(detailData.openTime)}}</span>
        </div>
        <!-- <div class="item">
          <span>姓名</span>
          <span>{{getVal(detailData.openUserName)}}</span>
        </div>
        <div class="item">
          <span>身份证</span>
          <span>{{getVal(detailData.accessCardNo)}}</span>
        </div>
        <div class="item">
          <span>电话</span>
          <span>{{getVal(detailData.openUserTel)}}</span>
        </div> -->
        <!-- <div class="item">
          <span>年龄</span>
          <span>{{getVal(detailData.accessAge)}}</span>
        </div>
        <div class="item">
          <span>性别</span>
          <span>{{getSexType(detailData.accessSex)}}</span>
        </div> -->
        <!-- <div class="item">
          <span>时间</span>
          <span>{{getVal(detailData.accessDate)}}</span>
        </div> -->
      </div>
      <div class="right">
        <div class="item">
          <span>设备位置</span>
          <span>{{getVal(detailData.deviceAddress)}}</span>
        </div>
        <div class="item">
          <span>设备ID</span>
          <span>{{getVal(detailData.deviceId)}}</span>
        </div>
        <div class="item">
          <span>设备MAC</span>
          <span>{{getVal(detailData.deviceMac)}}</span>
        </div>
        <div class="item">
          <span>小区名称</span>
          <span>{{getVal(detailData.residentialName)}}</span>
        </div>
        <!-- <div class="item">
          <span>设备名称</span>
          <span>{{getVal(detailData.deviceName)}}</span>
        </div>
        <div class="item">
          <span>抓拍设备位置</span>
          <span>{{getVal(detailData.installPath)}}</span>
        </div>
        <div class="item">
          <span>区域</span>
          <span>{{getVal(detailData.residentialName)}}</span>
        </div>
        <div class="item">
          <span>单元</span>
          <span>{{getVal(detailData.unitName)}}</span>
        </div>
        <div class="item">
          <span>房间</span>
          <span>{{getVal(detailData.roomName)}}</span>
        </div>
        <div class="item">
          <span>人员类型</span>
          <span>{{getPersionType(detailData.accessUserType)}}</span>
        </div>
        <div class="item">
          <span>相似度</span>
          <span>{{getContrast(detailData.contrast)}}</span>
        </div> -->
      </div>
    </div>

    <div class="content" v-if="type=='peopleInfo'">
      <div class="left">
        <div class="item">
          <span>人员姓名</span>
          <span>{{getVal(detailData.person)}}</span>
        </div>
        <div class="item">
          <span>人员电话</span>
          <span>{{getVal(detailData.phone)}}</span>
        </div>
        <div class="item">
          <span>人员住址</span>
          <span>{{getVal(detailData.address)}}</span>
        </div>
        <div class="item">
          <span>告警类型</span>
          <span>{{detailData.jobContent}}</span>
        </div>
        <div class="item">
          <span>处理状态</span>
          <span>{{getVal(detailData.jobStatus)}}</span>
        </div>
        <div class="item">
          <span>上报时间</span>
          <span>{{getVal(detailData.reportTime)}}</span>
        </div>
      </div>
      <div class="right">
        <div class="item">
          <span>处理结果</span>
          <span>{{getVal(detailData.handleResult)}}</span>
        </div>
        <div class="item">
          <span>处理人</span>
          <span>{{getVal(detailData.handler)}}</span>
        </div>
        <div class="item">
          <span>处理时间</span>
          <span>{{getVal(detailData.handleTime)}}</span>
        </div>
        <div class="item">
          <span>处理人电话</span>
          <span>{{getVal(detailData.handlerPhone)}}</span>
        </div>
        <div class="item">
          <span>处理时间</span>
          <span>{{getVal(detailData.handleTime)}}</span>
        </div>
      </div>
    </div>

    <div class="content" v-if="type=='peopleInfo2'">
      <div class="left">
        <div class="item">
          <span>人员姓名</span>
          <span>{{getVal(detailData.name)}}</span>
        </div>
        <div class="item">
          <span>人员电话</span>
          <span>{{getVal(detailData.tel)}}</span>
        </div>
        <div class="item">
          <span>人员身份证</span>
          <span>{{getVal(detailData.idCard)}}</span>
        </div>
        <div class="item">
          <span>性别</span>
          <span>{{getSexType(detailData.sex)}}</span>
        </div>
        <div class="item">
          <span>上报时间</span>
          <span>{{getVal(detailData.updateTime)}}</span>
        </div>
      </div>
      <div class="right">
        <div class="item">
          <span>社区</span>
          <span>{{getVal(detailData.agencyName)}}</span>
        </div>
        <div class="item">
          <span>小区</span>
          <span>{{getVal(detailData.residentialName)}}</span>
        </div>
        <div class="item">
          <span>车牌号</span>
          <span>{{getVal(detailData.carNumber)}}</span>
        </div>
        <div class="item">
          <span>类型</span>
          <span>{{getPersionType(detailData.personType)}}</span>
        </div>
        <div class="item">
          <span>房间号</span>
          <span>{{getVal(detailData.roomName)}}</span>
        </div>
      </div>
    </div>

    <div class="content" v-if="type=='matterInfo'">
      <div class="left">
        <div class="item">
          <span>编号</span>
          <span>{{getVal(detailData.jobNo)}}</span>
        </div>
        <div class="item">
          <span>处理人</span>
          <span>{{getVal(detailData.handler)}}</span>
        </div>
        <div class="item">
          <span>处理人电话</span>
          <span>{{getVal(detailData.handlerPhone)}}</span>
        </div>
        <div class="item">
          <span>处理状态</span>
          <span>{{getJobStatus(detailData.jobStatus)}}</span>
        </div>
      </div>
      <div class="right">
         <div class="item">
          <span>上报人</span>
          <span>{{getVal(detailData.reportor)}}</span>
        </div>
        <div class="item">
          <span>上报时间</span>
          <span>{{getVal(detailData.reportTime)}}</span>
        </div>
        <div class="item">
          <span>上报人电话</span>
          <span>{{getVal(detailData.handlerPhone)}}</span>
        </div>
      </div>
    </div>

    <div class="content" v-if="type=='deviceInfo'">
      <div class="left">
        <div class="item">
          <span>设备编号</span>
          <span>{{getVal(detailData.deviceId)}}</span>
        </div>
        <div class="item">
          <span>设备位置</span>
          <span>{{getVal(detailData.deviceInstallAddress)}}</span>
        </div>
        <div class="item">
          <span>设备名称</span>
          <span>{{getVal(detailData.deviceName)}}</span>
        </div>
        <div class="item">
          <span>设备型号</span>
          <span>{{getVal(detailData.deviceSpecld)}}</span>
        </div>
        <div class="item">
          <span>设备状态</span>
          <span>{{getDeviceStatus(detailData.deviceStatus)}}</span>
        </div>
      </div>
      <div class="right">
        <div class="item">
          <span>设备类型</span>
          <span>{{getDeviceType(detailData.deviceType)}}</span>
        </div>
        <div class="item">
          <span>设备使用</span>
          <span>{{getVal(detailData.deviceUsage)}}</span>
        </div>
        <div class="item">
          <span>更新时间</span>
          <span>{{getVal(detailData.updateTime)}}</span>
        </div>
        <div class="item" @click="send">
          <span>通知消防员</span>
          <span>发送</span>
        </div>
        <div class="item" @click="searchLine">
          <span>最佳路径</span>
          <span style="color: #fff;font-weight: bold;cursor: pointer;">
            <i class="el-icon-search" style="color: #fff;"></i>
            查询消防路径
          </span>
        </div>
      </div>
    </div>

    <div class="content" v-if="type=='alarmInfo2'">
      <div class="left">
        <div class="item">
          <span>设备厂商</span>
          <span>{{getVal(detailData.manufacturers)}}</span>
        </div>
        <div class="item">
          <span>处理人</span>
          <span>{{getVal(detailData.person)}}</span>
        </div>
        <div class="item">
          <span>上报时间</span>
          <span>{{getVal(detailData.lastUpdateTime)}}</span>
        </div>
      </div>
      <div class="right">
        <div class="item">
          <span>设备名称</span>
          <span>{{getVal(detailData.deviceName)}}</span>
        </div>
        <div class="item">
          <span>设备编号</span>
          <span>{{getVal(detailData.deviceId)}}</span>
        </div>
        <div class="item">
          <span>设备类型</span>
          <span>{{getDeviceType(detailData.deviceType)}}</span>
        </div>

      </div>
    </div>

    <div class="content" v-if="type=='alarmInfo'">
      <div class="left">
        <div class="item">
          <span>告警名称</span>
          <span>{{getVal(detailData.alarmContent)}}</span>
        </div>
        <div class="item">
          <span>上报地点</span>
          <span>{{getVal(detailData.alarmPosition)}}</span>
        </div>
        <div class="item">
          <span>上报时间</span>
          <span>{{getVal(detailData.alarmTime)}}</span>
        </div>
       <div class="item">
          <span>告警原因</span>
          <span>{{getVal(detailData.alarmReason)}}</span>
        </div>
        <div class="item">
          <span>告警类型</span>
          <span>{{getAlarmType(detailData.alarmType)}}</span>
        </div>
        <div class="item">
          <span>处理状态</span>
          <span>{{getJobStatus(detailData.jobStatus)}}</span>
        </div>
      </div>
      <div class="right">
        <div class="item">
          <span>设备名称</span>
          <span>{{getVal(detailData.deviceName)}}</span>
        </div>
        <div class="item">
          <span>设备编号</span>
          <span>{{getVal(detailData.deviceId)}}</span>
        </div>
        <div class="item">
          <span>设备类型</span>
          <span>{{getDeviceType(detailData.deviceType)}}</span>
        </div>
        <div class="item">
          <span>处理人</span>
          <span>{{getVal(detailData.handler)}}</span>
        </div>
        <div class="item">
          <span>处理人手机</span>
          <span>{{getVal(detailData.phone)}}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {getDictKey} from "../../../api/system/dictbiz.js"
  export default{
    data(){
      return{
        deviceType:'',
        jobStatus:'',
        alarmType:'',
        personType:'',
        carColor:'',
        carType:'',
        sexType:''
      }
    },
    props:['detailData','type'],

    mounted() {

    },
    methods:{
      getVal(val){
        if(val==0){
          val = val.toString()
        }
        return val?val:'无'
      },
      getContrast(val){
        return (val*100).toFixed(2)+'%'
      },
      getDeviceStatus(val){
        if(val==1){
          val = '已处理'
        }else{
          val = '未处理'
        }
        return val
      },
      getSexType(val){
        if(val==0){
          val = val.toString()
        }
        var _this = this;
        let params = {
          'code':'user_sex',
          'dictKey':val
        }
        if(val){
          getDictKey(params).then((res)=>{
            _this.sexType = res.data.data.dictValue
          })
        }else{
          _this.sexType = '无'
        }
        return _this.sexType
      },
      getCarType(val){
        if(val==0){
          val = val.toString()
        }
        var _this = this;
        let params = {
          'code':'car_type',
          'dictKey':val
        }
        if(val){
          getDictKey(params).then((res)=>{
            _this.carType = res.data.data.dictValue
          })
        }else{
          _this.carType = '无'
        }
        return _this.carType
      },
      getCarColorByColorType(val){
        if(val==0){
          val = val.toString()
        }
        var _this = this;
        let params = {
          'code':'car_color',
          'dictKey':val
        }
        if(val){
          getDictKey(params).then((res)=>{
            _this.carColor = res.data.data.dictValue
          })
        }else{
          _this.carColor = '无'
        }
        return _this.carColor
      },
      getJobStatus(val){
        if(val==0){
          val = val.toString()
        }
        if(val==1){
          this.jobStatus = "已处理"
        }else if(val==0){
          this.jobStatus = "未处理"
        }else{
          this.jobStatus = "无"
        }
        return this.jobStatus
      },
      getPersionType(val){
        if(val==0){
          val = val.toString()
        }
        var _this = this;
        let params = {
          'code':'person_type',
          'dictKey':val
        }
        if(val){
          getDictKey(params).then((res)=>{
            _this.personType = res.data.data.dictValue
          })
        }else{
          _this.personType = '无'
        }
        return _this.personType
      },
      getAlarmType(val){
        if(val==0){
          val = val.toString()
        }
        var _this = this;
        let params = {
          'code':'alarm_type',
          'dictKey':val
        }
        if(val){
          getDictKey(params).then((res)=>{
            _this.alarmType = res.data.data.dictValue
          })
        }else{
          _this.alarmType = '无'
        }
        return _this.alarmType
      },
      getDeviceType(val){
        if(val==0){
          val = val.toString()
        }
        var _this = this;
        let params = {
          'code':'device_type',
          'dictKey':val
        }
        if(val){
          getDictKey(params).then((res)=>{
            _this.deviceType = res.data.data.dictValue
          })
        }else{
          _this.deviceType = '无'
        }
        return _this.deviceType
      },
      searchLine(){
        this.$emit("searchLine")
      },
      send(){
        this.$message({
          message: '发送成功',
          type: 'success'
        });
      }
    }
  }
</script>

<style lang="less">
  #popupDetail{
      padding-top: 100px;
      font-size: 14px;
    .content{
      display: flex;
    }
    .left,.right{
      width: 100%;
    }
    .item{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 50px;
      height: 50px;
      span:first-child{
        color:#00FEFF
      }
    }
    .img{
      width: 1rem;
      height: 1rem;
      display: block;
    }
  }
</style>
