<template>
  <div class="dialog" v-if="dialogForm">
    <div class="head_box">
      <span class="title">预警详情</span>
      <div>
        <el-button @click="close">关闭</el-button>
      </div>
    </div>
    <div class="form_cnt">
        <div class="left">
            <div class="lh30">轨迹信息</div>
            <div class="flex item mr15">
                <img :src="person" alt="">
                <div class="ml10">
                    <div>姓名：张三（51018319954544454）</div>
                    <div>预警次数：<span>6</span>次</div>
                    <div>预警来源：布控预警</div>
                    <div>预警标签：社区戒毒</div>
                    <div><span class="marks">轨迹上图</span></div>
                </div>
            </div>
            <ul class="cntBox">
                <li class="li-item" v-for="idx in 10" :key="idx">
                    <div class="mb10">预警时间：2024-05-21 10:10:05</div>
                    <div class="item flex info">
                        <img :src="person" alt="" style="width:99px;height: 92px;">
                        <div class="ml10">预警内容；预警内容:5月21日20.41.14人像抓拍数据测到 马志强(510502199506168718)出现在024000050迎库路大世界石梯人行道2L4-SPL</div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="right">
            <GdMap></GdMap>
        </div>
    </div>
  </div>
</template>

<script setup>
import GdMap from "@/components/GdMap/index.vue";
import { ref, defineExpose,defineEmits } from "vue";
const emit = defineEmits(["change"]);
const props = defineProps({
  dic: Object
});
const person = require('@/assets/images/person.png')
const dialogForm = ref(false); //弹窗

// 初始化数据
const init = (row) => {
  dialogForm.value = true;
};

// 关闭
const close = () => {
  dialogForm.value = false;
};

defineExpose({ init });
</script>

<style lang="scss" scoped>
@import "~@/assets/css/layout.scss";
@import "~@/assets/css/element-plus.scss";

.form_cnt{
  display: flex;
  .left{
    width: 400px;
    height: 100%;
    margin-right: 10px;
    .item{
        background: rgb(248, 248, 248);
        padding: 4px;
    }
    .info{
        padding: 10px;
        box-sizing: border-box;
        margin-left: 10px;
    }
    .marks{
        font-size: 12px;
        display: inline-block;
        padding: 2px 6px;
        background: #0072ff;
        border-radius: 4px;
        color: #fff;
    }
    .cntBox{
        margin-top: 6px;
        height: calc(100% - 140px);
        overflow: hidden;
        overflow-y: auto;
        .li-item{
            border-left:1px solid #0072ff ;
            padding-left:10px;
            box-sizing: border-box;
            position: relative;
            margin-left: 10px;
            margin-right: 10px;
            &::before{
                position: absolute;
                content: '';
                top: 0;
                left: -5px;
                width: 10px;
                height: 10px;
                background: #0072ff;
                border-radius: 50%;
            }
        }
    }
  }
  .right{
    position: relative;
    width: calc(100% - 410px);
    height: 100%;
  }
}
</style>
