<template>
	<view class="_vli" v-if="lis.length > 0">
		<view class="_ul">
			<template v-for="(item,index) in lilist" :key="index">
				<view class="itm" :class="{_active:liid==item.id}" @tap="changeli(index)">
					{{lang(item.name)}}
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	export default {
		emits: ['change', 'update:modelValue'],
		props: {
			modelValue: {
				type: [String, Number],
				default: 0
			},
			value: {
				type: [String, Number],
				default: 0
			},
			initevent: {
				type: Boolean,
				default: false
			},
			all: {
				type: String,
				default: ''
			},
			lis: {
				type: [String, Array],
				default: []
			}
		},
		data() {
			return {
				v: ''
			};
		},
		watch: {
			value: {
				handler(newD, oldD) {
					if (newD || oldD)
						this.v = 'value';
				},
				immediate: true
			},
			modelValue: {
				handler(newD, oldD) {
					if (newD || oldD)
						this.v = 'modelValue';
				},
				immediate: true
			}
		},
		computed: {
			liid() {
				var val = '';
				if (this.v == 'modelValue') {
					val = this.modelValue + '';
				} else if (this.v == 'value') {
					val = this.value + '';
				} else {
					val = this.v;
				}
				return val;
			},
			lilist() {
				var lst = [];
				var idx = 0;
				if (this.all) {
					lst.push({
						id: '',
						name: this.all
					});
				}
				if (typeof(this.lis) == 'string') {
					const lis = this.lis.split(',');
					for (let i = 0; i < lis.length; i++) {
						const ls = lis[i].split(':');
						if (ls.length < 2)
							continue;
						lst.push({
							id: ls[0],
							name: ls[1]
						});
					}
				}
				if (this.isarray(this.lis)) {
					for (var i = 0; i < this.lis.length; i++)
						lst.push({
							...this.lis[i]
						});
				}
				return lst;
			}
		},
		mounted() {
			this._index = 0;
			if (this.initevent) {
				this.changeli(this._index);
			}
		},
		methods: {
			changeli(idx) {
				if (!this.lilist)
					return;
				if (!this.lilist[idx])
					return;
				var val = {
					_index: idx,
					...this.lilist[idx]
				};
				this._index = idx;
				this.v = val.id + '';
				this.$emit('update:modelValue', val.id);
				this.$emit('change', {
					value: val
				});
			}
		}
	}
</script>
<style scoped>
	._vli {
		overflow-x: scroll;
		overflow-y: hidden;
		background: var(--bg1);
		border-bottom: 1px solid var(--bg6);
	}

	._vli>._ul {
		display: flex;
		align-items: center;
		height: 3em;
	}

	._vli>._ul>.itm {
		flex: 1;
		position: relative;
		text-align: center;
		white-space: nowrap;
		padding: 0 0.5em;
		color: var(--txt7);
	}

	._vli>._ul>.itm._active {
		background: linear-gradient(331deg, var(--man5), var(--man7));
		background-clip: text;
		-webkit-background-clip: text;
		color: transparent;
	}

	._vli>._ul>.itm::after {
		content: "";
		position: absolute;
		border-radius: 0.3em;
		height: 0.3em;
		bottom: -0.5em;
		width: 0em;
		left: 50%;
		background: linear-gradient(331deg, var(--man5), var(--man7));
		opacity: 0;
		transition: all 0.5s;
	}

	._vli>._ul>.itm._active::after {
		width: 2em;
		opacity: 1;
		left: calc(50% - 1em);
	}
</style>