<template>
    <div class="visit-panel">
        <div class="visit-from">
            <VisitCard>
                <div slot="first" style="text-align: center;">                    
                    <img style="width: 60px; height: 60px" src="../../../images/computer.png" />
                    <div style="font-size: 12px; color: #606266">{{visitData.src_ip}}</div>
                </div>
                <div slot="second" style="padding-left: 10px;">
                    <el-form label-position="left" label-width="80px">
                        <el-form-item label="源端口:">
                            <span>{{visitData.src_port}}</span>
                        </el-form-item>
                        <el-form-item label="国家/城市:">
                            <span>{{ t(visitData.src_ip_country) || visitData.src_ip_country }}/{{ t(visitData.src_ip_city) || visitData.src_ip_city }}({{ visitData.src_ip_geoloc }})</span>
                        </el-form-item>
                        <el-form-item v-if="Object.keys(visitData).join(',').includes('src_flag_')" label="标签:">
                            <el-tag type="string" size="mini" effect="plain" v-if="visitData.src_flag_victim == 1">受害者</el-tag>
                            <el-tag type="danger" size="mini" effect="plain" v-else-if="visitData.src_flag_attacker == 1">攻击者</el-tag>
                            <el-tag type="danger" size="mini" effect="plain" v-else-if="visitData.src_flag_malicious == 1">恶意</el-tag>
                        </el-form-item>
                    </el-form>
                </div>
            </VisitCard>
        </div>
        <div style="margin: auto 0;position: relative">
            <div class="visit-arrow-info">
                传输层协议：{{ visitData.proto }}
            </div>
            <div class="visit-arrow-info">
                应用层协议：{{ visitData.app_proto }}
            </div>
            <div style="display: flex; align-items: center" class="visit-arrow-wrapper">
                <div class="visit-arrow-line"></div>
                <div class="visit-arrow-arrow"></div>
            </div>
        </div>
        <div class="visit-to">
            <VisitCard>
                <div slot="first" style="text-align: center;">
                    <img style="width: 60px; height: 60px" src="../../../images/ball.png" />
                    <div style="font-size: 12px; color: #606266">{{visitData.dst_ip}}</div>
                </div>
                <div slot="second" style="padding-left: 20px;">
                    <el-form label-position="left" label-width="80px">
                        <el-form-item label="目的端口:">
                            <span>{{ visitData.dst_port }}</span>
                        </el-form-item>
                        <el-form-item label="国家/城市:">
                            <span>{{ t(visitData.dst_ip_country) || visitData.dst_ip_country }}/{{ t(visitData.dst_ip_city) || visitData.dst_ip_city }}({{ visitData.dst_ip_geoloc }})</span>
                        </el-form-item>
                        <el-form-item v-if="Object.keys(visitData).join(',').includes('dst_flag_')" label="标签:">
                            <el-tag type="string" size="mini" effect="plain" v-if="visitData.dst_flag_victim == 1">受害者</el-tag>
                            <el-tag type="danger" size="mini" effect="plain" v-else-if="visitData.dst_flag_attacker == 1">攻击者</el-tag>
                            <el-tag type="danger" size="mini" effect="plain" v-else-if="visitData.dst_flag_malicious == 1">恶意</el-tag>
                        </el-form-item>
                    </el-form>
                </div>
            </VisitCard>
        </div>
    </div>
</template>
<script>
import VisitCard from './visitCardComent'
import i18n from '../../../i18n'
export default{
    props:['visitData'],
    components:{
        VisitCard
    },
    data(){
        return {

        }
    },
    methods: {
        t(val) {
            return i18n.zh[val]
        }
    }
}
</script>
<style scoped>
.visit-panel{
    display: flex;
}
.visit-from,.visit-to{
    background: aliceblue;
    display: inline-block;
    height: 156px;
}
.visit-arrow-info{
    width: 230px;
    text-align: center;
}
.visit-arrow-line{
    width: 210px;
    height: 5px;
    background: #6aa6ce;
}
.visit-arrow-arrow{
    width: 0;
    height: 0;
    border-left: 20px solid #6aa6ce;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}
</style>

<style>
.visit-panel .visit-from .el-form-item__content, .visit-panel .visit-to .el-form-item__content  {
    max-width: none;
}
</style>
