<template>
  <div class="select-icon-con">
    <q-icon
      v-if="valueInner"
      :name="valueInner"
      :style="{color: color}"
      class="on-left q-ma-xs"
      size="2.5em"
    ></q-icon>
    <q-btn
      v-if="!showonly"
      label=" 选择... "
      color="primary"
      class="q-ml-xs"
      style="padding:7px 12px;"
      dense
      outline
      @click="showSelectWin=true"
    >
      <q-tooltip>选择图标</q-tooltip>
    </q-btn>
    <q-btn
      v-if="valueInner&&!showonly"
      class="q-pa-xs q-ml-xs no-shadow"
      icon="clear"
      color="grey-7"
      round
      dense
      flat
      @click="valueInner=null;$emit('input',null)"
    ></q-btn>
    <q-dialog v-model="showSelectWin" transition-show="scale" transition-hide="scale">
      <kyb-layout type="column" class="bg-white">
        <kyb-layout-item type="top" class="q-pa-xs" size="50">
          <q-input v-model="keyword" dense outlined label="输入关键字过滤" />
        </kyb-layout-item>
        <kyb-layout-item type="center">
          <kyb-group ref="groupItems" is-group group-key="groupName" :items="iconData">
            <template #default="{group,index}">
              <div v-if="group.extend" class="q-pa-xs no-scroll">
                <div
                  class="icon-item-con float-left cursor-pointer"
                  v-for="(icon,index) in group.items"
                  v-bind:key="index"
                  @click="selectValue(icon.name)"
                >
                  <q-icon
                    class="icon-item q-ma-sm q-pa-xs"
                    size="2em"
                    :outline="valueInner !== icon"
                    round
                    :title="icon.name"
                    :name="icon.name"
                    :style="{color: valueInner === icon.name ? color : ''}"
                    :color="valueInner === icon.name?'red':''"
                  ></q-icon>
                  <div v-text="icon.name"></div>
                </div>
              </div>
            </template>
          </kyb-group>
        </kyb-layout-item>
      </kyb-layout>
    </q-dialog>
  </div>
</template>
<style lang="stylus">
.icon-item-con {
  border: 1px solid $grey-5;
  margin: 4px;
  padding: 4px;
  border-radius: 4px;
  box-shadow: 0 0 4px $grey-4;
  text-align: center;
}

.icon-item-con:hover {
  background-color: $grey-3;
}
</style>

<script>
import iconList from './material-icon'
import { copy } from 'iclipboard'

export default {
  name: 'kyb-select-icon',
  model: {
    prop: 'value',
    event: 'input'
  },
  props: {
    isGroup: { type: Boolean, default: false },
    hideToolbar: Boolean,
    value: String,
    color: String,
    showonly: Boolean
  },
  data: function() {
    return {
      showSelectWin: false,
      valueInner: this.value,
      keyword: '',
      icons: Object.keys(iconList).reduce((re, key) => {
        iconList[key].forEach(v => {
          re.push({ groupName: key, name: v })
        })
        return re
      }, []),
      showMap: {}
    }
  },
  watch: {
    value(old) {
      this.valueInner = old
    }
  },
  computed: {
    iconData() {
      if (this.keyword && this.keyword.length) {
        return this.icons.filter(v => v.name.indexOf(this.keyword) > -1)
      } else {
        return this.icons
      }
    }
  },
  methods: {
    selectValue(icon) {
      this.valueInner = icon
      this.$emit('input', icon)
      if (copy(icon)) {
        this.$q.showNotifi(`成功复制 ${icon} 到剪贴板！`)
      }
    }
  },
  mounted() {}
}
</script>
<style lang="stylus"></style>
