<template>
  <q-form ref="loginRef">
    <div class="loginIndex">
      <div class="loginBox">
        <!-- STXinwei -->
        <div class="text-white text-h3 q-pa-xl" style="letter-spacing: 5px;">CVD炉数据大屏</div>
        <!-- <gifIcon :gif-json="gif" class="gif"></gifIcon> -->
        <div class="username">
          <!-- <a>用户名</a> -->
          <!-- <q-input
          dark
          color="white"
          class="text-h4"
          placeholder="请输入用户名"
          v-model="loginFormData.username"
          autofocus
        >
          <template v-slot:prepend>
            <q-icon name="account_circle" />
          </template>
</q-input> -->
          <q-input style="width: 450px" dark rounded standout class="text-h6" placeholder="请输入用户名" label="用户名" autofocus
            v-model="loginFormData.userName" @keyup.enter="login"
            :rules="[(val) => val != undefined && val != '' || '用户名不能为空']">
            <template v-slot:prepend>
              <q-icon name="account_circle" />
            </template>
          </q-input>

          <!-- <input
          type="text"
          required
          v-model="loginFormData.username"
          placeholder="请输入用户名"
          class="nameInput"
          auto-complete="new-password"
          autocomplete="new-password"
        /> -->
        </div>
        <div class="userpassword">
          <!-- <a>密码</a> -->
          <!-- <q-input
          dark
          color="white"
          class="text-h4"
          placeholder="请输入密码"
          v-model="loginFormData.password"
          @keyup.enter="login"
        >
          <template v-slot:prepend>
            <q-icon name="lock" />
          </template>
        </q-input> -->
          <q-input style="width: 450px" dark rounded standout class="text-h6" label="密码"
            :type="isPwd ? 'password' : 'text'" placeholder="请输入密码" v-model="loginFormData.pwd" @keyup.enter="login"
            ref="passwordRef" :rules="[(val) => val != undefined && val != '' || '密码不能为空']">
            <template v-slot:prepend>
              <!-- <q-icon name="lock" /> -->
              <q-icon name="vpn_key" />
            </template>
            <template v-slot:append>
              <q-icon :name="isPwd ? 'visibility_off' : 'visibility'" class="cursor-pointer" @click="isPwd = !isPwd" />
            </template>
          </q-input>
          <!-- <input
          type="password"
          required
          v-model="loginFormData.password"
          placeholder="请输入密码"
          class="passWordInput"
          auto-complete="new-password"
          autocomplete="new-password"
          @keyup.enter="login"
        /> -->
        </div>
        <div class="row q-col-gutter-md" style="width:460px;">
          <div :class="noSigninFlag == true ? 'col-6 btnWidth' : 'col-12'">
            <q-btn class="full-width" size="lg" :loading="loginLoading" color="primary" glossy rounded unelevated push
              label="登录" @click="login">
              <template v-slot:loading>
                <q-spinner-ios class="on-left" />
                登录中...
              </template>
            </q-btn>
          </div>
          <div class="col-6 btnWidth" v-if="noSigninFlag">
            <q-btn class="full-width" size="lg" color="orange-6" glossy rounded unelevated push label="免登录"
              @click="noSignin" />
          </div>
        </div>
      </div>

      <!-- <div style="
        position: absolute;
        right: 2%;
        bottom: 3%;
        font-family: STKaiti;
        font-size: 16px;
        color: #eeeeee;
      ">
        —— &nbsp;&nbsp; Easy Come &nbsp; Easy Go &nbsp; &nbsp;
        软件科技有限公司 &nbsp; &nbsp; ——
      </div> -->
    </div>
  </q-form>
</template>

<script setup lang="ts">
import { loginApi } from 'src/api/login/loginApi';
import { LocalStorage, Notify } from 'quasar';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
// import { getMenus } from '../router/routerControl/index';
import menuinfo from 'src/json/menuInfo.json'
import { LoginEntity } from 'src/api/login/model/login';

const noSigninFlag = ref(false);
const isPwd = ref(true);
const router = useRouter();
let loginFormData = ref(new LoginEntity());

const loginLoading = ref(false);
const loginRef = ref();
const login = () => {
  // if (!loginFormData.username) {
  //   Notify.create({
  //     message: '请输入用户名',
  //     color: 'negative',
  //     icon: 'close',
  //   });
  // } else if (!loginFormData.password) {
  //   Notify.create({
  //     message: '请输入密码',
  //     icon: 'close',
  //     color: 'negative',
  //   });
  // } else {
  loginRef.value.validate().then((success: any) => {
    if (success) {
      loginLoading.value = true;
      loginApi.Login(loginFormData.value).then((res: any) => {
        // LocalStorage.set('token', res.tokenValue);
        LocalStorage.set('id', res.id);
        LocalStorage.set('userName', res.nickName);
        LocalStorage.set('userType', res.userType);
        LocalStorage.set('noSignin', true);
        LocalStorage.set('menuInfo', menuinfo)
        router.push({ name: 'web' });
        Notify.create({
          message: `hi, ${res.nickName} 欢迎回来!`,
          icon: 'emoji_emotions',
          color: 'positive',
          position: 'top'
        });

        // getMenus(router)
        //   .then(() => {
        //     router.push({ name: 'web' });
        //     Notify.create({
        //       message: `hi，${res.userName} 欢迎回来!`,
        //       icon: 'emoji_emotions',
        //       color: 'positive',
        //       position: 'top'
        //     });
        //   })
        //   .catch(() => {
        //     Notify.create({
        //       message: '用户菜单异常，请联系管理员处理!',
        //       icon: 'feedback',
        //       color: 'negative',
        //       position: 'top'
        //     });
        //   }).finally(() => {
        //     loginLoading.value = false;
        //   });
        // res.data.platform TODO
        //获取权限数据
        // loginApi.getAuthInfo();
      }).catch(() => {
        loginLoading.value = false;
      });
    }
  })
  // }
};

