<template>
  <div class="icon-selector">
    <el-popover placement="bottom" :width="fontIconWidth" v-model="fontIconVisible" popper-class="icon-selector-popper">
      <template slot="reference">
        <el-input
            v-model="fontIconSearch"
            :placeholder="fontIconPlaceholder"
            :clearable="clearable"
            :disabled="disabled"
            :size="size"
            ref="inputWidthRef"
            @click="onIconFocus"
            @clear="onClearFontIcon"
            @blur="onIconBlur"
        >
          <template slot="prepend">
            <i :class="fontIconPrefix === '' ? prepend : fontIconPrefix" class="font14"></i>
          </template>
        </el-input>
      </template>
      <transition name="el-zoom-in-top">
        <div class="icon-selector-warp" v-show="fontIconVisible">
          <div class="icon-selector-warp-row">
            <el-scrollbar ref="selectorScrollbarRef">
              <el-row :gutter="10" v-if="fontIconSheetsFilterList.length > 0">
                <el-col :xs="4" :sm="3" :md="3" :lg="2" :xl="2" v-for="(v, k) in fontIconSheetsFilterList" :key="k">
                  <div class="icon-selector-warp-item" @click="onColClick(v)" :class="{ 'icon-selector-active': fontIconPrefix === v }">
                    <div class="flex-margin">
                      <div class="icon-selector-warp-item-value">
                        <i :class="v"></i>
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
              <el-empty :image-size="100" v-if="fontIconSheetsFilterList.length <= 0" :description="emptyDescription"></el-empty>
            </el-scrollbar>
          </div>
        </div>
      </transition>
    </el-popover>
  </div>
</template>

<script>
import initIconfont from '../../utils/StyleSheets';
export default {
  name: "LabIcon",
  model: {
    prop: 'modelValue',
    event: 'update'
  },
  props: {
    // 输入框前置内容
    prepend: {
      type: String,
      default: () => 'ele-Pointer',
    },
    // 输入框占位文本
    placeholder: {
      type: String,
      default: () => '请输入内容搜索图标或者选择图标',
    },
    // 输入框占位文本
    size: {
      type: String,
      default: () => 'mini',
    },
    // 弹窗标题
    title: {
      type: String,
      default: () => '请选择图标',
    },
    // icon 图标类型
    type: {
      type: String,
      default: () => 'ali',
    },
    // 禁用
    disabled: {
      type: Boolean,
      default: () => false,
    },
    // 是否可清空
    clearable: {
      type: Boolean,
      default: true
    },
    // 自定义空状态描述文字
    emptyDescription: {
      type: String,
      default: () => '无相关图标',
    },
    modelValue: String,
  },
  data(){
    return {
      fontIconPrefix: '',
      fontIconVisible: false,
      fontIconWidth: 0,
      fontIconSearch: '',
      fontIconSheetsList: [],
      fontIconPlaceholder: '',
      fontIconType: 'ali'
    }
  },
  computed:{
    // 图标搜索及图标数据显示
    fontIconSheetsFilterList(){
      if (!this.fontIconSearch) {
        return this.fontIconSheetsList;
      }
      let search = this.fontIconSearch.trim().toLowerCase();
      return this.fontIconSheetsList.filter((item) => {
        if (item.toLowerCase().indexOf(search) !== -1) return item;
      });
    }
  },
  mounted() {
    // 判断默认进来是什么类型图标，进行 tab 回显
    if (this.type === 'all') {
      if (this.modelValue && this.modelValue.indexOf('element') > -1) {
        this.onIconChange('ele');
      } else if (this.modelValue && this.modelValue.indexOf('fa') > -1) {
        this.onIconChange('awe');
      } else {
        this.onIconChange('ali');
      }
    } else {
      this.onIconChange(this.type);
    }
    // 监听页面宽度改变
    window.addEventListener('resize', () => {
      if (this.$refs.inputWidthRef) {
        this.fontIconWidth = window.outerWidth  - 100;
      }
    });
    // 获取 input 的宽度
    this.$nextTick(() => {
      if (this.$refs.inputWidthRef) {
        this.fontIconWidth = window.outerWidth  - 100;
      }
    })
  },
  created() {

  },
  methods: {
    // 处理 input 获取焦点时，modelValue 有值时，改变 input 的 placeholder 值
    onIconFocus(){
      this.fontIconVisible = true;
      if (!this.modelValue) {
        this.fontIconSearch = '';
        this.fontIconPlaceholder = this.modelValue;
      }
    },
    // 处理 input 失去焦点时，为空将清空 input 值，为点击选中图标时，将取原先值
    onIconBlur(){
      setTimeout(() => {
        const icon = this.fontIconSheetsList.filter((icon) => icon === this.fontIconSearch);
        if (icon.length <= 0) {
          this.fontIconSearch = ''
        }
      }, 300);
    },
    // 处理 icon 双向绑定数值回显
    initModeValueEcho(){
      if (this.modelValue === '') {
        return false;
      }
      this.fontIconPlaceholder = this.modelValue;
      this.fontIconPrefix = this.modelValue;
    },
    // 初始化数据
    async initFontIconData(type){
      this.fontIconSheetsList = [];
      if (type === 'ali') {
        await initIconfont.ali().then((res) => {
          // 阿里字体图标使用 `iconfont xxx`
          this.fontIconSheetsList = res.map((i) => `iconfont ${i}`);
        });
      } else if (type === 'ele') {
        await initIconfont.ele().then((res) => {
          this.fontIconSheetsList = res;
        });
      } else if (type === 'awe') {
        await initIconfont.awe().then((res) => {
          // fontawesome字体图标使用 `fa xxx`
          this.fontIconSheetsList = res.map((i) => `fa ${i}`);
        });
      }
      this.fontIconPlaceholder = this.placeholder;
      // 初始化双向绑定回显
      this.initModeValueEcho();
    },
    // 图标点击切换
    onIconChange(type){
      this.fontIconType = type;
      this.initFontIconData(type);
      this.$refs.selectorScrollbarRef.$el.scrollTop = 0;
    },
    // 获取当前点击的 icon 图标
    onColClick(v) {
      this.fontIconPlaceholder = v;
      this.fontIconVisible = false;
      this.fontIconPrefix = v;
      this.$emit('update', this.fontIconPrefix);
    },
    // 清空当前点击的 icon 图标
    onClearFontIcon(){
      this.fontIconPrefix = '';
      this.$emit('clear', this.fontIconPrefix);
      this.$emit('update', this.fontIconPrefix);
    }
  }
}
</script>

<style scoped lang="scss">
@import "../../style/iconSelector.scss";
</style>