<!--
 * @Author: Do not edit
 * @Date: 2023-12-28 11:21:53
 * @LastEditTime: 2024-01-10 16:58:49
 * @LastEditors: DY
 * @Description: 登陆
-->
<template>
  <div class="login">
    <van-row type="flex" justify="space-around">
      <van-col span="12">
        <div class="left">
          <div class="title">
            <span>Wel</span>
            <span style="color: white">come</span>
            <p
              style="
                margin: 0;
                font-size: 16px;
                letter-spacing: 1px;
                color: #26b9de;
                opacity: 75%;
              ">
              <span
                style="
                  display: inline-block;
                  height: 12px;
                  width: 12px;
                  margin-left: 8px;
                  margin-right: 2px;
                  border-radius: 100%;
                  background: #26b9de;
                "></span>
              向世界先进水平挑战，为人类社会文明做贡献
            </p>
          </div>
          <div>
            <img class="modalImg" src="./../assets/modal.png" alt="">
          </div>
        </div>
      </van-col>
      <van-col span="12">
        <div class="right">
          <div>
            <img class="xcacImg" src="./../assets/xcac.png" alt="">
            <p class="xc">许昌安彩新能源科技有限公司</p>
          </div>
          <div class="form">
            <van-form @submit="onSubmit">
              <van-field
                v-model="username"
                name="username"
                placeholder="用户名 / 手机号"
                style="margin-bottom: 16px"
                :rules="[{ required: true, message: '请填写用户名' }]"
              />
              <van-field
                v-model="password"
                type="password"
                name="password"
                placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' }]"
              />
              <div style="margin-top: 36px; border-radius: 3px">
                <van-button block type="info" native-type="submit">提交</van-button>
              </div>
            </van-form>
          </div>
        </div>
      </van-col>
    </van-row>
    <div class="mountain">
      <p style="margin-top: 80px; color: #3196E7">{{'版权所有：中建材智能自动化有限公司版本' + '\u3000' +'版本：1.0'}}</p>
    </div>
  </div>
</template>

<script>
import { loginUser, getTenantIdByName } from '@/api/login'
import { setTenantId, setToken } from '@/utils/auth'

export default {
  name: 'Login',
  data () {
    return {
      username: 'admin',
      password: 'admin123',
      tenantName: '技术中心'
    }
  },
  created () {
    // 租户
    getTenantIdByName(this.tenantName).then((res) => {
      // 设置租户
      const tenantId = res.data.data
      if (tenantId && tenantId >= 0) {
        setTenantId(tenantId)
      }
    })
  },
  methods: {
    onSubmit (values) {
      loginUser(values).then(res => {
        console.log(res.data)
        if (res.data.code === 0) {
          setToken(res.data.data)
          this.$router.push({
            path: 'home'
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.form {
  width: 332px;
  margin: 45px auto;
}
.xc {
  /* width: 342px;
  height: 32px; */
  font-size: 24px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 32px;
  letter-spacing: 1px;
  margin: 0;
  text-align: center;
}
.xcacImg {
  height: 46px;
  width: 130px;
  margin: 80px 148px 0;
}
.right {
  background-image: url('./../assets/transparent.png');
  height: 534px;
  width: 458px;
  margin-top: 121px;
  margin-left: 40px;
}
.modalImg {
  margin-top: 55px;
  margin-left: 55px;
  text-align: left;
}
.title {
  /* width: 297px; */
  /* height: 59px; */
  padding-top: 122px;
  padding-left: 115px;
  text-align: left;
  font-size: 66px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 600;
  color: #1BD1FF;
  line-height: 58px;
}
.left {
  margin: 0;
}
.mountain {
  background-image: url('./../assets/mountain.png');
  height: 131px;
  width: 100vw;
  background-size: 100%;
  position: absolute;
  bottom: 0;
  text-align: center;
}
.login {
  background-image: url('./../assets/login-bg.png');
  height: 100vh;
  background-size: 100%;
  position: relative;
  text-align: left;
}
</style>
