<template>
  <view class="container">
    <view class="wrap">
      <div class="header">
        <img class="bg" :src="bg" />
        <view class="title">{{ t('login.tip3') }}</view>
      </div>
      <view class="mas">
        <view class="input_wrap">
          <input v-model="loginParams.account" :placeholder="t('login.account_placeholder')" autocomplete />
        </view>
        <view class="input_wrap">
          <input v-model="loginParams.password" :placeholder="t('login.password_placeholder')" type="password" autocomplete />
        </view>
      </view>
      <view class="button-wrap">
        <view class="button" @click="login">{{ t('login.button_text') }}</view>
        <view class="text" @click="goPage('/subPackages/register/register')">{{ t('login.register') }}</view>
        <view class="button circle_button" @click="goPage('/subPackages/register/register')">{{ t('register.tip4') }}</view>
        <view class="text" @click="openKefu()">{{ t('login.kefu') }}</view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { loginApi } from '@/api/login/login'
import { switchTab, goPage, checkInput } from '@/common/common'
import { useCounterStore } from '@/store/store'
import { showSuccessToast } from 'vant'
import { getCzhiurlApi } from '@/api/user'
import bg from '@/static/logo.png'
import { onLoad } from '@dcloudio/uni-app'
const { t } = useI18n()
const store = useCounterStore()

const loginParams = ref({
  account: '',
  password: ''
})

const kefu_url = ref('')
onLoad(() => {
  getCzhiurlFn()
})

const getCzhiurlFn = async () => {
  const res = await getCzhiurlApi()
  if (res.code === 1) {
    kefu_url.value = res.data.kefu_url
  }
}

const openKefu = () => {
  window.open(kefu_url.value)
}

const checkArr = [
  { key: 'account', message: t('login.account_error') },
  { key: 'password', message: t('login.password_error') }
]

const login = async () => {
  if (!checkInput(checkArr, loginParams.value)) {
    return
  }
  uni.showLoading({ mask: true })
  const res = await loginApi(loginParams.value)
  uni.hideLoading()
  if (res.code === 1) {
    uni.setStorageSync('token', res.data.userinfo.token)
    uni.setStorageSync('userId', res.data.userinfo.id)
    uni.setStorageSync('userInfo', res.data.userinfo)
    store.token = res.data.userinfo.token
    store.userId = res.data.userinfo.userId
    store.getUserInfo()
    showSuccessToast(res.msg)
    setTimeout(() => {
      switchTab('/pages/index/index')
    }, 1000)
  }
}
</script>

<style lang="scss" scoped>
body {
  background: #fff;
}

.wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: calc(var(--vh) * 100);
}
.header {
  background: $color-primary;
  width: 100%;
  border-radius: 0 0 2.25rem 2.25rem;
  margin-bottom: 2rem;
}
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  .bg {
    width: 10.13rem;
    height: 10.13rem;
    margin: 1.44rem auto 0;
    border-radius: 0.31rem;
  }
  .title {
    color: #fff;
    font-size: 1.25rem;
    font-weight: 600;
    margin: 1rem 0 1.88rem;
  }
}
.name {
  margin: 2.3vh auto 9.54vh;
  font-size: 1.5rem;
  color: $uni-color-primary;
}
.button-wrap {
  width: 20rem;
  height: 3.125rem;
  margin-top: 1.875rem;
  .text {
    color: #4a5567;
    font-size: 0.9375rem;
    line-height: 3.125rem;
  }
  .button {
    background: $color-primary;
    width: 100%;
    font-weight: 500;
    font-size: 1.13rem;
  }
}
.mas {
  width: 20rem;
  height: 7.375rem;
  border-radius: 1.25rem;
}
.input_wrap {
  display: flex;
  align-items: center;
  height: 3.06rem;
  border-radius: 0.5rem;
  margin-bottom: 1.25rem;
  background: #c8ccd299;
  border-radius: 0.5rem;
  // border: 0.06rem solid #afafaf;
  padding: 0 0.88rem;
  max-width: 20rem;
  margin-left: auto;
  margin-right: auto;
  font-size: 1rem;
  .icon {
    width: 1.1875rem;
    height: 1.1875rem;
    margin-right: 0.94rem;
    image {
      width: 100%;
      height: 100%;
      display: block;
    }
  }
  input {
    flex: 1;
    text-align: left;
    color: #0b121b;
    .uni-input-placeholder {
      color: #afafaf;
    }
  }
}
.text_button {
  max-width: 20rem;
  font-size: $uni-font-size-1;
  color: $color-black;
  display: flex;
  justify-content: space-between;
  margin: 0.31rem auto;
  view {
    padding: 0.31rem;
  }
}
.button {
  width: 11.25rem;
  height: 3.75rem;
  background-color: $uni-color-primary;
  border-radius: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}
.circle_button {
  border: 0.06rem solid $color-primary;
  background: transparent !important;
  color: $color-black;
}
</style>
