<template>
  <j-nav-bar color="#FFF" nav-bar-background="#ffffff00" :placeholder="false"/>
  <div class="content">
    <j-gap height="50" background="#F9BF3A" opacity="0"/>
    <div class="slogan">
      <div class="slogan-1">登录</div>
    </div>
    <div class="input-box">
      <!-- 输入手机号，调起手机号键盘 -->
      <van-field
          v-model="loginData.mobile"
          label="账号"
          class="login-btn"
          placeholder="请输入账号"
          label-align="top"
          type="tel"
      />

      <!-- 允许输入数字，调起带符号的纯数字键盘 -->
      <van-field
          v-model="loginData.password"
          label="密码"
          placeholder="请输入密码"
          class="login-btn"
          label-align="top"
          type="password"
      />

      <van-button
        :disabled="!loginData.password || !loginData.mobile"
        color="linear-gradient(to right, #D2A64C, #F9D88D)"
        round
        style="width: 100%; margin: 20px 0"
        @click.stop="loginBtn"
      >
        登录
      </van-button>

      <view class="op">
        <view @click="goRegister" class="register">注册账号</view>
        <view @click="goForget" class="forget">忘记密码</view>
      </view>

    </div>

  </div>
</template>

<script lang="ts" setup>
import {onMounted, reactive, ref} from "vue";
import {showToast} from "vant";
import {useUserStore} from "@/store/modules/user";
import {useRouter} from "vue-router";


const router = useRouter()
const userStore = useUserStore()

const loginData = reactive({
  phone: null,
  mobile: '',
  // mobile: '15302786929',
  mobileCode: null,
  password: '',
  // password: '123123',
  loginRole: 5,
  openId: '',
  ticket: null,
  randStr: null
})


const go = (key) => {
  // agreement
  router.push({
    path: '/agreement',
    query: {
      key: key
    }
  })
}
const goRegister = () => {
  router.push({
    path: '/register'
  })
}
const goForget = () => {
  router.push({
    path: '/forget'
  })
}


const loginBtn = () => {
  userStore.login(loginData).then(res => {
    router.replace('/home')
  }, err => {
    showToast(err)
  })
}



onMounted(() => {
  // userStore.setOpenId('omWdJ62bH_6HXLQVOIefzN9J1oi4')
})

</script>

<style lang="scss" scoped>
.content {
  padding: 0 20px;
  background-image: linear-gradient(to bottom, #F9BF3A, #ffffff, #ffffff, #ffffff, #ffffff);
  height: 100vh;

  .slogan {
    padding-top: 168px;

    .slogan-1 {
      font-size: 70px;
      color: #3f3f3f;
    }

    .slogan-2 {
      font-weight: 400;
      font-size: 32px;
      color: #333333;
    }
  }

  .input-box {
    padding-top: 120px;

    .login-btn {
      margin-bottom: 40px;
      background: #12332100;
    }

    .password-btn {
      border-left: 1px solid #CCCCCC;
      padding-left: 20px;
    }
  }

  .op {
    display: flex;
    justify-content: space-between;
    color: #666;
  }
}

</style>