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

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

<script>
import Icon from './type'

const dom = weex.requireModule('dom')

export default {
  props: {
    name: {
      default: 'success',
      type: String
    },
    size: {
      default: 'small',
      type: String
    },
    iconStyle: {
      type: Object,
      default: () => ({})
    }
  },
  data: () => ({
    Icon
  }),
  beforeCreate() {
    let url = weex.config.bundleUrl
    if (url.indexOf('?') > 0) {
      url = url.substring(0, url.indexOf('?'))
    }
    url = url
      .split('/')
      .slice(0, -2)
      .join('/')
    if (url.indexOf('http') !== 0 && url.indexOf('file') !== 0) {
      if (url.indexOf('/') === 0) {
        url = url.substring(url.indexOf('/') + 1)
      }
      url = 'local://' + (url === '' ? '' : '/') + url
    }
    // console.log("icon url", url);
    const ICON_ONLINE = 'https://at.alicdn.com/t/font_1278468_jszcyyrozyd.ttf'
    dom &&
      dom.addRule &&
      dom.addRule('fontFace', {
        fontFamily: 'iconfont',
        src: 'url(\'https://at.alicdn.com/t/font_1325601_4bb1pxvuqrc.ttf\')'
      })
    // dom.addRule('fontFace', {
    //   fontFamily: 'iconfont',
    //   src: 'url(\'' + url + '/assets/font/font_1278468_f69rlcvt2nb.ttf\')'
    // });
  },
  computed: {
    mergeStyle() {
      const { iconStyle, size } = 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: 'iconfont',
        fontSize,
        ...iconStyle
      }
    }
  },
  methods: {
    itemClicked(name) {
      this.$emit('dofIconClicked', {
        name
      })
    }
  }
}
</script>
