<template>
  <div class="login-container">
    <div class="login-header">
      <!-- <img src="@/assets/login-logo.png" class="login-logo"> -->
    </div>
    <div class="login-body">
      <div class="login-l">
        <div class="login-logo">
          <img src="@/assets/HTlogo.png" alt="">
        </div>
        <div class="login-image">
          <img src="@/assets/login-bg.png">
        </div>
      </div>
      <div class="login-r">
        <div class="title-container">
          <!-- IRC Management System -->
          <div class="title">医学影像管理与判读系统</div>
        </div>
        <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on"
          label-position="left">

          <el-form-item prop="username" :rules="[
            { required: true, message: this.$t('login:formRule:userName'), trigger: 'blur' }
          ]">
            <span class="svg-container">
              <svg-icon icon-class="user" />
            </span>
            <!-- User Name -->
            <el-input :maxLength="20" ref="username" v-model="loginForm.username" size="small"
              :placeholder="$t('login:form:userName')" name="username" type="text" tabindex="1" />
          </el-form-item>

          <el-form-item prop="password" :rules="[
            { required: true, message: this.$t('login:formRule:password'), trigger: 'blur' }
          ]">
            <span class="svg-container">
              <svg-icon icon-class="password" />
            </span>
            <!-- password -->
            <el-input :maxLength="32" :key="passwordType" ref="password" v-model="loginForm.password" size="small"
              :type="passwordType" :placeholder="$t('login:form:password')" name="password" tabindex="2"
              @keyup.enter.native="handleLogin" />
            <span class="show-pwd" @click="showPwd">
              <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
            </span>
          </el-form-item>
          <!-- Login -->
          <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:10px;" size="medium"
            @click.native.prevent="handleLogin">
            {{ $t('login:button:login') }}
          </el-button>
          <div style="text-align: right;">
            <!--            <TopLang v-if="VUE_APP_OSS_CONFIG_REGION !== 'oss-us-west-1'"></TopLang>-->
            <!-- Forget password? -->
            <el-button type="text" size="medium" @click.native.prevent="handleResetPwd">
              {{ $t('login:button:forgetPassword') }}
            </el-button>
          </div>
        </el-form>
      </div>
    </div>
    <div class="login-footer" v-if="language === 'zh'">
      <span>Copyright © {{ new Date().getFullYear() }} 北京胡桃计算机技术有限公司
        版权所有</span>
      <span> | </span>
      <a @click="openAbout">
        <span style="color:#00D1B2">关于</span>
      </a>
    </div>
    <el-dialog v-if="aboutVisible" :visible.sync="aboutVisible" width="680px" style="margin-top: 0"
      :close-on-click-modal="false" size="small">
      <div style="
          margin: 0 auto;
          width: 600px;
          line-height: 28px;
          text-align: center;
        ">
        <h1 style="text-align: center; margin-bottom: 30px">关于</h1>
        <p style="margin-bottom: 0px">医学影像管理与判读系统</p>
        <p style="margin-bottom: 20px; margin-top: 0">
          V1.0.0.1
        </p>
        <p style="margin-bottom: 20px">
          Copyright © {{ new Date().getFullYear() }} 北京胡桃计算机技术有限公司
          版权所有
        </p>
        <div style="margin-bottom: 20px">
          <img style="width: 180px" src="@/assets/HTlogo.png" alt="" />
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="aboutVisible = false">
          {{ $t('common:button:close') }}
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
import TopLang from './topLang'
import NoticeMarquee from "../trials/trials-layout/components/noticeMarquee";
export default {
  name: 'Login',
  components: { TopLang },
  data() {
    return {
      VUE_APP_OSS_CONFIG_REGION: process.env.VUE_APP_OSS_CONFIG_REGION,
      aboutVisible: false,
      loginForm: {
        username: '',
        password: ''
      },
      loginRules: {
        username: [
          { required: true, message: this.$t('login:formRule:userName'), trigger: 'blur' },
          { max: 20, message: this.$t('common:ruleMessage:maxLength') }
        ],
        password: [
          // {
          //   required: true,
          //   trigger: "blur",
          //   validator: this.$validatePassword
          // },
          { required: true, message: this.$t('login:formRule:password'), trigger: 'blur' },
          { max: 20, message: this.$t('common:ruleMessage:maxLength') }
        ]
      },
      loading: false,
      passwordType: 'password',
      loginType: null,
      location: null
    }
  },
  computed: {
    ...mapGetters([
      'asyncRoutes',
      'routes',
      'language'
    ])
  },
  mounted() {
    this.loginType = this.$route.query.loginType
    this.location = this.$route.query.location
    zzSessionStorage.setItem('loginType', this.loginType)
    localStorage.setItem('location', this.location)
    if (process.env.VUE_APP_OSS_CONFIG_REGION === 'oss-us-west-1') {
      this.$i18n.locale = 'en'
      this.setLanguage('en')
      this.$updateDictionary()
    } else {
      if (this.location === 'USA') {
        this.$i18n.locale = 'en'
        this.setLanguage('en')
        this.$updateDictionary()
      } else {
        this.$i18n.locale = 'zh'
        this.setLanguage('zh')
        this.$updateDictionary()
      }
    }
  },
  methods: {
    ...mapMutations({ setLanguage: 'lang/setLanguage' }),
    openAbout() {
      this.aboutVisible = true
    },
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    handleLogin() {
      this.loginType = this.$route.query.loginType
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$store.dispatch('user/login', this.loginForm).then((res) => {
            if (!res) {
              // 当前用户为首次登录,请先修改密码之后再次登录
              this.$message.success(this.$t('login:message:login1'))
              setTimeout(() => {
                this.$router.push({ path: `/recompose?userName=${this.loginForm.username}` })
              }, 500)
              return
            }
            this.$store.dispatch('permission/generateRoutes').then(res => {
              this.loading = false
              if (res && res.length > 0) {
                this.$store.dispatch('global/getNoticeList')
                this.$router.addRoutes(res)
                if (this.loginType === 'DevOps') {
                  this.$router.replace({ path: res[0].path })
                  return
                }
                if (this.hasPermi(['role:radmin'])) {
                  this.$router.replace({ path: res[0].path })
                  return
                }
                if (this.hasPermi(['role:air', 'role:rpm', 'role:rcrc', 'role:rir'])) {
                  this.$router.replace({ path: '/trials/trials-list' })
                } else {
                  this.$router.replace({ path: '/trials' })
                }
              } else {
                // 此账户暂未配置菜单权限，请联系管理员处理后再登录。
                this.$message.warning(this.$t('login:message:login2'))
              }
            })
          })
            .catch(() => {
              this.loading = false
            })
        } else {
          // console.log('error submit!!')
          return false
        }
      })
    },
    handleResetPwd() {
      this.$router.push({ name: 'Resetpassword' })
    }
  }
}
</script>

