<template>
	<view class="workcase-creator-mask" @tap="onClose" v-if="show">
		<view class="workcase-creator" @tap.stop>
			<view class="creator-header">
				<text class="header-title">创建工单</text>
			</view>

			<scroll-view class="creator-content" scroll-y="true">
				<view class="form-item">
					<text class="label">工单标题</text>
					<input class="input" v-model="form.title" placeholder="请输入工单标题" maxlength="50" />
				</view>

				<view class="form-item">
					<text class="label">问题分类</text>
					<picker class="picker" :value="categoryIndex" :range="categories" @change="onCategoryChange">
						<view class="picker-content">
							<text class="picker-text">{{categories[categoryIndex]}}</text>
							<text class="picker-arrow">></text>
						</view>
					</picker>
				</view>

				<view class="form-item">
					<text class="label">紧急程度</text>
					<picker class="picker" :value="priorityIndex" :range="priorities" @change="onPriorityChange">
						<view class="picker-content">
							<text class="picker-text">{{priorities[priorityIndex]}}</text>
							<text class="picker-arrow">></text>
						</view>
					</picker>
				</view>

				<view class="form-item">
					<text class="label">问题描述</text>
					<textarea class="textarea" v-model="form.description" placeholder="请详细描述遇到的问题..." maxlength="500" />
					<text class="char-count">{{form.description.length}}/500</text>
				</view>

				<view class="form-item">
					<text class="label">联系方式</text>
					<input class="input" v-model="form.contact" placeholder="请输入您的联系方式" />
				</view>

				<view class="form-item">
					<text class="label">上传图片</text>
					<view class="upload-area">
						<view class="upload-item" v-for="(item, index) in form.images" :key="index">
							<image class="upload-image" :src="item" mode="aspectFill" />
							<view class="delete-btn" @tap="deleteImage(index)">
								<text class="delete-icon">×</text>
							</view>
						</view>
						<view class="upload-btn" v-if="form.images.length < 3" @tap="chooseImage">
							<text class="upload-plus">+</text>
							<text class="upload-text">添加图片</text>
						</view>
					</view>
					<text class="upload-tip">最多上传3张图片</text>
				</view>
			</scroll-view>

			<view class="creator-footer">
				<button class="cancel-btn" @tap="onCancel">取消</button>
				<button class="submit-btn" @tap="onSubmit" :disabled="!canSubmit">提交工单</button>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, computed, defineProps, defineEmits } from 'vue'

	// 接口定义
	interface WorkcaseForm {
		title : string
		description : string
		contact : string
		images : string[]
	}

	interface WorkcaseData extends WorkcaseForm {
		category : string
		priority : string
	}

	// Props 定义
	interface Props {
		show ?: boolean
	}

	const props = withDefaults(defineProps<Props>(), {
		show: false
	})

	// Emits 定义
	const emits = defineEmits<{
		close : []
		success : [data: WorkcaseData]
	}>()

	// 响应式数据
	const form = ref<WorkcaseForm>({
		title: '',
		description: '',
		contact: '',
		images: []
	})

	const categories = ref<string[]>(['设施报修', '环境卫生', '交通问题', '安全隐患', '其他问题'])
	const categoryIndex = ref<number>(0)
	const priorities = ref<string[]>(['一般', '紧急', '非常紧急'])
	const priorityIndex = ref<number>(0)

	// 计算属性
	const canSubmit = computed(() => {
		return form.value.title.trim() &&
			form.value.description.trim() &&
			form.value.contact.trim()
	})

	// 方法定义
	function onClose() {
		emits('close')
	}

	function onCancel() {
		resetForm()
		emits('close')
	}

	function onCategoryChange(e : any) {
		categoryIndex.value = e.detail.value
	}

	function onPriorityChange(e : any) {
		priorityIndex.value = e.detail.value
	}

	function chooseImage() {
		uni.chooseImage({
			count: 3 - form.value.images.length,
			sizeType: ['compressed'],
			sourceType: ['camera', 'album'],
			success: (res) => {
				form.value.images.push(...res.tempFilePaths)
			},
			fail: (err) => {
				console.log('选择图片失败:', err)
			}
		})
	}

	function deleteImage(index : number) {
		form.value.images.splice(index, 1)
	}

	function onSubmit() {
		if (!canSubmit.value) {
			uni.showToast({
				title: '请完善必填信息',
				icon: 'none'
			})
			return
		}

		const workcaseData : WorkcaseData = {
			title: form.value.title.trim(),
			category: categories.value[categoryIndex.value],
			priority: priorities.value[priorityIndex.value],
			description: form.value.description.trim(),
			contact: form.value.contact.trim(),
			images: form.value.images
		}

		uni.showLoading({
			title: '提交中...'
		})

		// 模拟提交
		setTimeout(() => {
			uni.hideLoading()
			uni.showToast({
				title: '工单提交成功',
				icon: 'success'
			})
			resetForm()
			emits('success', workcaseData)
		}, 1500)
	}

	function resetForm() {
		form.value = {
			title: '',
			description: '',
			contact: '',
			images: []
		}
		categoryIndex.value = 0
		priorityIndex.value = 0
	}
</script>

<style lang="scss" scoped>
	@import './WorkcaseCreator.scss';
</style>