<!-- 选择供应商 -->
<template>
	<view class="container">
		<view @click="show = true">
			<u-input v-model="vendorName" readonly suffixIcon="arrow-down" placeholder="请选择供应商"></u-input>
		</view>
		<u-picker
			title="选择供应商"
			:show="show"
			:columns="columns"
			keyName="name"
			@close="show = false"
			closeOnClickOverlay
			@cancel="show = false"
			@confirm="confirmHandle"
		></u-picker>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getVendorList } from '@/http/api/vendor.js';

const vendorName = ref('');

const vendorId = defineModel({
	type: [String, Number],
	default: ''
});

const show = ref(false);
const columns = ref([]);

function confirmHandle(e) {
	let data = e.value[0];
	vendorId.value = data.id;
	vendorName.value = data.name;
	show.value = false;
}

// 获取供应商列表
async function getVendorListAjax() {
	try {
		const res = await getVendorList();
		columns.value = [res];
	} catch (error) {
		console.log(error);
	}
}

onMounted(() => {
	getVendorListAjax();
});
</script>

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