<script setup lang="ts">
import { onMounted, ref, reactive, computed, watch, Ref } from 'vue'
import { Pixihttp } from '../systems/http.ts'
import { Spritesheet, AnimatedSprite } from 'pixi.js'
import * as PIXI from 'pixi.js'
import liuxinPath from '../assets/liuxin/liuxin.png'
import liuxinPathJS from '../assets/liuxin/liuxin.json'
// 已有的状态
const checked_type = ref('1')
const model_id = ref('')
const canvas: Ref<Node | null> = ref(null)
// 使用 reactive 创建响应式数组
const stable_diffusion_xls = reactive<Array<any>>([])
const fluxs = reactive<Array<any>>([])

// 分页状态
const currentPage = ref(1)
const itemsPerPage = 50

// 监听 checked_type 变化，重置 currentPage
watch(checked_type, () => {
  currentPage.value = 1
})

// 计算总页数
const totalPages = computed(() => {
  const totalItems =
    checked_type.value === '1' ? stable_diffusion_xls.length : fluxs.length
  return Math.ceil(totalItems / itemsPerPage)
})

// 计算当前页显示的模型
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)
})

// 新增：画廊相关状态
const images = reactive<Array<string>>([])
const galleryCurrentPage = ref(1)
const galleryItemsPerPage = 12
const code_input_ = ref('')
const ondraw = () => {
  console.log(code_input_.value)
}
// 计算画廊总页数
const galleryTotalPages = computed(() =>
  Math.ceil(images.length / galleryItemsPerPage)
)

// 计算当前页显示的图片
const paginatedGalleryImages = computed(() => {
  const start = (galleryCurrentPage.value - 1) * galleryItemsPerPage
  const end = start + galleryItemsPerPage
  return images.slice(start, end)
})

// 监听 galleryCurrentPage 变化，确保其不超过总页数
watch(galleryTotalPages, (newTotal) => {
  if (galleryCurrentPage.value > newTotal) {
    galleryCurrentPage.value = newTotal
  }
})

onMounted(async () => {
  try {
    let width = window.screen.width
    let height = window.screen.height
    if (width > height) {
      console.log('横屏')
    } else {
      console.log('竖屏')
    }
    console.log('屏幕长宽:', width, height)
    let app = new PIXI.Application({
      width: width,
      height: height,
      antialias: true,
      backgroundColor: 0x2980b9,
      backgroundAlpha: 0.2,
      resolution: 1,
    })
    let canvasInfo = app.view
    //初始化动画

    const liuxinsheet = new Spritesheet(
      PIXI.Texture.from(liuxinPath),
      liuxinPathJS
    )
    liuxinsheet.parse()
    const liuxinsp = new AnimatedSprite(
      liuxinsheet.animations['9c0d85519fc29bd805102e958f2e83e5_wps图片']
    )
    liuxinsp.animationSpeed = 0.03
    liuxinsp.width = 300
    liuxinsp.height = 300
    liuxinsp.loop = true
    liuxinsp.gotoAndPlay(0)
    const container = new PIXI.Container()
    container.x = app.screen.width / 2
    container.y = app.screen.height / 3
    liuxinsp!.anchor.x = 0.5
    liuxinsp!.anchor.y = 0.5
    console.log(
      '精灵当前位置-x:',
      liuxinsp.position.x,
      'y:',
      liuxinsp.position.y
    )
    container.addChild(liuxinsp)
    app.stage.addChild(container)
    Builder.builder_init(container).then((value) => {
      console.log('加载完成')
      app.destroy()
    })
    // @ts-ignore
    canvas.value?.appendChild(canvasInfo)

    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)
      }
    }

    // 按 api_calls 降序排序 stable_diffusion_xls
    stable_diffusion_xls.sort((a, b) => b.api_calls - a.api_calls)

    // 按 api_calls 降序排序 fluxs
    fluxs.sort((a, b) => b.api_calls - a.api_calls)

    console.log('Stable Diffusion XL Models:', stable_diffusion_xls)
    console.log('Flux Models:', fluxs)

    // 初始化画廊图片（假设有100张图片）
    for (let i = 1; i <= 100; i++) {
      images.push(
        'https://cdn.pixabay.com/photo/2023/08/11/08/29/highland-cattle-8183107_1280.jpg'
      )
    }
  } catch (error) {
    console.error('Failed to fetch model list:', error)
  }
})
</script>

