<template>
    <div class="default-coment">
        <div style="height: 55px;line-height: 55px;">
            <span class="title">{{ t(rowData.category) || rowData.category }}</span>
            <span class="title2">{{rowData.find_time}}</span>
            <el-button style="margin-left: 50px" size="mini" class="title2" icon="el-icon-search" @click="$emit('related-click')">相关事件查询</el-button>
            <!-- <el-button size="mini" class="title2" icon="el-icon-search">元数据追溯</el-button> -->
            <!-- <el-button size="mini" v-if="rowData.app_proto==='dns'||rowData.app_proto==='other'" type="primary" ghost class="title2">PCAP包下载</el-button> -->
            <!-- <el-button size="mini" icon="el-icon-folder-checked">跳转TFS查询</el-button> -->
            <el-dropdown class="title2" @command="$emit('export-click')">
                <el-button size="mini" type="primary" plain icon="el-icon-download">
                    导出
                    <i class="el-icon-arrow-down"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                    <!-- <el-dropdown-item>JSON</el-dropdown-item> -->
                    <el-dropdown-item>XLSX</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
        <div style="margin-bottom: 5px">
            <span class="title2">平台事件ID：{{rowData.guid}}</span>
        </div>
        <el-collapse v-model="expandArray">
            <el-collapse-item title="访问信息" :name="1">
                <VisitInfo :visitData="rowData"></VisitInfo>
                <el-form style="margin-top: 20px" label-width="150px" label-position="left" label-suffix=":">
                    <el-form-item v-if="rowData.app_proto == 'http' && rowData.desc" label="访问URL">
                        {{ rowData.desc.indexOf('host:') != -1 
                            ? rowData.desc.split(';').filter(el => el.startsWith('host'))[0].replace('host:', '') 
                                : ''    
                        }}
                    </el-form-item>
                    <el-form-item v-if="rowData.app_proto != 'ntp' || rowData.app_proto != 'dhcp'" label="攻击/异常载荷">
                        {{ rowData.payload }}
                    </el-form-item>
                    <el-form-item label="详细信息">
                        {{ t(rowData.message) || rowData.message }}
                    </el-form-item>
                    <el-form-item v-if="rowData.app_proto != 'smtp'" label="威胁IOC">
                        {{ t(rowData.target) || rowData.target }}
                    </el-form-item>

                    <el-form-item v-for="(item, index) in appProtoList" :key="index" :label="item.dataName.startsWith(rowData.app_proto) ? item.dataName : `${rowData.app_proto.toUpperCase()}${item.dataName}`">
                        <span>{{ t(rowData[item.dataStr]) || rowData[item.dataStr] }}</span>
                    </el-form-item>
                </el-form>
            </el-collapse-item>

            <el-collapse-item title="检测信息" :name="2">
                <el-form label-width="150px" label-position="left" label-suffix=":">
                    <el-form-item label="威胁类别">
                        {{ t(rowData.classtype) || rowData.classtype }}
                    </el-form-item>
                    <el-form-item label="威胁名称">
                        {{ t(rowData.category) || rowData.category }}
                    </el-form-item>
                    <el-form-item label="事件规则ID">
                        {{ rowData.rid }}
                    </el-form-item>
                    <el-form-item v-if="rowData.rid_cn" label="事件规则详情">
                        {{ t(rowData.rid_cn) || rowData.rid_cn }}
                    </el-form-item>
                    <el-form-item label="攻击链阶段">
                        {{ t(rowData.kill_chain) || rowData.kill_chain }}
                    </el-form-item>
                    <el-form-item label="威胁等级">
                        <div :class="['tag', 'tag-' + (rowData.severity == 5 ? 'serious' : rowData.severity == 4 ? 'high' : rowData.severity == 3 || rowData.severity == 2  ? 'middle' : 'low')]">
                            {{ rowData.severity | filterSeverity }}
                        </div>
                    </el-form-item>
                    <el-form-item label="确信度">
                        <div :class="['tag', 'tag-' + (rowData.severity == 5 ? 'serious' : rowData.severity == 4 ? 'high' : rowData.severity == 3 ? 'middle' : 'low')]">
                            {{
                                rowData.reliability <= 4
                                ? '低可信'
                                : rowData.reliability < 8
                                ? '中可信'
                                :rowData.reliability>=8
                                ?'高可信':'--'
                            }}
                        </div>
                    </el-form-item>
                    <el-form-item v-if="rowData.threat_desc" label="威胁描述">
                        {{ t(rowData.threat_desc) || rowData.threat_desc }}
                    </el-form-item>
                    <el-form-item v-if="rowData.threat_suggestion" label="处置建议">
                        {{ t(rowData.threat_suggestion) ||rowData.threat_suggestion }}
                    </el-form-item>
                </el-form>
            </el-collapse-item>
            
            <!-- ssl title为情报相关事件 smtp为同会话关联事件 iec104为同会话关联事件 ntp同会话关联事件和情报相关事件 -->
            <!-- <el-collapse-item title="同会话关联事件" :name="3">
                <div>
                     该事件同会话还关联<span style="color:#6aa6ce">{{ rowData.is_read }}条</span>其他类型事件
                </div>
            </el-collapse-item> -->

            <el-collapse-item title="其他信息" :name="3">
                <el-form label-width="150px" label-position="left" label-suffix=":">
                    <el-form-item label="检测引擎">
                        {{ t(rowData.engine_type) || rowData.engine_type }}
                    </el-form-item>
                    <el-form-item label="探针标识">
                        {{ rowData.sensor_id }}
                    </el-form-item>
                    <el-form-item label="探针IP">
                        {{ rowData.sensor_ip }}
                    </el-form-item>
                </el-form>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>
