<template>
    <div class="fe8-bg">
        <div class="port-wrapper">
            <div class="port-container part1">
                <div class="port-area">
                    <interface v-for="item in ifList1"
                               :key="item.ifNum"
                               :item="item"
                               :if-type="ifType"
                               :data-set="dataSet"
                               class="port-item"
                               :class="{
                                   'icon-gray-port-bg-pic':item.class === 'icon-gray-port' ? true : false,
                                   'icon-green-port-bg-pic':item.class === 'icon-green-port' ? true : false,
                                   'icon-blue-port-bg-pic':item.class === 'icon-blue-port' ? true : false,
                                    'upside':parseInt(item.ifNum) % 2 === 0 ? true : false
                               }"
                               @right-click="rightClick"
                               @pop-up-click="handlePopUp"
                    >
                    </interface>
                </div>
            </div>
            <div class="port-container part2">
                <div class="port-area">
                    <interface v-for="item in ifList2"
                               :key="item.ifNum"
                               :item="item"
                               :if-type="ifType"
                               :data-set="dataSet"
                               class="port-item"
                               :class="{
                                   'icon-gray-port-bg-pic':item.class === 'icon-gray-port' ? true : false,
                                   'icon-green-port-bg-pic':item.class === 'icon-green-port' ? true : false,
                                   'icon-blue-port-bg-pic':item.class === 'icon-blue-port' ? true : false,
                                    'upside':parseInt(item.ifNum) % 2 === 0 ? true : false
                               }"
                               @right-click="rightClick"
                               @pop-up-click="handlePopUp"
                    >
                    </interface>
                </div>
            </div>
            <div class="port-container part3">
                <div class="port-area">
                    <interface v-for="item in ifList3"
                               :key="item.ifNum"
                               :item="item"
                               :if-type="ifType"
                               :data-set="dataSet"
                               class="port-item"
                               :class="{
                                   'icon-gray-port-bg-pic':item.class === 'icon-gray-port' ? true : false,
                                   'icon-green-port-bg-pic':item.class === 'icon-green-port' ? true : false,
                                   'icon-blue-port-bg-pic':item.class === 'icon-blue-port' ? true : false,
                                    'upside':parseInt(item.ifNum) % 2 === 0 ? true : false
                               }"
                               @right-click="rightClick"
                               @pop-up-click="handlePopUp"
                    >
                    </interface>
                </div>
            </div>
            <div class="port-container part4">
                <div class="port-area">
                    <interface v-for="item in ifList4"
                               :key="item.ifNum"
                               :item="item"
                               :if-type="ifType"
                               :data-set="dataSet"
                               class="port-item"
                               :class="{
                                   'icon-gray-port-bg-pic':item.class === 'icon-gray-port' ? true : false,
                                   'icon-green-port-bg-pic':item.class === 'icon-green-port' ? true : false,
                                   'icon-blue-port-bg-pic':item.class === 'icon-blue-port' ? true : false,
                                    'upside':parseInt(item.ifNum) % 2 === 0 ? true : false
                               }"
                               @right-click="rightClick"
                               @pop-up-click="handlePopUp"
                    >
                    </interface>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Interface from '../../interface/interface'
export default {
    name: "fe8",
    props: {
        ifList: {
            type: Array,
            required: true
        },
        ifType: {
            type: String
        },
        dataSet:{
            type: Object,
            default: function () {
                return {devId: '',ifType:'',vpnName:'' }
            }
        }
    },
    methods: {
        rightClick(item) {
            this.$emit('right-click',item)
        },
        handlePopUp(item,event){
            this.$emit('pop-up-click',item,event)
        }
    },
    components:{Interface},
    computed: {
        ifList1() {
            return this.ifList.filter(item => parseInt(item.ifNum) === 0 || parseInt(item.ifNum) === 1)
        },
        ifList2() {
            return this.ifList.filter(item => parseInt(item.ifNum) === 2 || parseInt(item.ifNum) === 3)
        },
        ifList3() {
            return this.ifList.filter(item => parseInt(item.ifNum) === 4 || parseInt(item.ifNum) === 5)
        },
        ifList4() {
            return this.ifList.filter(item => parseInt(item.ifNum) === 6 || parseInt(item.ifNum) === 7)
        }
    }
}
</script>

<style lang="scss">
    .fe8-bg {
        height: 76px;
        width: 280px;
        background: url("../../../../assets/actualView/HIM-8FE.png");
        position: absolute;
        .port-wrapper {
            height: 100%;
            display: flex;
            padding-left: 38px;
            .port-container {
                height: 50px;
                width: 38px;
                background: #ffffff;
                border: 1px solid #8b8b8b;
                padding: 2px 2px;
                margin-top: 15px;
                &.part1,&.part2,&.part3 {
                    margin-right: 18px;
                }
                .port-area {
                    height: 100%;
                    display: flex;
                    flex-direction: column-reverse;
                    align-items: center;
                    justify-content: space-between;
                    .port-item {
                        height: 19px;
                        width: 26px;
                    }
                }
            }
        }
    }
</style>