<template>
	<u-transition
		mode="fade"
		:show="show"
		style="display: inline-flex;"
	>
		<view class="u-tag-wrapper cursor-pointer">
			<view
				class="u-tag"
				:class="[`u-tag--${shape}`, !plain && `u-tag--${type}`, plain && `u-tag--${type}--plain`, `u-tag--${size}`, plain && plainFill && `u-tag--${type}--plain--fill`]"
				@tap.stop="clickHandler"
				:style="[{
					marginRight: closable ? '10px' : 0,
					marginTop: closable ? '10px' : 0,
				}, style]"
			>
				<slot name="icon">
					<view
						class="u-tag__icon"
						v-if="icon"
					>
						<image
							v-if="testImage(icon)"
							:src="icon"
							:style="[imgStyle]"
						></image>
						<up-icon
							v-else
							:color="elIconColor"
							:name="icon"
							:size="iconSize"
						></up-icon>
					</view>
				</slot>
				<view class="u-tag__content">
					<slot name="content">
					</slot>
					<template v-if="!$slots.content">
						<text
							v-if="!$slots.default && !$slots.$default"
							class="u-tag__text"
							:style="[textColor]"
							:class="[`u-tag__text--${type}`, plain && `u-tag__text--${type}--plain`, `u-tag__text--${size}`]"
						>
							{{ text }}
						</text>
						<text
							v-else
							class="u-tag__text"
							:style="[textColor]"
							:class="[`u-tag__text--${type}`, plain && `u-tag__text--${type}--plain`, `u-tag__text--${size}`]"
						>
							<slot>
							</slot>
						</text>
					</template>
				</view>
			</view>
			<view
				class="u-tag__close"
				:class="[`u-tag__close--${size}`]"
				v-if="closable"
				@tap.stop="closeHandler"
				:style="{backgroundColor: closeColor}"
			>
				<up-icon
					name="close"
					:size="closeSize"
					color="#ffffff"
				></up-icon>
			</view>
		</view>
	</u-transition>
</template>

<script>
	import { props } from './props';
	import { mpMixin } from '../../libs/mixin/mpMixin';
	import { mixin } from '../../libs/mixin/mixin';
	import test from '../../libs/function/test';
	import { addUnit, genLightColor } from '../../libs/function/index';
	/**
	 * Tag 标签
	 * @description tag组件一般用于标记和选择，我们提供了更加丰富的表现形式，能够较全面的涵盖您的使用场景
	 * @tutorial https://ijry.github.io/uview-plus/components/tag.html
	 * @property {String}			type		标签类型info、primary、success、warning、error （默认 'primary' ）
	 * @property {Boolean | String}	disabled	不可用（默认 false ）
	 * @property {String}			size		标签的大小，large，medium，mini （默认 'medium' ）
	 * @property {String}			shape		tag的形状，circle（两边半圆形）, square（方形，带圆角）（默认 'square' ）
	 * @property {String | Number}	text		标签的文字内容 
	 * @property {String}			bgColor		背景颜色，默认为空字符串，即不处理
	 * @property {String}			color		标签字体颜色，默认为空字符串，即不处理
	 * @property {String}			borderColor	镂空形式标签的边框颜色
	 * @property {String}			closeColor	关闭按钮图标的颜色（默认 #C6C7CB）
	 * @property {String | Number}	name		点击时返回的索引值，用于区分例遍的数组哪个元素被点击了
	 * @property {Boolean}			plainFill	镂空时是否填充背景色（默认 false ）
	 * @property {Boolean}			plain		是否镂空（默认 false ）
	 * @property {Boolean}			closable	是否可关闭，设置为true，文字右边会出现一个关闭图标（默认 false ）
	 * @property {Boolean}			show		标签显示与否（默认 true ）
	 * @property {String}			icon		内置图标，或绝对路径的图片
	 * @event {Function(index)} click 点击标签时触发 index: 传递的index参数值
	 * @event {Function(index)} close closable为true时，点击标签关闭按钮触发 index: 传递的index参数值	
	 * @example <u-tag text="标签" type="error" plain plainFill></u-tag>
	 */
	export default {
		name: 'u-tag',
		mixins: [mpMixin, mixin, props],
		data() {
			return {

			}
		},
		computed: {
			style() {
				const style = {}
				if (this.bgColor) {
					style.backgroundColor = this.bgColor
				}
				if (this.color) {
					style.color = this.color
				}
				if(this.borderColor) {
					style.borderColor = this.borderColor
				}
				if (this.height) {
					style.height = addUnit(this.height)
					style.lineHeight = addUnit(this.height)
				}
				if (this.padding) {
					style.padding = this.padding
				}
				if (this.borderRadius) {
					style.borderRadius = addUnit(this.borderRadius)
				}
				if (this.autoBgColor > 0 && this.color) {
					style.backgroundColor = this.getBagColor(this.color)
				}
				return style
			},
			// nvue下，文本颜色无法继承父元素
			textColor() {
				const style = {}
				if (this.color) {
					style.color = this.color
				}
				if (this.textSize) {
					style.textSize = addUnit(this.textSize)
				}
				return style
			},
			imgStyle() {
				const width = this.size === 'large' ? '17px' : this.size === 'medium' ? '15px' : '13px'
				return {
					width,
					height: width
				}
			},
			// 文本的样式
			closeSize() {
				const size = this.size === 'large' ? 15 : this.size === 'medium' ? 13 : 12
				return size
			},
			// 图标大小
			iconSize() {
				const size = this.size === 'large' ? 21 : this.size === 'medium' ? 19 : 16
				return size
			},
			// 图标颜色
			elIconColor() {
				return this.iconColor ? this.iconColor : this.plain ? this.type : '#ffffff'
			}
		},
		emits: ["click", "close"],
		methods: {
			testImage: test.image,
			// 点击关闭按钮
			closeHandler() {
				this.$emit('close', this.name)
			},
			// 点击标签
			clickHandler() {
				this.$emit('click', this.name)
			},
			// 根据颜色计算浅色作为背景
			getBagColor(darkColor) {
				return genLightColor(darkColor, this.autoBgColor)
			}
		}
	}
