<template>
  <el-dialog title="选择图标" :visible.sync="dialogIconVisible" :width="width" :z-index="100005" :modal="false">
    <ul class="icon-list cl">
      <li v-for="(item,key) in size" :key="key" @click="$emit('confirm',icons[item*page])">
        <i v-if="!isVant" :class="icons[(item)*page]" />
        <van-icon v-else :name="icons[(item)*page]" />
      </li>
    </ul>
    <el-pagination
      layout="prev, pager, next"
      background
      :current-page="page"
      :page-size="size"
      :total="iconCount"
      @current-change="currentChange"
    />
  </el-dialog>
</template>
<script>
import icons from './icon'
import vanIcon from './vant_icon'
// import { vantIcons } from '@vant/icons/src/config'
// import Vue from 'vue'
// import { Icon } from 'vant'

// Vue.use(Icon)

export default {
  name: 'DkIcon',
  components: {
  },
  props: {
    fromData: {
      type: Object,
      default: null
    },
    width: {
      type: String,
      default: '50%'
    },
    isVant: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogIconVisible: false,
      icons: [],
      page: 1,
      size: 40
    }
  },
  computed: {
    iconCount: function() {
      return this.icons.length
    }
  },
  mounted() {
    if (this.isVant) {
      this.icons = vanIcon
    } else {
      this.icons = icons
    }
  },
  methods: {
    // 提交表单 group
    currentChange(page) {
      this.page = page
    }
  }
}
</script>

<style scoped lang="scss">

.icon-list {
  margin-bottom: 20px;
  li {
    float: left;
    width: calc(10% - 10px);
    text-align: center;
    height: 50px;
    line-height: 50px;
    color: #666;
    font-size: 13px;
    margin: 5px;
    cursor: pointer;
    i{
      font-size: 30px;
    }
    p{
      display: none;
    }
    &:hover{
      color: #409EFF;
    }
  }
}
</style>