<style lang="scss">
/* 修复input 背景不协调 和光标变色 */

$bg: #283443;
$light_gray: #909399;
$cursor: #fff;

// @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
//   .login-container .el-input input {
//     // color: #fff;
//   }
// }

/* reset element-ui css */
.login-container {
  .el-input {
    display: inline-block;
    height: 47px;
    width: 85%;

    input {
      background: #f4f4f5;
      border: 0px;
      -webkit-appearance: none;
      border-radius: 0px;
      padding: 12px 5px 12px 15px;
      // color: $light_gray;
      height: 47px;
      // caret-color: $cursor;

      // &:-webkit-autofill {
      //   box-shadow: 0 0 0px 1000px $bg inset !important;
      //   -webkit-text-fill-color: $cursor !important;
      // }
    }
  }

  .el-form-item {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #f4f4f5;
    border-radius: 5px;
    color: #454545;
  }
}
</style>

<style lang="scss" scoped>
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #606266;

.login-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: auto;
  background: rgb(249, 249, 249);

  .login-header {
    margin: 10px 0px 20px 10px;
    height: 3rem;
    width: 720px;

    .login-logo {
      height: 100%;
    }
  }

  .login-body {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    // margin-top: -230px;
    // margin-left: -400px;
    width: 1200px;
    height: 600px;
    // margin: 30px auto;
    box-sizing: border-box;
    background: rgb(255, 255, 255);
    border-radius: 10px 0px 0px 10px;

    .login-l {
      position: relative;
      float: left;
      width: 50%;
      height: 100%;

      .login-logo {
        position: absolute;
        top: 35px;
        left: 50px;

        img {
          height: 40px;
        }
      }

      .login-image {
        position: absolute;
        top: 10px;
        left: 0px;
        // transform: translateY(-50%);
        height: 100%;

        img {
          height: 100%;
        }
      }

    }

    .login-r {
      position: relative;
      float: left;
      width: 50%;
      height: 100%;

      .login-form {
        position: absolute;
        top: 50%;
        // transform: translateY(-50%);
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80%;
        padding: 10px;
        margin: 0 auto;
        overflow: hidden;

      }

      .title-container {
        // margin-bottom: 50px;
        margin-top: 15%;

        .title {
          font-size: 35px;
          color: $light_gray;
          text-align: center;
          font-weight: bold;
        }
      }

      .tips {
        font-size: 14px;
        color: #fff;
        margin-bottom: 10px;

        span {
          &:first-of-type {
            margin-right: 16px;
          }
        }
      }

      .svg-container {
        padding: 6px 5px 6px 15px;
        color: $dark_gray;
        vertical-align: middle;
        width: 30px;
        display: inline-block;
      }

      .show-pwd {
        position: absolute;
        right: 10px;
        top: 7px;
        font-size: 16px;
        color: $dark_gray;
        cursor: pointer;
        user-select: none;
      }
    }
  }

  .login-footer {
    position: absolute;
    bottom: 50px;
    left: 0px;
    width: 100%;
    text-align: center;
    line-height: 20px;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    // color: rgb(180, 190, 199);
    color: #909399;

    a {
      display: inline-block;
      text-decoration: none;
      height: 20px;
      line-height: 20px;
      display: flex;
      justify-content: center;
    }

    span {
      margin: 0 2px;

    }

    img {
      height: 20px;
      line-height: 20px;
    }

    // p{
    //   display: inline-block;
    //   height:20px;
    //   line-height:20px;
    //   margin: 0px 0px 0px 5px;
    //   color:#939393;
    // }
  }
}
</style>
