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

import DataList from '@/components/DataList/DataList.vue';
import CanOpenRowTable from '@/pages/System/Info/InfoPages/Net/NetPages/components/CanOpenRowTable.vue';
import { initExpendTableData } from '../components/initExpendData';

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

const emits = defineEmits(['changeDialogShow']);

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

const nicDeviceData: ILabelValue[] = reactive([]);
const tableData: Ref<IBasicAttribute[]> = ref([]);

const columns: IColumns[] = [
  {
    title: traduction('SERVICE_PORT'),
    key: 'PhysicalPortNumber',
  },
  {
    title: traduction('SERVICE_STATUS'),
    key: 'LinkStatus',
  },
  {
    title: traduction('IBMC_NETWORK_PORT_TYPE'),
    key: 'InterfaceType',
  },
  {
    title: traduction('NET_MEDIUM_TYPE'),
    key: 'MediaType',
  },
];

const nicFields: IFields[] = [
  {
    key: 'CardName',
    lable: traduction('NET_NAME'),
  },
  {
    key: 'CardModel',
    lable: traduction('NET_TYPE'),
  },
  {
    key: 'BoardID',
    lable: traduction('OTHER_BOARD_ID'),
  },
  {
    key: 'ComponentUniqueID',
    lable: traduction('COMMON_COMPONENT_UID'),
  },
  {
    key: 'FirmwareVersion',
    lable: traduction('COMMON_FIXED_VERSION'),
  },
  {
    key: 'CardManufacturer',
    lable: traduction('COMMON_MANUFACTURER'),
  },
  {
    key: 'ChipManufacturer',
    lable: traduction('OTHER_CHIP_VENDOR'),
  },
  {
    key: 'ChipModel',
    lable: traduction('OTHER_CHIP_MODEL'),
  },
  {
    key: 'PCBVersion',
    lable: traduction('COMMON_ALARM_PCB_VERSION'),
  },
  {
    key: 'AssociatedResource',
    lable: traduction('COMMON_RESOURCE_OWNER'),
  },
  {
    key: 'BusInfo',
    lable: traduction('BUS_INFO_BDF'),
  },
  {
    key: 'PcieSlotId',
    lable: traduction('PCIE_SLOTID'),
  },
];

// 修改弹窗显示状态
function changeDialogShow(val: boolean) {
  emits('changeDialogShow', val);
}

function getVlan(vlanInfo: any) {
  let portData = {
    vlanId: vlanInfo.ID !== null ? vlanInfo.ID : '--',
    vlanEnable: '',
    prEnable: vlanInfo.Priority !== null ? vlanInfo.Priority : '--',
  };
  if (vlanInfo.Enable !== null) {
    portData.vlanEnable = vlanInfo.Enable ? 'Enable' : 'Disable';
  } else {
    portData.vlanEnable = '--';
  }
  return `${portData.vlanId}|${portData.vlanEnable}|${portData.prEnable}`;
}

// 初始化表格展开的数据
function initExpandData(): void {
  tableData.value.forEach(item => {
    if (item && item.extendData) {
      initExpendTableData(item.extendData, item.LinkStatus || '');
    }
  });
}

function initNetworkAttribute(item: IBasicAttribute): void {
  if (item.NetworkAttribute.Name === 'System Ethernet Interface') {
    item.NetworkAttribute.Name = '';
  }

  // VLAN(ID|使能|优先级)
  let vlan: string = '';
  const vlans: any = item.NetworkAttribute.VLAN || [];
  if (vlans && vlans.length > 0) {
    vlans.forEach((v: any) => {
      vlan += `${getVlan(v)} `;
    });
  } else {
    vlan = '';
  }
  if (vlan) {
    item.NetworkAttribute.Vlans = vlan;
  }
}

// 初始化数据
function initData() {
  nicDeviceData.splice(0);
  tableData.value = [];
  const data = JSON.parse(JSON.stringify(props.showData));

  // 网卡设备
  initShowData(data, nicFields, nicDeviceData);

  // 端口属性
  if (data.PortProperties && data.PortProperties.length > 0) {
    data.PortProperties.forEach((item: IBasicAttribute) => {
      if (item.BasicAttribute) {
        item.BasicAttribute.PhysicalPortNumber = haveDataJudgments(
          item.BasicAttribute.PhysicalPortNumber,
          'Port',
        );
        // 网口类型：物理网口或者虚拟网口
        item.BasicAttribute.InterfaceType = initInterfaceType(item.BasicAttribute.InterfaceType);
        // 介质类型：电口或者光口
        item.BasicAttribute.MediaType = initMediaType(item.BasicAttribute.MediaType);
        tableData.value.push({ ...item.BasicAttribute, extendData: item });
      }

      if (item.NetworkAttribute) {
        initNetworkAttribute(item);
      }
    });
    initExpandData();
  }
}

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_DEVICE') }}</div>

        <el-button
          v-if="showData.HotPlugSupported"
          id="hotPlugSupported"
          class="hot-plugin-btn"
          :disabled="
            showData.OrderlyHotplugCtrlStatus !== 'Removable' &&
              showData.OrderlyHotplugCtrlStatus !== 'Insertable'
          "
          @click="changeDialogShow(true)"
        >
          {{ $t('FDM_HOT_PLUG_OPERATION') }}
        </el-button>
        <el-tag
          v-if="showData.OrderlyHotplugCtrlStatus === 'Uninstalled'"
          id="OrderlyHotplugCtrlStatusTag"
          class="hot-plugin-tag"
          size="small"
          type="info"
        >
          {{ $t('NET_UNINSTALLED') }}
        </el-tag>
      </div>

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

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

      <div class="table-box">
        <CanOpenRowTable id="netCardPort" :columns="columns" :table-data="tableData" />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.hot-plugin-tag {
  margin-top: 7px;
}

.hot-plugin-btn {
  height: 24px;

  &:hover {
    border-bottom-color: $APP-COLOR-HOVER;
  }
  &.disabled {
    border-bottom-color: var(--o-bg-color-placeholder);
    cursor: not-allowed;
  }

  // 禁用按钮背景填充色
  &.is-disabled,
  &.is-disabled:hover,
  &.is-disabled:active,
  &.is-disabled:focus {
    background-color: var(--o-bg-color-placeholder) !important;
    border-color: var(--o-button-color_disabled) !important;
  }
}
 
.n-i-c-device{
  min-height: 184px;
}
</style>
