<template>
  <view class="wrap sys-base">
    <view class="top">
      <u--image
          :showLoading="true"
          :src="login_bg"
          width="250rpx"
          height="240rpx"
      />
      <view class="sys-name">华设物联网云平台</view>
      <view class="sys-desc">连接万物，创造无限可能</view>
    </view>
    <view class="content">
      <up-form
          labelPosition="left"
          :model="model"
          :rules="rules"
          ref="uFormRef"
      >
        <up-form-item
            prop="userInfo.name"
        >
          <up-input
              prefixIcon="account-fill"
              :prefixIconStyle="{
                 color: '#007aff'
              }"
              placeholder="请输入用户名"
              border="bottom"
              clearable
              v-model="model.userInfo.name"
          ></up-input>
        </up-form-item>
        <up-form-item
            prop="userInfo.pwd"
        >
          <up-input
              prefixIcon="lock-fill"
              :prefixIconStyle="{
                 color: '#007aff'
              }"
              placeholder="密码"
              border="bottom"
              clearable
              password
              v-model="model.userInfo.pwd"
          ></up-input>
        </up-form-item>
      </up-form>
      <up-button @click="submit" style="margin-top: 20rpx;">登录</up-button>
    </view>
    <view class="buttom">
      <view class="checkbox">
        <up-checkbox
            :customStyle="{marginBottom: '8px'}"
            name="agree"
            usedAlone
            v-model:checked="model.isChecked"
        >
        </up-checkbox>
        <text>我已阅读并同意</text>
        <text class="agreement-title" @click='openAgreement'>《用户隐私协议》</text>
        <privacy v-if='visible' @getVisible='getVisible'/>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import login_bg from '@/static/aiot/login_bg.png'
import {reactive, ref} from 'vue';
import {iotLogin} from "@/api/usr.js";
import {Base64} from "js-base64";
import {reloadPage, setToken, setUserInfo} from "@/util/index.js";
import Privacy from "@/pages/login/privacy.vue";

// 使用 reactive 创建响应式状态
const model = reactive({
  userInfo: {
    name: '',
    pwd: '',
  },
  isChecked: false,
});
const visible = ref(false);
const rules = reactive({
  'userInfo.name': {
    type: 'string',
    required: true,
    message: '请填写登录名',
    trigger: ['blur', 'change'],
  },
  'userInfo.pwd': {
    type: 'string',
    required: true,
    message: '请填写密码',
    trigger: ['blur', 'change'],
  }
});

// 使用 ref 创建响应式引用
const uFormRef = ref(null);

function submit() {
  uFormRef.value.validate().then(async valid => {
    if (valid) {
      if (!model.isChecked) {
        // uni.$u.toast('请阅读并同意用户协议')
        visible.value = true;
        return;
      }
      const params = {
        "grant_type": "password_login",
        "username": model.userInfo.name,
        "password": Base64.encode(model.userInfo.pwd),
        "client_id": "speed",
        "client_secret": "speed1211",
      }
      const {nickname, roleName, token, userId, username} = await iotLogin(params)
      setUserInfo({
        nickname,
        roleName,
        token,
        userId,
        username,
      })
      setToken(token);
      reloadPage()
    } else {
      uni.$u.toast('校验失败')
    }
  }).catch((e) => {
    console.error(e);
    // 处理验证错误
    uni.$u.toast('校验失败')
  });
}

function openAgreement() {
  uni.openPrivacyContract()
}

function getVisible(visib, agree) {
  visible.value = visib;
  model.isChecked = agree;
}
</script>

<style lang="scss" scoped>
.wrap {
  font-size: 28rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  .top {
    margin-top: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    .sys-name {
      font-weight: bold;
      color: #000000;
    }

    > view {
      &:not(:first-child) {
        margin-top: $uni-block-gap;
      }
    }
  }

  .content {
    width: 600rpx;
    margin: 80rpx auto 0;

    .title {
      text-align: left;
      font-size: 60rpx;
      font-weight: 500;
      margin-bottom: 100rpx;
    }

    input {
      text-align: left;
      margin-bottom: 10rpx;
      padding-bottom: 6rpx;
    }

    .tips {
      color: $u-info;
      margin-bottom: 60rpx;
      margin-top: 8rpx;
      font-size: 12px;
    }

    .getCaptcha {
      background-color: rgb(253, 243, 208);
      color: $u-tips-color;
      border: none;
      font-size: 30rpx;
      padding: 12rpx 0;

      &::after {
        border: none;
      }
    }

    .alternative {
      color: $u-tips-color;
      display: flex;
      justify-content: space-between;
      margin-top: 30rpx;
    }
  }

  .buttom {
    .checkbox {
      display: flex;
      align-items: center;
      font-size: 24rpx;

      .checkbox-box {
        margin-right: 10rpx;
      }

      :deep(.u-checkbox__icon-wrap) {
        border-radius: 19px;
      }
    }

    .loginType {
      display: flex;
      padding: 350rpx 150rpx 150rpx 150rpx;
      justify-content: space-between;

      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: $u-content-color;
        font-size: 28rpx;
      }
    }

    .agreement-title {
      color: #007aff;
    }
  }
}
</style>
