<template>
  <div class="login-container">
    <div class="logo-container">
      <img src="@/assets/seerTeach.png" alt="SeerTeach Logo" class="logo">
      <img src="@/assets/cooperate.svg" alt="Cooperate Logo" class="cooperate">
    </div>
    <div class="content">
      <div class="loginStyle" @click="goAgent">
        <div class="login-item">
          <img src="@/assets/agent.svg" alt="" class="imgItem">
          <div class="text">代理人</div>
        </div>
        <img src="@/assets/enter.svg" alt="" class="imgItem">
      </div>
      <div class="loginStyle">
        <div class="login-item">
          <img src="@/assets/warehouse.svg" alt="" class="imgItem">
          <div class="text">仓管</div>
        </div>
        <img src="@/assets/enter.svg" alt="" class="imgItem">
      </div>
    </div>
  </div>
</template>

<script>
import { Dialog } from 'vant'
import { wxAuthRedirect } from '@/utils/wx-api-config'
export default {
  name: 'Login',
  data () {
    return {
      loading: true,
      error: false,
      errorMsg: ''
    }
  },
  methods: {
    goAgent () {
      Dialog.confirm({
        title: '提示',
        message: '此操作会获取您的昵称和头像信息'
      }).then(() => {
        // on confirm
        wxAuthRedirect()
        // this.$router.push('/addUser')
      }).catch(() => {
        // on cancel
      })
    }
  }
}
</script>

<style scoped>
.login-container {
  background: #1e1e1e;
  width: 100vw;
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  padding-top: 30px;
  padding-bottom: 80px;
}

.logo-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.logo {
  width: 150px;
  height: auto;
}
.cooperate{
  width: 312px;
  height: auto;
}
.tree{
  width: 100%;
  position: relative;
  top: -20px;
}
.content {
  text-align: center;
}
.loginStyle{
  background: #4b4b4b;
  width: 335px;
  height: 63px;
  border: 1px solid #FFFFFF;
  border-radius: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0 20px;
  margin-bottom: 20px;
}
.login-item{
  display: flex;
  justify-content: center;
  flex-direction: row;
}
.imgItem{
  width: 20px;
  height: 20px;
}
.text{
  font-size: 16px;
  color: #FFFFFF;
  margin-left: 12px;
}
</style>
