<template>
	<view v-if="!$props.readonly">
		<click-input :value="valueUp" index="name" @click="showOrgPicker" :disabled="$props.readonly"
			:placeholder="$props.formProps.placeholder || '请选择人员'" pre-icon="personadd">
			<view style="flex: 1; display: flex; align-items: center;" v-for="user in valueUp || []" :key="user.id">
				<Avatar :name="user.name" :src="getRes(user.avatar)" :size="25" :showName="false" />
				<text style="margin-left: 10rpx;">{{user.name}}</text>
			</view>
		</click-input>
		<org-picker ref="orgPicker" :position="position" :multiple="$props.formProps.multiple" type="user"
			:selected="valueUp" @ok="selectOk"></org-picker>
	</view>
	<view v-else>
		<view style="flex: 1; display: flex; align-items: center;" v-for="user in valueUp || []" :key="user.id">
			<Avatar :name="user.name" :src="getRes(user.avatar)" :size="25" :showName="false" />
			<text style="margin-left: 10rpx;">{{user.name}}</text>
		</view>
	</view>
</template>
<script>
	import OrgPicker from './OrgPicker.vue'
	import Avatar from './Avatar.vue'
	import ClickInput from './ClickInput.vue'
	export default {
		props: {
			formProps: {
				type: Object,
				default: () => {
					return {}
				}
			},
			modelValue: Array,
			readonly: Boolean,
			position: {
				type: String,
				default: 'right'
			}
		},
		components: {
			ClickInput,Avatar,OrgPicker
		},
		data() {
			return {
				valueUp: [],
			}
		},
		computed: {
			_value: {
				get() {
					this.valueUp = this.$props.modelValue
					return this.$props.modelValue
				},
				set(val) {
					console.log("ryuan", val);
					this.$emit('update:modelValue', val)
					this.valueUp = val;
					// return val;
				}
			},
			//获取文件访问路径
			getRes() {
				return (url) => {
					if (url) {
						const reg = /^(http:|https:).*/gi
						return reg.test(url) ? url : this.url_config + 'image/' + url
					} else {
						return url
					}
				}
			},
		},
		onLoad() {

		},
		mounted() {

		},
		onShow() {

		},
		methods: {
			showOrgPicker() {
				if (!this.$props.readonly) {
					this.$refs.orgPicker.show()
				}
			},
			selectOk(val) {
				this._value = val;
				// this.$props.modelValue = val;
			}
		}
	}
</script>
<style>
</style>