<template>
  <div class="login" style="padding-bottom: 50vw;">
    <div class="logo">
      <img src="/img/login-logo.png" />
    </div>
    <div class="k">
      <div class="input">
        <div>
          <div class="img">
            <img src="/img/login-i1.png" />
          </div>
          <p></p>
          <input type="phone" :placeholder="active ? '请输入手机号码作为账号' : '请输入手机号'" v-model="data.Phone"
            onblur="window.scrollTo(0, 0);" />
          <van-icon @click="data.Phone = ''" name="cross" size="5vw"></van-icon>
        </div>
        <!-- <div v-if="active == 1">
          <div class="img">
            <img src="/img/login-i2.png" />
          </div>
          <p></p>
          <input type="text" placeholder="请输入验证码" v-model="data.SmsCode" :disabled="!isSend" maxlength="6"
            onblur="window.scrollTo(0, 0);" />
          <van-button class="hqyzm" @click="getSmsCode" :disabled="isSend">
            {{ isSend ? `已发送(${remainTime}s)` : "获取验证码" }}
          </van-button>
        </div> -->
        <div v-if="active == 0">
          <div class="img">
            <img src="/img/login-i3.png" />
          </div>
          <p></p>
          <input :type="show1 ? 'text' : 'password'" placeholder="请输入密码" v-model="data.Password" @keydown.enter="login"
            onblur="window.scrollTo(0, 0);" />
          <van-icon @click="show1 = true" name="eye-o" size="5vw" v-if="!show1"></van-icon>
          <van-icon @click="show1 = false" name="closed-eye" size="5vw" v-else></van-icon>
        </div>
        <div v-if="active == 1">
          <div class="img">
            <img src="/img/login-i3.png" />
          </div>
          <p></p>
          <input :type="show1 ? 'text' : 'password'" placeholder="请输入密码" v-model="data.Password"
            onblur="window.scrollTo(0, 0);" />
          <van-icon @click="show1 = true" name="eye-o" size="5vw" v-if="!show1"></van-icon>
          <van-icon @click="show1 = false" name="closed-eye" size="5vw" v-else></van-icon>
        </div>
        <div v-if="active == 1">
          <div class="img">
            <img src="/img/login-i3.png" />
          </div>
          <p></p>
          <input :type="show2 ? 'text' : 'password'" placeholder="请再次输入密码" v-model="data.RePassword"
            onblur="window.scrollTo(0, 0);" />
          <van-icon @click="show2 = true" name="eye-o" size="5vw" v-if="!show2"></van-icon>
          <van-icon @click="show2 = false" name="closed-eye" size="5vw" v-else></van-icon>
        </div>
        <div v-if="active == 1">
          <div class="img">
            <img src="/img/login-i4.png" />
          </div>
          <p></p>
          <input type="text" placeholder="请填写邀请人账号(选填)" v-model="data.Recommend" />
        </div>
      </div>

      <van-button class="submit" v-if="active == 0" @click="login" :loading="loading" loading-text="提交中..">登
        录</van-button>
      <van-button class="submit" v-else @click="reg" :loading="loading" loading-text="提交中..">注册</van-button>

      <van-checkbox icon-size="2.667vw" class="agreement" v-model="checked" checked-color="#177142">
        选中即代表同意<a @click.stop="showContract = true">《用户协议》</a>和<a @click.stop="showPolicy = true">《隐私政策》</a>
      </van-checkbox>

      <div class="b_l_w  w100 mx-auto box box-center-center changeat">
        <div class="ct1" v-if="active == 1" @click="active = 0">已有账号，立即登录
          <van-icon name="arrow"></van-icon>
        </div>
        <div class="box ct2" v-if="active == 0" @click="active = 1">
          <div @click.stop="$navigate('/ResetPwd')">
            忘记密码
          </div>
          <span>|</span>
          立即注册
        </div>
      </div>

      <!-- <div class="b_l_w center" v-if="active == 0" style="margin: 4vw 0 0">
        <a href="https://beian.miit.gov.cn/#/Integrated/index">
          <img src="/img/beian.png" width="14" height="14" style="vertical-align: top; display: inline-block" />
          粤ICP备12345678号
        </a>
      </div> -->
    </div>
  </div>

  <van-action-sheet v-model:show="showContract" safe-area-inset-bottom title="用户协议" closeable
    style="min-height: 50%; padding: 0px 10px 10px 10px">
    <div class="w100 html">
      <p>用户协议内容...</p>
      <p>这里是用户协议的详细条款...</p>
    </div>
  </van-action-sheet>
  <van-action-sheet v-model:show="showPolicy" safe-area-inset-bottom title="隐私政策" closeable
    style="min-height: 50%; padding: 0px 10px 10px 10px">
    <div class="w100 html">
      <p>隐私政策内容...</p>
      <p>这里是隐私政策的详细条款...</p>
    </div>
  </van-action-sheet>
