<template>
	<view :class="['u-theme-' + cTheme, 'u-checktag-group', 'u-clearfix']" :style="[checktagStyle]">
		<view
			v-for="(item, index) in data"
			:key="index"
			@tap="onClickLabel(item)"
		>
			<view
				:style="[activeStyle(item[props.code]), labelStyle(item[props.code])]"
				:class="[
					'u-checktag',
					hasPrefix || hasSuffix ?  'u-checktag-between' : '',
					isActive(item[props.code])
						? 'u-checktag--active--' + elActiveColorType
						: '',
					'u-checktag__label',
					isActive(item[props.code])
						? 'u-checktag__label--active--' + elActiveColorType
						: '',
					item[props.disabled] ? 'u-checktag__label--disabled' : ''
				]"
			>
				<view class="u-flex u-row-between">
					<view class="u-flex u-row-between">
						<view class="u-flex" v-if="(item[props.inActiveIcon] || item[props.activeIcon]) && hasPrefix">
							<image class="prefix" :src="isActive(item[props.code]) ? item[props.activeIcon] : item[props.inActiveIcon]" mode="widthFix"></image>
						</view>
						<span>{{ item[props.name] }}</span>
					</view>
				</view>
				<view class="u-flex suffix" :style="numStyle" v-if="item[props.num] && hasSuffix">{{item[props.num]}}</view>
			</view>
		</view>
	</view>
</template>

<script>
/**
 * checktag 复选标签
 * @description 该组件需要搭配checktagGroup组件使用，以便用户进行操作时，获得当前复选框组的选中情况。
 * @property {String Number} label-size label字体大小，单位rpx（默认28）
 * @property {Boolean} disabled 是否禁用
 * @event {Function} change 某个checktag状态发生变化时触发，回调为一个对象
 * @example <u-checktag v-model="checked" :disabled="false">天涯</u-checktag>
 */
export default {
	name: "u-checktag",
	emits: ["update:modelValue", "input", "change"],
	props: {
		// 是否为选中状态
		value: {
			type: Array,
			default: () => []
		},
		modelValue: {
			type: Array,
			default: () => []
		},
		data: {
			type: Array,
			default: () => []
		},
		// 最多能选中多少个checktag
		max: {
			type: [Number, String],
			default: 999
		},
		// 选中状态下的颜色，如设置此值，将会覆盖checktagGroup的activeColor值
		activeColor: {
			type: String,
			default: ""
		},
		// label的字体大小，rpx单位
		labelSize: {
			type: [String, Number],
			default: ""
		},
		// num字体大小，rpx单位
		numSize: {
			type: [String, Number],
			default: ""
		},
		// 关怀模式: normal, care
		theme: {
			type: String,
			default: ""
		},
		// 颜色 类型
		type: {
			type: String,
			default: ""
		},
		span: {
			type: [String, Number],
			default: 1
		},
		gutter: {
			type: [String, Number],
			default: 40
		},
		padding: {
			type: [String, Number],
			default: 24
		},
		props: {
			type: Object,
			default() {
				return {
					name: "name",
					code: "code",
					disabled: "disabled",
					inActiveIcon: "inActiveIcon",
					activeIcon: "activeIcon",
					num: "num"
				};
			}
		},
		hasPrefix: {
			type: Boolean,
			default: false
		},
		hasSuffix: {
			type: Boolean,
			default: false
		},
	},
	data() {
		return {};
	},
	computed: {
		// 组件选中激活时的颜色
		elActiveColor() {
			return this.activeColor ? this.activeColor : "";
		},
		elActiveColorType() {
			return this.type ? this.type : "primary";
		},
		checktagStyle() {
			// 中间间距
			let width = this.gutter * (Number(this.span) - 1) + "rpx";
			let percentage = `(100% - ${width}) / ${Number(this.span)}`
			let style = {
				'grid-template-columns': `repeat(${this.span}, calc(${percentage})`,
				'grid-gap': `${this.padding}rpx ${this.gutter}rpx`
			};
			return style;
		},
		cTheme() {
			return this.theme || (uni.$u || {}).theme;
		},
		cLabelSize() {
			if (this.labelSize) {
				return this.cTheme === "care"
					? (parseFloat(this.labelSize) * 4) / 3
					: this.labelSize;
			} else {
				return false;
			}
		},
		cNumSize() {
			if (this.numSize) {
				return this.cTheme === "care"
					? (parseFloat(this.numSize) * 4) / 3
					: this.numSize;
			} else {
				return false;
			}
		},
		labelStyle() {
			return value => {
				let styles = {};
				if (this.elActiveColor  && this.isActive(value)) styles.color = this.elActiveColor;
				if (this.cLabelSize)
					styles.fontSize = this.$u.addUnit(this.cLabelSize);
				return styles;
			};
		},
		numStyle() {
			let styles = {};
			if (this.cNumSize)
				styles.fontSize = this.$u.addUnit(this.cNumSize);
			return styles;
		},
		activeStyle() {
			return value => {
				let styles = {};
				if (this.elActiveColor && this.isActive(value))
					styles.border = `2rpx solid ${this.elActiveColor}`;
				return styles;
			};
		},
		// 是否激活
		isActive() {
			return value => {
				if (this.getValue().indexOf(value) > -1) {
					return true;
				}
				return false;
			};
		}
	},
	methods: {
		getValue() {
			// #ifndef VUE3
			return this.value;
			// #endif

			// #ifdef VUE3
			return this.modelValue;
			// #endif
		},
		onClickLabel(value) {
			if (!value[this.props.disabled]) {
				this.setValue(value);
			}
		},
		// 设置input的值，这里通过input事件，设置通过v-model绑定的组件的值
		setValue(obj) {
			let value = false;
			let index = this.getValue().indexOf(obj[this.props.code]);
			if (index === -1) {
				// 如果超出最多可选项，提示
				if (this.getValue().length >= this.max) {
					return this.$u.toast(`最多可选${this.max}项`);
				}
				this.getValue().push(obj[this.props.code]);
				value = true;
			} else {
				this.getValue().splice(index, 1);
			}
			this.$emit("change", obj);
			this.$emit("input", this.getValue());
			this.$emit("update:modelValue", this.getValue());
		}
	}
};
</script>

