<template>
  <el-select
    v-model="val"
    placeholder="请选择文章"
    clearable
    @change="handleSelectionChange"
  >
    <el-option
      v-for="item in articleOptions"
      :key="item.id"
      :label="item.title"
      :value="item.id"
    />
  </el-select>
</template>

<script>
import { getList as getArticleList } from '@/model/article'

export default {
  name: 'ArticleSelect',
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      val: null,
      articleOptions: []
    }
  },

  watch: {
    value: {
      handler(val) {
        this.val = val
      },
      immediate: true
    }
  },

  created() {
    this.loadArticleList()
  },

  methods: {
    async loadArticleList() {
      const { success, data, msg } = await getArticleList({
        'data': {},
        'start': 1,
        'limit': 9999
      })
      if (success) {
        this.articleOptions = data.items
      } else {
        this.$message.error(msg)
      }
    },

    handleSelectionChange(val) {
      this.$emit('input', val)
    }

  }
}
</script>

<style scoped>
.page-select {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 20px;
}
</style>