// 免登录
const noSignin = () => {
  LocalStorage.set('userName', '演示用户');
  LocalStorage.set('noSignin', true);
  LocalStorage.set('menuInfo', menuinfo)
  router.push({ name: 'web' });
  Notify.create({
    message: 'hi, 演示用户 欢迎回来!',
    icon: 'emoji_emotions',
    color: 'positive',
    position: 'top'
  });
}

const userName = LocalStorage.getItem('userName')
const passwordRef = ref();
onMounted(() => {
  if (process.env.NODE_ENV !== 'production') {
    noSigninFlag.value = true;
  }
  if (userName) {
    loginFormData.value.userName = userName.toString()
    passwordRef.value.focus();
  }
  LocalStorage.remove('menuInfo');
  // LocalStorage.remove('token');
});

</script>

<style lang="scss" scoped>
.btnWidth {
  width: 230px;
}

.loginIndex {
  opacity: 1;
  // 新登录样式
  background: url('../../public/icons/reproductive-health-supplies-coalition-2RraPpR-6Tc-unsplash.jpg') no-repeat center center;
  background-size: 100% 100%;
  // 新登录样式
  // background-color: transparent;
  // backdrop-filter: blur(10px); //毛玻璃属性
  // background: #607d8b;
  // background: linear-gradient(135deg,
  //     rgba($bottomDarkColor, 1) 0%,
  //     rgba($bottomlightDarkColor, 1) 100%);
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;

  >.loginBox {
    // 新登录样式
    // background-color: rgba(1, 18, 28, 0.2);
    background-color: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(2px);
    border-radius: 24px;
    box-shadow: 0 7px 8px -4px #0003, 0 12px 17px 2px #00000024, 0 5px 22px 4px #0000001f;
    // box-shadow: 0 11px 15px -7px #0003, 0 24px 38px 3px #00000024, 0 9px 46px 8px #0000001f;
    // box-shadow: 0 -7px 9px -7px #000000b3 inset !important;
    // 新登录样式
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 450px;
    width: 600px;

    >a {
      color: $lightWhiteColor;
      font-weight: 700;
    }

    >.loginTitle {
      font-size: 36px;
    }

    >.inputTip {
      font-size: 14px;
      margin-top: 2.5vh;
    }

    >.loginhint {
      font-size: 12px;
      margin-top: 1.666vh;
      color: rgba($lightWhiteColor, 0.58);
    }

    >.gif {
      width: 145px;
      height: 145px;
    }

    input {
      width: 25.05vw;
      height: 40px;
      outline: none;
      border: none;
      border-bottom: 3px solid $lightWhiteColor;
      padding: 0;
      background: transparent;
      margin-top: 17px;
      padding-bottom: 12px;
      color: $lightWhiteColor;
      font-size: 17px;
      background-clip: text;

      &::first-line {
        color: $lightWhiteColor !important; // 设置输入内容的样式
      }

      -webkit-text-fill-color: $lightWhiteColor; // 改变了字体颜色

      &::-webkit-input-placeholder {
        /* WebKit, Blink, Edge */
        color: $lightWhiteColor;
      }

      :-moz-placeholder {
        /* Mozilla Firefox 4 to 18 */
        color: $lightWhiteColor;
      }

      ::-moz-placeholder {
        /* Mozilla Firefox 19+ */
        color: $lightWhiteColor;
      }

      &:-ms-input-placeholder {
        /* Internet Explorer 10-11 */
        color: $lightWhiteColor;
      }

      &::-ms-input-placeholder {
        /* Microsoft Edge */
        color: $lightWhiteColor;
      }
    }

    >.username {
      margin-top: 5px;
      margin-bottom: 25px;
      display: flex;
      flex-direction: column;

      >a {
        font-size: 17px;
        color: $lightWhiteColor;
      }
    }

    >.userpassword {
      margin-bottom: 25px;
      display: flex;
      flex-direction: column;

      >a {
        font-size: 17px;
        color: $lightWhiteColor;
      }
    }

    >.loginBtn {
      width: 200px;
      height: 55px;
      // background: linear-gradient(121.78deg,
      //     rgb(33, 162, 236) 0%,
      //     rgba(62, 162, 230, 1) 100%);
      min-height: 0;
      min-width: 0;
      border-radius: 35px;
      font-size: 28px;
      color: $lightWhiteColor;
    }
  }
}

.q-field--error .q-field__bottom {
  color: var(--q-negative) !important;
  font-size: 16px !important;
}
</style>