<script>
import VisitInfo from './visitInfoComponents/visitInfo'
import i18n from '../../i18n'
export default {
    components:{
        VisitInfo
    },
    props: {
        rowData: {
            type: Object,
            default: () => {}
        },
        fields: {
            type: Array,
            default: () => []
        }
    },
    data(){
        return{
            expandArray:[1,2,3],
            appProtoList: []
        }
    },
    filters: {
        filterSeverity:  (value) => {
            if (!value) return ''
            // if(value == 1){
            //     return '轻危'
            // }
            if(value == 1){
                return '低危'
            }
            if(value == 2 || value == 3){
                return '中危'
            }
            if(value == 4){
                return '高危'
            }
            if(value == 5){
                return '危急'
            }
        }
    },
    methods: {
        t(val) {
            return i18n.zh[val]
        }
    },
    mounted() {
        let keys = Object.keys(this.rowData).filter(el => {
            if (this.rowData.app_proto == 'http' || this.rowData.app_proto == 'other') {
                return el.startsWith(this.rowData.app_proto) || el.startsWith('file')
            } else {
                return el.startsWith(this.rowData.app_proto)
            }
        })
        let fields = this.fields.filter(el => {
            if (this.rowData.app_proto == 'http' || this.rowData.app_proto == 'other') {
                return el.dataStr.startsWith(this.rowData.app_proto) || el.dataStr.startsWith('file')
            } else {
                return el.dataStr.startsWith(this.rowData.app_proto)
            }
        })
        keys.forEach(key => {
            let index = fields.findIndex(el => key == el.dataStr)
            if (index != -1) {
              this.appProtoList.push(fields[index])
            }
        })
    }
}
</script>
<style scoped>
.title {
  color: #e00505;
  font-size: 16px;
  font-weight: bold;
}
.title2 {
  margin-left: 5px;
}
.wrapText {
    white-space: pre-wrap;
    max-width: 50%;
    display: inline-block;
    overflow-wrap: break-word;
    text-align: left;
}
</style>
<style lang="scss" scoped>
    .default-coment {
        .tag {
            height: 20px;
            line-height: 20px;
            padding: 0 8px;
            border-radius: 2px;
            color: white;
            display: inline-block;
        }
        .tag-low {
            background-color: rgb(88,161,247);
        }
        .tag-middle {
            background-color: rgb(255,223,67);
        }
        .tag-high {
            background-color: rgb(255,167,53);
        }
        .tag-serious {
            background-color: rgb(236,87,89);
        }
    }
</style>