</script>

<style
	lang="scss"
	scoped
>

	.u-tag-wrapper {
		position: relative;
	}

	.u-tag {
		@include flex;
		align-items: center;
		border-style: solid;

		&--circle {
			border-radius: 100px;
		}

		&--square {
			border-radius: 3px;
		}

		&__icon {
			margin-right: 4px;
		}

		&__text {
			&--mini {
				font-size: 12px;
				line-height: 12px;
			}

			&--medium {
				font-size: 13px;
				line-height: 13px;
			}

			&--large {
				font-size: 15px;
				line-height: 15px;
			}
		}

		&--mini {
			height: 22px;
			line-height: 22px;
			padding: 0 5px;
		}

		&--medium {
			height: 26px;
			line-height: 22px;
			padding: 0 10px;
		}

		&--large {
			height: 32px;
			line-height: 32px;
			padding: 0 15px;
		}

		&--primary {
			background-color: $u-primary;
			border-width: 1px;
			border-color: $u-primary;
		}

		&--primary--plain {
			border-width: 1px;
			border-color: $u-primary;
		}

		&--primary--plain--fill {
			background-color: #ecf5ff;
		}

		&__text--primary {
			color: #FFFFFF;
		}

		&__text--primary--plain {
			color: $u-primary;
		}

		&--error {
			background-color: $u-error;
			border-width: 1px;
			border-color: $u-error;
		}

		&--error--plain {
			border-width: 1px;
			border-color: $u-error;
		}

		&--error--plain--fill {
			background-color: #fef0f0;
		}

		&__text--error {
			color: #FFFFFF;
		}

		&__text--error--plain {
			color: $u-error;
		}

		&--warning {
			background-color: $u-warning;
			border-width: 1px;
			border-color: $u-warning;
		}

		&--warning--plain {
			border-width: 1px;
			border-color: $u-warning;
		}

		&--warning--plain--fill {
			background-color: #fdf6ec;
		}

		&__text--warning {
			color: #FFFFFF;
		}

		&__text--warning--plain {
			color: $u-warning;
		}

		&--success {
			background-color: $u-success;
			border-width: 1px;
			border-color: $u-success;
		}

		&--success--plain {
			border-width: 1px;
			border-color: $u-success;
		}

		&--success--plain--fill {
			background-color: #f5fff0;
		}

		&__text--success {
			color: #FFFFFF;
		}

		&__text--success--plain {
			color: $u-success;
		}

		&--info {
			background-color: $u-info;
			border-width: 1px;
			border-color: $u-info;
		}

		&--info--plain {
			border-width: 1px;
			border-color: $u-info;
		}

		&--info--plain--fill {
			background-color: #f4f4f5;
		}

		&__text--info {
			color: #FFFFFF;
		}

		&__text--info--plain {
			color: $u-info;
		}

		&__close {
			position: absolute;
			z-index: 999;
			top: 10px;
			right: 10px;
			border-radius: 100px;
			background-color: #C6C7CB;
			@include flex(row);
			align-items: center;
			justify-content: center;
			/* #ifndef APP-NVUE */
			transform: scale(0.6) translate(80%, -80%);
			/* #endif */
			/* #ifdef APP-NVUE */
			transform: scale(0.6) translate(50%, -50%);
			/* #endif */

			&--mini {
				width: 18px;
				height: 18px;
			}

			&--medium {
				width: 22px;
				height: 22px;
			}

			&--large {
				width: 25px;
				height: 25px;
			}
		}

	}
</style>
