<script setup lang="ts">
import { traduction } from '@/utils/language';
import { reactive, watch, PropType } from 'vue';
import {
  initShowData,
  initIpv4MaskGateway,
  initIpv6PrefixGateway,
  _dealVlans,
  _getPort,
} from '@/pages/System/Info/InfoPages/Net/netFunctions';
import { ICartData, INetDataPortProperties, ILabelValue, IFields, IColumns,IBasicAttribute } from '@/model/System/net-interface';

import DataList from '@/components/DataList/DataList.vue';
import NormalTable from '@/pages/System/Info/InfoPages/Net/NetPages/components/NormalTable.vue';

const props = defineProps({
  showData: {
    type: Object as PropType<ICartData>,
    default: () => {
      return {};
    },
    requird: true,
  },
});

watch(
  () => props.showData,
  () => {
    initData();
  },
  { deep: true },
);

const nicDivieceData: ILabelValue[] = reactive([]);
let tableData: INetDataPortProperties[] = reactive([]);

const columns: IColumns[] = [
  {
    title: traduction('NET_NAME'),
    key: 'CardName'
  },
  {
    title: traduction('IBMC_NETWORK_PORT_NAME'),
    key: 'Name'
  },
  {
    title: traduction('SERVICE_PORT'),
    key: 'Port'
  },
  {
    title: traduction('IBMC_IP_ADDRESS04'),
    key: 'MAC'
  },
  {
    title: traduction('EVENT_STATUS'),
    key: 'LinkStatus',
  },
];

const nicFields: IFields[] = [
  {
    key: 'Name',
    lable: traduction('COMMON_NAME'),
  },
  {
    key: 'LinkStatus',
    lable: traduction('NET_CONNENT_STATUS'),
  },
  {
    key: 'WorkMode',
    lable: traduction('COMMON_WORKING_MODE'),
  },
  {
    key: 'iPv4Addresses',
    lable: traduction('NET_PORT_IPV4') + '|' + traduction('IBMC_IP_ADDRESS02') + '|' + traduction('NET_GATEWAY'),
  },
  {
    key: 'iPv6Addresses',
    lable: traduction('NET_PORT_IPV6') + '|' + traduction('IBMC_IP_ADDRESS11') + '|' + traduction('NET_GATEWAY')
  },
  {
    key: 'MAC',
    lable: traduction('IBMC_IP_ADDRESS04'),
  },
  {
    key: 'VLAN',
    lable: traduction('NET_VLANS'),
  },
];

// 初始化数据
function initData() {
  nicDivieceData.splice(0);
  tableData.splice(0);
  const data = JSON.parse(JSON.stringify(props.showData));
  data.MAC = data.MAC || '--';
  data.VLAN = _dealVlans(data.VLAN);
  data.LinkStatus = data.LinkStatus || null;
  if (data?.IPv4Addresses?.length > 0) {
    data.iPv4Addresses = initIpv4MaskGateway(data.IPv4Addresses);
  }

  if (data?.IPv6Addresses?.length > 0) {
    data.iPv6Addresses = initIpv6PrefixGateway(data.IPv6Addresses);
  }
  // 端口属性
  if (data.PortProperties && data.PortProperties.length > 0) {
    data.PortProperties.forEach((item: IBasicAttribute) => {
      tableData.push(_getPort(item));
    });
  }
  initShowData(data, nicFields, nicDivieceData);
}

initData();
</script>

<template>
  <div class="card-box">
    <div class="n-i-c-device">
      <div class="left">
        <img src="@/assets/common/image/network_card.svg" class="img" />
        <div class="part-title">{{ $t('NET_TEAM_DEVICE') }}</div>
      </div>

      <div class="right-key-value-box">
        <DataList id="teamCardAttr" :data-list="nicDivieceData" />
      </div>
    </div>

    <div class="port-attributes">
      <div class="title">
        {{ $t('OTHER_PORT_ATTR') }}
      </div>

      <div class="table-box">
        <NormalTable
          :columns="columns"
          :table-data="tableData"
        />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
