<template>
  <div class="viconWrap">
    <Dropdown>
      <Input
        ref="viconWrap"
        :value="val"
        v-bind="$attrs"
        @on-clear="onClear"
      >
      <template slot="prefix">
        <template v-if="val.indexOf('svg') === 0">
          <svg
            class="svgicon"
            aria-hidden="true"
          >
            <use :xlink:href="`#${val}`" />
          </svg>
        </template>
        <template v-else-if="val.indexOf('icon') === 0">
          <svg
            class="svgicon"
            aria-hidden="true"
          >
            <use :xlink:href="`#${val}`" />
          </svg>
        </template>
        <Icon
          v-else
          :type="val ? val : 'ios-color-filter-outline'"
        />
      </template>
      </Input>
      <DropdownMenu slot="list">
        <div class="pannel">
          <Input
            v-model="searchKey"
            search
            clearable
            :placeholder="`从${iconsNum}个图标中搜索`"
            @on-change="handleSearchChange"
            @on-search="handleSearchChange"
            @on-clear="handleSearchClear"
          ></Input>
          <div class="list">
            <ul class="icos">
              <li
                v-for="item in iconList"
                :key="item"
                class="icoli"
                @click="()=>handleSelectIcon(item)"
              >
                <template v-if="item.indexOf('svg') === 0">
                  <svg
                    class="svgicon ico"
                    aria-hidden="true"
                  >
                    <use :xlink:href="`#${item}`" />
                  </svg>
                  <span class="name">{{ item }}</span>
                  <span class="icoprev">
                    <svg
                      class="svgicon"
                      aria-hidden="true"
                      style="width:2em;height:2em"
                    >
                      <use :xlink:href="`#${item}`" />
                    </svg>
                  </span>
                </template>
                <template v-else-if="item.indexOf('icon') === 0">
                  <svg
                    class="svgicon"
                    aria-hidden="true"
                  >
                    <use :xlink:href="`#${item}`" />
                  </svg>
                  <span class="name">{{ item }}</span>
                  <span class="icoprev">
                    <svg
                      class="svgicon"
                      aria-hidden="true"
                      style="width:2em;height:2em"
                    >
                      <use :xlink:href="`#${item}`" />
                    </svg>
                  </span>
                </template>
                <template v-else>
                  <Icon
                    :type="item"
                    size="16"
                    class="ico"
                  />
                  <span class="name">{{ item }}</span>
                  <Icon
                    :type="item"
                    size="26"
                    class="icoprev"
                  />
                </template>
              </li>
            </ul>
          </div>
        </div>
      </DropdownMenu>
    </Dropdown>
  </div>
</template>

<script>
/**
 * 选择图标组件
 *
 * ioniconsv3：iview内置的图标列表，以字体方式显示
 * svgicons：svg图标列表，需要以svg-xxx方式命名
 *
 * 使用图标需要用 Vicon 组件显示图标，会自动区分字体或svg图标并显示
 *
 */

import ioniconsv3 from './ioniconsv3';
import svgicons from './svgicons';
import emsIcon from './emsIcon.js';
import util from '../../util/util';

const iconList = [...ioniconsv3, ...svgicons, ...emsIcon];

export default {
  name: 'Vicon',
  model: {
    event: 'selected',
    prop: 'value'
  },
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      iconList: util.simDeepCopy(iconList),
      val: this.value || '',
      searchKey: ''
    };
  },
  computed: {
    iconsNum() {
      return iconList.length;
    }
  },
  mounted() {
    this.setInputPadding();
  },
  methods: {
    setInputPadding() {
      const inputContaner = this.$refs.viconWrap.$el;
      const iEl = inputContaner.getElementsByClassName('ivu-input-prefix')[0].getElementsByTagName('i')[0];
      let iconWidth = 0;
      if (iEl) {
        iconWidth = iEl.clientWidth;
      } else {
        iconWidth = inputContaner.getElementsByClassName('ivu-input-prefix')[0].getElementsByClassName('svgicon')[0].clientWidth;
      }
      const inputEl = inputContaner.getElementsByClassName('ivu-input')[0];
      inputEl.style.paddingLeft = 16 + iconWidth + 'px';
    },
    handleSearchChange() {
      if (this.searchKey) {
        this.iconList = iconList.filter(item => item.indexOf(this.searchKey) > -1);
      } else {
        this.iconList = util.simDeepCopy(iconList);
      }
    },
    handleSearchClear() {
      this.iconList = util.simDeepCopy(iconList);
    },
    handleSelectIcon(icon) {
      icon = icon || '';
      this.val = icon;
      this.isSvg = icon.indexOf('svg') === 0;
      this.$emit('selected', icon);
      this.$nextTick(() => {
        this.setInputPadding();
      });
    },
    onClear() {
      this.val = '';
      this.isSvg = false;
      this.$emit('input', '');
      this.$emit('selected', '');
    }
  }
};
</script>

<style lang="less" scoped>
@import "./vicon.less";
</style>
