<template>
	<div class="select-input">
		<!-- 用途 -->
		<div class="purpose" v-if="type == 1">
			<Select
				v-model="purposeIndex"
				style="width: 200px"
				@on-change="selectPurposeFn"
				filterable
			>
				<div slot="empty">无匹配数据</div>
				<Option :value="999">全部</Option>
				<Option
					v-for="(i, index) in selectPurposeList"
					:value="index"
					:key="index"
					>{{ i.purpose }}</Option
				>
			</Select>
		</div>
		<!-- 供应商 -->
		<div v-if="type == 2">
			<Poptip trigger="focus" width="250" placement="bottom">
				<div slot="content">
					<ul style="" class="commons-select-search">
						<li
							:key="i.id"
							v-for="i in supplierList"
							@click="supplierListCk(i)"
						>
							{{ i.name }}
						</li>
					</ul>
				</div>
				<Input
					v-model="inputValue"
					@on-change="getSupplierSelectList"
					placeholder="请输入供应商关键词"
				></Input>
			</Poptip>
		</div>
		<!-- 物料 -->
		<div v-if="type == 3">
			<Poptip trigger="focus" width="250" placement="bottom">
				<div slot="content">
					<ul style="" class="commons-select-search">
						<li
							:key="i.id"
							v-for="i in materialList"
							@click="materialListCk(i)"
						>
							{{ i.name }}
						</li>
					</ul>
				</div>
				<Input
					v-model="inputValue"
					@on-change="getMaterialSelectList"
					placeholder="请输入物料名称"
				></Input>
			</Poptip>
		</div>
		<!-- 人员 -->
		<div v-if="type == 4">
			<Select
				v-model="inputValue"
				style="width: 200px"
				@on-change="materialListCk"
				filterable
			>
				<div slot="empty">无匹配数据</div>
				<Option
					v-for="i in userList"
					:value="i.label"
					:key="i.id"
					>{{ i.label }}</Option
				>
			</Select>
			<!-- <Poptip trigger="focus" width="250" placement="bottom">
				<div slot="content">
					<ul style="" class="commons-select-search">
						<li
							:key="i.id"
							v-for="i in userList"
							@click="materialListCk(i)"
						>
							{{ i.label }}
						</li>
					</ul>
				</div>
				<Input
					v-model="inputValue"
					@on-change="getUUserList"
					placeholder="请输入物料名称"
				></Input>
			</Poptip> -->
		</div>
	</div>
</template>

<script>
import axios from 'axios'
export default {
	props: {
		//1 用途 2 物料 3供应商
		type: String,
		value: {
			type: String,
			default: '',
			require: true,
		},
	},
	name: '',
	watch: {
		value: {
			handler() {
				console.log(this.value)
				this.$emit('input', this.value)
			},
			immediate: true,
		},
	},
	data() {
		return {
			purposeIndex: null,
			selectPurposeList: [],
			inputValue: this.value,
			supplierList: [],
			materialList: [],
			userList:[],
		}
	},
	methods: {
		getMaterialSelectList() {
			const v = this
			v.loading = true
			axios
				.post('/cloudApi/material/selectList', {
					pageNum: 1,
					pageSize: 10,
					search: this.inputValue,
				})
				.then((res) => {
					v.materialList = res.data.data
					v.loading = false
				})
		},
		getSupplierSelectList(req) {
			const v = this
			v.loading = true
			axios
				.post('/cloudApi/supplier/selectList', {
					search: this.inputValue,
				})
				.then((res) => {
					v.supplierList = res.data.data
					v.loading = false
					console.log(v.supplierList)
				})
		},
		getUUserList(req) {
			const v = this
			v.loading = true
			axios
				.post('/cloudApi/uUser/list', {
					deptIdList: ['A012', 'A008', 'A007', 'A017', 'A005'],
				})
				.then((res) => {
					let list = res.data.data.map((item) => {
						return {
							label: item.realname,
							value: item.id,
							name: item.realname,
						}
					})
					this.userList = list
				})
		},
		materialListCk(i) {
			console.log(i)
			this.inputValue = i.name
			this.$emit('input', i.name)
			this.$emit('onChange', i.name)
		},
		supplierListCk(i) {
			console.log(i)
			this.inputValue = i.name
			this.$emit('input', i.name)
		},
		selectPurposeFn(e) {
			console.log(e)
			if (e == 999) {
				this.inputValue = ''
				this.$emit('input', '')
			} else {
				this.inputValue = this.selectPurposeList[e].purpose
				this.$emit('input', this.selectPurposeList[e].purpose)
			}
		},
		getMaterialSelectPurposeList() {
			const v = this
			v.loading = true
			axios
				.get('/cloudApi/material/selectPurposeList?purpose=' + '', {})
				.then((res) => {
					v.selectPurposeList = res.data.data
					v.loading = false
				})
		},
	},
	created() {
		const v = this
		if (v.type == undefined) {
			console.log('请配置type //1 用途 2 物料 3供应商')
			return
		}
		switch (v.type) {
			case '1':
				v.getMaterialSelectPurposeList()
				break
			case '2':
				v.getSupplierSelectList()
			case '3':
				v.getMaterialSelectList()
			case '4':
				v.getUUserList()
			default:
				break
		}
	},
}
</script>

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