<template>
  <div class="root" ref="canvas">
    <van-row justify="center">
      <van-col :span="20">
        <div class="main-container">
          <!-- 标题部分 -->
          <van-row class="header" justify="center">
            <van-col>
              <h1 class="title">模型测试</h1>
            </van-col>
          </van-row>

          <!-- 模型类型选择 -->
          <van-row class="section" justify="center">
            <van-col :span="12">
              <div class="model-type">
                <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-col>
          </van-row>

          <!-- 模型ID输入 -->
          <van-row class="section" justify="center">
            <van-col :span="12">
              <div class="model-id">
                <van-cell-group inset>
                  <van-field
                    v-model="model_id"
                    label="模型ID："
                    left-icon="smile-o"
                    right-icon="warning-o"
                    placeholder="输入模型ID"
                    clearable
                  />
                </van-cell-group>
              </div>
            </van-col>
          </van-row>

          <!-- 模型列表和代码输入区域 -->
          <van-row class="section align-stretch" justify="center">
            <!-- 模型列表 -->
            <van-col :span="12" class="flex-item">
              <div class="model-list">
                <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 + ' 调用次数： ' + item.api_calls"
                    :subtitle="'模型ID: ' + item.model_id"
                  ></v-list-item>
                </v-list>
                <v-pagination
                  v-model="currentPage"
                  :length="totalPages"
                  class="pagination"
                ></v-pagination>
              </div>
            </van-col>

            <!-- 代码输入 -->
            <van-col :span="12" class="flex-item">
              <div class="code_input">
                <v-container>
                  <v-textarea
                    row-height="15"
                    bg-color="amber-lighten-4"
                    color="orange orange-darken-4"
                    label="代码输入"
                    rows="10"
                    v-model="code_input_"
                    placeholder='{
  "key": "",
  "model_id": "your_model_id",
  "prompt": "ultra realistic close up portrait ((beautiful pale cyberpunk female with heavy black eyeliner)), blue eyes, shaved side haircut, hyper detail, cinematic lighting, magic neon, dark red city, Canon EOS R3, nikon, f/1.4, ISO 200, 1/160s, 8K, RAW, unedited, symmetrical balance, in-frame, 8K",
  "negative_prompt": "",
  "width": "512",
  "height": "512",
  "samples": "1",
  "num_inference_steps": "31",
  "safety_checker": "no",
  "enhance_prompt": "yes",
  "seed": null,
  "guidance_scale": 7.5,
  "panorama": "no",
  "self_attention": "no",
  "upscale": "no",
  "embeddings_model": null,
  "lora_model": null,
  "tomesd": "yes",
  "clip_skip": "2",
  "use_karras_sigmas": "yes",
  "vae": null,
  "lora_strength": null,
  "scheduler": "UniPCMultistepScheduler",
  "webhook": null,
  "track_id": null
}'
                    auto-grow
                  ></v-textarea>
                </v-container>
                <v-btn block @click="ondraw">开始绘图</v-btn>
              </div>
            </van-col>
          </van-row>

          <!-- 新增：画廊部分 -->
          <van-row class="draw" justify="center">
            <van-col :span="24">
              <div class="gallery">
                <h2 class="gallery-title">画廊</h2>
                <van-row justify="start" wrap>
                  <van-col
                    v-for="(image, index) in paginatedGalleryImages"
                    :key="index"
                    :span="4"
                    class="gallery-item"
                  >
                    <img
                      :src="image"
                      alt="Gallery Image"
                      class="gallery-image"
                    />
                  </van-col>
                </van-row>
                <v-pagination
                  v-model="galleryCurrentPage"
                  :length="galleryTotalPages"
                  class="pagination"
                ></v-pagination>
              </div>
            </van-col>
          </van-row>
        </div>
      </van-col>
    </van-row>
  </div>
</template>

<style scoped>
.root {
  background-color: #f5f5f5;
  padding: 20px 0;
  min-height: 100vh;
}

.main-container {
  background-color: #ffffff;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.header {
  margin-bottom: 30px;
}

.title {
  font-size: 24px;
  font-weight: 600;
  text-align: center;
  color: #333333;
}

.section {
  margin-bottom: 25px;
}

.align-stretch {
  display: flex;
  align-items: stretch;
}

.flex-item {
  display: flex;
}

.model-type {
  display: flex;
  justify-content: center;
}

.model-id .van-field__control {
  padding-left: 10px;
}

.model-list,
.code_input {
  background-color: #fafafa;
  padding: 15px;
  border-radius: 6px;
  border: 1px solid #eaeaea;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.gallery {
  padding: 15px;
  border-radius: 6px;

  flex: 1;
  display: flex;
  flex-direction: column;
}
.draw {
  background-color: #fafafa;
  padding: 15px;
  border-radius: 6px;
  border: 1px solid #eaeaea;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.v-list-item {
  padding: 10px 15px;
  border-bottom: 1px solid #eaeaea;
  flex: none;
}

.v-list-item:last-child {
  border-bottom: none;
}

.v-list-item__title {
  font-weight: 500;
  color: #555555;
}

.v-list-item__subtitle {
  color: #888888;
  font-size: 14px;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  flex-shrink: 0;
}

/* 画廊样式 */
.gallery {
  padding: 20px 0;
}

.gallery-title {
  text-align: center;
  margin-bottom: 20px;
  font-size: 20px;
  color: #333333;
}

.gallery-item {
  padding: 10px;
}

.gallery-image {
  width: 100%;
  height: auto;
  border-radius: 4px;
  object-fit: cover;
}
</style>
 报错了Failed to fetch model list: TypeError: Cannot read properties of undefined (reading 'canvas')
    at get view (pixi__js.js?v=3e1cf41d:6417:26)
    at PreView.vue:85:26
    at chunk-CLTUMBBG.js?v=3e1cf41d:4860:40
    at callWithErrorHandling (chunk-CLTUMBBG.js?v=3e1cf41d:2295:19)
    at callWithAsyncErrorHandling (chunk-CLTUMBBG.js?v=3e1cf41d:2302:17)
    at hook.__weh.hook.__weh (chunk-CLTUMBBG.js?v=3e1cf41d:4840:19)
    at flushPostFlushCbs (chunk-CLTUMBBG.js?v=3e1cf41d:2481:28)
    at flushJobs (chunk-CLTUMBBG.js?v=3e1cf41d:2523:5)