<template>
	<div class="formCss"> 
		<div>
			<el-form :model="formData" :rules="rules" label-width="80px" ref="form">
				<el-form-item label="姓名" prop="caller">
					<el-input v-model="formData.caller" />
				</el-form-item>
				<el-form-item label="手机号" prop="callnum">
					<el-input v-model="formData.callnum" />
				</el-form-item>
				<el-form-item label="工单类型" prop="workordercate">  
					<el-cascader style="width:100%" v-model="formData.workordercate" :options="workordercateList1" :props="{ label : 'label', value : 'id' }" /> 
				</el-form-item>
				<el-form-item label="项目" prop="project">
					<el-select  v-model="formData.project" class="m-2" placeholder="请选择">
						<el-option
							v-for="( item , index ) in projectList1"
							:key="index"
							:label="item.dictLabel"
							:value="item.dataId"
						/>
					</el-select>
				</el-form-item>
				<el-form-item label="工单内容" prop="content">
					<el-input type="textarea" v-model="formData.content" />
				</el-form-item>
			</el-form>
			<el-button type="primary" @click="add">提交留言</el-button>
		</div>  
	</div>
</template>

<script setup> 
	import {
		getPageListData,
		deletePageData,
		createPageData,
		editPageData
	} from '@/api/main/system/system'

	import { ref , reactive } from 'vue'; 

  	const { proxy } = getCurrentInstance()
 
    const workordercateList1 = ref([]);

	const projectList1 = ref([]);

 
	const rules = reactive({
		caller:[
			{
				required: false,
				message: '请输入姓名',
				trigger: 'change',
			},
		],
		callnum:[
			{
				pattern : /^1[3-9][0-9]{9}$/ ,
				required: true,
				message: '请输入手机号',
				trigger: 'change',
			},
		],
		workordercate:[
			{
				required: true,
				message: '请输入工单类型',
				trigger: 'change',
			},
		],
		project:[
			{
				required: true,
				message: '请输入项目',
				trigger: 'change',
			},
		],
		content:[
			{
				required: true,
				message: '请输入工单内容',
				trigger: 'change',
			},
		],
	})
 
	const formData = ref({
		caller : '',
		callnum : '',
		workordercate : '',
		project : '',
		content : '',
		isend : 0
	})


	getPageListData( '/system/dict/data',{ dictType:'work_project' } ).then( ({data}) => {
		projectList1.value = data;

		let url = new URL(location.href);
		let projectData = url.searchParams.get('project');

		for (const val of projectList1.value) {
			if(val.dictValue == projectData){
				formData.value.project = val.dataId;
				break;
			}
		}
	})


	getPageListData('/worker/type/treeselect').then( ({data}) => {  
		workordercateList1.value = data
	})
	
	
	const form = ref('')


	function add (){
		form.value.validate().then(()=>{
			
			formData.value['customerno'] = formData.value.callnum;
			formData.value['source'] = '留言';
			formData.value['workordercate'] = formData.value.workordercate[formData.value.workordercate.length-1]
 
			createPageData('/order/workorder/addbyly' , formData.value).then(data=>{
				proxy.$modal.msgSuccess('留言成功！'); 
				formData.value = {
					caller : '',
					callnum : '',
					workordercate : '',
					project : '',
					content : '',
					isend : 0
				}
			})
		}) 
	}
 

</script>

<style lang="scss" scoped>
	.el-select{
		width: 100%;
	}

	.formCss{
		max-width: 500px; 

		width: 95%;

		margin: 0 auto;

		.el-button{ 
			width: 100%; 	
		}
	}

</style>