<template>
    <div class="xp-24lcx-bg">
        <div class="port-wrapper">
            <div class="port-container 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 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>
    </div>
</template>

<script>
import Interface from '../interface/interface'
export default {
    name: "xp24lcx",
    props: {
        cardList: {
            type: Array
        },
        ifType: {
            type: String
        },
        dataSet:{
            type: Object,
            default: function () {
                return {devId: '',ifType:'',vpnName:'' }
            }
        }
    },
    components:{Interface},
    computed: {
        ifEvenList1() {
            return this.formatList('even',0,11,this.cardList[0].devinterfacelist)
        },
        ifOddList1() {
            return this.formatList('odd',0,11,this.cardList[0].devinterfacelist)
        },
        ifEvenList2() {
            return this.formatList('even',12,23,this.cardList[0].devinterfacelist)
        },
        ifOddList2() {
            return this.formatList('odd',12,23,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)
        }
    }
}
</script>

<style lang="scss">
.xp-24lcx-bg {
    .port-wrapper {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 16px 48px 2px 0;
        .port-container {
            height: 48px;
            width: 162px;
            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;
                }
            }
        }
    }
}
</style>