<template>
	<div>
		<Form ref="applyForm" :model="applyForm" :rules="ruleValidate" label-position="top" class="apply-form">
			<FormItem :label="$t('settings.applyForm.name')" prop="name">
				<Input v-model="applyForm.name" :placeholder="$t('settings.applyForm.place0')"></Input>
			</FormItem>
			<FormItem :label="$t('settings.applyForm.period')" prop="period">
				<!-- <Input v-model="applyForm.name" :placeholder="$t('settings.applyForm.place0')"></Input> -->
				<Select v-model="applyForm.period" multiple>
					<Option v-for="(item, index) in periodList" :value="item" :key="index">{{ item }}</Option>
				</Select>
			</FormItem>
			<FormItem :label="$t('settings.applyForm.orgCode')" prop="orgCode">
				<Input v-model="applyForm.orgCode" :placeholder="$t('settings.applyForm.place7')"></Input>
			</FormItem>
			<FormItem :label="$t('settings.applyForm.manager')" prop="manager">
				<Input v-model="applyForm.manager" :placeholder="$t('settings.applyForm.place5')"></Input>
			</FormItem>
			<!-- <FormItem label="学校代码" prop="code">
				<Input v-model="applyForm.code"></Input>
			</FormItem> -->
			<FormItem :label="$t('settings.applyForm.cellphone')" prop="cellphone">
				<Input v-model="applyForm.cellphone" :placeholder="$t('settings.applyForm.place3')"></Input>
			</FormItem>
			<FormItem :label="$t('settings.applyForm.address')" prop="address">
				<BaseAreaPicker ref="areaPicker" v-if="isChinaSite"></BaseAreaPicker>
				<div class="country-select" v-if="!isChinaSite">
					<Select v-model="curCountry" filterable :placeholder="$t('settings.applyForm.place6')" @on-change="onCountrySelect">
						<Option v-for="(country,index) in countryArr" :value="country.cn" :key="index" >{{ country.cn }}</Option>
					</Select>
					<!-- 如果国际站选择的地区是台湾则要显示台湾的城市和区选择 -->
					<template v-if="isShowTw">
						<Select v-model="curTwCityIndex" filterable :placeholder="$t('settings.applyForm.place6')" @on-change="onTwCitySelect" style="margin: 0 10px;">
							<Option v-for="(city,index) in twCityArr" :value="index" :key="index" >{{ city.city }}</Option>
						</Select>
						<Select v-model="curTwAreaIndex" filterable :placeholder="$t('settings.applyForm.place6')">
							<Option v-for="(area,areaIndex) in curTwCity.areas" :value="areaIndex" :key="areaIndex" >{{ area.area }}</Option>
						</Select>
					</template>
					
				</div>
				<Input type="textarea" :autosize="{minRows: 3,maxRows: 5}" v-model="applyForm.address" :placeholder="$t('settings.applyForm.place2')"></Input>
			</FormItem>
			
			<!-- <FormItem :label="$t('settings.applyForm.content')" prop="content">
				<Input type="textarea" :autosize="{minRows: 3,maxRows: 5}" v-model="applyForm.content" :placeholder="$t('settings.applyForm.place4')"></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>
		<p style="color: #c6c6c6;text-align: left;margin-left: 20px;">
			{{ $t('settings.applyForm.applyTip') }}
		</p>
		<Button style="background-color: #168794;width: 90%;margin-left: 5%;" @click="onSubmit" :loading="isBtnLoading">{{ $t('settings.applyForm.submit') }}</Button>
	</div>
</template>

