<!-- 94335 新增lc-icon组件，用于设置常用字体图标库 -->

<template>
  <div>
      <text v-if="type==false" class="icon-font" :style="mergeStyle" @click="itemClicked(name)">{{Icon[name]}}</text>
      <text v-if="type==true" class="icon-font" :style="mergeStyle" @click="itemClicked(name)">{{name}}</text>
  </div>
</template>

<style scoped>
  .icon-font {
    color: #666666;
  }
</style>

<script>
  import Icon from '../lc-icon/type';

  const dom = weex.requireModule('dom');

  export default {
    props: {
      type:{
        default: false,
        type: Boolean
      },
      name: {
        default: 'success',
        type: String
      },
      size: {
        default: 'small',
        type: String
      },
      iconStyle: {
        type: Object,
        default: () => ({})
      },
      fontFamily: {
        type: String,
        default: 'lightUiIconFont'
      },
      src: {
        type: String,
        default: 'https://at.alicdn.com/t/font_520368_r89ekv69euahsemi.ttf'
      }
    },
    data: () => ({
      Icon
    }),
    created () {
      var that = this;
      dom.addRule('fontFace', {
        'fontFamily': that.fontFamily,
        // 94335 新增lc-icon组件，用于设置常用字体图标库
        'src': "url('"+that.src+"')"
      });
    },
    computed: {
      mergeStyle () {
        const { iconStyle, size,fontFamily } = this;
        let fontSize = '48px';
        switch (size) {
          case 'xs':
            fontSize = '24px';
            break;
          case 'small':
            fontSize = '48px';
            break;
          case 'medium':
            fontSize = '72px';
            break;
          case 'big':
            fontSize = '128px';
            break;
          default:
            fontSize = '48px';
        }
        return {
          fontFamily: fontFamily,
          fontSize,
          ...iconStyle
        }
      }
    },
    methods: {
      itemClicked (name) {
        this.$emit('LcIconClicked', {
          name
        });
      }
    },
  }
</script>
