<template>
  <ext-layout>
    <div :class="[showQrcode ? $style.showQr : '', $style.main]">
      <!-- 审计暂不用扫码登陆 -->
      <!-- <a-icon
        v-show="!showQrcode"
        :class="$style.toggle"
        type="sd-qrcode"
        @click="showQrcode = !showQrcode"
      /> -->
      <a-icon
        v-show="showQrcode"
        :class="$style.toggle"
        type="sd-desktop"
        theme="filled"
        @click="showQrcode = !showQrcode"
      />
      <h2 v-show="!showQrcode">欢迎登录系统</h2>
      <h2 v-show="showQrcode">手机扫码 安全登录</h2>
      <div :class="$style.body">
        <sd-login-form v-show="!showQrcode" @loginSuccess="loginSuccess" />
        <div v-show="showQrcode" :class="$style.qr">
          <sd-qrcode v-if="qrcode" :value="qrcode" :options="{ width: 220 }" tag="img" />
          <div :class="$style.qrInfo">
            <a-icon type="scan" />
            请使用手机APP扫描登录
          </div>
        </div>
      </div>
    </div>
  </ext-layout>
</template>

<script>
import { sdSessionStorage } from '@/common/services/storage-service'
import frequentlyService from '../frequently/frequently-service'
import LoginService from './login-service'
import components from './_import-components/sd-login-import'

function hasErrors(fieldsError) {
  return Object.keys(fieldsError).some((field) => fieldsError[field])
}
export default {
  name: 'SdLogin',
  metaInfo: {
    title: '登录',
  },
  components,

  data() {
    return {
      showQrcode: false,
      hasErrors,
      isSubmitting: false,
      isGoWorkbench: false, // 是否直接进入工作台
      qrcode: '',
      handle: null,
      allRouter: [],
    }
  },
  watch: {
    showQrcode(val) {
      if (val) {
        LoginService.getQrCode().then((data) => {
          this.qrcode = JSON.stringify(data)
          this.checkQrCode()
        })
      }
    },
  },
  beforeDestroy() {
    clearTimeout(this.handle)
  },
  methods: {
    checkQrCode() {
      LoginService.checkQrCode(JSON.parse(this.qrcode).code).then((data) => {
        if (!data.success && this.showQrcode) {
          this.handle = setTimeout(this.checkQrCode, 2000)
        }
        if (data.success) {
          this.loginSuccess()
        }
      })
    },

    loginSuccess() {
      // 登陆成功后的事件
      return Promise.all([LoginService.getUserInfo(), LoginService.getUserPerms()]).then(() => {
        // 越权开关写入
        LoginService.getEncryIsOpen()
        LoginService.getCommonConfig().finally(() => {
          frequentlyService.getPersonalsetesList().then((res) => {
            const settingObj = {
              '1': 'WorkbenchFirst', // 直接进入工作台
              '3': 'ApprovalMode', // 审批模式 0：默认 1：嵌入双屏 2；极简审批
            }
            const data = res.data
            Object.keys(settingObj).forEach((key) => {
              const setItem = data.find((d) => d.paramId === key)
              if (setItem) sdSessionStorage.setItem(settingObj[key], setItem.paramValue)
            })
            LoginService.updateTaskCount()
            this.$router
              .replace(this.$route.query.redirect ?? '/sd-frame/iam-content')
              .catch(() => {})
          })
        })
      })
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
// 切换二维码图标的大小
$toggle-size: 70px;
// 左下角遮罩大小的比例
$toggle-cover-percent: 0.5;
// 主要内容区域的宽度
$main-width: 408px;
.main {
  position: absolute;
  top: 50%;
  right: 15%;
  width: $main-width;
  padding: 60px 60px 0 60px;
  padding-bottom: 0;
  background-color: $body-background;
  border-radius: $border-radius-base;
  transform: translate(0, -50%);
  h2 {
    font-size: 1.8em;
    text-align: center;
  }

  .toggle {
    position: absolute;
    top: 0;
    right: 0;
    color: $primary-color;
    cursor: pointer;
    -moz-opacity: 0.5;
    opacity: 0.5;
    &::after {
      position: absolute;
      top: $toggle-size * (1 - 2 * $toggle-cover-percent);
      right: $toggle-size * (1 - 2 * $toggle-cover-percent);
      bottom: 0;
      left: 0;
      content: '';
      border: $toggle-size * $toggle-cover-percent solid $body-background;
      border-top-color: transparent;
      border-right-color: transparent;
    }
    svg {
      width: $toggle-size;
      height: $toggle-size;
    }
  }
}
.qr {
  height: 280px;
  text-align: center;
  background-color: $body-background;

  img {
    width: 240px;
    height: 240px;
  }
}
.qr-info {
  margin-top: 15px;
  text-align: center;
}
.body {
  position: relative;
  margin-top: 60px;
  margin-bottom: 80px;
  :global(.ant-input-prefix) {
    color: $disabled-color;
  }
  .alert {
    position: absolute;
    top: -55px;
    left: 0;
    width: 100%;
  }
}
.show-qr {
  .body {
    margin-top: 0;
    margin-bottom: 30px;
  }
}
</style>
