<template>
    <div class="sap-28ge-bg">
        <div class="port-wrapper">
            <div class="port-container container1 part1">
                <div class="port-area list1">
                    <interface v-for="item in ifOddList1"
                               :key="item.ifNum"
                               :item="item"
                               :if-type="ifType"
                               :data-set="dataSet"
                               @right-click="rightClick"
                               @pop-up-click="handlePopUp"
                               class="port-item"
                               :class="{
                                   'icon-gray-port-bg-color':item.class === 'icon-gray-port' ? true : false,
                                   'icon-green-port-bg-color':item.class === 'icon-green-port' ? true : false,
                                   'icon-blue-port-bg-color':item.class === 'icon-blue-port' ? true : false,
                               }"
                    />
                </div>
                <div class="port-area list2">
                    <interface v-for="item in ifEvenList1"
                               :key="item.ifNum"
                               :item="item"
                               :if-type="ifType"
                               :data-set="dataSet"
                               @right-click="rightClick"
                               @pop-up-click="handlePopUp"
                               class="port-item"
                               :class="{
                                   'icon-gray-port-bg-color':item.class === 'icon-gray-port' ? true : false,
                                   'icon-green-port-bg-color':item.class === 'icon-green-port' ? true : false,
                                   'icon-blue-port-bg-color':item.class === 'icon-blue-port' ? true : false,
                               }"
                    />
                </div>
            </div>
            <div class="port-container container1 part2">
                <div class="port-area list1">
                    <interface v-for="item in ifOddList2"
                               :key="item.ifNum"
                               :item="item"
                               :if-type="ifType"
                               :data-set="dataSet"
                               @right-click="rightClick"
                               @pop-up-click="handlePopUp"
                               class="port-item"
                               :class="{
                                   'icon-gray-port-bg-color':item.class === 'icon-gray-port' ? true : false,
                                   'icon-green-port-bg-color':item.class === 'icon-green-port' ? true : false,
                                   'icon-blue-port-bg-color':item.class === 'icon-blue-port' ? true : false,
                               }"
                    />
                </div>
                <div class="port-area list2">
                    <interface v-for="item in ifEvenList2"
                               :key="item.ifNum"
                               :item="item"
                               :if-type="ifType"
                               :data-set="dataSet"
                               @right-click="rightClick"
                               @pop-up-click="handlePopUp"
                               class="port-item"
                               :class="{
                                   'icon-gray-port-bg-color':item.class === 'icon-gray-port' ? true : false,
                                   'icon-green-port-bg-color':item.class === 'icon-green-port' ? true : false,
                                   'icon-blue-port-bg-color':item.class === 'icon-blue-port' ? true : false,
                               }"
                    />
                </div>
            </div>
            <div class="port-container container2 part1">
                <div class="port-area list1">
                    <interface v-for="item in ifOddList3"
                               :key="item.ifNum"
                               :item="item"
                               :if-type="ifType"
                               :data-set="dataSet"
                               @right-click="rightClick"
                               @pop-up-click="handlePopUp"
                               class="port-item"
                               :class="{
                                   'icon-gray-port-bg-color':item.class === 'icon-gray-port' ? true : false,
                                   'icon-green-port-bg-color':item.class === 'icon-green-port' ? true : false,
                                   'icon-blue-port-bg-color':item.class === 'icon-blue-port' ? true : false,
                               }"
                    />
                </div>
                <div class="port-area list2">
                    <interface v-for="item in ifEvenList3"
                               :key="item.ifNum"
                               :item="item"
                               :if-type="ifType"
                               :data-set="dataSet"
                               @right-click="rightClick"
                               @pop-up-click="handlePopUp"
                               class="port-item"
                               :class="{
                                   'icon-gray-port-bg-color':item.class === 'icon-gray-port' ? true : false,
                                   'icon-green-port-bg-color':item.class === 'icon-green-port' ? true : false,
                                   'icon-blue-port-bg-color':item.class === 'icon-blue-port' ? true : false,
                               }"
                    />
                </div>
            </div>
            <div class="port-container container2 part2">
                <div class="port-area list1">
                    <interface v-for="item in ifOddList3"
                               :key="item.ifNum"
                               :item="item"
                               :if-type="ifType"
                               :data-set="dataSet"
                               @right-click="rightClick"
                               @pop-up-click="handlePopUp"
                               class="port-item"
                               :class="{
                                   'icon-gray-port-bg-color':item.class === 'icon-gray-port' ? true : false,
                                   'icon-green-port-bg-color':item.class === 'icon-green-port' ? true : false,
                                   'icon-blue-port-bg-color':item.class === 'icon-blue-port' ? true : false,
                               }"
                    />
                </div>
                <div class="port-area list2">
                    <interface v-for="item in ifEvenList3"
                               :key="item.ifNum"
                               :item="item"
                               :if-type="ifType"
                               :data-set="dataSet"
                               @right-click="rightClick"
                               @pop-up-click="handlePopUp"
                               class="port-item"
                               :class="{
                                   'icon-gray-port-bg-color':item.class === 'icon-gray-port' ? true : false,
                                   'icon-green-port-bg-color':item.class === 'icon-green-port' ? true : false,
                                   'icon-blue-port-bg-color':item.class === 'icon-blue-port' ? true : false,
                               }"
                    />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Interface from '../interface/interface'
