<template>
	<div class="login_container">
		<a-form>
			<a-row>
				<a-col :xs="0"></a-col>
				<a-col :xs="17">
					<a-form 
					class="login_form"     
					ref="loginRef">
					<a-row>
						<a-col :flex="11">
							<!-- 二维码部分 -->
							<a-form-item>
								<p id="scanTitle">微信扫码登录</p>
							</a-form-item>
							<a-form-item>
								<a-space direction="vertical" align="center">
									<a-qrcode :value="text" 
									icon="src\assets\icons\schisandra.svg"
									:size="220"
									/>
								</a-space>
							</a-form-item>
							<!-- 提示部分 -->
							<a-form-item>
								<a-alert id="alert" message="微信扫码关注公众号" description="登录更快更便捷" type="info" show-icon>
									<template #icon>
										<svg-icon icon-class='wechat' style="height: 30px; width: 30px;"></svg-icon>
									</template>
								</a-alert>
							</a-form-item>
						</a-col>
						<a-col  :flex="1">
							<a-divider type="vertical" style="border-color: blue;height: 600px;" dashed/>
						</a-col>
						<a-col :flex="12">
							
						<!-- 主标题 -->
							<a-form-item>
								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-if="status" @click="taggle">
									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">注&nbsp册</span>
									<svg-icon icon-class="corner_markers" >
									</svg-icon>				
								</a>
								<a style="height: 100px;width: 100px;position: absolute;left: 85.5%;top: -40px;" id="taggle" :status='status' v-else="status" @click="taggle">
									<span style="position: absolute;top: 15px;left: 45%;font-size: 18px;color:#fff;">登&nbsp录</span>
									<svg-icon icon-class="corner_markers" ></svg-icon>
								</a>

									<div class="title">
										<svg-icon icon-class="schisandra" style="height: 55px;width:55px;vertical-align: bottom;" >
										</svg-icon>
										<p id="title">五味子云相册</p>		
							</div>						
							</a-form-item>
							<!-- 副标题 -->
							<a-form-item >
								<p id="extra">随时随地分享你的美好瞬间</p>
							</a-form-item>
							<!-- 菜单切换 -->
							<div v-if="status">
									<a-form-item>
										<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" id='menu' @click="changeWay" />
									</a-form-item>
									<!-- 菜单内容主体 -->
									<!-- 账户登录 -->
									<div v-if="show" id="username" >
										<a-form-item >
											<a-input placeholder="请输入账号/邮箱/电话号码">
												<template #prefix>
													<user-outlined />
												</template>
											</a-input>
										</a-form-item>
										<a-form-item >
											<a-input-password    
											show-password placeholder="请输入密码"
											>
												<template #prefix > 
													<LockOutlined />
												</template>
												<template #iconRender="v">
													<EyeTwoTone v-if="v"></EyeTwoTone>
													<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
												</template>
											</a-input-password>
										</a-form-item>
										<a-form-item >
											<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
												<template #prefix>
													<BarcodeOutlined />
												</template>
											</a-input>
											<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
										</a-form-item>
									</div>
									<div v-else id="phoneNum">
										<a-form-item>
											<a-input placeholder="请输入手机号">
												<template #prefix>
													<MobileOutlined />
												</template>
											</a-input>
										</a-form-item>
										<a-form-item >
											<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
												<template #prefix>
													<BarcodeOutlined />
												</template>
											</a-input>
											<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
										</a-form-item>
										<a-form-item >
												<a-input placeholder="请输入验证码" style="width: 70%;float: left;" >
													<template #prefix > 
														<LockOutlined />
													</template>
												</a-input>
												<a-button style="float: right;border:0">获取验证码</a-button>

										</a-form-item> 
									</div>
									<!-- 自动登录忘记密码部分 -->
									<a-form-item>
										<a-checkbox style="float:left" v-model:checked="checked">自动登录</a-checkbox>
										<a href="" style="float: right;">忘记密码</a>
									</a-form-item>
									<a-form-item>
										<a-button class='btn' type='primary' >登录</a-button>
									</a-form-item>
							<!-- 其他登录方式 -->
									<a-form-item>
										<a-divider style="height: 2px; border-color: gray" dashed id="other">其他登录方式</a-divider>
									</a-form-item>
									<a-form-item id="icons">
										<a href="">
											<svg-icon icon-class="qq" style="height: 30px;width:30px;margin-top: 5px;"></svg-icon>
										</a>
										<a href="">
											<svg-icon icon-class="wechat_2" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
										</a>
										<a href="">
											<svg-icon icon-class="github" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
										</a>
										<a href="">
											<svg-icon icon-class="gitlab" style="height: 30px;width:30px;margin-top: 5px"></svg-icon>
										</a>
									</a-form-item>
							</div>
							<div v-else>
							<a-form-item>
										<a-menu v-model:selectedKeys="currentRegister" mode="horizontal" :items="itemRegister" />
									</a-form-item>
										<a-form-item >
											<a-input placeholder="请输入手机号">
												<template #prefix>
													<MobileOutlined />
												</template>
											</a-input>
										</a-form-item>
										<a-form-item >
											<a-input-password    
											show-password placeholder="请输入密码"
											>
												<template #prefix > 
													<LockOutlined />
												</template>
												<template #iconRender="v">
													<EyeTwoTone v-if="v"></EyeTwoTone>
													<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
												</template>
											</a-input-password>
										</a-form-item>
										<a-form-item >
											<a-input-password    
											show-password placeholder="请再次确认密码"
											>
												<template #prefix > 
													<LockOutlined />
												</template>
												<template #iconRender="v">
													<EyeTwoTone v-if="v"></EyeTwoTone>
													<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
												</template>
											</a-input-password>
										</a-form-item>
										<a-form-item >
											<a-input placeholder='请输入图像验证码' style="width: 60%;float: left;">
												<template #prefix>
													<BarcodeOutlined />
												</template>
											</a-input>
											<img src="@/assets/images/wallhaven.jpg" alt="" style="width:30%;height: 32px;float: right;margin-top: 1px;">
										</a-form-item>
										<a-form-item>
											<a-input placeholder="请输入验证码" style="width: 70%;float: left;">
												<template #prefix > 
													<LockOutlined />
												</template>
											</a-input>
											<a-button style="float: right;border: 0;">获取验证码</a-button>
										</a-form-item>
										<a-form-item>
											<a-button class='btn' type='primary' >注册</a-button>
										</a-form-item>
							</div>			
						</a-col>
						</a-row>
					</a-form>
				</a-col>
			</a-row>
   </a-form>
	</div>
