<template>
  <div class="es-icons" :class="{ 'es-icon-readonly': readonly }">
    <el-input
      v-if="!readonly"
      v-bind="$attrs"
      v-on="$listeners"
      :placeholder="placeholder"
      readonly
      v-model="model"
    >
      <i class="es-iconfont" :class="model" slot="prepend" v-if="model"></i>
      <el-button slot="suffix" type="primary" size="small" @click="handleClick"
        >选择</el-button
      >
    </el-input>
    <i class="es-iconfont" :class="model" slot="prepend" v-else></i>
    <es-dialog title="选择图标" :visible.sync="visible">
      <el-scrollbar class="es-scrollbar" ref="scrollbar">
        <ul class="es-icon-list">
          <li v-for="name in list" :key="name" @click.stop="handleSelect(name)">
            <span>
              <i :class="'es-icon-' + name"></i>
              <span class="icon-name">{{ 'es-icon-' + name }}</span>
            </span>
          </li>
        </ul>
      </el-scrollbar>
    </es-dialog>
  </div>
</template>
<script>
import icon from './icon.json';
export default {
  name: 'EsIcons',
  inheritAttrs: false,
  props: {
    value: String,
    placeholder: {
      type: String,
      default: '请选择图标'
    },
    label: '',
    readonly: Boolean
  },
  computed: {
    model: {
      get() {
        return this.value ? this.value : this.icon;
      },
      set(val) {
        return val;
      }
    }
  },
  watch: {
    model(val) {
      this.$emit('change', val);
    }
  },
  data() {
    return {
      list: icon,
      icon: null,
      visible: false
    };
  },
  created() {
    //this.loadsub(this.param);
  },
  methods: {
    handleClick() {
      this.visible = true;
    },
    handleSelect(name) {
      this.$emit('input', `es-icon-${name}`);
      this.icon = `es-icon-${name}`;
      this.visible = false;
    }
  }
};
</script>
