<template>
	<view>
		<u-form-item
			:label="label"
			:prop="prop"
			:required="required"
			@click="fnShowPicker"
		>
			<view class="select_content">
				<u-input
					:value="name || '请选择'"
					border="none"
					input-align="right"
					readonly
				/>
				<u-icon name="arrow-right" />
			</view>
		</u-form-item>
		<u-line />
		<u-picker
			:show="visible"
			:columns="[columns]"
			key-name="NAME"
			:default-index="[defaultIndex]"
			@cancel="visible = false"
			@confirm="fnConfirm"
		/>
	</view>
</template>

<script>
import { getPersonnelList } from "@/api";

export default {
	props: {
		label: {
			type: String,
			default: "人员",
		},
		prop: {
			type: String,
			default: "",
		},
		required: {
			type: Boolean,
			default: true,
		},
		departmentId: {
			type: String,
			required: true,
		},
	},
	data() {
		return {
			name: "",
			id: "",
			visible: false,
			columns: [],
			defaultIndex: 0,
		};
	},
	watch: {
		departmentId(newVal) {
			// this.fnGetData(newVal);
		},
	},
	mounted() {
		// this.fnGetData(this.departmentId);
	},
	methods: {
		async fnGetData(DEPARTMENT_ID) {
			const resData = await getPersonnelList({
				DEPARTMENT_ID,
				NOMAIN: "1",
			});
			this.columns = resData.userList;
		},
		fnShowPicker() {
			this.visible = true;
			this.defaultIndex = 0;
			for (let i = 0; i < this.columns.length; i++) {
				if (this.columns[i].USER_ID === this.id) {
					this.defaultIndex = i;
					break;
				}
			}
		},
		fnConfirm(event) {
			this.name = event.value[0].NAME;
			this.id = event.value[0].USER_ID;
			this.visible = false;
		},
	},
};
</script>

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