<script setup lang="ts">
import { getStoreData } from '@/utils/composition';
import { traduction } from '@/utils/language';
import { reactive, toRefs, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import { Resolution, useHome, WebStyleType } from '../../hooks/useHome';
import { getDataType } from '@/utils/utils';

const { getResolution, getWebStyle } = useHome();
const multihost = computed(() => getStoreData('loct', 'multihost'));
const resolution = getResolution;
const webStyle = getWebStyle();

const i18n = useI18n();
const props = defineProps({
  data: {
    type: Object,
    required: true,
    default: () => {
      return {};
    },
  },
});
const router = useRouter();
const { data } = toRefs(props);
let deviceData = data?.value?.data;
let productImg: '';
let hostName = deviceData?.ProductName;
let otherName = deviceData?.ProductAlias ? ` (${deviceData?.ProductAlias})` : null;
const productLabel = getStoreData('loct', 'sn');
const deviceInfoItems = [
  {
    id: 'productSN',
    label: traduction('HOME_PROJECTNO'),
    value: deviceData.ProductSN || '--',
  },
  {
    id: 'systemSN',
    label: traduction('INFO_SYSTEM_NUMBER'),
    value: deviceData.SystemSN || '--',
    hide: deviceData.ProductSN === deviceData.SystemSN,
  },
  {
    id: 'fqdn',
    label: traduction('HOME_HOST_NAME_DETAIL'),
    value: deviceData.FQDN || '--',
  },
  {
    id: 'ibmc',
    label: traduction('HOME_IBMC_VERSION', { softwareName: productLabel }),
    value: deviceData.BMCVersion || '--',
  },
  {
    id: 'tee',
    label: traduction('HOME_TEEOS_FIRMWARE_VERSION'),
    value: deviceData.TEEOSVersion || '--',
    hide: multihost.value,
  },
  {
    id: 'mac',
    label: traduction('NET_MAC_ADDRESS'),
    value: deviceData.MAC || '--',
  },
  {
    id: 'flag',
    label: traduction('HOME_GUID_TAG'),
    value: deviceData.GUID,
  },
].filter((item: any) => item.hide !== true);

// 如果主机信息是奇数个,补充一个占位项
const hostInfoWithPadding = deviceInfoItems.length % 2 !== 0
  ? [...deviceInfoItems, { id: 'placeholder', label: '', value: '' }]
  : deviceInfoItems;

// 处理多主机下 bios 信息展示
const biosInfoItems = getDataType(deviceData.Bios) === 'Array' && deviceData.Bios.length > 0
  ? deviceData.Bios.flatMap((item: any) => [
    {
      id: `bios-${item.SystemId}`,
      label: `${traduction('HOME_HOST')} ${item.SystemId} ${traduction('HOME_BIOS_VERSION')}`,
      value: item.Version || '--',
    },
    {
      id: `biosDate-${item.SystemId}`,
      label: `${traduction('HOME_HOST')} ${item.SystemId} ${traduction('HOME_BIOS_DATE')}`,
      value: item.ReleaseDate || '--',
    },
  ])
  : [
    {
      id: 'bios',
      label: traduction('HOME_BIOS_VERSION'),
      value: deviceData.BIOSVersion || '--',
      hide: multihost.value,
    },
    {
      id: 'biosDate',
      label: traduction('HOME_BIOS_DATE'),
      value: deviceData.BIOSReleaseDate || '--',
      hide: multihost.value,
    },
  ].filter((item: any) => item.hide !== true);

const productinfoArr = [...hostInfoWithPadding, ...biosInfoItems];
let serverDetail = reactive({
  serverType: null,
  serverType1: null,
  serverName: null,
  options: productinfoArr.filter((item: any) => item.hide !== true),
});

function navigatorToMore() {
  router.push({ path: '/navigate/system/info' });
}
</script>

<template>
  <template v-if="!webStyle || webStyle === WebStyleType.DEFAULT">
    <!-- 设备信息 -->
    <div class="dashboard-overview-com-info">
      <div class="title">
        <span v-t="'HOME_DEVICEINFO'"></span>
        <span id="homeMoreLink" class="more-link" @click="navigatorToMore">
          {{ $t('HOME_MORE_DETAIL') }}>
        </span>
      </div>
      <div id="homeDetailForm">
        <DataList :data-list="serverDetail.options" />
      </div>
    </div>
  </template>
  <template v-if="webStyle === WebStyleType.STANDARD">
    <!-- 设备信息 -->
    <div class="stand-style dashboard-overview-com-info">
      <div class="title">
        <span id="homeMoreLink" class="more-link" @click="navigatorToMore">
          {{ $t('HOME_MORE_DETAIL') }}>
        </span>
      </div>
      <div id="homeDetailForm">
        <DataList :data-list="serverDetail.options" :columns-num="1" />
      </div>
    </div>
  </template>
  <template v-if="webStyle === WebStyleType.IBMA">
    <!-- 设备信息 -->
    <div class="dashboard-overview-com-info">
      <div class="server-name title">
        <div>
          <!-- 主机名 -->
          <span id="homeProductName">{{ hostName }}</span>
          <!-- 产品有别名时 -->
          <span id="homeProductAlias">{{ otherName }}</span>
        </div>
        <span id="homeMoreLink" class="more-link" @click="navigatorToMore">
          {{ $t('HOME_MORE_DETAIL') }}>
        </span>
      </div>
      <div id="homeDetailForm">
        <template v-if="resolution === Resolution.SMALL">
          <DataList :data-list="serverDetail.options" :columns-num="1" />
        </template>
        <template v-else>
          <DataList :data-list="serverDetail.options" />
        </template>
      </div>
    </div>
  </template>
  <template v-if="webStyle === WebStyleType.SIMPLE">
    <!-- 设备信息 -->
    <div class="dashboard-overview-com-info">
      <div class="server-name title">
        <div>
          <!-- 主机名 -->
          <span id="homeProductName">{{ hostName }}</span>
          <!-- 产品有别名时 -->
          <span id="homeProductAlias">{{ otherName }}</span>
        </div>
        <span id="homeMoreLink" class="more-link" @click="navigatorToMore">
          {{ $t('HOME_MORE_DETAIL') }}>
        </span>
      </div>
      <div id="homeDetailForm">
        <template v-if="resolution === Resolution.SMALL">
          <DataList :data-list="serverDetail.options" :columns-num="1" />
        </template>
        <template v-else>
          <DataList :data-list="serverDetail.options" />
        </template>
      </div>
    </div>
  </template>
  <template v-if="webStyle === WebStyleType.BEAUTIFUL">
    <!-- 设备信息 -->
    <div class="beautiful-style dashboard-overview-com-info">
      <div class="server-name title">
        <div>
          <!-- 主机名 -->
          <span id="homeProductName">{{ hostName }}</span>
          <!-- 产品有别名时 -->
          <span id="homeProductAlias">{{ otherName }}</span>
        </div>
        <span id="homeMoreLink" class="more-link" @click="navigatorToMore">
          {{ $t('HOME_MORE_DETAIL') }}>
        </span>
      </div>
      <div id="homeDetailForm">
        <template v-if="resolution !== Resolution.DEFAULT">
          <DataList :data-list="serverDetail.options" :columns-num="1" />
        </template>
        <template v-else>
          <DataList :data-list="serverDetail.options" />
        </template>
      </div>
    </div>
  </template>
</template>

<style lang="scss" scoped>
.data-list-table {
  font-size: 14px;
  margin-top: 16px;

  :deep(.td) {
    padding-bottom: 24px !important;
  }
}

.dash-product {
  width: 50%;
  float: left;
  margin-bottom: 24px;
  font-size: 14px;
}

.dashboard-overview-com-info {
  display: inline-block;
  width: 100%;
  margin-bottom: 24px;
}

.more-link {
  cursor: pointer;
  float: right;
  font-size: 14px;
  color: var(--o-color-primary);
  letter-spacing: 0;
  line-height: 14px;
}

.stand-style {
  position: relative;

  .more-link {
    position: absolute;
    top: -20px;
    right: 0;
  }
}

.beautiful-style {
  position: relative;

  .more-link {
    position: absolute;
    top: 5px;
    right: 0;
  }
}
</style>
