<template>
    <div class="fip-bg">
        <div class="sub-slot">
            <div class="sub-slot-2-4">
                <sub-slot-list
                        :sub-slot-list="subSlot24List"
                        list-type="2-4"
                        :if-type="ifType"
                        :data-set="dataSet"
                        @right-click="rightClick"
                        @pop-up-click="handlePopUp"
                />
            </div>
            <div class="sub-slot-1-3">
                <sub-slot-list
                        :sub-slot-list="subSlot13List"
                        list-type="1-3"
                        :if-type="ifType"
                        :data-set="dataSet"
                        @right-click="rightClick"
                        @pop-up-click="handlePopUp"
                />
            </div>
            <div class="sub-slot-0">
                <div class="port-wrapper">
                    <div class="port-container">
                        <div class="port-area">
                            <interface v-for="item in subSlotFixedIfList"
                                       :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>
        </div>
    </div>
</template>

<script>
import Interface from '@/components/actualView/interface/interface'
import SubSlotList from '@/components/actualView/flexGrove/subSlotList/subSlotList'
export default {
    name: "fip",
    props: {
        cardList: {
            type: Array
        },
        ifType: {
            type: String
        },
        dataSet:{
            type: Object,
            default: function () {
                return {devId: '',ifType:'',vpnName:'' }
            }
        }
    },
    computed: {
        subSlot24List() {
            return this.cardList.filter(item => item.subSlot === '2' || item.subSlot === '4')
        },
        subSlot13List() {
            return this.cardList.filter(item => item.subSlot === '1' || item.subSlot === '3')
        },
        subSlotFixedIfList() {
            let fixedIfList = this.cardList.filter(item => item.subSlot === '0')
            return fixedIfList[0].devinterfacelist
        }
    },
    methods: {
        rightClick(item) {
            this.$emit('right-click',item)
        },
        handlePopUp(item,event){
            this.$emit('pop-up-click',item,event)
        }
    },
    components: {
        Interface,
        SubSlotList
    }
}
</script>

<style lang="scss">
.fip-bg {
    .sub-slot {
        display: flex;
    }
    .sub-slot-2-4,.sub-slot-1-3 {
        height: 78px;
        width: 285px;
        position: relative;
    }
    .sub-slot-2-4 {
        margin-left: 56px;
    }
    .sub-slot-1-3 {
        margin-left: 10px;
    }
    .sub-slot-0 {
        .port-wrapper {
            .port-container {
                height: 50px;
                width: 38px;
                background: #ffffff;
                border: 1px solid #8b8b8b;
                padding: 2px 2px;
                margin-top: 15px;
                .port-area {
                    height: 100%;
                    display: flex;
                    flex-direction: column-reverse;
                    align-items: center;
                    justify-content: space-between;
                    .port-item {
                        height: 19px;
                        width: 26px;
                    }
                }
            }
        }
    }
}
</style>