<template>
  <a-row style="height: 100vh; width: 100vw">
    <a-col :span="24">
      <div
        style="
          width: 100%;
          height: 100vh;
          position: relative;
        "
      >
        <div style="position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%)">
          <!-- 登录 -->
          <a-card style="width: 400px"
            ><a-form
              :model="formState"
              name="normal_login"
              class="login-form"
              @finish="onFinish"
              @finishFailed="onFinishFailed"
            >
              <a-divider>景上出行</a-divider>
              <a-form-item
                label=""
                name="username"
                :rules="[{ required: true, message: '请输入账号名称!' }]"
              >
                <a-input placeholder="请输入账号名称" v-model:value="formState.username">
                  <template #prefix>
                    <UserOutlined class="site-form-item-icon" />
                  </template>
                </a-input>
              </a-form-item>

              <a-form-item
                label=""
                name="password"
                :rules="[{ required: true, message: '请输入密码!' }]"
              >
                <a-input-password placeholder="请输入密码" v-model:value="formState.password">
                  <template #prefix>
                    <LockOutlined class="site-form-item-icon" />
                  </template>
                </a-input-password>
              </a-form-item>

              <a-form-item>
                <div style="display: flex; justify-content: center">
                  <a-button
                    type="primary"
                    html-type="submit"
                    style="background-color: #28c09a; width: 400px"
                  >
                    登录
                  </a-button>
                </div>
              </a-form-item>
            </a-form>
          </a-card>
        </div>
      </div>
    </a-col>
  </a-row>
</template>
<script setup>
import { LockOutlined, UserOutlined } from '@ant-design/icons-vue'
import { reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getLoginAPI, getUserZone, getUserOperation } from '@/apis/login.js'
import { message } from 'ant-design-vue'
import { useTokenStore } from '@/stores/token';
import { setCache, clearStorage } from '@/utils/authority';
const router = useRouter()
const formState = reactive({
  username: '',
  password: ''
})

//清除缓存
onMounted(() => {
  clearStorage(); 
})

//点击登录按钮
const onFinish = async () => {
  const res = await getLoginAPI(formState.username, formState.password);
  console.log('res', res)
  if (res["code"] == 200 && res.data) {
    if(res.data.permCodes.length == 0){
      message.error('该用户没有权限！');
      return
    }
    if (res.data.permCodes.includes('operate.web') === -1) {
      message.error('该用户没有权限！');
      return
    }
    const tokenStore = useTokenStore();
    tokenStore.setToken(res.data.token);
    setCache('ebike-token', res.data.token);
    setCache('ebike-userinfo', res.data.staff);
    setCache('ebike-permcodes', res.data.permCodes);
    message.success('登录成功！', 3).then(async() => {
      const rzone = await getUserZone();
      if (rzone.code == 200) {
        setCache('ebike-userzone', rzone.data);
      } else {
        message.error(rzone.message);
        clearStorage();
        return
      }
      const roperation = await getUserOperation();
      if (roperation.code == 200) {
        setCache('ebike-useroperation', roperation.data);
        if(roperation.data.length > 0){
          setCache('ebike-userdefultoperation',  roperation.data[0]);
        }
      } else {
        message.error(roperation.message);
        clearStorage();
        return 
      }
      // 跳转到首页
      router.replace('/');
    });
  } else {
    message.error(res.message);
    clearStorage();
    return
  }
}
const onFinishFailed = (errorInfo) => {
  console.log('Failed:', errorInfo)
  clearStorage();
}

</script>
<style lang="less" scoped></style>
