<template>
	<el-drawer title="订单流程" v-model="visible" :size="700">
		<el-card class="step-card mb-1" v-for="item in dataList">
			<el-row>
				<el-form-item label="用户" prop="nickname">
					<el-input v-model="item.admin.name" type="input" disabled />
				</el-form-item>
			</el-row>
			<el-row>
				<el-form-item label="备注" prop="remark">
					<el-input v-model="item.remark" type="input" />
				</el-form-item>
			</el-row>
			<el-row>
				<el-form-item label="图片" prop="images">
					<div v-for="image in item.images">
						<el-image :src="image" style="width: 120px; height: 120px" :preview-src-list="item.images" />
					</div>
				</el-form-item>
			</el-row>
			<el-form-item v-if="item.status == 0" label="">
				<el-button @click="handleConfirm(item)" type="primary" class="w-40">确认</el-button>
			</el-form-item>
		</el-card>
		<el-card class="step-card mt-1" v-if="!auditStatus">
			<el-form ref="formRef" :model="formData" label-width="90px">
				<el-row>
					<el-form-item label="用户" prop="admin_id">
						<el-select v-model="formData.admin_id" filterable remote reserve-keyword placeholder="输入用户名称搜索"
							remote-show-suffix :remote-method="remoteMethodUser" :loading="userloading"
							style="width: 220px">
							<el-option v-for="item in userList" :key="item.id"
								:label="`${item.name}|${item.account}  (ID:${item.id})`" :value="item.id" />
						</el-select>
					</el-form-item>
				</el-row>
				<el-row>
					<el-form-item label="备注" prop="remark">
						<el-input v-model="formData.remark" type="input" />
					</el-form-item>
				</el-row>
				<el-row>
					<el-form-item label="图片" prop="images">
						<material-picker v-model="formData.images" :limit="20" />
					</el-form-item>
				</el-row>
				<el-form-item label="">
					<el-button @click="handleSubmit" type="primary" class="w-40">提交</el-button>
				</el-form-item>
			</el-form>
		</el-card>
		<el-card class="step-card mt-1" v-if="!auditStatus">
			<el-button @click="handleSettle" type="primary" class="w-40">完结</el-button>
		</el-card>
	</el-drawer>
</template>

<script lang="ts" setup>
	import { defineProps, defineEmits, type FormInstance } from 'vue'
	import {
		apiBeforehandOrderLogLists,
		apiBeforehandOrderLogSave,
		apiBeforehandOrderSettle,
		apiBeforehandOrderLogConfirm
	} from '@/api/beforehand_order'
	import { Plus } from '@element-plus/icons-vue'
	import type { UploadProps, UploadUserFile } from 'element-plus'
	import { adminLists } from '@/api/perms/admin'

	const props = defineProps({
		modelValue: {
			type: Boolean,
			required: true
		}
	})
	const emit = defineEmits(['update:modelValue'])

	const visible = computed({
		get: () => props.modelValue,
		set: (value) => emit('update:modelValue', value)
	})

	const formData = reactive({
		order_id: '',
		images: [],
		remark: '',
		admin_id: ''
	})
	const formRef = shallowRef<FormInstance>()

	const handleSubmit = async () => {
		await formRef.value?.validate()
		const data : any = { ...formData }
		await apiBeforehandOrderLogSave(data)
		handleClose()
	}

	const fileList = ref([])

	const auditStatus = ref(false)
	const dataList = ref([])
	const open = (id) => {
		formData.order_id = id
		auditStatus.value = false
		dataList.value = []
		apiBeforehandOrderLogLists({ order_id: id }).then((res : any) => {
			if (res.audit_status == 1) {
				auditStatus.value = true
			}
			dataList.value = res.list
		})
	}
	const handleClose = () => {
		emit('close')
	}

	const userloading = ref(false)
	const userList = ref([])
	const remoteMethodUser = (e = '') => {
		userloading.value = true
		adminLists({
			name: e,
			page_size: 10
		})
			.then((res) => {
				userList.value = res.lists
				setTimeout(() => {
					userloading.value = false
				}, 300)
			})
			.catch((err) => {
				setTimeout(() => {
					userloading.value = false
				}, 300)
			})
	}

	const handleConfirm = async (row) => {
		await apiBeforehandOrderLogConfirm(row)
		emit('close')
	}

	const handleSettle = async () => {
		await apiBeforehandOrderSettle({ id: formData.order_id })
		emit('close')
	}

	defineExpose({
		open
	})
</script>