<template>
  <div>
    <navbar title="成就徽章" />
    <a-card>
      <div>
        <div class="flex flex-center flex-justify-start">
          <edit :options="categoryList" @ok="fetchList" />
          <category @ok="fetchCategory" />
        </div>
        <div class="mt-20">
          <a-table :data="list" :columns="columns" :pagination="page" @page-change="pageChange">
            <template #name="{ record }">
              <div class="flex flex-center flex-justify-start">
                <a-image v-if="record.oss" :src="record.oss.url" width="40px"></a-image>
                <div class="ml-10">{{ record.name }}</div>
              </div>
            </template>
            <template #category="{ record }">
              <a-tag color="blue">{{ record.category.name }}</a-tag>
            </template>
            <template #menu="{ record }">
              <div class="flex flex-center flex-justify-start">
                <edit type="edit" :info="record" @ok="fetchList" />
                <a-popconfirm content="是否确认删除该数据?" @ok="remove(record.id)">
                  <a-button type="text">删除</a-button>
                </a-popconfirm>
              </div>
            </template>
          </a-table>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script>
import navbar from '@/components/navbar/index.vue'
import edit from './components/edit.vue'
import category from "./components/category.vue";
export default {
  components: {
    navbar,
    edit,
    category
  },
  data() {
    return {
      page: {
        current: 1,
        pageSize: 10,
        total: 0,
      },
      categoryList: [],
      list: [],
      columns: [
        {
          title: '徽章名称',
          slotName: 'name'
        },
        {
          title: '徽章描述',
          dataIndex: 'desc'
        },
        {
          title: '徽章分类',
          slotName: 'category'
        },
        {
          title: '操作',
          slotName: 'menu'
        }
      ]
    }
  },
  mounted() {
    this.fetchList();
    this.fetchCategory()
  },
  methods: {
    fetchList() {
      this.$api.badge.list(this.page).then(res => {
        if (res.code === 200) {
          this.list = res.data.list
          this.page.total = res.data.total
        }
      })
    },
    pageChange(page) {
      console.log(page);
      this.page.current = page
      this.fetchList()
    },
    fetchCategory() {
      const data = {
        current: 0,
        pageSize: 999,
        total: 0,
      }
      this.$api.badge.listCategory(data).then(res => {
        if (res.code === 200) {
          this.categoryList = res.data.list
        }
      })
    },
    remove(id) {
      this.$api.badge.delete({ ids: [id] }).then(res => {
        if (res.code === 200) {
          this.$message.success(res.msg)
          this.fetchList()
        } else {
          this.$message.error(res.msg)
        }
      })
    }
  },
}
</script>

<style lang="scss" scoped></style>