<template>
  <div class="g-box">
    <!-- <h4 class="g-h4">iconfont</h4> -->
    <div
      v-for="(item, index) in iconList"
      :key="index"
      class="g-block"
      @click="changeVal('iconfont ' + item)"
    >
      <i class="iconfont" :class="item" />
      <!-- <span>{{ '&lt;i class="iconfont ' + item + '"&gt;&lt;/i&gt;' }}</span> -->
    </div>
    <!-- <h4 class="g-h4">el-iconfont</h4> -->
    <div
      v-for="(item, index) in elList"
      :key="index + '-el'"
      class="g-block"
      @click="changeVal(item)"
    >
      <i :class="item" />
      <!-- <span>{{ '&lt;i class="' + item + '"&gt;&lt;/i&gt;' }}</span> -->
    </div>
  </div>
</template>

<script>
import elList from './elIcon'
export default {
  name: 'IconList',
  // 将子父组件的v-model打通
  model: {
    prop: 'value', // 要存在于props
    event: 'change' // 当组件的值发生改变时要emit的事件名
  },
  props: ['value', 'disabled'],
  data() {
    return {
      newValue: '',
      elList,
      iconList: []
    }
  },
  watch: {
    // 监测父组件值的变化
    value: function(newVal) {
      this.newValue = newVal
    }
  },
  created() {
    this.initFun()
  },
  methods: {
    // 这里检测data中的值，一旦发生变化就提交事件到父组件
    changeVal(newVal) {
      this.$emit('change', newVal)
    },
    initFun() {
      this.iconList = [
        // "icon-dianji",
        // "icon-yincang",
        // "icon-dianpu1",
        // "icon-mail",
        // "icon-weizhi",
        // "icon-iconc6",
        // "icon-shangchuan",
        // "icon-shendurenzheng",
        // "icon-xiajiantou",
        // "icon-xiugaimima",
        // "icon-tuichu",
        // "icon-07",
        // "icon-jia",
        // "icon-jian",
        // "icon-fanhui",
        // "icon-dian",
        // "icon-piaoquan",
        // "icon-jiantou2",
        // "icon-right-2",
        // "icon-huodong",
        // "icon-shoujiyanzheng",
        // "icon-location",
        // "icon-yincang1",
        // "icon-huiyishiqueren_huabanfuben",
        // "icon-qizi",
        // "icon-zhanghaoguanli",
        // "icon-guanbi",
        // "icon-renwu-tuandui",
        // "icon-dashuju",
        // "icon-chanyefuhua",
        // "icon-jingdongwanxiang",
        // "icon-jingdongjinrong",
        // "icon-yunziyuan",
        // "icon-wutongkongjian",
        // "icon-wuliu",
        // "icon-shangjiaruzhu2",
        // "icon-yunshichang",
        // "icon-jingdongdaxue2",
        // "icon-jingdongdaxue",
        // "icon-pinpaituiguang",
        // "icon-gongyingshang",
        // "icon-gengduo",
        // "icon-dingdan",
        // "icon-qiyejinrongfuwu",
        // "icon-shangjiaruzhu",
        // "icon-mima",
        // "icon-dianhua",
        // "icon-jiantouxia",
        // "icon-dianpu",
        // "icon-jiantou",
        // "icon-sousuo",
        // "icon-tixing",
        // "icon-wujiaoxing",
        // "icon-xiangqing",
        // "icon-tishi",
        // "icon-danwei",
        // "icon-yue",
        // "icon-yonghu",
        // "icon-xiugai",
        // "icon-xintong",
        // "icon-xiaojiao",
        // "icon-cuowu",
        // "icon-jishu",
        // "icon-shouye",
        // "icon-shouji",
        // "icon-xiaojia",
        // "icon-guidang",
        // "icon-jiameng",
        // "icon-renzheng1",
        // "icon-xiangqing1",
        // "icon-choose",
        // "icon-pinpaituiguang1",
        // "icon-jingzhuntong",
        // "icon-huiyi",
        // "icon-jingdongshangzhi",
        // "icon-tongxunlu",
        // "icon-mingjing",
        // "icon-yunying",
        // "icon-tubiao-",
        // "icon-jiantou1",
        // "icon-dingweiweizhi",
        // "icon-cuohao",
        // "icon-duihao",
        // "icon-tixing1",
        // "icon-yincang2",
        // "icon-shuaxin",
        // "icon-up",
        // "icon-zhubanfang",
        // "icon-shijian",
        // "icon-renshu",
        // "icon-tubiaozhizuo-",
        // "icon-zhihuan",
        // "icon-bofang",
        // "icon-up-copy",
        // "icon-kaifayingyong",
        // "icon-rongmeitiyun",
        // "icon-qiyeshangyun",
        // "icon-chanyedashuju",
        // "icon-xiangmukeshihuaguanligongju",
        // "icon-chanpinshanghangquantonglu",
        // "icon-ziyuan",
        // "icon-meitibaodao",
        // "icon-wangzhanjianshe",
        // "icon-APP",
        // "icon-bianji",
        // "icon-cai",
        // "icon-caozuoshouce",
        // "icon-pingtaijianjie",
        // "icon-goumaifuwu",
        // "icon-yonghudenglu",
        // "icon-lianxiwomen",
        // "icon-qiyerenzheng",
        // "icon-remen",
        // "icon-tuijianfuwu",
        // "icon-yonghuzhuce",
        // "icon-huodong1",
        // "icon-zan",
        // "icon-ziyuanshenqing",
        // "icon-webshouye",
        // "icon-changjianwenti",
        // "icon-shiyongshouce",
        // "icon-erweima",
        // "icon-kefu"
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.g-box {
  text-align: left;
  .g-h4 {
    text-align: center;
    font-size: 50px;
  }
  .g-block {
    display: inline-block;
    // width: 355px;
    // height: 80px;
    padding: 10px 5px;
    text-align: center;
    border: 1px #ccc dashed;
    margin: 1px;
    font-size: 0px;
    cursor: pointer;
    i {
      font-size: 30px;
      line-height: 30px;
      display: block;
      margin: 0 auto;
      width: 30px;
    }
    span {
      display: list-item;
      font-size: 12px;
      text-align: center;
      line-height: 0.2rem;
    }
  }
}
</style>
