<template>
  <view class="bg">
    <view class="logoView">
      <image class="logo" :src="config.baseUrl_api+'/fs/static/login/logo@2x.png'"></image>
    </view>

    <!-- 获取手机号 -->
    <!-- <button class="start" type="default" :disabled="!agree" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">微信账号快捷登录</button> -->
    <view>
      <!-- 密码登录 -->
      <view class="formbox">
        <view>
          <view class="round-input-item">
            <image class="icon" :src="config.baseUrl_api+'/fs/static/login/tag01@2x.png'"></image>
            <uni-easyinput :styles="inputstyle" placeholder="会员号" v-model="form.username" />
          </view>
          <view class="round-input-item">
            <image class="icon" :src="config.baseUrl_api+'/fs/static/login/tag02@2x.png'"></image>
            <uni-easyinput :styles="inputstyle" placeholder="密码" v-model="form.password" type="password" />
          </view>
          <view class="round-input-item">
            <image class="icon" :src="config.baseUrl_api+'/fs/static/login/tag03@2x.png'"></image>
            <uni-easyinput :styles="inputstyle" placeholder="图形验证码" v-model="form.code" />
            <image :src="codeUrl" @click="getCode" />
          </view>

        </view>
        <view class="flex-item">
        </view>
        <view class="center-item">
          <button @click="handleLogin" class="btn-red">绑定账号</button>
        </view>

        <view class="tip">*会员号+证件号后四位+ )*%</view>
      </view>


    </view>

    <view class="agreeArea">
      <!-- 			<checkbox-group @change='radioChange'>
				<label>
					<checkbox value="r1" :checked="agree" />请您确认同意<text @click="showAgreement">《隐私保护声明》</text>
				</label>
			</checkbox-group> -->
    </view>
    <!-- 隐私保护声明 -->
    <uni-popup ref="popup" v-if="showAgree" background-color="#fff">
      <view class="popup-content">
        本应用严格遵守法律法规，为用户提供安全、可靠的服务。若您对于我们感兴趣，希望咨询、预约、申请使用我们的服务，我们需要收集、使用您的个人信息以便为您安排专人提供服务。本公司非常重视用户（以下或简称“您”）的隐私和个人信息安全，希望您仔细阅读《隐私保护声明》（以下简称“本声明”），详细了解我们对信息的收集、使用方式，以便您更好地了解我们的服务并做出适当的选择。

        一、您提供的个人信息
        1、在注册帐户时填写或上传的信息

        例如，您在参与问卷时所填写的姓名、所在地、行业、手机号码等。

        2、在奖励兑换时填写或上传的信息

        例如，您在奖励兑换时所填写的姓名、所在地、手机号码等。

        我们为您的信息提供相应的安全保障，以防止信息的丢失、不当使用、未经授权访问或披露。

        二、我们如何使用您的个人信息
        根据您留下的信息，我们后续会自行或委托合作方与您取得联系，向您介绍我们的服务。

        我们可能会向您发送推广信息，如您不希望继续接收推广可选择退订。

        三、您享有的权利
        1、我们保障您撤回个人信息使用的同意的权利；

        2、我们保障您复制、查阅本人个人信息的权利。

        若您需要行使上述权利，您可通过本声明列明的联系方式与我们联系，在您请求撤回同意或者复制、查阅本人个人信息时，我们可能会要求您进行身份验证，以保障信息安全。

        请您理解，由于技术所限或法律监管要求，我们可能无法完全满足您的要求。我们将尽快处理所涉问题，并在通过验证您的用户身份后的十五天内予以回复。

        四、变更
        我们可能适时修订本声明内容。

        我们将在内容更新时，通过在页面显著位置提示、公告或直接与您联系等方式通知您，如果您继续使用本服务，即视为您已接受修改后的相关内容；如果您不接受修改后的相关内容，您可以联系我们或者通过信息退订等方式选择停止使用服务。

        五、联系我们
        如您对本声明或个人信息相关事宜有疑问，可以通过公众号与我们取得联系。
      </view>
    </uni-popup>
  </view>
</template>

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

import {
  onLoad
} from '@dcloudio/uni-app'
import config from '@/config.js'
import {
  pcLogin,
  getWxUserPhone,
  getCodeImg,
  getSmsCode,
  loginByPhone
} from '@/common/login.js'


const popup = ref(null)
const agree = ref(true)
const loading = ref(false)
const showAgree = ref(false)
const form = ref({})
const codeUrl = ref('')
const inputstyle = ref({
  borderColor: 'transparent',
  fontSize: '30rpx'
})
const app = getApp()

let path = '/pages/index/index';
onLoad((option) => {
  if (option.path) {
    path = decodeURIComponent(option.path)
  }
  getCode()
})

function radioChange() {
  popup.value.open()
  agree.value = true
}
function decryptPhoneNumber(res) {
  // console.log(res)

  loading.value = true
  if (res.detail.errMsg.indexOf('ok') > -1) {
    getWxUserPhone(res.detail).then((data) => {
      // console.log(data)

      uni.redirectTo({
        url: path
      })
    }).finally(() => {
      loading.value = false
    });
  } else {
    loading.value = false
  }
}

function subscribe() {
  uni.requestSubscribeMessage({
    tmplIds: ['pvrlpWl1MDJfOghILwUsQtfcg96LWdstVOFLrDxGcdM'],
    success: (res) => {
      console.log('success:', res)
    }
  })
}

function showAgreement() {
  popup.value.open()
}

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

function handleLogin() {
  if (!form.value.username) {
    uni.showToast({
      title: '账号不能为空',
      icon: 'none'
    })
    return
  }
  if (!form.value.password) {
    uni.showToast({
      title: '密码不能为空',
      icon: 'none'
    })
    return
  }
  if (!form.value.code) {
    uni.showToast({
      title: '验证码不能为空',
      icon: 'none'
    })
    return
  }
  pcLogin(form.value)
    .then((res) => {
      app.globalData.isLogin = true
      uni.redirectTo({
        url: path
      })
    })
}
</script>

<style scoped lang="scss">
	.bg{background: linear-gradient(60deg,#ad1820 50%,#044a9f 50%);padding: 1px;height: 100vh;overflow: hidden;}
	.formbox {
		background: #fff;
		width: 700rpx;
		padding: 50rpx;box-sizing: border-box;
		margin: auto;
		border-radius: 20rpx;
	}
	.logoView {
		/* margin: 20vh 0; */
	}

	.logo {
		width: 420rpx;
		height: 179rpx;
		margin: 60rpx auto 60rpx;
		display: block;
	}

	.h1 {
		font-size: 36rpx;
		color: #000000;
		text-align: center;
	}

	.start {
		margin: 0 auto 80rpx;
		font-size: 30rpx;
		color: #fff;
		height: 80rpx;
		width: 480rpx;
		border-radius: 40rpx;
		background: #44A92F;
	}

	.agreeArea {
		text-align: center;
	}

	.agreeArea label {
		font-size: 26rpx;
	}

	.agreeArea label text {
		color: #00C176;
	}

	.tip {
		margin: 30rpx 0 0;
		font-size: 20rpx;
		color: #181818;
	}

	.h3 {}
	.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; padding: 0 20rpx;
		}
		
	}
	
</style>