<script setup lang="ts">
import { ILabelValue, INetDataPortProperties } from '@/model/System/net-interface';
import { onMounted, PropType, reactive, ref, watch } from 'vue';
import { ipv4Columns, ipv6Columns } from './OpenRowDataFunctions';

import DataList from '@/components/DataList/DataList.vue';
import NormalTable from './NormalTable.vue';

const props = defineProps({
  data: {
    type: Object as PropType<INetDataPortProperties>,
    default: () => {
      return {};
    },
    required: true,
  },
  linkStatus: {
    type: String || null,
    default: 'Down',
    required: false,
  },
  selectedAttrs: {
    type: Array as PropType<Array<keyof INetDataPortProperties>>,
    required: false,
    default: null,
  },
  isMask: {
    type: Boolean,
    required: false,
    default: true,
  },
});

const netData: ILabelValue[] = reactive([]);
const linkViewData: ILabelValue[] = reactive([]);
const dcbData: ILabelValue[] = reactive([]);
const statisticsDataTransmitted: ILabelValue[] = reactive([]);
const statisticsDataReceived: ILabelValue[] = reactive([]);
const opticalModuleDataInfo: ILabelValue[] = reactive([]);
const opticalModuleDataThreshold: ILabelValue[] = reactive([]);

const ipv4TableData: ILabelValue[] = reactive([]);
const ipv6TableData: ILabelValue[] = reactive([]);
const cableDataInfo: ILabelValue[] = reactive([]);
const opticalType: any = ref(0);

watch(
  () => props.data,
  newVal => {
    init();
  },
  {
    deep: true,
  },
);

function init() {
  const { showExpendData } = props.data;

  opticalType.value = showExpendData.opticalType;

  netData.splice(0);
  ipv4TableData.splice(0);
  ipv6TableData.splice(0);
  netData.push(...(showExpendData.netData || []));
  ipv4TableData.push(...(showExpendData.ipv4TableData || []));
  ipv6TableData.push(...(showExpendData.ipv6TableData || []));

  linkViewData.splice(0);
  linkViewData.push(...(showExpendData.linkViewData || []));

  dcbData.splice(0);
  dcbData.push(...(showExpendData.dcbData || []));

  statisticsDataReceived.splice(0);
  statisticsDataTransmitted.splice(0);
  statisticsDataReceived.push(...(showExpendData.statisticsDataReceived || []));
  statisticsDataTransmitted.push(...(showExpendData.statisticsDataTransmitted || []));

  opticalModuleDataInfo.splice(0);
  opticalModuleDataThreshold.splice(0);
  opticalModuleDataInfo.push(...(showExpendData.opticalModuleDataInfo || []));
  opticalModuleDataThreshold.push(...(showExpendData.opticalModuleDataThreshold || []));
  cableDataInfo.splice(0);
  cableDataInfo.push(...(showExpendData.cableData || []));
}

function attrIsShow(attrName: keyof INetDataPortProperties): boolean {
  if (!props.selectedAttrs) {
    return true;
  }
  const attrIsSelected = props.selectedAttrs.includes(attrName);
  return props.isMask ? !attrIsSelected : attrIsSelected;
}

onMounted(() => {
  init();
});
</script>

