<template>
	<div class="edit-popup">
		<popup ref="popupRef" title="复制订单" :async="true" width="550px" @confirm="handleSubmit"
			@close="handleClose">
			<el-form ref="formRef" :model="formData" label-width="90px">
				<el-form-item label="门店" prop="store_id" style="width: 300px">
					<el-select v-model="formData.store_id" filterable remote reserve-keyword placeholder="输入门店名称搜索"
						remote-show-suffix :remote-method="remoteMethod" :loading="storeloading" style="width: 240px">
						<el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id" />
					</el-select>
				</el-form-item>
				<el-form-item label="备注" prop="mark">
					<el-input v-model="formData.mark" clearable placeholder="请输入备注" :readonly="false" />
				</el-form-item>
			</el-form>
		</popup>
	</div>
</template>

<script lang="ts" setup name="warehouseOrderEdit">
	import type { FormInstance } from 'element-plus'
	import Popup from '@/components/popup/index.vue'
	import {
		apiBeforehandOrderCopy
	} from '@/api/beforehand_order'
	import { apiSystemStoreLists } from '@/api/system_store'
	import { timeFormat } from '@/utils/util'
	import type { PropType } from 'vue'
	const emit = defineEmits(['success', 'close'])
	const formRef = shallowRef<FormInstance>()
	const popupRef = shallowRef<InstanceType<typeof Popup>>()

	const storeloading = ref(false)
	const storeList = ref([])
	const remoteMethod = (e = '') => {
		storeloading.value = true
		apiSystemStoreLists({
			name: e,
			page_size: 50
		}).then((res) => {
			storeList.value = res.lists
			setTimeout(() => {
				storeloading.value = false
			}, 300)
		})
	}

	// 表单数据
	const formData = reactive({
		id: '',
		store_id: '',
		mark: ''
	})

	// 提交按钮
	const handleSubmit = async () => {
		const data = { ...formData }
		await apiBeforehandOrderCopy(data)
		popupRef.value?.close()
		emit('success')
	}

	//打开弹窗
	const open = (id) => {
		formData.id = id
		popupRef.value?.open()
	}

	// 关闭回调
	const handleClose = () => {
		emit('close')
	}

	defineExpose({
		open
	})
</script>