<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 v-if="language === 'zh'" src="@/assets/zzlogo2.png" alt="">
          <img v-else src="@/assets/zzlogo3.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">{{ $t('login:title:system') }}</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 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 :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="loginIn">
            {{ $t('login:button:login') }}
          </el-button>
          <div style="text-align: right;">
            <el-button type="text" size="medium" @click.native.prevent="handleConfig">
              工作站配置
            </el-button>
          </div>
          <!--          <div style="text-align: right;">-->
          <!--            <TopLang v-if="VUE_APP_OSS_CONFIG_REGION !== 'oss-us-west-1'" />-->
          <!--            &lt;!&ndash; Forget password? &ndash;&gt;-->
          <!--            <el-button type="text" size="medium" @click.native.prevent="handleResetPwd">-->
          <!--              {{ $t('login:button:forgetPassword') }}-->
          <!--            </el-button>-->
          <!--          </div>-->
        </el-form>
      </div>
    </div>
    <el-dialog v-if="configDialog.visible" :visible.sync="configDialog.visible" :close-on-click-modal="false"
      :title="configDialog.title" width="600px" custom-class="base-dialog-wrapper">
      <el-form>
        <el-divider content-position="left">本地工作站</el-divider>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="IP:" label-width="120px">
              <el-input v-model="form.ip" size="mini" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="port:" label-width="120px">
              <el-input v-model="form.port" size="mini" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="AET:" label-width="120px">
              <el-input v-model="form.aet" size="mini" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="存储路径:" label-width="120px">
              <el-input v-model="form.pacsPath" size="mini" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider content-position="left">OSS配置</el-divider>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="region:" label-width="120px">
              <el-input v-model="form.region" size="mini" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="bucket:" label-width="120px">
              <el-input v-model="form.bucket" size="mini" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="accessKeyId:" label-width="120px">
              <el-input v-model="form.accessKeyId" size="mini" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="accessKeySecret:" label-width="120px">
              <el-input v-model="form.accessKeySecret" size="mini" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="访问路径:" label-width="120px">
              <el-input v-model="form.basePath" size="mini" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="存储路径:" label-width="120px">
              <el-input v-model="form.ossPacsPath" size="mini" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider content-position="left">EICS配置</el-divider>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="服务地址:" label-width="120px">
              <el-input v-model="form.eiscPath" size="mini" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <div style="text-align: right">
          <el-button type="primary" @click="close">取消</el-button>
          <el-button type="primary" @click="save">确定</el-button>
        </div>
      </el-form>
    </el-dialog>
    <Vcode :show="isShow" slider-text="拖到滑块完成验证" :imgs="[Img1]" @success="onSuccess" />
    <toggleRole v-if="toggleRoleVisible" :visible.sync="toggleRoleVisible" :loading="toggleRoleLoading"
      @save="loginByRole" @cancel="cancel" />
  </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
