<template>
  <div style="margin: 10px;padding: 10px">
<!--    <ArkItemSelect v-model="demo"/>-->
    <el-form :model="searchForm" label-width="80px">
      <el-row>
        <el-col :span="4">
          <el-form-item label="名称">
            <el-input v-model="searchForm.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="标签">
            <el-input v-model="searchForm.label"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="全部">
            <el-input v-model="searchForm.allLike"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="分类">
            <el-select>
              <el-option :key="'Ammunition'" :value="'Ammunition'" :label="'弹药(Ammunition)'"></el-option>
              <el-option :key="'Armor'" :value="'Armor'" :label="'护甲(Armor)'"></el-option>
              <el-option :key="'Artifacts'" :value="'Artifacts'" :label="'遗物(Artifacts)'"></el-option>
              <el-option :key="'Attachments'" :value="'Attachments'" :label="'附件(Attachments)'"></el-option>
              <el-option :key="'Chibi-pets'" :value="'Chibi-pets'" :label="'小宠物(Chibi-pets)'"></el-option>
              <el-option :key="'Consumables'" :value="'Consumables'" :label="'消耗品(Consumables)'"></el-option>
              <el-option :key="'Dye'" :value="'Dye'" :label="'染料(Dye)'"></el-option>
              <el-option :key="'Eggs'" :value="'Eggs'" :label="'蛋(Eggs)'"></el-option>
              <el-option :key="'Farming'" :value="'Farming'" :label="'农业(Farming)'"></el-option>
              <el-option :key="'Recipes'" :value="'Recipes'" :label="'配方(Recipes)'"></el-option>
              <el-option :key="'Resources'" :value="'Resources'" :label="'资源(Resources)'"></el-option>
              <el-option :key="'Saddles'" :value="'Saddles'" :label="'鞍(Saddles)'"></el-option>
              <el-option :key="'Seeds'" :value="'Seeds'" :label="'种子(Seeds)'"></el-option>
              <el-option :key="'Skins'" :value="'Skins'" :label="'皮肤(Skins)'"></el-option>
              <el-option :key="'Structures'" :value="'Structures'" :label="'结构(Structures)'"></el-option>
              <el-option :key="'Tools'" :value="'Tools'" :label="'工具(Tools)'"></el-option>
              <el-option :key="'Trophies'" :value="'Trophies'" :label="'奖杯(Trophies)'"></el-option>
              <el-option :key="'Weapons'" :value="'Weapons'" :label="'武器(Weapons)'"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12"></el-col>
        <el-col :span="1.5">
          <el-button class="el-btn-margin" type="primary" @click="replay()">查询</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button class="el-btn-margin" type="primary" @click="replay()">重置</el-button>
        </el-col>
      </el-row>
    </el-form>

    <el-table :data="items" style="width: 100%">
      <el-table-column prop="id" label="ID" width="50"></el-table-column>
      <el-table-column prop="name" label="名称" width="150"></el-table-column>
      <el-table-column prop="label" label="标签" width="150"></el-table-column>
      <el-table-column prop="imgUrl" label="图片" width="110">
        <template #default="scope">
          <el-image :src="GetImg(scope.row.imgUrl)" style="max-width: 100px;max-height: 100px"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="category" label="分类" width="95"></el-table-column>
      <el-table-column prop="stackSize" label="堆栈大小" width="85"></el-table-column>
      <el-table-column prop="itemId" label="物品ID" width="85">
        <template #default="scope">
          <el-text v-if="scope.row.itemId == 0 " type="info">无</el-text>
          <el-text v-else type="primary">{{ scope.row.itemId == 0 ? '无' : scope.row.itemId }}</el-text>
        </template>
      </el-table-column>
      <el-table-column prop="className" label="类名" width="290"></el-table-column>
      <el-table-column prop="blueprint" label="蓝图"></el-table-column>
    </el-table>

    <el-pagination
        v-model:current-page="pageNum"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
</template>
<script setup lang="ts">
import {ArkItemInfo, PostItemList, ReqArkItem} from "../../api/ARKItemsApi";
import {ref} from "vue";

let items = ref<ArkItemInfo[]>([])
let total = ref<number>(0)
let pageNum = ref<number>(1)
let pageSize = ref<number>(10)

let searchForm = ref<ReqArkItem>(new ReqArkItem(pageNum.value, pageSize.value, "", "", "", ""))
let demo = ref<string>("")
function replay() {
  items.value = []
  PostItemList(searchForm.value, pageNum.value, pageSize.value).then((res) => {
    if (res.code == 200) {
      items.value = res.data.list
      total.value = res.data.total
    }
  })
}

const handleSizeChange = (val: number) => {
  pageSize.value = val
}
const handleCurrentChange = (val: number) => {
  pageNum.value = val
  replay()
}

function GetImg(url: string): string {
  return url
}


replay()
</script>
<style scoped lang="scss">

</style>