<template>
	<view class="_selpage">
		<view class="_show" :class="{_left:left}">
			<view class="btn sm" :class="{dis:disabled}" @tap="selpage">{{btn}}</view>
			<view class="_txt" :style="style2obj(ciystyle, {color:disabled?'var(--bg6)':'var(--txt9)'})" v-if="tvalue.id>0">
				<slot :data="tvalue">
					<view v-html="tvalue.name"></view>
				</slot>
			</view>
			<view class="_txt" :style="style2obj(ciystyle, {color:'var(--txt1)'})" v-else>{{placeholder?placeholder:lang('placeholder.select')}}</view>
		</view>
		<input type="hidden" :name="name" :value="tvalue.id" style="display:none;" />
		<input v-if="hasmore" type="hidden" :name="name+'_more'" :value="tvalue._more" style="display:none;" />
	</view>
</template>
<script>
	export default {
		behaviors: ['uni://form-field-group'],
		emits: ['change', 'update:modelValue'],
		props: {
			name: {
				type: String
			},
			modelValue: {
				type: [String, Number],
				default: ''
			},
			value: {
				type: [String, Number],
				default: ''
			},
			disabled: {
				type: Boolean,
				default: false
			},
			initevent: {
				type: Boolean,
				default: false
			},
			ciystyle: {
				type: [String, Object]
			},
			left: {
				type: Boolean,
				default: false
			},
			hasmore: {
				type: Boolean,
				default: false
			},
			placeholder: {
				type: String,
				default: '请选择'
			},
			morevalue: {
				type: Object,
				default: {}
			},
			btn: {
				type: String,
				default: '选取'
			},
			page: {
				type: String,
				default: ''
			},
		},
		data() {
			return {
				innermore: {},
				v: {
					id: 0,
					_more: ''
				},
			};
		},
		watch: {
			value: {
				handler(newD, oldD) {
					if (newD || oldD)
						this.v = 'value';
				},
				immediate: true
			},
			modelValue: {
				handler(newD, oldD) {
					if (newD)
						this.v = 'modelValue';
				},
				immediate: true
			},
			morevalue: {
				handler(newD, oldD) {
					this.v = this.modelValue || this.value;
					this.innermore = {
						...newD
					};
				},
				immediate: true
			},
		},
		computed: {
			tvalue() {
				var val = '';
				var valmore = {
					...this.innermore
				};
				if (this.v == 'modelValue') {
					if (typeof(this.modelValue) == 'number')
						val = this.modelValue;
					else
						val = this.modelValue;
					valmore.id = val;
				} else if (this.v == 'value') {
					if (typeof(this.value) == 'number')
						val = this.value;
					else
						val = this.value;
					valmore.id = val;
				} else if (this.v instanceof Object) {
					valmore = {
						...this.v
					};
				} else {
					valmore.id = this.v;
				}
				valmore._more = this.setstrparam(valmore);
				return valmore;
			}
		},
		mounted() {
			if (this.initevent) {
				this.$emit('change', {
					name: this.name,
					from: 'init',
					value: {
						...this.tvalue
					}
				});
			}
		},
		methods: {
			selpage(e) {
				if (this.disabled)
					return;
				uni.navigateTo({
					url: this.page + '?sel=true&id=' + this.tvalue.id,
					events: {
						writedata: data => {
							this.v = {
								...data
							};
							this.innermore = {
								...data
							};
							this.$emit('update:modelValue', data.id);
							this.$emit('change', {
								name: this.name,
								from: 'selpage',
								value: {
									...data
								}
							});
						}
					}
				});
			},
		}
	}
</script>
<style scoped>
	._selpage {
		position: relative;
	}

	._selpage ._show {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		flex-direction: row-reverse;
		gap: 0.5em;
	}

	._selpage ._show._left {
		flex-direction: row;
	}

	._selpage ._show._left ._txt {
		text-align: left;
	}
</style>