import TopLang from './topLang'
// import NoticeMarquee from '../trials/trials-layout/components/noticeMarquee'
import Vcode from 'vue-puzzle-vcode'
import Img1 from '@/assets/pic-1.png'
import axios from "axios";
import Vue from "vue";
import toggleRole from '@/components/toggleRole'
export default {
  name: 'Login',
  components: { TopLang, Vcode, toggleRole },
  data() {
    return {
      VUE_APP_OSS_CONFIG_REGION: process.env.VUE_APP_OSS_CONFIG_REGION,
      configDialog: {
        visible: false,
        title: '工作站配置'
      },
      form: {
        port: '3000',
        aet: 'RAYPLUSAE',
        region: '',
        accessKeyId: '',
        accessKeySecret: '',
        bucket: '',
        basePath: '',
        eiscPath: '',
        pacsPath: '',
        ossPacsPath: '',
        ip: '',
      },
      loginForm: {
        username: '',
        password: ''
      },
      loginRules: {
        username: [
          { required: true, message: this.$t('login:formRule:userName'), trigger: 'blur' },
          { max: 20, message: `${this.$t('common:ruleMessage:maxLength')} 20` }
        ],
        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')} 20` }
        ]
      },
      loading: false,
      passwordType: 'password',
      loginType: null,
      location: null,
      isShow: false,
      Img1,
      toggleRoleVisible: false,
      toggleRoleLoading: false,
    }
  },
  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: {
    close() {
      this.configDialog.visible = false
    },
    save() {
      this.$axios({
        method: 'post',
        url: process.env.VUE_APP_NODE_SERVER_PATH + 'pacs/setConfig',
        data: this.form
      }).then(res => {
        if (res.data.code !== 1) {
          this.$message.error(res.data.message)
        } else {
          this.configDialog.visible = false
          this.$message.success('保存成功')
        }
      })
    },
    handleConfig() {
      this.$axios({
        method: 'get',
        url: process.env.VUE_APP_NODE_SERVER_PATH + 'pacs/getConfig',
      }).then(res => {
        this.configDialog.visible = true
        if (res.data.data) {
          this.form = res.data.data
        }
        console.log(res.data)
      })
    },
    ...mapMutations({ setLanguage: 'lang/setLanguage' }),
    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.isShow = true
        } else {
          // console.log('error submit!!')
          return false
        }
      })
    },
    loginIn(Id) {
      this.loading = true
      this.showCode = false
      if (Id) this.loginForm.UserId = Id
      this.$store
        .dispatch('user/login', this.loginForm)
        .then((res) => {
          if (res.BasicInfo.LoginState === 2) {
            this.$message.warning(this.$t('login:message:login4'))
          }
          if (res.BasicInfo.IsFirstAdd) {
            // 当前用户为首次登录,请先修改密码之后再次登录
            this.$message.success(this.$t('login:message:login1'))
            setTimeout(() => {
              this.$router.push({
                path: `/recompose?userName=${this.loginForm.username}`,
              })
            }, 500)
            return
          } else if (res.BasicInfo.NeedChangePassWord) {
            // 请先修改密码后再登录！
            this.$alert(
              this.$t('login:message:login3'),
              this.$t('common:title:warning'),
              {
                callback: (action) => {
                  this.$router.push({
                    path: `/recompose?userName=${this.loginForm.username}`,
                  })
                  return
                },
              }
            )
            return
          }
          // else if (res.IsMFA) {
          //   zzSessionStorage.removeItem('userId')
          //   zzSessionStorage.removeItem('identityUserId')
          //   this.$MFA({
          //     UserId: res.BasicInfo.IdentityUserId,
          //     EMail: res.BasicInfo.EMail,
          //     username: this.loginForm.username,
          //     callBack: this.changeRoleLogin,
          //     cancelBack: () => {
          //       this.loading = false
          //     },
          //   })
          //   return
          // }
          // else if (res.BasicInfo.LoginState === 2) {
          //   // 本次登录的IP或设备与上次不一致，请确认'
          //   // this.$alert(this.$t('login:message:login4'), this.$t('common:title:warning'))
          //   this.$message.warning(this.$t('login:message:login4'))
          // }
          zzSessionStorage.removeItem('userId')
          zzSessionStorage.removeItem('identityUserId')
          this.changeRoleLogin()
        })
        .catch(() => {
          this.showCode = true
          this.loading = false
        })
    },
    loginByRole(userRoleId) {
      this.toggleRoleLoading = true
      this.$store
        .dispatch('user/loginByRole', { userRoleId })
        .then((res) => {
          this.toggleRoleLoading = false
          if (res) {
            return this.$router.replace({ path: '/trials/trials-list' })
            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.LoginState === 2) {
                  //   this.$message.warning(this.$t('login:message:login4'))
                  // }
                  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' })
                    this.$router.replace({ path: '/trials/trials-list' })
                  }
                } else {
                  this.toggleRoleLoading = false
                  // 此账户暂未配置菜单权限，请联系管理员处理后再登录。
                  this.$message.warning(this.$t('login:message:login2'))
                }
              })
              .catch((err) => {
                this.toggleRoleLoading = false
              })
          } else {
            this.toggleRoleLoading = false
          }
        })
        .catch(() => {
          this.showCode = true
          this.loading = false
          this.toggleRoleLoading = false
        })
    },
    changeRoleLogin() {
      if (
        Array.isArray(this.$store.state.user.roles)
      ) {
        let role = this.$store.state.user.roles.find(item => item.UserTypeEnum == 1)
        if (!role) return this.$message.warning(this.$t('toggleRole:tip:noRole'))
        return this.loginByRole(role.Id)
      }
      if (
        Array.isArray(this.$store.state.user.roles) &&
        this.$store.state.user.roles.filter((item) => item.IsUserRoleDisabled)
          .length ===
        this.$store.state.user.roles.length - 1
      ) {
        let role = this.$store.state.user.roles.find(
          (item) => !item.IsUserRoleDisabled
        )
        this.loginByRole(role.Id)
        return
      }
      return (this.toggleRoleVisible = true)
    },
    cancel() {
      this.showCode = true
      this.loading = false
      this.toggleRoleLoading = false
      // this.toggleRoleVisible = false
    },
    onSuccess() {
      this.isShow = false
      this.loginIn()
    },
    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-dialog__wrapper {
    .el-input {
      display: inline-block;
      height: 47px;
      width: 100%;
    }

    .el-form-item__label {
      line-height: 45px;
    }
  }
}

.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,
.login-container:not(.base-dialog-wrapper) {
  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>
