<template>
	<view>
		<u-form-item
			:label="label"
			:prop="prop"
			:required="required"
			@click="visible = true"
		>
			<div class="select_content">
				<u-input
					:value="name || '请选择'"
					border="none"
					input-align="right"
					readonly
				></u-input>
				<u-icon name="arrow-right" />
			</div>
		</u-form-item>
		<u-line />
		<department :visible.sync="visible" :value="id" @confirm="fnConfirm" />
	</view>
</template>

<script>
import Department from "./department.vue";

export default {
	components: { Department },

	props: {
		label: {
			type: String,
			default: "部门",
		},
		prop: {
			type: String,
			default: "",
		},
		required: {
			type: Boolean,
			default: true,
		},
		clearKey: {
			type: String,
			default: "",
		},
	},

	data() {
		return {
			name: "",
			id: "",
			form: {},
			visible: false,
		};
	},

	methods: {
		fnConfirm(event) {
			this.name = event[0].name;
			this.id = event[0].id;
			if (JSON.stringify(this.form) !== "{}" && this.clearKey) {
				const clearKeys = this.clearKey.split(",");
				for (let i = 0; i < clearKeys.length; i++) {
					this.form[clearKeys[i]] = "";
				}
			}
			this.visible = false;
		},
	},
	
};
</script>

<style scoped lang="scss"></style>
