<script setup lang="ts">
import { ref, watch } from 'vue';
import { ITableColumns } from '@/model/base-interface';
const props = defineProps({
  list: {
    type: Array,
    required: true,
    default: () => [],
  },
});

const columns: ITableColumns[] = [
  {
    title: 'IBMC_VERSION_COMPONMENT',
    width: '20%',
    content: 'num',
  },
  {
    title: 'IBMC_VERSION_NAME',
    width: '80%',
    content: 'name',
  },
];
const tableData: any = ref([]);
const total = ref(0);
const currentPage = ref(1);
const pageSize = ref(10);

watch(
  () => props.list,
  () => {
    total.value = props.list.length;
    initShowData();
  },
  { deep: true, immediate: true },
);

function initShowData() {
  tableData.value.splice(0);
  const showList = props.list.slice(
    (currentPage.value - 1) * pageSize.value,
    currentPage.value * pageSize.value,
  );
  tableData.value.push(...showList);
}

// 分页事件
function handleSizeChange(val: number) {
  pageSize.value = val;
  currentPage.value = 1;
  initShowData();
}

function handleCurrentChange(val: number) {
  initShowData();
}
</script>
<template>
  <div class="version-table">
    <!-- 表格数据 -->
    <el-table v-addId.table="'versionTable'" :data="tableData" border resizable>
      <el-table-column
        v-for="(col, idx) in columns"
        :key="idx"
        :label="$t(col.title)"
        :min-width="col.width"
      >
        <template #default="scope">
          <template v-if="col.content === 'num'">
            <span :id="col?.content + scope.row.name">
              {{ scope.row.name }}
            </span>
          </template>
          <template v-if="col.content === 'name'">
            <span :id="col?.content + scope.row.currentVersion">
              {{ scope.row.currentVersion }}
            </span>
          </template>
        </template>
      </el-table-column>
      <template #empty>
        <TableNoData />
      </template>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      v-if="true"
      v-model:current-page="currentPage"
      v-addId.pagination="'portPagination'"
      :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>
.version-table {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-top: 16px;
  .el-table {
    flex: 1;
  }
}
:deep(.el-pagination) {
  margin-top: 16px;
}
</style>
