<script setup lang="ts">
import { onMounted, ref } from 'vue';
import TableExtendData from '@/pages/System/Info/components/TableExtendData/TableExtendData.vue';
import TableNoData from '@/components/TableNoData/TableNoData.vue';
const props = defineProps({
  data: {
    type: Array as any,
    required: true,
    default: () => [],
  },
  columns: {
    type: Array as any,
    required: true,
    default: () => [],
  },
  showextend: {
    type: Boolean,
    default: false,
  },
  num: {
    type: Number,
    required: true,
    default: 0,
  },
  id: {
    type: String,
    required: true,
    default: '',
  },
  needChange: {
    type: Boolean,
    required: false,
    default: false,
  },
  rowKey:{
    type: String,
    required: false,
    default: '',
  }
});

const emits = defineEmits(['expandChange', 'currentChange']);
const multiType = ['associatedResource', 'deviceBdf', 'rootBdf'];
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(props.data.length);
const tableData = ref([]);

function handleSizeChange(val: number) {
  pageSize.value = val;
  currentPage.value = 1;
  getData();
}

function handleCurrentChange(val: number) {
  if (props.needChange) {
    emits('currentChange', ()=>{
      getData();
    });
  } else {
    getData();
  }
}

function getData() {
  tableData.value = props.data.slice(
    (currentPage.value - 1) * pageSize.value,
    currentPage.value * pageSize.value,
  );
}

// 在渲染前将不显示的扩展数据过滤
function parseExtendData() {
  tableData.value.forEach((data: any) => {
    let extendArray = data.extendTitleArr;
    if (extendArray) {
      extendArray.forEach((extendData: any) => {
        extendData.data = extendData.data.filter((prop: any) => {
          return !prop.hide;
        });
      });
    }
  });
}

function expandChange(row: any) {
  if (!props.needChange) {
    return;
  }
  emits('expandChange', row, ()=>{
    getData();
  });
}

onMounted(() => {
  getData();
  parseExtendData();
});

function getRowKey(rowInfo: any) {
  return props.id + rowInfo.rowIndex;
}

function getCellClass(cellInfo: any) {
  if (cellInfo.columnIndex === 0) {
    return 'expand_cell';
  }
  return props.columns[props.showextend ? cellInfo.columnIndex - 1 : cellInfo.columnIndex]?.content;
}
</script>

<template>
  <div :id="id + 'Page'" class="system-info-table">
    <div v-if="num && num > 0" class="summary">
      <span id="totalLabel" v-t="'HOME_HEALTH_TOTALNUM'" class="label" />
      <span id="totalNum" class="label-content">{{ num }}</span>
      <span id="currentLabel" v-t="'HOME_HEALTH_CURRENTNUM'" class="label" />
      <span id="currentNum" class="label-content">{{ total }}</span>
    </div>
    <el-table
      v-addId.table="id"
      :data="tableData"
      :class="{ 'extend-table': showextend }"
      :row-class-name="getRowKey"
      :cell-class-name="getCellClass"
      resizable
      border
      :row-key="rowKey"
      @expand-change="expandChange"
    >
      <el-table-column v-if="showextend" class="expand" type="expand">
        <template #default="attrs">
          <div v-for="module in attrs.row.extendTitleArr" :key="module.title" class="module">
            <span v-if="module.title" v-t="module.title" class="module-title" />
            <br v-else />
            <TableExtendData :data-list="module.data" :fields="attrs.row" />
          </div>
        </template>
      </el-table-column>
      <el-table-column
        v-for="col in columns"
        :key="col?.content"
        :label="$t(col?.title)"
        :prop="col?.content"
        :min-width="col?.width"
      >
        <template #default="process">
          <div
            v-if="col?.content === 'processorState'"
            id="processorState"
            v-t="process.row.processorState"
            :class="process.row.processorState === 'CPU_COMMON_ENABLE' ? 'enabled' : 'disabled'"
          />
          <div v-else-if="id === 'ocpTable' && multiType.includes(col.content) && process.row[col?.content] && process.row[col?.content] !== '--'">
            <div v-for="(item, index) in process.row[col.content]" :key="index">
              {{ item }}
            </div>
          </div>
          <span v-else :class="col?.content">{{ process.row[col?.content] }}</span>
        </template>
      </el-table-column>
      <template #empty>
        <TableNoData />
      </template>
    </el-table>

    <el-pagination
      v-if="tableData.length != 0"
      v-model:currentPage="currentPage"
      v-addId.pagination="id + 'Pagination'"
      :page-sizes="[10, 15, 30, 50]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<style lang="scss" scoped>
.system-info-table {
  background: var(--o-bg-color-base);
  border-radius: 4px;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0 16px 16px !important;
  height: 100%;

  .el-tabs__content {
    margin-top: 0;
  }

  .summary {
    padding: 16px 0;
  }

  .label-content {
    background: var(--o-border-color-light);
    border-radius: 8px;
    width: 28px;
    height: 16px;
    display: inline-block;
    text-align: center;
    margin: 0 16px 0 8px;
    font-size: 12px;
    font-weight: 900;
  }

  .label {
    font-size: 12px;
    color: $APP-COLOR-TEXT;
    letter-spacing: 0;
    line-height: 16px;
  }
  .enabled {
    display: block;
    background: var(--o-color-success);
    border-radius: var(--i-button-border-radius);
    width: 64px;
    color: #ffffff;
    letter-spacing: 0;
    text-align: center;
    line-height: 16px;
  }
  .disabled {
    display: block;
    background: var(--o-text-color-tertiary);
    border-radius: var(--i-button-border-radius);
    width: 64px;
    color: #ffffff;
    letter-spacing: 0;
    text-align: center;
    line-height: 16px;
  }
  .detail {
    width: 50%;
    float: left;
    display: flex;
    margin-top: 8px;
  }

  .module-title {
    font-weight: 700;
    margin: 16px 0;
    display: block;
  }
  .module {
    display: flow-root;
  }
  :deep(.extend-table) {
    .el-table__cell:first-child .cell {
      margin-left: 8px;
      width: 16px;
      padding-left: 0;
      display: inline-block;
    }

    tr,
    colgroup {
      th:nth-child(1),
      col:nth-child(1),
      td:nth-child(1) {
        width: 40px;
        max-width: 40px;
      }
    }
  }
}
</style>
<style lang="scss">
.system-info-table {
  .el-scrollbar{
    .el-table__expanded-cell {
      padding-left: 40px !important;
      padding-top: 0;
      background: var(--o-bg-color-light);
    }
  }

  .el-table {
    flex: 1;
    min-height: auto !important;
    height: auto !important;
    tr th {
      font-weight: 600 !important;
    }
  }

  .expanded {
    background: var(--o-bg-color-light);
    box-shadow: inset 0 -1px 0 0 var(--o-border-color-light);
  }

  .el-table__header {
    width: 100% !important;
  }

  .el-table__body {
    width: 100% !important;
  }

  .el-pagination {
    margin-top: 16px;
  }
}
</style>
