<template>
  <view class="page-bg">
    <image class="ren1" src="@/static/login/ren1.png" />
    <!-- 登录 -->
    <view class="retop">
      <image class="logotop" src="@/static/login/logo@2x.png"></image>
      <view class="loginbox">
        <view class="loginNav">
          <view class="n1" :class="isActive==0?'active':''" @click="changeActive(0)">密码登录</view>
          <view class="n2" :class="isActive==1?'active':''" @click="changeActive(1)">短信登录</view>
        </view>
        <!-- 密码登录 -->
        <view class="formbox">
          <form v-if="isActive==0">
            <view class="round-input-item">
              <image class="icon" src="@/static/login/tag01@2x.png"></image>
              <uni-easyinput placeholder="账号" v-model="form.username" />
            </view>
            <view class="round-input-item">
              <image class="icon" src="@/static/login/tag02@2x.png"></image>
              <uni-easyinput placeholder="密码" v-model="form.password" type="password" />
            </view>
            <view class="round-input-item">
              <image class="icon" src="@/static/login/tag03@2x.png"></image>
              <uni-easyinput placeholder="图形验证码" v-model="form.code" />
              <image :src="codeUrl" @click="getCode" />
            </view>

          </form>
          <!-- 短信登录 -->
          <form v-if="isActive==1">
            <view class="round-input-item">
              <image class="icon" src="@/static/login/tag01@2x.png"></image>
              <input placeholder="请输入手机号" />
            </view>
            <view class="round-input-item">
              <image class="icon" src="@/static/login/tag02@2x.png"></image>
              <input placeholder="图形验证码" />
              <image />
            </view>
            <view class="round-input-item">
              <image class="icon" src="@/static/login/tag04@2x.png"></image>
              <input placeholder="短信验证码" />
              <text>获取验证码</text>
            </view>

          </form>

          <view class="flex-item">
            <!-- <view class="member" @click="changeAgree(isRember)">
              <image v-if="isRember" src="@/static/login/xz_dwn@2x.png" />
              <image v-else src="@/static/login/xz@2x.png" />
              记住密码
            </view>
            <view class="text-red">忘记密码</view> -->
          </view>
          <view class="center-item">
            <button @click="login" class="btn-red">登录</button>
          </view>
          <view class="center-item">
            <text class="text-red" @click="goRegister">没有账号，去注册</text>
          </view>

        </view>


      </view>
    </view>
    <image class="ren2" src="@/static/login/ren2.png" />
    <view class="fixedagree">
      <image @click="changeAgree(agree)" v-if="agree" src="@/static/login/xz_dwn@2x.png"></image>
      <image v-else src="@/static/login/xz2@2x.png"></image>
      <view>登录即代表您同意<text>《用户协议》</text><text>《隐私策略》</text></view>
    </view>
  </view>
</template>

<script setup>
import {
  onMounted,
  ref
} from 'vue'

import {
  getCodeImg,
  pcLogin
} from '@/common/login.js'

const isActive = ref(0)
const agree = ref(false)
const isRember = ref(true)
const codeUrl = ref(null)
const form = ref({
  username: null,
  password: null,
  code: null,
  uuid: null
})

const app = getApp()

onMounted(() => {
  getCode()
})

function changeActive(n) {
  isActive.value = n
}


function changeAgree(item) {
  item = !item
}

function login() {
  pcLogin(form.value)
    .then(() => {
      app.globalData.isLogin = true
      uni.redirectTo({
        url: '/pages/index/index'
      })
    })
    .catch(getCode)
}

function goRegister() {
  const path = '/pages/index/register'
  uni.navigateTo({
    url: path
  })
}

function getCode() {
  getCodeImg().then((res) => {
    codeUrl.value = 'data:image/gif;base64,' + res.data.img
    form.value.uuid = res.data.uuid
  })
}
</script>

<style scoped lang="scss">
	.logotop {
		width: 510rpx;
		height: 215rpx;
		margin: 5vh auto 40rpx;
		display: block;
	}

	.ren1 {
		width: 300rpx;
		height: 560rpx;
		position: absolute;
		right: 0;
		top: 0;
	}

	.ren2 {
		width: 456rpx;
		height: 600rpx;
		position: relative;
		top: 20rpx;
	}

	.retop {
		position: relative;
		z-index: 1;
	}

	.page-bg {
		background: url('@/static/login/bg.png') no-repeat center;
		background-size: cover;
		height: 100vh;
		overflow: hidden;
		position: relative;
	}

	.loginbox {
		.loginNav {
			width: 700rpx;
			margin: 0 auto -53rpx;
			height: 133rpx;
			overflow: hidden;
			position: relative;

			view {
				text-align: center;
				height: 133rpx;
				box-sizing: border-box;
				padding: 26rpx 0 0;
			}

			.n1 {
				background: url('@/static/login/tab1.png') no-repeat top left;
				background-size: contain;
				opacity: 0.7;
				width: 407rpx;
				position: absolute;
				left: 0;
			}

			.n2 {
				background: url('@/static/login/tab2.png') no-repeat top right;
				background-size: contain;
				opacity: 0.7;
				width: 399rpx;
				position: absolute;
				right: 0;
			}

			.active {
				color: #AD181F;
				opacity: 1;

				&::after {
					content: '';
					position: absolute;
					width: 25rpx;
					height: 4rpx;
					background: #AD181F;
					border-radius: 2rpx;
					left: 0;
					right: 0;
					margin: auto;
					bottom: 50rpx;
				}
			}
		}
	}

	.formbox {
		background: #fff;
		width: 700rpx;
		padding: 50rpx;
		margin: auto;
		border-radius: 20rpx;
	}

	.flex-item {
		display: flex;
		justify-content: space-between;
		margin: 30rpx 0;
		font-size: 28rpx;

		image {
			width: 30rpx;
			height: 30rpx;
			margin-right: 16rpx;
		}
	}

	.member {
		color: #4C5359;
		display: flex;
		align-items: center;
	}

	.center-item {
		text-align: center;
		margin: 30rpx 0 0;
		font-size: 30rpx;

		.btn-red {
			border-radius: 40rpx;
			width: 600rpx;
			line-height: 80rpx;
			font-size: 36rpx;
		}
	}

	.btn-red {
		background: #AD181F;
		color: #fff;
	}

	.text-red {
		color: #AD181F;
	}

	.round-input-item {
		overflow: hidden;
		background: RGBA(247, 247, 248, 1);
		border-radius: 40rpx;
		padding: 0 0 0 30rpx;
		height: 80rpx;
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;

		image {
			width: 180rpx;
			height: 80rpx;

			&.icon {
				width: 30rpx;
				height: 30rpx;
				margin-right: 16rpx;
			}
		}

		input {
			border-left: 1rpx solid RGBA(214, 216, 219, 1);
			padding: 0 0 0 20rpx;
			font-size: 30rpx;
		}

		input::-webkit-input-placeholder {
			color: RGBA(158, 166, 174, 1);
			font-size: 30rpx;
		}

		input::placeholder {
			color: RGBA(158, 166, 174, 1);
			font-size: 30rpx;
		}

		input::-moz-placeholder {
			color: RGBA(158, 166, 174, 1);
			font-size: 30rpx;
		}

		text {
			font-size: 28rpx;
			color: #014A9F;
		}
	}

	.fixedagree {
		position: fixed;
		bottom: 5vh;
		color: rgba(255, 255, 255, 0.7);
		display: flex;
		font-size: 24rpx;
		width: 100vw;
		justify-content: center;

		image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 20rpx;
		}
	}
</style>