<script setup lang="ts">
import { onMounted, ref, reactive, computed, watch } from 'vue'
import { Pixihttp } from '../systems/http.ts'

const checked_type = ref('1')
const model_id = ref('')

// Using reactive to create reactive arrays
const stable_diffusion_xls = reactive<Array<any>>([])
const fluxs = reactive<Array<any>>([])

// Pagination state
const currentPage = ref(1)
const itemsPerPage = 50

// Watcher to reset currentPage when checked_type changes
watch(checked_type, () => {
  currentPage.value = 1
})

// Compute the total number of pages based on the selected type
const totalPages = computed(() => {
  const totalItems =
    checked_type.value === '1' ? stable_diffusion_xls.length : fluxs.length
  return Math.ceil(totalItems / itemsPerPage)
})

// Compute the models to be displayed on the current page
const paginatedModels = computed(() => {
  const models = checked_type.value === '1' ? stable_diffusion_xls : fluxs
  const start = (currentPage.value - 1) * itemsPerPage
  const end = start + itemsPerPage
  return models.slice(start, end)
})

onMounted(async () => {
  const httpdata = await Pixihttp.get_model_list()
  for (let entry of httpdata.data) {
    if (entry.model_category === 'stable_diffusion_xl') {
      stable_diffusion_xls.push(entry)
    } else if (entry.model_category === 'flux') {
      fluxs.push(entry)
    }
  }
  console.log(stable_diffusion_xls)
  console.log(fluxs)
})
</script>

<template>
  <div class="root">
    <van-row>
      <van-col span="24">
        <div class="main-canvas" ref="canvas">
          <van-row>
            <van-col span="8"></van-col>
            <van-col span="8">模型测试</van-col>
            <van-col span="8"></van-col>
          </van-row>
          <van-row>
            <div class="model_type_in">
              <van-radio-group v-model="checked_type" direction="horizontal">
                <van-radio name="1">SD-XL</van-radio>
                <van-radio name="2">FLUX</van-radio>
              </van-radio-group>
            </div>
          </van-row>
          <van-row>
            <div class="model_id_in">
              <van-cell-group inset>
                <van-field
                  v-model="model_id"
                  label="模型ID："
                  left-icon="smile-o"
                  right-icon="warning-o"
                  placeholder="输入模型ID"
                />
              </van-cell-group>
            </div>
          </van-row>
          <van-row>
            <div class="model_list_page">
              <v-list lines="one" density="compact" max-height="300">
                <v-list-item
                  v-for="item in paginatedModels"
                  :key="item.model_id"
                  :title="item.model_name"
                  :subtitle="'ID: ' + item.model_id"
                ></v-list-item>
              </v-list>
              <v-pagination
                v-model="currentPage"
                :length="totalPages"
                style="margin-top: 16px"
              ></v-pagination>
            </div>
          </van-row>
        </div>
      </van-col>
    </van-row>
  </div>
</template>

<style scoped>
.model_id_in {
  margin: 10px 10px;
}
.model_type_in {
  margin: 10px 40px;
}
.model_list_page {
  height: 300px;
  width: 100%; /* Fixed the typo from 'weight' to 'width' */
}
</style>
帮我调整一下UI布局，美化整个页面，注意列表高度不能太长