<script setup lang="ts">
import SystemInfoTable from '../SystemInfoTable/SystemInfoTable.vue';
import { ref, toRefs } from 'vue';
import type { PropType } from 'vue';
import { IOtherTab, IOCPCard, IExtendTitle } from '../../product.datatype';
import { getBoard } from '../../service/system.service';
import { isOtherEmptyProperty } from '../../utils/system.util';

const props = defineProps({
  data: {
    type: Object as PropType<IOtherTab>,
    required: true,
    default: () => {
      return {};
    },
  },
});
const tableId = 'ocpTable';
const { data } = toRefs(props);
const boardData: IOtherTab = data?.value;
const boardTableData = ref([] as any);
const boardShow = ref(false);

if (boardData.currentNumber && boardData.currentNumber > 0) {
  getBoard(boardData.detailLink).then((res: any) => {
    if (res.data && res.data.length > 0) {
      res.data.forEach((borad: any) => {
        const d = parseData(borad);
        if (d) {
          boardTableData.value.push(d);
        }
      });
    }
    boardShow.value = true; // 异步请求，等请求结束才能显示
  });
} else {
  boardShow.value = true; // 为了显示表头
}

function parseData(board: any): IOCPCard {
  const extendTitleArr: IExtendTitle[] = [
    {
      title: 'OTHER_EXTEND_INFO',
      data: [
        {
          label: 'COMMON_NAME',
          content: 'productName',
          hide: board.ProductName === undefined,
        },
        {
          label: 'OTHER_SON_VENDOR_ID',
          content: 'subsystemVendorId',
          hide: board.OCPFunctionDate.SubsystemVendorId === undefined,
        },
        {
          label: 'OTHER_SON_DEVICE_ID',
          content: 'subsystemId',
          hide: board.OCPFunctionDate.SubsystemId === undefined,
        },
      ],
    },
  ];
  return {
    id: board.Id.substring(7),
    description: isOtherEmptyProperty(board.Description) || ' ',
    position: isOtherEmptyProperty(board.Position) || ' ',
    manufacturer: isOtherEmptyProperty(board.Manufacturer) || ' ',
    vendorId: isOtherEmptyProperty(board.OCPFunctionDate.VendorId) || ' ',
    deviceId: isOtherEmptyProperty(board.OCPFunctionDate.DeviceId) || ' ',
    subsystemVendorId: isOtherEmptyProperty(board.OCPFunctionDate.SubsystemVendorId) || ' ',
    subsystemId: isOtherEmptyProperty(board.OCPFunctionDate.SubsystemId) || ' ',
    associatedResource: isOtherEmptyProperty(board.OCPFunctionDate.AssociatedResource) || ' ',
    productName: isOtherEmptyProperty(board.ProductName) || ' ',
    extendTitleArr,
  };
}

const columns = [
  {
    title: 'COMMON_DESCRIPTION',
    width: '16%',
    show: true,
    content: 'description',
  },
  {
    title: 'OTHER_POSITION',
    width: '10%',
    show: true,
    content: 'position',
  },
  {
    title: 'COMMON_MANUFACTURER',
    width: '15%',
    show: true,
    content: 'manufacturer',
  },
  {
    title: 'OTHER_SLOT_POSITION',
    width: '8%',
    show: true,
    content: 'id',
  },
  {
    title: 'OTHER_MANUFACTURER_ID',
    width: '10%',
    show: true,
    content: 'vendorId',
  },
  {
    title: 'OTHER_DEVICE_ID',
    width: '10%',
    show: true,
    content: 'deviceId',
  },
  {
    title: 'OTHER_SON_VENDOR_ID',
    width: '10%',
    show: true,
    content: 'subsystemVendorId',
  },
  {
    title: 'OTHER_SON_DEVICE_ID',
    width: '10%',
    show: true,
    content: 'subsystemId',
  },
  {
    title: 'COMMON_RESOURCE_OWNER',
    width: '10%',
    show: true,
    content: 'associatedResource',
  },
];
</script>

<template>
  <SystemInfoTable
    v-if="boardShow"
    :id="tableId"
    :data="boardTableData"
    :columns="columns"
    :num="boardData.maxNumber"
    :showextend="true"
  />
</template>

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