</template>

<script setup lang="ts">
 import { ref,h } from 'vue';

const text=ref('')


import { UserOutlined,MobileOutlined,LockOutlined,BarcodeOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons-vue';
import { MenuProps } from 'ant-design-vue';
// 配置切换菜单
const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
  {
    key: 'mail',
    icon: () => h(UserOutlined),
    label: '账户登录',
    title: '账户登录',
  },
  {
    key: 'app',
    icon: () => h(MobileOutlined),
    label: '短信登录',
    title: '短信登录',
  },
])

const currentRegister = ref<string[]>(['app']);
const itemRegister= ref<MenuProps['items']>([
  {
    key: 'app',
    icon: () => h(MobileOutlined),
    label: '手机号注册',
    title: '手机号注册',
  },
])

let status=ref(true)
let checked=ref(false)
let show=ref(true)
// 配置切换菜单函数
let changeWay=ref((items)=>{
	if(items.item.originItemValue.label==='短信登录') return show.value=false
	else return show.value=true
})

//配置登录注册函数
let taggle=ref(()=>{
	status.value=!status.value
})
</script>

<style scoped lang="less">
	.login_container{
  width: 100%;
  height: 100vh;
  background: url('src/assets/images/background.png');
  background-size: cover;
	overflow: auto;
  }
	.login_form{
    position:absolute;
		height:660px;
    width:850px;
    top:calc(20vh);
		left:calc(30vw);
    background:#fff;
    background-size: cover;
    padding: 40px;
		opacity: 1;
	}
  h1{
      color: white;
      font-size: 40px;
  }
  h2{
      color: white;
      font-size: 20px;
      margin:20px 0 ;
  }
	.btn{
      width: 100%;    
  }
	#scanTitle{
		font-size: 30px;
		margin-top: 60px;
		margin-bottom: 5px;
	}
	#alert{
		text-align: left;
		width: 80%;
		font-size: 16px;
		height: 90px;
		margin-left: 30px;
		margin-top:5px;
		padding: 7px;
	}
	#title{
		text-align:left;
		display: inline-block;
		font-size: 35px;
		margin: 0
	}
	.title{
		margin: 0;
		width:280px
	}
	#extra{
		margin: 0;
		width: 300px;
		text-align: center;
		color:rgb(189, 186, 187);
		font-size: 15px;
	}
	#menu{
		text-align:center;
		width: 300px;
		background-color:#fff;
		margin: 0 px;
	}
	#other{
		margin-bottom: 0
	}
	#icons a{
		vertical-align:auto;
		display: inline-block;
		height: 40px;
		width: 40px;
		border-radius: 100%;
		border:1px solid rgba(228, 226, 223,0.8);
		margin: 0 10px;
	}

</style>