<template>
	<view class="k-tag-button-box"
		:style="{
			'--color': color,
			'--bgcolor': bgColor,
			'--colnumber': colNumber
		}"
	>
		<block v-if="tagList && tagList.length">
			<view
				class="tag-item"
				v-for="(item,index) in tagList"
				:key="index"
				:class="{
					'width-auto': colNumber == 'auto',
					'width-col': colNumber != 'auto',
					'tag-bgcolor': item.show
				}"
				@click="tagClick(item, index)"
			>
				{{ item[nameKey] }}
			</view>
		</block>
		<view v-else class="empty">
			暂无数据
		</view>
	</view>
</template>

<script>
	/**
	 * tag列表 可以使用k-radio-group作为外框架 ---- 区别于k-radio-button
	 * @description tag列表 可以使用k-radio-group作为外框架 ---- 区别于k-radio-button
	 * @property {type} list tag数组 [{name: '', value: ''}]
	 * @property {type} mode 模式 单选(single)，多选（默认：多选(multiple)）
	 * @property {type} nameKey tag 标题字段（默认：name）
	 * @property {type} color  选中文字颜色
	 * @property {type} bgColor 选中tag背景颜色
	 * @property {type} colNumber 一行多少个tag 默认（auto）
	 * @property {type} defShowIndex 默认选中的tag索引 （数组形式）
	 * 
	 */
	export default {
		name: 'k-tag-button',
		props: {
			// 索引（在多个(for循环)地方使用时，传入会返回索引）
			index: [String, Number], 
			// tag数组 [{name: '', value: ''}]
			list: Array, 
			// 模式 单选(single)，多选（默认：多选(multiple)）
			mode: { 
				type: String,
				default: 'multiple'
			},
			 // tag 标题字段
			nameKey: {
				type: String,
				default: 'name'
			},
			// 默认文字颜色
			color: { 
				type: String,
				default: '#fff'
			},
			 // 选中tag背景颜色
			bgColor: {
				type: String,
				default: '#409EFF'
			},
			// 一行多少个tag 默认（auto）
			colNumber: { 
				type: [String, Number],
				default: 'auto'
			},
			// 默认显示的tag索引 数组[]
			defShowIndex: {
				type: Array,
				default() {
					return [];
				}
			}
		},
		data() {
			return {
				tagList: []
			}
		},
		watch: {
			list() {
				this.init()
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			tagClick(item, index) {
				let choiceList = []
				// console.log(index,item)
				if(this.mode == 'single') { // 单选
					this.tagList.map((val, ind) => {
						if(index != ind) {
							this.tagList[ind].show = false
						}
					})
					if(this.defShowIndex?.length && item.show) {
						return;
					}
					this.tagList[index].show = !item.show
					choiceList = [item]
				} else { // 多选
					choiceList = this.tagList.filter((e, i) => {
						// console.log(e, i)
						return (i != index && e.show) || (i == index && !e.show)
					})
					// console.log("====", choiceList)
					if(this.defShowIndex && this.defShowIndex.length && item.show && choiceList.length < 1) {
						choiceList.push(item)
						return;
					}
					this.tagList[index].show = !item.show
				}
				// 点击事件
				// @arg 返回 {list: 选中数组, index: 当前点击索引}
				this.$emit('change', {list: choiceList, index: this.index})
			},
			init() {
				for (let s of this.list) {
					s.show = false
				}
				if(this.list && this.list.length) {
					for (let def of this.defShowIndex) {
						this.list[def].show = true
					}
				}
				this.tagList = JSON.parse(JSON.stringify(this.list))
			}
		}
	}
</script>

<style scoped lang="scss">
	.k-tag-button-box {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		.empty {
			width: 100%;
			font-size: 16px;
			color: #bbb;
			text-align: center;
			padding: 20px 10px;
		}
		.tag-item {
			box-sizing: border-box;
			margin: 2.5px;
			border-radius: 5px;
			border: 1px solid rgba(220, 223, 230, 1);
			font-size: 14px;
			text-align: center;
			// transition: all .5s;
			background-color: #fff;
			color: #aaa;
		}
		.tag-bgcolor {
			color: var(--color) !important;
			background-color: var(--bgcolor) !important;
		}
		.width-auto {
			width: auto;
			padding: 5px 20px;
		}
		.width-col {
			width: calc(100% / var(--colnumber) - 5px);
			padding: 5px 10px;
		}
	}

</style>
