<template>
    <div class="container">
        <div class="main">
            <span class="device-name" v-if="alarmInfo.deviceName">{{ alarmInfo.deviceName }}</span>
            <div class="main-alarm">
                <div class="main-item" style="border-right: 1px solid #ffffff;">
                    <div class="main-item-title">库中数据</div>
                    <div class="main-item-info">
                        <img :src="baseInfo.imgUrl" />
                        <div class="main-item-content">
                            <span v-if="baseInfo.personName">姓名：{{ baseInfo.personName }}</span>
                            <span v-if="baseInfo.personGender">性别: {{ baseInfo.personGender == "1" ? "男" : "女" }}</span>
                            <span v-if="baseInfo.personAddr">地址：{{ baseInfo.personAddr }}</span>
                        </div>
                    </div>
                </div>
                <div class="main-item" style="border-right: 1px solid #ffffff;">
                    <div class="main-item-title">抓拍数据</div>
                    <div class="main-item-info">
                        <img :src="alarmInfo.snapImage" />
                        <div class="main-item-content">
                            <span>告警类型：人脸黑名单</span>
                            <span v-if="alarmInfo.createTime">抓拍时间: {{ alarmInfo.createTime  }}</span>
                            <span v-if="alarmInfo.similarity">相似度：{{ alarmInfo.similarity }}%</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "blackPeople",
    components: { },
    props: {
        alarmInfo: {
            type: Object,
            default: {},
        },
        baseInfo: {
            type: Object,
            default: {},
        },
    },
    data() {
        return {
        };
    },
    methods: {},
    mounted () {
        console.log(this.alarmInfo)
    },
    watch: {},
    beforeDestroy() {},
};
</script>

<style lang="less" scoped>
.container {
    width: 100%;
    height: 600px;
    background: url("../../../../assets/largeScreen/e-bg1.png") no-repeat;
    background-size: 100% 100%;
    text-align: center;
    padding: 64px 75px 20px 75px;

    .main {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow: hidden;
        overflow-y: scroll;

        &::-webkit-scrollbar {
            display: none;
        }
        .main-alarm {
            width: 100%;
            height: 450px;
            display: flex;

            .main-item {
                width: 50%;
                height: 100%;
                display: flex;
                flex-direction: column;

                .main-item-title {
                    padding-left: 20px;
                    width: 100%;
                    height: 50px;
                    line-height: 50px;
                    font-size: 18px;
                    text-align: left;
                    color: #ffffff;
                }
                .main-item-info {
                    padding-left: 20px;
                    flex: 1;
                    display: flex;

                    img {
                        width: 40%;
                        margin-right: 5%;
                    }
                    .main-item-content {
                        width: 50%;
                        height: 100%;
                        display: flex;
                        flex-direction: column;

                        span {
                            display: block;
                            width: 100%;
                            text-align: left;
                            font-size: 16px;
                            color: #ffffff;
                            margin-bottom: 10px;
                        }
                    }
                }
            }
        }
    }
    .device-name {
        font-family: PingFang SC;
        font-size: 26px;
        font-weight: 400;
        margin: 5px 0;
        color: #fad03b;
    }
}
</style>
