<template>
	<view class="box">
		<u-form :model="formData" ref="uForm" :label-width="200" :error-type="['toast']"
		:label-style ="{
			'color': '#FFFFFF',
			'font-size': '28rpx',
			'font-weight': '400'
		}"
		>
			<u-form-item label="二级域名" prop="adminacount">
				<view class="right-box">
					<list-item>
						<template v-slot:left>
							<u-input v-model="formData.random" :clearable="false" type="text" class="input-c" placeholder="输入你想要的二级前缀可用字母数字"/>
						</template>
						<template v-slot:right v-if="!queryData.Id">
							<text class="domain-box-l-item">随机</text>
						</template>
					</list-item>
					<list-item>
						<template v-slot:left>
							<u-input v-model="formData.domain" :clearable="false" @click.native="domainSelectClick" type="text" class="input-c" placeholder="域名" :disabled="true"/>
						</template>
						<template v-slot:right v-if="!queryData.Id">
							<text @click="domainSelectClick">></text>
						</template>
					</list-item>
				</view>
			</u-form-item>
			<view class="tip">
				可用字母，数字建议为2-5字，不能有标点符号（尽量简短，便于推广宣传）
			</view>
			<u-form-item label="管理员账号" prop="adminacount">
				<u-input v-model="formData.adminacount" :clearable="false" type="text" class="input-c" placeholder="输入要注册的用户名"/>
			</u-form-item>
			<u-form-item label="管理员密码" prop="adminpass">
				<u-input v-model="formData.adminpass" :clearable="false" type="text" class="input-c" placeholder="输入管理员密码"/>
			</u-form-item>
			<u-form-item label="绑定QQ" prop="bingQQ">
				<u-input v-model="formData.bingQQ" :clearable="false" type="text" class="input-c" placeholder="输入你的QQ号"/>
			</u-form-item>
			<u-form-item label="网站名称" prop="netName">
				<u-input v-model="formData.netName" :clearable="false" type="text" class="input-c" placeholder="输入网站名称（如：xx业务网、xx代刷完）"/>
			</u-form-item>
			<button class="confim" @click="confim" v-if="!queryData.Id">确认</button>
		</u-form>
		<csub-address-select :show.sync="addressShow"></csub-address-select>
	</view>
</template>

<script>
	import listItem from '../../components/listitem/listItem.vue'
	import csubAddressSelect from '../../components/select/csubstation/csubAddressSelect.vue'
	export default {
		name: 'cosEdit',
		components: {
			listItem,
			csubAddressSelect
		},
		data () {
			return {
				addressShow: false,
				formData: {
				},
				rules: {
					adminacount: {required: true,
					message: '请输入管理员密码',
					trigger: ['blur', 'change']}
				},
				queryData: {}
			}
		},
		methods: {
			domainSelectClick () {
				console.log('点击跳转')
				this.addressShow = true
				// 跳转到域名选择页
				// uni.navigateTo({})
			},
			// 确认按钮
			confim () {
				console.log(this.formData)
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				})
			},
			// 查看时加载
			initData (queryData) {
				
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
			this.initData()
			console.log('onReady', this.queryData)
		},
		onLoad(option) {
			console.log(option)
			if (Object.getOwnPropertyNames(option).length !== 0) {
				let o = JSON.parse(encodeURIComponent(option))	
			}
			// this.queryData.Id = 'id'
			console.log('load')
		}
	}
</script>

<style scoped lang="scss">
	.box {
		& /deep/ .u-form-item {
			border-bottom: 1rpx solid #3A4361;
			&:first-child {
				border-top: 1rpx solid #3A4361;
			}
		}
		padding: 20rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 40rpx;
		& /deep/ .uni-input-input {
			font-size: 24rpx;
			font-weight: 400;
			color: #87A6ED;
		}
		& .right-box {
			flex: 1;
			& .item-box + .item-box {
				border-top: 1rpx solid #3A4361;
			}
			color: #FFFFFF;
		}
		& .tip {
			margin: 16rpx 0 30rpx;
			font-size: 22rpx;
			color: #C1C4E3;
			line-height: 30rpx;
		}
		& .confim {
			margin-top: 150rpx;
			height: 90rpx;
			background: linear-gradient(270deg, #F4D8AB 0%, #EF6F5F 0%, #CD9C78 100%, #FB2636 100%);
			border-radius: 45rpx;
			font-size: 32rpx;
			color: #FFFFFF;
		}
	}
</style>
