<template>
	<el-container>
		<el-header class="serveTitle">问题单</el-header>
		<el-main class="serveMain">
			<el-form ref="form" :model="form" :rules="rules">
				<el-form-item label="问题类型" prop="type" label-position="top">
					<div class="typeRow">
						<el-button v-model="form.type" @click="form.type = item.value" :size="size" :type="form.type===item.value?'primary':''" class="typeCol" v-for="(item,index) in typeList" :key="index">{{item.label}}</el-button>
					</div>
				</el-form-item>
				<el-form-item label="机器序列号" prop="serial_number" label-position="top">
					<el-input v-model="form.serial_number" :size="size" class="formInput" type="text" placeholder="请输入您的序列号"></el-input>
				</el-form-item>
				<el-form-item label="购买时间" prop="purchase_time" label-position="top">
					<el-date-picker v-model="form.purchase_time" :size="size" value-format="YYYY-MM-DD" class="formInput" placeholder="请选择您的购买时间"></el-date-picker>
				</el-form-item>
				<el-form-item label="上传附件" prop="attachment" label-position="top">
					<ossImgListUpload :list="form.attachment" :length="20" @parentParams="faultParentParams" />
					<p class="el-form-item-msg">请将图片拖到此处，或点击上传PNG、JPEG</p>
				</el-form-item>
				<el-form-item label="备注" label-position="top">
					<el-input v-model="form.remark" class="formInputText" :size="size" type="textarea" :rows="4" resize="none" :autosize="false" placeholder="请详细的描述您的问题"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="save" :size="size" :loading="isSave">提 交</el-button>
				</el-form-item>
			</el-form>
		</el-main>
	</el-container>
</template>

<script>
export default {
	name: "problem",
	data(){
		return{
			size:"small",
			typeList:[],
			isSave:false,
			form:{
				type:"",
				serial_number:"",
				purchase_time:"",
				attachment:[],
				remark:""
			},
			rules:{
				type:[
					{required:true,message:"问题类型不能为空"},
				],
				serial_number:[
					{required:true,message:"机器序列号不能为空"},
				],
				purchase_time:[
					{required:true,message:"购买时间不能为空"},
				]
			}
		}
	},
	mounted() {
		this.getTypeList();
	},
	methods:{
		async getTypeList() {
			const res = await this.$API.customer.serviceTypeList.post();
			if(res.code === 200){
				this.typeList = res.data;
			}
		},
		faultParentParams(item){
			this.form.attachment = item;
		},
		save(){
			this.$refs.form.validate(async (valid) => {
				if (valid) {
					this.isSave = true;
					const res = await this.$API.customer.orderSubmit.post(this.form);
					this.isSave = false;
					if(res.code == 200){
						this.$message.success("操作成功");
						this.form={
							type:"",
							serial_number:"",
							purchase_time:"",
							attachment:[],
							remark:""
						}
						this.$refs.form.resetFields();
					}
				}else{
					return false;
				}
			})
		}
	}
}
</script>

<style scoped lang="scss">
	.typeRow{
		.typeCol{
			margin-top: 5px;
			margin-bottom: 5px;
		}
	}
	.serveMain{
		::v-deep .formInput{
			width: 300px;
		}
	}
	.formInputText{
		width: 800px;
	}
</style>
