<template>
	<text class="tui-icon" :class="[customPrefix,customPrefix?name:'']"
		:style="{ color: getColor, fontSize: getSize, fontWeight: bold ? 'bold' : 'normal',margin:margin }"
		@tap="handleClick">{{ icons[name] || '' }}</text>

</template>

<script>
	import icons from './tui-icon.js';
	// #ifdef APP-NVUE
	var domModule = weex.requireModule('dom');
	domModule.addRule('fontFace', {
		'fontFamily': 'thoruiFont',
		'src': "url('data:font/truetype;charset=utf-8;base64,[encoded data, 64216 characters]')"
	});
	// #endif
	export default {
		name: 'tuiIcon',
		emits: ['click'],
		props: {
			name: {
				type: String,
				default: ''
			},
			customPrefix: {
				type: String,
				default: ''
			},
			size: {
				type: [Number, String],
				default: 0
			},
			//px或者rpx
			unit: {
				type: String,
				default: ''
			},
			color: {
				type: String,
				default: ''
			},
			bold: {
				type: Boolean,
				default: false
			},
			margin: {
				type: String,
				default: "0"
			},
			index: {
				type: Number,
				default: 0
			}
		},
		computed: {
			getColor() {
				return this.color || (uni && uni.$tui && uni.$tui.tuiIcon.color) || '#999';
			},
			getSize() {
				const size = this.size || (uni && uni.$tui && uni.$tui.tuiIcon.size) || 32;
				const unit = this.unit || (uni && uni.$tui && uni.$tui.tuiIcon.unit) || 'px';
				return size + unit
			}
		},
		data() {
			return {
				icons: icons
			}
		},
		methods: {
			handleClick() {
				this.$emit('click', {
					index: this.index
				});
			}
		}
	};
</script>

<style scoped>
	/* #ifndef APP-NVUE */
	/* 头条小程序组件内不能引入字体，需要在父级页面引入字体文件*/
	@font-face {
		font-family: thoruiFont;
		src: url(data:font/ttf;base64,[encoded data, 64216 characters]) format("truetype");
	}

	/* #endif */

	.tui-icon {
		font-family: thoruiFont;
		text-align: center;
		text-decoration: none;
	}
</style>