<template>
	<div>
		<Form ref="applyForm" :model="applyForm" :rules="ruleValidate" label-position="top" class="apply-form">
			<FormItem label="学校名称" prop="name">
				<Input v-model="applyForm.name"></Input>
			</FormItem>
			<FormItem label="学校简码" prop="id">
				<Input v-model="applyForm.id"></Input>
			</FormItem>
			<FormItem label="学校代码" prop="code">
				<Input v-model="applyForm.code"></Input>
			</FormItem>
			<FormItem label="学校位置">
				<!-- <Input v-model="applyForm.region"></Input> -->
				<BaseAreaPicker ref="areaPicker"></BaseAreaPicker>
				<Input type="textarea" :autosize="{minRows: 3,maxRows: 5}" v-model="applyForm.address"></Input>
			</FormItem>
			<!-- <FormItem label="学校图标">
				<Upload v-if="!isPreview" ref="upload" :show-upload-list="false" :on-success="handleSuccess"
					:format="['jpg','jpeg','png']" :max-size="2048" :on-format-error="handleFormatError"
					:on-exceeded-size="handleMaxSize" :before-upload="handleBeforeUpload" multiple type="drag"
					action="/blob/public-upload" style="display: inline-block;width:58px;">
					<div style="width: 58px;height:58px;line-height: 58px;">
						<Icon type="ios-camera" size="30"></Icon>
					</div>
				</Upload>
				<div class="apply-logo" v-else>
					<div class="apply-logo-mask">
						<Icon type="ios-trash" size="30" @click="isPreview = false"/>
					</div>
					<img :src="applyForm.picture" alt="">
				</div>
			</FormItem> -->
		</Form>
		<Button style="background-color: #168794;width: 90%;margin-left: 5%;" @click="onSubmit">提交申请</Button>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				isPreview: false,
				applyForm: {
					id: '',
					code: '',
					name: '',
					region: '',
					province: '',
					city: '',
					picture: '',
					address:''
				},
				uploadList: [],
				ruleValidate: {
					name: [{
						required: true,
						message: '学校名称不能为空 ',
						trigger: 'blur'
					}],
					id: [{
						required: true,
						message: '学校简码不能为空 ',
						trigger: 'blur'
					}],
					code: [{
						required: true,
						message: '学校代码不能为空 ',
						trigger: 'blur'
					}],
				}
			}
		},
		methods: {
			onSubmit() {
				this.$refs.applyForm.validate((valid) => {
					if (valid) {
						let pickResult = this.$refs.areaPicker.pickResult
						if(pickResult.province && pickResult.city && pickResult.area){
							
						}else{
							this.$Message.error('请选择正确的省市区！');
						}
					} else {
						this.$Message.error('请将信息填写完整！');
					}
				})
			},
			handleSuccess(res, file) {
				console.log(res)
				this.applyForm.picture = res.url
				this.isPreview = true
			},
			handleFormatError(file) {
				this.$Message.error('上传文件格式只能是jpg、jpeg、png！')
			},
			handleMaxSize(file) {
				this.$Message.error('上传文件大小不能超过10M！')
			},
			handleBeforeUpload() {

			}
		}
	}
</script>

<style lang="less">
	.apply-form {
		padding: 50px 20px;

		.ivu-form-item-label {
			color: #bbb;
			font-size: 14px;
			margin: 5px 0;
		}

		.ivu-input {
			background: #575757;
			border-color: transparent;
			height: 35px;
			color: #fff;
		}

		.ivu-input::-webkit-input-placeholder {
			color: #808080;
		}

		.ivu-select-single .ivu-select-selection {
			background: #575757;
			color: #fbfbfb;
			border-color: transparent;
			height: 35px;
		}

		.ivu-select-single .ivu-select-arrow {
			color: #fbfbfb;
		}

		.ivu-btn {
			width: 100%;
			height: 40px;
			background: rgb(11, 151, 117);
			border: none;
			color: #fff;
		}

		.ivu-upload-drag {
			background-color: transparent;
			border-color: #9a9a9a;

			.ivu-icon {
				margin-top: 14px;
			}
		}

		.apply-logo {
			position: relative;
			width: 80px;
			height: 80px;

			img {
				width: 80px;
				height: 80px;
				border-radius: 50%;
			}

			&-mask {
				position: absolute;
				background-color: #000000b8;
				width: 80px;
				height: 80px;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				border: 2px solid;
				visibility: hidden;
				cursor: pointer;
			}

			&:hover {
				.apply-logo-mask {
					visibility: visible;
				}
			}
		}

	}
</style>
