<template>
  <view class="login">
    <uv-navbar
      title="营销行为信息化管控系统"
      @leftClick="leftClick"
      fixed
      bg-color="rgba(0,0,0,0)"
    />
    <view class="login-bg" />
    <view class="login-title">欢迎登录</view>
    <view class="login-form">
      <uv-form
        labelPosition="top"
        labelWidth="80"
        :labelStyle="labelStyle"
        :model="formData"
        ref="form"
      >
        <uv-form-item label="手机号" prop="formData.phone" borderBottom>
          <view class="pbone-input">
            <input
              class="login-input"
              clearable
              maxlength="11"
              v-model="formData.phone"
              border="none"
              type="number"
              placeholder="请输入手机号"
            />
          </view>
        </uv-form-item>
        <uv-form-item label="密码" prop="formData.password" borderBottom>
          <view class="pbone-input">
            <input
              class="login-input"
              clearable
              v-model="formData.password"
              border="none"
              type="password"
              placeholder="请输入密码"
            />
          </view>
        </uv-form-item>
      </uv-form>
      <view class="agreement">
        <checkbox-group @change="agreemetChecked = !agreemetChecked">
          <checkbox :checked="agreemetChecked" style="transform: scale(0.8)" color="#6eb657" />
        </checkbox-group>
        <view class="read-content"
          >已阅读并同意<text class="primarily-text" @click="readAgreementAndPolicy('platformUsers')"
            >《平台用户协议》</text
          >、<text class="primarily-text" @click="readAgreementAndPolicy('privacyPolicy')"
            >《隐私权政策》</text
          >、<text class="primarily-text" @click="readAgreementAndPolicy('personalInfoAuth')"
            >《个人信息使用授权书》</text
          ></view
        >
      </view>
      <view class="login-btn">
        <button class="btn" @click="loginBtnClck">登录</button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { isValidPhoneNumber } from '@/utils'
import { useLoginStore } from '@/store/login'
import { useTabbar } from '@/store/tabbar'

const tabbar = useTabbar()

const labelStyle = {
  fontSize: '32rpx',
  fontWeight: 600,
  color: '#333'
}

const formData = reactive({
  phone: '',
  password: ''
})

// 验证码
const readAgreementAndPolicy = (type: string) => {
  uni.navigateTo({
    url: `/pages-sub-packages/agreement/${type}`
  })
}

const loginStore = useLoginStore()
const agreemetChecked = ref(false)
async function loginBtnClck() {
  if (!formData.phone) {
    return uni.showToast({
      title: '请输入手机号',
      icon: 'none'
    })
  }
  if (!isValidPhoneNumber(formData.phone)) {
    return uni.showToast({
      title: '请检查手机号码格式',
      icon: 'none'
    })
  }
  if (!formData.password) {
    return uni.showToast({
      title: '密码不能为空',
      icon: 'none'
    })
  }
  if (!agreemetChecked.value) {
    return uni.showToast({
      title: '请先勾选协议',
      icon: 'none'
    })
  }
  try {
    const res = await loginStore.loginByPassword(formData)

    const roles: number[] = res.roles
    // 当单个角色
    if (roles.length === 1) {
      // 角色为5或者6 是全职或者兼职
      if (roles.includes(5) || roles.includes(6)) {
        tabbar.setRoleType(0)
      } else {
        tabbar.setRoleType(1)
      }
    }
    tabbar.setCurrentTabbar('work')
    uni.reLaunch({
      url: '/pages/index/index'
    })
  } catch (err) {
    console.log('err', err)
  }
}

const leftClick = () => {
  uni.navigateBack()
}
</script>

<style lang="scss" scoped>
.login {
  padding: 0 50rpx;
}
.login-bg {
  position: absolute;
  z-index: -333;
  top: 0;
  left: 0;
  right: 0;
  height: 800rpx;
  background: linear-gradient(#faf5eb 0%, rgba(255, 255, 255, 0) 100%);
}
.login-title {
  margin-top: 300rpx;
  color: #333;
  font-size: 56rpx;
  font-weight: 500;
}
.login-form {
  margin-top: 80rpx;
  .pbone-input {
    display: flex;
    justify-content: space-between;
  }
  .login-input {
    margin: 20rpx 0 0 10rpx;
  }
  :deep(.uv-form-item) {
    margin-bottom: 40rpx;
  }
  .agreement {
    display: flex;
    font-size: 26rpx;
    font-weight: 400;
    line-height: 40rpx;
    .read-content {
      .primarily-text {
        color: #6eb657;
      }
    }
  }
  .login-btn {
    margin-top: 70rpx;
    .btn {
      width: 640rpx;
      height: 96rpx;
      border-radius: 200rpx;
      background-color: #6eb657;
      text-align: center;
      color: #fff;
      font-size: 40rpx;
      font-weight: 600;
    }
  }
  .login-password {
    margin-top: 50rpx;
    color: #999;
    font-size: 32rpx;
    text-align: center;
    font-weight: 400;
    line-height: 60rpx;
  }
}
</style>