<script>
	import countries from '@/static/countries.js'
	import enCountries from '@/static/countryCodeData.js'
	import twCitys from '@/static/twJson.js'
	import twTCitys from '@/static/twJsonT.js'
	export default {
		data(vm) {
			return {
				curTwCity:null,
				curTwCityIndex:0,
				curTwAreaIndex:0,
				isShowTw:false,
				isBtnLoading:false,
				isPreview: false,
				curCountry:'',
				countryArr:[],
				twCityArr:[],
				applyForm: {
					id: '',
					manager:'',
					code: '',
					orgCode:'',
					name: '',
					region: '',
					province: '',
					city: '',
					picture: '',
					address:'',
					cellphone:'',
					content:'',
					period:[]
				},
				periodList:[vm.$t('settings.applyForm.p1'),vm.$t('settings.applyForm.p2'),vm.$t('settings.applyForm.p3'),vm.$t('settings.applyForm.p4'),vm.$t('settings.applyForm.p5')],
				uploadList: [],
				ruleValidate: {
					name: [{
						required: true,
						message: this.$t('settings.applyForm.rule1'),
						trigger: 'blur'
					}],
					id: [{
						required: true,
						message: '学校简码不能为空 ',
						trigger: 'blur'
					}],
					manager: [{
						required: true,
						message: this.$t('settings.applyForm.rule2'),
						trigger: 'blur'
					}],
					code: [{
						required: true,
						message: '学校代码不能为空 ',
						trigger: 'blur'
					}],
					cellphone: [{
						required: true,
						message: this.$t('settings.applyForm.rule3'),
						trigger: 'blur'
					}],
					address: [{
						required: true,
						message: this.$t('settings.applyForm.rule4'),
						trigger: 'blur'
					}],
				}
			}
		},
		created() {
			console.log(twCitys.map(i =>  {
				return {
					city:i.city,
					arr:i.areas.map(j => j.area)
				}
			}))
			let curLocal = localStorage.getItem('local')
			let attr = 'CountryEn'
			if (curLocal.includes('cn') || curLocal.includes('CN')) {
			    this.countryArr = countries
				this.twCityArr = twCitys
			} else if (curLocal.includes('tw') || curLocal.includes('TW')) {
				this.twCityArr = twTCitys
				for (const key in enCountries) {
				    this.countryArr.push(
				        {
				            cn: enCountries[key].CountryTw,
				        }
				    )
				}
			}else{
				this.twCityArr = twTCitys
				for (const key in enCountries) {
				    this.countryArr.push(
				        {
				            cn: enCountries[key].CountryEn,
				        }
				    )
				}
			}
			
		},
		methods: {
			// 提交建立学校申请
			onSubmit() {
				this.$refs.applyForm.validate((valid) => {
					if (valid) {
						let hasFullAddress = false
						let fullAddress = ''
						if(this.isChinaSite){
							let pickResult = this.$refs.areaPicker.pickResult
							hasFullAddress = pickResult.province && pickResult.city && pickResult.area
							fullAddress = hasFullAddress ? (pickResult.province + pickResult.city + pickResult.area + this.applyForm.address) : ''
						}else{
							hasFullAddress = this.curCountry
							fullAddress = this.isShowTw ? (this.curCountry + this.curTwCity.city + this.curTwCity.areas[this.curTwAreaIndex].area + this.applyForm.address) : (this.curCountry + this.applyForm.address)
						}
						if(hasFullAddress){
							this.isBtnLoading = true
							let formInfo = this.applyForm
							let params = {
								name:formInfo.name,
								area:fullAddress,
								tmdname:this.$store.state.userInfo.name,
								tmdid:this.$store.state.userInfo.TEAMModelId,
								cellphone:formInfo.cellphone,
								content:formInfo.content,
								period:formInfo.period,
								orgCode:formInfo.orgCode,
							}
							this.$api.schoolSetting.applySchool(params).then(res => {
								if(!res.error){
									setTimeout(()=> {
										this.isBtnLoading = false
										this.$emit('applySuc')
										this.$refs.applyForm.resetFields()
										if(this.isChinaSite){
											this.$refs.areaPicker.pickResult = {
												province: null,
												city: null,
												area: null
											}
										}
										this.$Message.success(this.$t('settings.applyForm.submitSuc'))
									},1000)
								}
							}).catch(err => {
								this.$Message.error(err)
								this.isBtnLoading = false
							})
						}else{
							this.$Message.error(this.$t('settings.applyForm.errTip1'));
						}
					} else {
						this.$Message.error(this.$t('settings.applyForm.errTip2'));
					}
				})
			},
			handleSuccess(res, file) {
				console.log(res)
				this.applyForm.picture = res.url
				this.isPreview = true
			},
			/* 国家选择 */
			onCountrySelect(val){
				if(val === '中国台湾' || val === '臺灣'){
					this.isShowTw = true
					this.curTwCity = this.twCityArr[0]
				}else{
					this.isShowTw = false
				}
			},
			/* 台湾城市选择 */
			onTwCitySelect(index){
				this.curTwCity = this.twCityArr[index]
				this.curTwAreaIndex = 0
			},
		},
		computed:{
			isChinaSite(){
				return this.$store.state.config.srvAdr === 'China'
			}
		}
	}
</script>

<style lang="less">
	.apply-form {
		padding: 50px 20px 0 20px;
		
		.country-select{
			display: flex;
			margin: 10px 0;
		}
		
		.ivu-select-input{
			color: #DDDDDD;
		}

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

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

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

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

		.ivu-select .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>