export default {
    name: "sap28ge",
    props: {
        cardList: {
            type: Array
        },
        ifType: {
            type: String
        },
        dataSet:{
            type: Object,
            default: function () {
                return {devId: '',ifType:'',vpnName:'' }
            }
        }
    },
    computed: {
        ifEvenList1() {
            return this.formatList('even',0,7,this.cardList[0].devinterfacelist)
        },
        ifOddList1() {
            return this.formatList('odd',0,7,this.cardList[0].devinterfacelist)
        },
        ifEvenList2() {
            return this.formatList('even',8,15,this.cardList[0].devinterfacelist)
        },
        ifOddList2() {
            return this.formatList('odd',8,15,this.cardList[0].devinterfacelist)
        },
        ifEvenList3() {
            return this.formatList('even',16,27,this.cardList[0].devinterfacelist)
        },
        ifOddList3() {
            return this.formatList('odd',16,27,this.cardList[0].devinterfacelist)
        }
    },
    methods: {
        formatList(type,start,end,arr) {
            let filterArr = arr.filter(item => parseInt(item.ifNum) >= start && parseInt(item.ifNum) <= end)
            if (type === 'even') {
                filterArr = filterArr.filter(item => parseInt(item.ifNum) % 2 === 0)
            } else if (type === 'odd') {
                filterArr = filterArr.filter(item => parseInt(item.ifNum) % 2 !== 0)
            }
            return filterArr
        },
        rightClick(item) {
            this.$emit('right-click',item)
        },
        handlePopUp(item,event){
            this.$emit('pop-up-click',item,event)
        }
    },
    components:{Interface}
}
</script>

<style lang="scss">
.sap-28ge-bg {
    .port-wrapper {
        height: 100%;
        display: flex;
        align-items: center;
        padding: 16px 48px 2px 86px;
        .port-container {
            &.container1 {
                height: 48px;
                width: 110px;
                background: #ffffff;
                border: 1px solid #8b8b8b;
                padding: 0 2px;
                &.part1 {
                    margin-right: 2px;
                }
                &.part2 {
                    margin-left: 2px;
                }
                .port-area {
                    display: flex;
                    &.list1 {
                        padding: 2px 0 2px 0;
                    }
                    &.list2 {
                        padding: 2px 0 2px 0;
                    }
                    .port-item {
                        display: block;
                        height: 19px;
                        width: 26px;
                        background: #9e9e9d;
                        border: 1px solid #17191b;
                    }
                }
            }

            &.container2 {
                height: 48px;
                width: 162px;
                background: #ffffff;
                border: 1px solid #8b8b8b;
                padding: 0 2px;
                &.part1 {
                    margin-left: 45px;
                    margin-right: 2px;
                }
                &.part2 {
                    margin-left: 8px;
                }
                .port-area {
                    display: flex;
                    &.list1 {
                        padding: 2px 0 2px 0;
                    }
                    &.list2 {
                        padding: 2px 0 2px 0;
                    }
                    .port-item {
                        display: block;
                        height: 19px;
                        width: 26px;
                        background: #9e9e9d;
                        border: 1px solid #17191b;
                    }
                }
            }
        }
    }
}
</style>