<template>
  <div>
    <el-input v-model="icon" :placeholder="placeholder" clearable>
      <template slot="prepend">
        <el-icon v-if="!isVant" :class="icon" class="vant-icon " />
        <van-icon v-else :name="icon" />
      </template>
      <template slot="append">
        <el-button @click.native="onClick">选择</el-button>
      </template>
    </el-input>
    <dk-icon ref="dkIcon" :is-vant="isVant" @confirm="confirmIcon" />
  </div>
</template>

<script>
import DkIcon from './DkIcon'
// import Vue from 'vue'
// import { Icon } from 'vant'

// Vue.use(Icon)
export default {
  name: 'DkIconInput',
  components: { DkIcon },
  props: {
    placeholder: {
      default: '',
      type: String
    },
    value: {
      default: '',
      type: String
    },
    isVant: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      icon: ''
    }
  },
  watch: {
    icon(value) {
      this.$emit('input', value)
    },
    value(value) {
      this.icon = value
    }
  },
  mounted() {
    this.icon = this.value
  },
  methods: {
    confirmIcon(icon) {
      this.icon = icon
      this.$refs.dkIcon.dialogIconVisible = false
    },
    onClick() {
      this.$refs.dkIcon.dialogIconVisible = true
    }
  }
}
</script>

<style scoped>

</style>
