<!--
 * @Descripttion: 
 * @version: 
 * @Author: JC9527
 * @Date: 2023-08-17 17:14:00
 * @LastEditors: JC9527
 * @LastEditTime: 2023-12-11 13:43:25
-->
<template>
  <popup-title :type="4" v-on:personClose="monitoringClose" title="监控视频" :style="pointLocation">
    <div class="monitoring">
      <div class="bg">
        <img src="@/assets/images/popup/screenshot20230817.png" alt="">
      </div>
      <div class="btns">
        <div class="btn" @click="monitoringInfo()">上墙</div>
        <div class="btn">转发</div>
      </div>
    </div>
  </popup-title>
</template>
<script>
import popupTitle from "@/views/components/popupTitle/index.vue"
export default {
  components:{popupTitle},
  data() {
    return {
      pointLocation:{
        left:'',
        right:'',
      }
    }
  },
  methods:{
    monitoringClose(){
      this.$emit('monitoringClose')
    },
    monitoringInfo(){
      this.$emit('monitoringInfo')
    }
  },
  props:{
    point:{
      type:Object,
      default:function(){
        return {}
      }
    }
  },
  mounted(){
    this.pointLocation.left = (this.point.x + 20) + 'px';
    this.pointLocation.top = (this.point.y - 40) + 'px'
  },
  watch:{
    point:{
      handler(newobj,oldobj) {
        this.pointLocation.left = (newobj.x + 20) + 'px';
        this.pointLocation.top = (newobj.y - 40) + 'px'
      },
      deep:true,
    }
  },
}
</script>
<style lang="scss" scoped>
.monitoring {
  padding: 11px 25px 24px 25px;
  .bg {
    background-image: url("../../../assets//images/popup/video.png");
    background-size: 100% 100%;
    width: 192px;
    height: 108px;
    padding: 2px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .btns {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    .btn {
      background-image: url("../../../assets/images/popup/icon2btn.png");
      background-size: 100% 100%;
      width: 91px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-family: 'Source Han Sans CN-Regular';
      font-weight: 400;
      color: #D3EEF2;
      line-height: 20px;
      cursor: pointer;
    }
  }
}
</style>