<style lang="scss" scoped>
@import "../../libs/css/style.components.scss";
.u-checktag-group {
	width: 100%;
	/* #ifndef MP || APP-NVUE */
	display: grid;
	/* #endif */
	align-items: center;
	justify-content: space-between;
}
@include themify($themes) {
	.u-checktag {
		width: 100%;
		/* #ifndef APP-NVUE */
		display: inline-flex;
		/* #endif */
		align-items: center;
		justify-content: center;
		overflow: hidden;
		user-select: none;
		// line-height: 1.8;
		background: themed("u-border-color-light");
		border: 2rpx solid themed("u-border-color-light");
		height: themed("grid-size-32");
		border-radius: 8rpx;
		box-sizing: border-box;
		&-between {
			justify-content: space-between;
		}
		.prefix {
			margin-right: themed("grid-size-8");
			width: themed("grid-size-20");
			height: themed("grid-size-20");
		}
		.suffix {
			font-family: BebasNeue-Regular;
			font-size: themed("font-size-16");
		}
		&--active {
			&--primary {
				border: 2rpx solid themed("u-type-primary");
			}
			&--success {
				border: 2rpx solid themed("u-type-success");
			}
			&--error {
				border: 2rpx solid themed("u-type-error");
			}
			&--warning {
				border: 2rpx solid themed("u-type-warning");
			}
		}

		&__label {
			word-wrap: break-word;
			padding: 0 themed("grid-size-12");
			color: themed("u-content-color");
			font-size: themed("font-size-12");
			font-weight: 500;
			&--active {
				&--primary {
					color: themed("u-type-primary");
				}
				&--success {
					color: themed("u-type-success");
				}
				&--error {
					color: themed("u-type-error");
				}
				&--warning {
					color: themed("u-type-warning");
				}
			}
			&--disabled {
				color: themed("u-border-color");
			}
		}
	}
}
</style>