<template>
  <div class="open-row-content">
    <!-- 网络属性 -->
    <div
      v-if="data.NetworkAttribute && netData.length &&
        attrIsShow('INetworkAttribute')" class="part"
    >
      <div class="title">
        {{ $t('NET_WORK_ATTR') }}
      </div>
      <DataList id="networkAttribute" :data-list="netData" />

      <div v-if="ipv4TableData.length || ipv6TableData.length" class="ipv4-ipv6-box">
        <div v-if="ipv4TableData.length" class="ipv">
          <NormalTable id="netPortIpv4" :columns="ipv4Columns" :table-data="ipv4TableData" />
        </div>

        <div v-if="ipv6TableData.length" class="ipv">
          <NormalTable id="netPortIpv6" :columns="ipv6Columns" :table-data="ipv6TableData" />
        </div>
      </div>
    </div>

    <!-- 连接视图 -->
    <div v-if="data.LinkView && linkViewData.length && attrIsShow('LinkView')" class="part">
      <div class="title">
        {{ $t('NET_CONNECTION_VIEW') }}
      </div>
      <DataList id="linkView" :data-list="linkViewData" />
    </div>

    <!-- DCB -->
    <div v-if="data.DCB && dcbData.length && attrIsShow('DCB')" class="part">
      <div class="title">
        {{ $t('NET_DCB_INFO') }}
      </div>
      <DataList id="dcb" :data-list="dcbData" />
    </div>

    <!-- 统计信息：以太网 -->
    <div
      v-if="data.Statistics && (statisticsDataTransmitted.length || statisticsDataReceived.length) &&
        attrIsShow('Statistics')"
      class="part"
    >
      <div class="title">
        {{ $t('NET_STATIC_INFO') }}
      </div>
      <div class="part part-inner">
        <div class="title">
          {{ $t('SEND_STATISTICS') }}
        </div>
        <DataList id="statisticsDataTransmitted" :data-list="statisticsDataTransmitted" />
      </div>

      <div class="part part-inner">
        <div class="title">
          {{ $t('RECEIVE_STATISTICS') }}
        </div>
        <DataList id="statisticsDataReceived" :data-list="statisticsDataReceived" />
      </div>
    </div>

    <!-- 光模块 -->
    <div
      v-if="data.OpticalModule && opticalModuleDataInfo.length &&
        attrIsShow('OpticalModule') && data.OpticalModule.DeviceType !== 'Copper'" class="part"
    >
      <div class="title">
        {{ $t('NET_OPTICAL') }}
      </div>
      <div class="part part-inner">
        <div class="title">
          {{ $t('NET_OPTICAL_INFO') }}
        </div>
        <DataList id="opticalModule" :data-list="opticalModuleDataInfo" />
      </div>

      <div v-if="opticalType === 1" class="part part-inner">
        <div class="title">
          {{ $t('THRESHOLD_INFO') }}
        </div>
        <DataList id="opticalModuleDataThreshold" :data-list="opticalModuleDataThreshold" />
      </div>
    </div>

    <!--关联光模块通道-->
    <div
      v-if="data.LaneMappings && data.LaneMappings.length && attrIsShow('LaneMappings')" class="part"
    >
      <div class="title">
        {{ $t('NET_OPTICAL_RELATED') }}
      </div>
      <div v-for="(laneMap, index) in data.LaneMappings" :key="laneMap.LaneId" class="lane">
        <span :id="`lane-lhs-${laneMap.LaneId}`">{{ `Lane ${laneMap.LaneId}` }}</span>
        <div class="laneRhs">
          <span
            :id="`label-${index}-${laneMap.RelatedTransceiverLane.TransceiverSilkText}`"
            class="silkText"
          >
            {{ laneMap.RelatedTransceiverLane.TransceiverSilkText }}
          </span>
          <span :id="`lane-rhs-${laneMap.RelatedTransceiverLane.TransceiverLaneId}`">
            {{ `Lane ${laneMap.RelatedTransceiverLane.TransceiverLaneId}` }}
          </span>
        </div>
      </div>
    </div>
    <!-- 电缆 -->
    <div
      v-if="data.OpticalModule && opticalModuleDataInfo.length && attrIsShow('OpticalModule') && data.OpticalModule.DeviceType === 'Copper'"
      class="part"
    >
      <div class="title">
        {{ $t('NET_CABLE') }}
      </div>
      <div class="part part-inner">
        <div class="title">
          {{ $t('NET_CABLE_INFO') }}
        </div>
        <DataList id="opticalModule" :data-list="cableDataInfo" />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.open-row-content {
  padding: 0 32px;

  .part {
    margin-top: 8px;

    .title {
      margin-bottom: 8px;
      font-size: 12px;
      color: var(--o-text-color-primary);
      line-height: 16px;
      font-weight: 700;
    }

    .part-inner {
      padding-left: 20px;
    }

    .ipv4-ipv6-box {
      margin-top: 16px;
      display: flex;

      .ipv {
        flex: 1;
        :deep(.el-table) {
          background-color: var(--o-bg-color-base);
        }
      }

      .ipv:nth-child(2) {
        margin-left: 20px;
      }
    }

    :deep(.data-list-table) {
      .tr .td {
        padding-bottom: 8px;
      }

      .tr:nth-last-child(1) .td {
        padding-bottom: 0;
      }
    }
  }

  .part:nth-child(1) {
    margin-top: 0;
  }

  .lane {
    display: flex;
    color: #4E5865;
    gap: 24px;
    font-size: 12px;
    line-height: 16px;
    .laneRhs {
      display: flex;
      gap: 8px;
      .silkText {
        background: #DFE5EF;
        border-radius: 100px;
        padding: 0 4px;
      }
    }
  }
}
</style>
