<template>
  <Modal ref="modal" close_only=1>
    <div class="my-1" v-for="x, i in articles" :key="i">
      <button class="btn btn-info select" @click="select(x)">选择</button>
      <a :href="'/api/article/?id=' + x.id" target="_blank">
        {{ x.title }}
      </a>
    </div>
    <button class="btn btn-secondary" v-if="meta.previous" @click="load_data(meta.previous)">上一页</button>
    <button class="btn btn-secondary" v-if="meta.next" @click="load_data(meta.next)">下一页</button>
  </Modal>
</template>

<script>
export default {
  name: 'ArticleModel',
  props: [],
  emits: ['select'],
  components: {
  },
  data: function () {
    return {
      articles: [],
      meta: {},
      cb: null,
    };
  },
  computed: {
  },
  methods: {
    show: function(cb) {
      this.cb = cb;
      this.$refs.modal.show();
    },
    select: function(x) {
      this.$refs.modal.hide();
      this.$emit("select", x);
      if (this.cb) {
        this.cb(x.id);
      }
    },
    load_data: async function(uri) {
      if (!uri) {
        uri = "/api/v1/article/";
      }
      var r = await this.$root.api_get(uri);
      this.articles = r.data.objects
      this.meta = r.data.meta;
    },
  },
  mounted() {
    this.load_data();
  },
}
</script>

<style scoped>
button.select {
  margin-right: 1rem;
}
</style>

