<template>
  <text class="icon-font" v-if="isInit" :style="mergeStyle" @click="itemClicked">{{ code }}</text>
</template>

<script>
const dom = weex.requireModule('dom')
import ColmoMixin from '../../mixins/colmo'
import icons from './fonts/icomoon'

const COLMO_ICONFONT_NAME = 'dolphinColmoFont'

if (!weex.config.env.isInit && dom && dom.addRule) {
  dom.addRule('fontFace', {
    fontFamily: COLMO_ICONFONT_NAME,
    // eslint-disable-next-line
    src: "url('" + icons + "')"
    // src: "url('https://dolphin-weex-dev.msmartlife.cn/static/component/font/icomoon.ttf')"
  })
  weex.config.env.isInit = true
}

export default {
  mixins: [ColmoMixin],
  props: {
    code: {
      default: '\u4705',
      type: String
    },
    size: {
      default: 32,
      type: Number
    },
    color: {
      default: 'rgba(255, 255, 255, 0.8)',
      type: String
    },
    iconStyle: {
      type: Object,
      default: () => ({})
    },
    fontFamily: {
      type: String,
      default: COLMO_ICONFONT_NAME
    }
  },
  data() {
    return {
      isInit: weex.config.env.isInit === true || false
    }
  },
  watch: {
    _theme() {
      this.initFontFamily()
    }
  },
  created() {
    this.initFontFamily()
  },
  computed: {
    mergeStyle() {
      const { iconStyle, size, color, fontFamily } = this
      let fontSize = size + 'px'
      return {
        fontFamily,
        fontSize,
        color,
        ...iconStyle
      }
    }
  },
  methods: {
    itemClicked() {
      this.$emit('dofIconFontClicked')
    },
    initFontFamily() {
      if (this._theme === 'colmo' && !weex.config.env.isInit) {
        //
      }
    }
  }
}
</script>