</template>

<script>
import { useUserStore } from '@/stores/user'

export default {
  name: 'Login',
  mounted() {
    this.init();
  },
  data() {
    return {
      data: {
        Phone: '',
        SmsCode: '',
        Password: '',
        RePassword: '',
        Recommend: localStorage.getItem('recommend') || ''
      },
      active: 0,
      checked: false,
      show1: false,
      show2: false,
      showContract: false,
      showPolicy: false,
      isSend: false,
      remainTime: 0,
      loading: false,
    }
  },
  methods: {
    init() {
      if (this.$isLogin?.()) {
        location.replace('#/');
        return
      }
      this.$closeSkeleton?.();

    },
    login() {
      if (!this.data.Phone) {
        this.$showFailToast?.('请输入手机号');
        return;
      }
      if (!this.$validPhone?.(this.data.Phone)) {
        this.$showFailToast?.('手机号格式错误');
        return;
      }
      if (!this.checked) {
        this.$showFailToast?.('请选中"同意《用户协议》和《隐私政策》"');
        return;
      }

      this.$post('/v1/client/AuthClient/login', {
        "username": this.data.Phone,
        "userpwd": this.data.Password
      }).then(data => {
        this.loading = false;
        // console.log(data);

        if (data.status !== 200) {
          this.$showFailToast(data.message);
          return
        }

        const userStore = useUserStore()
        userStore.setToken(data.data.token)
        this.$showSuccessToast(data.message);
        location.replace('#/My');
      })
    },
    reg() {
      if (!this.data.Phone) {
        this.$showFailToast?.('请设置至少6位字母或数字的账号');
        return;
      }
      if (this.data.Phone.length < 6) {
        this.$showFailToast?.('请设置至少6位字母或数字的账号');
        return;
      }
      if (!this.$validPhone?.(this.data.Phone)) {
        this.$showFailToast?.('手机号格式错误');
        return;
      }
      // if (!this.data.SmsCode) {
      //   this.$showFailToast?.('请输入验证码');
      //   return;
      // }
      if (!this.data.Password) {
        this.$showFailToast?.('请输入密码');
        return;
      }
      if (this.data.Password !== this.data.RePassword) {
        this.$showFailToast?.('两次密码输入不一致');
        return;
      }
      if (!this.checked) {
        this.$showFailToast?.('请选中"同意《用户协议》和《隐私政策》"');
        return;
      }

      this.$post('/v1/client/AuthClient/register', {
        "username": this.data.Phone,
        "userpwd": this.data.Password,
        "phone": this.data.Recommend
      }).then(data => {
        if (data.status !== 200) {
          this.$showFailToast(data.message);
          return;
        }
        const userStore = useUserStore()
        userStore.setToken(data.data.token)
        this.$showSuccessToast('注册成功');
        location.replace('#/My');
      })
    },
    // getSmsCode() {
    //   if (!this.$validPhone?.(this.data.Phone)) {
    //     this.$showFailToast?.('手机号格式错误');
    //     return;
    //   }

    //   // 静态模拟发送验证码
    //   this.isSend = true;
    //   this.remainTime = 60;
    //   this.$showSuccessToast?.('发送成功');

    //   const timer = setInterval(() => {
    //     if (this.remainTime > 0) {
    //       this.remainTime--;
    //     } else {
    //       clearInterval(timer);
    //       this.isSend = false;
    //     }
    //   }, 1000);
    // },
  }
}
</script>
