<template>
  <el-select
    v-model="inputValue"
    style="width: 100%"
    @change="handleChange"
    filterable
    :placeholder="placeholder"
  >
    <el-option
      v-for="item in icons"
      :key="item"
      :label="item"
      :value="item">
      <span style="float: left; color: #8492a6; font-size: 16px">{{ item }}</span>
      <span style="float: right"><i class="icon " :class="`icon-${item}`" style="font-size: 16px"></i></span>
    </el-option>
  </el-select>
</template>
<script>
  import './iconfont/iconfont.css'
  import './iconfont/iconfont'
  import icons from './icon-font'

  export default {
    name: 'CmsIconFont',
    props: {
      value: String,
      placeholder: String
    },
    data() {
      return {
        icons,
      }
    },
    computed: {
      inputValue: {
        get() {
          return this.value;
        },
        set(val) {
          this.$emit('input', val);
        }
      }
    },
    methods: {
      handleChange(val) {
        this.$emit('change', val)
      }
    },
  }
</script>

<style lang="less">

</style>
