<route lang="json">
{
  "layout": false,
  "style": {
    "navigationStyle": "custom"
  }
}
</route>

<template>
  <view class="login-container">
    <view class="header">
      <view class="title">欢迎来到</view>
      <view class="desc">智慧城企业管理平台</view>
    </view>
    <view class="form">
      <nut-form ref="formRef" :model-value="formState" :rules="rules">
        <nut-form-item prop="account" :show-error-line="false">
          <view class="text-color-1 text-38rpx font-600 mb-18rpx">登录账号</view>
          <nut-input
            v-model="formState.account"
            prop="account"
            no-border
            custom-class="rounded-24px mb-24px px-24px"
            custom-input-class="h-40px!"
            placeholder="请输入您的登录账号"
          />
        </nut-form-item>
        <nut-divider class="divider" />
        <nut-form-item prop="password" :show-error-line="false">
          <view class="text-color-1 text-38rpx font-600 mb-18px">密码</view>
          <nut-input
            v-model="formState.password"
            prop="password"
            type="password"
            no-border
            custom-class="rounded-24px mb-24px px-24px"
            custom-input-class="h-40px!"
            placeholder="请输入密码"
          />
        </nut-form-item>
        <nut-divider class="divider" />
      </nut-form>
      <view class="color-gray text-24rpx mt-24px mb-24px flex items-center">
        <nut-checkbox v-model="isChecks" name="isCheck" :label-size="12" class="mr-0!">
          我已阅读同意
        </nut-checkbox>
        <text class="font-500 text-color-1" @click="goPrivacy">《企业管理平台信息保护政策》</text>
      </view>
      <view class="flex flex-col">
        <nut-button type="primary" class="h-104rpx!" :loading="loginLoading" @click="onSubmit">
          登录
        </nut-button>
        <view class="color-primary text-28rpx font-600 mt-32rpx text-center">忘记密码？</view>
      </view>
    </view>
    <MFooter />
  </view>
</template>

<script setup lang="ts">
  import { useUserStore } from '@/stores/modules/userStore'

  defineOptions({ name: 'Login' })

  const userStore = useUserStore()
  const loginLoading = ref(false)
  const formRef = ref(null)
  const formState = ref({
    account: '13300002222',
    password: 'mooeen',
    endpoint: 2,
  })
  const isChecks = ref(false)
  const rules = ref({
    account: [
      {
        type: 'number',
        required: true,
        message: '请输入账号',
      },
    ],
    password: [
      {
        type: 'string',
        required: true,
        message: '请输入密码',
      },
    ],
  })

  const goPrivacy = () => {
    uni.navigateTo({ url: '/pages-sub/privacy-detail/index' })
  }

  const onSubmit = () => {
    formRef.value.validate().then(({ valid }) => {
      if (valid) {
        if (isChecks.value) {
          loginLoading.value = true
          // 调用登录接口
          userStore
            .loginAction(formState.value)
            .then((res) => {
              if (res) {
                // 登录成功后调用获取用户信息的接口
                userStore.getUserInfoAction().then((res) => {
                  if (res) {
                    userStore.isInstall = true
                    uni.reLaunch({
                      url: '/pages/index/index',
                    })
                  }
                })
              }
            })
            .finally(() => {
              loginLoading.value = false
            })
        } else {
          uni.showToast({
            icon: 'none',
            title: '请先阅读并勾选信息保护政策',
          })
        }
      }
    })
  }

  // const handlePrivacy = (data: boolean) => {
  //   if (data) {
  //     isChecks.value = true
  //   }
  // }
</script>

<style scoped lang="scss">
  .login-container {
    @apply wh-full p-24px bg-bg-page box-border;
    .header {
      @apply mt-120px relative;
      .title {
        @apply text-28px font-600 mt-20px mb-10px text-color-1;
      }
      .desc {
        @apply text-16px text-color-2;
      }
      &::before {
        content: '';
        width: 50%;
        height: 372rpx;
        display: inline-block;
        background-repeat: no-repeat;
        background-position: bottom right;
        background-image: url('@/static/images/img_ch@x3.png');
        background-size: contain;
        position: absolute;
        bottom: -24px;
        right: 0;
      }
    }
    .form {
      @apply my-24px bg-bg-1 rounded-16px px-20px pb-20px pt-36px relative;
      :deep(.nut-form) {
        .nut-cell-group__wrap {
          background: none;
          box-shadow: none;
          .nut-cell {
            @apply p-0;
            &::after {
              border: none;
            }
          }
          .nut-form-item {
            @apply mb-15px;
            background: none;
          }
          .divider {
            @apply mt-0px! mb-24px!;
            color: var(--border-color-1);
          }
        }
      }
    }
  }
</style>
