<template>
  <div class="module-title">
    我的徽章
  </div>
  <div class="content">
    <div class="item" v-for="item in maxList" :key="item.umnId">
      <Aimage :url="item.img"></Aimage>
      <span style="margin: 0 4px;">{{ item.name }} </span>
      <Abutton @click="updown(item.ubId)"> {{ item.show == 0 ? '佩戴' : '卸下' }} </Abutton>
    </div>
    <span v-if="maxList.length == 0">暂无徽章.</span>
  </div>
  <div class="content">
    <Pagination :currentPage="currentPage" :limit="10" :total="total" @pageChange="handlePageChange" />
  </div>
  <!-- 选择装备 -->
  <GamePopup v-model:show="showData" :title="'【' + maxDetail.name + '】'" style="min-width: 60%;">
    <!-- 自定义内容 -->
    <div class="content">
      <div class="mapList" style="max-height: 300px;margin-top: 15px;">

        <div>
          <Aimage :url="maxDetail.img"></Aimage>
        </div>

        <div class="forum-title" style="padding: 0;">
          装备属性
        </div>
        <div v-for="(tipItem, index) in JSON.parse(maxDetail.attr)" :key="index">
          {{ Number(index) + 1 }}: {{ tipItem.tip }}
        </div>

      </div>

    </div>
  </GamePopup>

</template>

<script setup lang="ts">
const currentPage = ref<number>(1);
const total = ref<number>(0);
let maxList = ref<Array<any>>([])
let showData = ref(false)
let maxDetail = ref<any>({})

onMounted(() => {

  getData()
})

const getData = async () => {
  let result = await UserService.GetUserBadgeList(currentPage.value);
  if (result.code == 0) {
    maxList.value = result.data.list
    total.value = result.data.total.value
  }
  else {
    MessageExtend.ShowDialog("错误信息", result.msg);
  }
}


/**翻页 */
const handlePageChange = async (page: number): Promise<void> => {
  currentPage.value = page;
  await getData();
};






const updown = async (id: any) => {
  let result = await UserService.UpdateBadgeShow(id);
  if (result.code == 0) {
    getData()
  }
  else {
    MessageExtend.ShowDialog("错误信息", result.msg);
  }
}



</script>
