<script setup lang="ts">
import { PropType } from 'vue';
import { Resolution, useHome, WebStyleType } from '@/pages/Home/hooks/useHome';

const { getResolution, getWebStyle } = useHome();
const resolution = getResolution;
const webStyle = getWebStyle();

interface Ifields {
  key: string;
  value: string;
}

defineProps({
  // 展示数据列表 比如 [{label: '名称', value: 'cpu', id?: 'cpuId'}]
  dataList: {
    type: Array as PropType<any[]>,
    default: () => {
      return [];
    },
    required: true,
  },
  // key和value对应的展示字段名称
  fields: {
    type: Object as PropType<Ifields>,
    default: () => {
      return { key: 'label', value: 'value' };
    },
    required: false,
  },
  // 分为多少列, key-value 为1列
  columnsNum: {
    type: Number,
    default: 2,
    required: false,
  },
});
</script>

<template>
  <div class="data-list-table">
    <!-- i和j都是从1开始的，需要注意这里的计算逻辑 -->
    <div v-for="i in Math.ceil(dataList.length / columnsNum)" :key="i" class="tr">
      <div
        v-for="j in columnsNum * 2"
        :id="
          dataList[(i - 1) * columnsNum + (Math.ceil(j / 2) - 1)]?.id ?
            (j % 2 === 0 ? dataList[(i - 1) * columnsNum + (Math.ceil(j / 2) - 1)].id
              : dataList[(i - 1) * columnsNum + (Math.ceil(j / 2) - 1)].id + 'Label')
            : ''
        "
        :key="j"
        :class="[
          'td', 
          j % 2 === 0 ? 'value' : 'key',
          j % 2 !== 0 && webStyle === WebStyleType.SIMPLE ? 'key-simple' : '',
          j % 2 === 0 && webStyle === WebStyleType.STANDARD ? 'value-standard' : '',
        ]"
        :style="'width:' + (j % 2 === 0 ? 100 / columnsNum + '%' : '')"
      >
        {{
          dataList[(i - 1) * columnsNum + (Math.ceil(j / 2) - 1)]
            ? dataList[(i - 1) * columnsNum + (Math.ceil(j / 2) - 1)][
              j % 2 === 0 ? fields.value : fields.key
            ]
            : ''
        }}
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.data-list-table {
  width: 100%;
  display: table;

  .tr {
    display: table-row;

    .td {
      display: table-cell;
      padding-bottom: 16px;
    }

    .key {
      white-space: nowrap;
      padding-right: 24px;
      vertical-align: top;
      color: var(--o-text-color-secondary);
    }

    .key-simple {
      color: $FONT-COLOR-PLACEHOLDER;
    }

    .value {
      white-space: normal;
      padding-right: 32px;
      color: var(--o-text-color-primary);
      word-break: break-all;
    }
    .value-standard {
      text-align: right;
    }

    .value:nth-last-child(1) {
      padding-right: 0;
    }
  }

  .tr:nth-last-child(1) {
    .key,
    .value {
      padding-bottom: 0;
    }
  }
}
</style>
