<template>
  <div style="margin: 10px;padding: 10px">
    <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, "", "", "", ""))


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
  // return  url.replaceAll(" ", "%20")
  //     .replaceAll("(", "%28")
  //     .replaceAll(")", "%29")
  //     .replaceAll("&", "%26")
  //     .replaceAll("'", "%27")
  //     .replaceAll(",", "%2c")

  // name = strings.ReplaceAll(name, "%20", " ")
  //
  // name = strings.ReplaceAll(name, "%28", "(")
  // name = strings.ReplaceAll(name, "%29", ")")
  // name = strings.ReplaceAll(name, "%26", "&")
  // name = strings.ReplaceAll(name, "%27", "'")
  // name = strings.ReplaceAll(name, "%2c", ",")
}


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

</style>