<template>
  <div>
    <div class="alert alert-success">
      <span v-if="data">
        <a :href="'/api/article/?id=' + data.id" target="_blank">
          {{ data.title }}
        </a>
      </span>
      <span v-else>
        (无)
      </span>
      <button class="btn btn-secondary change-link" @click="show_modal">修改</button>
    </div>
    <ArticleModal ref="modal" @select="select"/>
  </div>
</template>

<script>
import ArticleModal from './article-modal';

export default {
  name: 'ArticleSelector',
  props: ['modelValue'],
  emits: ['update:modelValue'],
  components: {
    ArticleModal,
  },
  data: function () {
    return {
      data: null,
    };
  },
  computed: {
  },
  methods: {
    show_modal: function() {
      this.$refs.modal.show();
    },
    reload: async function(id) {
      if (id) {
        var r = await this.$root.api_get("/api/v1/article/" + id + "/");
        this.data = r.data;
      }
    },
    select: function(x) {
      this.$emit("update:modelValue", x.id);
      this.reload(x.id);
    },
  },
  mounted() {
    this.reload(this.modelValue);
  },
}
</script>

<style scoped>
button.change-link {
  margin-left: 2rem;
}
</style>

