<template>
  <div>
    <el-select
      v-if="options.length>0"
      v-model="data"
      v-bind="$attrs"
      filterable
      clearable
      allow-create
      default-first-option
      :placeholder="placeholder"
      @change="handleSelectChange"
    >
      <el-option
        v-for="(item,key) in options"
        :key="key"
        :label="item.title"
        :value="item.url"
      />
    </el-select>
    <el-input v-else v-model="data" :placeholder="placeholder" clearable />
  </div>
</template>

<script>
import { getLink } from '../../../api/common'

export default {
  name: 'DkAddonLinkInput',
  props: {
    value: {
      default: '',
      type: String
    },
    placeholder: {
      default: '填写或选择链接',
      type: String
    },
    defaultOption: {
      default: () => [],
      type: Array
    }
  },
  data() {
    return {
      options: [],
      data: ''
    }
  },
  computed: {},
  watch: {
    value(val) {
      this.data = val
    }
  },
  created() {
    this.data = this.value
  },
  mounted() {
    this.getLink()
  },
  methods: {
    handleSelectChange() {
      this.$emit('input', this.data)
    },
    getLink() {
      if (this.defaultOption.length > 0) {
        this.options = this.defaultOption
      } else {
        getLink().then(res => {
          this.options = res.data
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">

</style>
