<template>
  <div>
    <div class="login-container">
      <div class="login-backdrop">
        <div class="login-orb login-orb--one"/>
        <div class="login-orb login-orb--two"/>
        <div class="login-orb login-orb--three"/>
      </div>
      <div class="login-shell">
        <section class="login-hero">
<!--          <div class="login-hero__badge">{{ currentLocaleLabel }}</div>-->
          <h1 class="login-hero__title">{{ $t('login.systemName') }}</h1>
          <div class="login-hero__grid">
            <div class="hero-card hero-card--primary">
              <span class="hero-card__value">{{ currentDateLabel }}</span>
              <span class="hero-card__label">{{ currentLocaleLabel }}</span>
            </div>
<!--            <div class="hero-card hero-card&#45;&#45;soft">-->
<!--              <span class="hero-card__value">{{ currentLocaleLabel }}</span>-->
<!--              <span class="hero-card__label">{{ $t('login.loginButton') }}</span>-->
<!--            </div>-->
          </div>
        </section>

        <el-form
          ref="loginForm"
          :model="loginForm"
          :rules="loginRules"
          auto-complete="on"
          label-position="left"
          label-width="0px"
          class="card-box login-form"
        >
          <div class="login-form__header">
            <el-dropdown class="login-language" trigger="click" @command="changeLanguage">
              <el-button class="login-language-button" size="mini" type="text">
                {{ currentLocaleLabel }}
                <i class="el-icon-arrow-down el-icon--right"/>
              </el-button>
              <el-dropdown-menu slot="dropdown" class="login-dropdown">
                <el-dropdown-item
                  v-for="item in localeOptions"
                  :key="item.value"
                  :command="item.value"
                  :disabled="item.value === currentLocale"
                >
                  {{ item.label }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <h1 class="title">
              <div class="title__main">{{ $t('login.systemName') }}</div>
              <div class="title__meta">{{ currentDateLabel }}</div>
            </h1>
          </div>
          <div class="line"/>
          <div class="content">
            <el-form-item prop="username">
              <span class="svg-container svg-container_login">
                <svg-icon icon-class="username" />
              </span>
              <el-input v-model="loginForm.username" name="username" type="text" auto-complete="off" :placeholder="$t('login.usernamePlaceholder')" @input.native="changeUser" />
            </el-form-item>
            <el-form-item prop="password">
              <span class="svg-container">
                <svg-icon icon-class="password"/>
              </span>
              <el-input
                v-model="loginForm.password"
                :type="pwdType"
                name="password"
                auto-complete="on"
                :placeholder="$t('login.passwordPlaceholder')"
                @keyup.enter.native="handleLogin"
              />
              <span class="show-pwd" @click="showPwd"><svg-icon icon-class="eye" /></span>
            </el-form-item>
            <div style="display: flex;align-items: center;">
              <el-checkbox v-model="loginForm.checked" class="remeberPassword">{{ $t('login.rememberPassword') }}</el-checkbox>
            <!-- <el-button type="text" class="change-password-button" @click="handleEdit('form')">{{ $t('login.changePassword') }}</el-button> -->
            </div>
            <el-button :loading="loading" class="signIn" type="primary" style="width:100%;" @click.native.prevent="handleLogin">
              <span style="font-size: 20px!important;">{{ $t('login.loginButton') }}</span>
            </el-button>
          </div>
        </el-form>
      </div>
    </div>

    <el-dialog :visible.sync="dialogFormVisible" :title="$t('login.changePassword')" center style="min-height: 200px" width="400px">
      <el-form ref="form" :model="form" :rules="rules" label-position="left" label-width="150px">
        <el-form-item :label="$t('login.account')" prop="Account" style="display: inline-block">
          <el-input v-model="form.Account" size="small" style="width:200px"/>
        </el-form-item>
        <el-form-item :label="$t('login.oldPassword')" prop="beforPassword" style="display: inline-block">
          <el-input v-model="form.beforPassword" size="small" style="width:200px"/>
        </el-form-item>
        <el-form-item :label="$t('login.newPassword')" prop="newPassword" style="display: inline-block">
          <el-input v-model="form.newPassword" size="small" style="width:200px"/>
        </el-form-item>
        <el-form-item :label="$t('login.confirmPassword')" prop="againPassword" style="display: inline-block">
          <el-input v-model="form.againPassword" size="small" style="width:200px"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="callOff()">{{ $t('common.cancel') }}</el-button>
        <el-button type="primary" size="small" @click="EditPassword('form')">{{ $t('common.confirm') }}</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import { cloudEditPassword, editPassword } from '@/api/login'
import { setLocale, SUPPORT_LOCALES } from '@/lang'
import Cookie from 'js-cookie'

export default {
  name: 'Login',
  data() {
    return {
      list: [],
      form: {
        againPassword: '',
        Account: '',
        beforPassword: '',
        newPassword: ''
      },
      dialogFormVisible: false,
      loginForm: {
        username: '',
        password: '',
        checked: false
      },
      localeOptions: [
        { value: 'zh-CN', label: '中文' },
        { value: 'en-US', label: 'English' }
      ],
      loading: false,
      pwdType: 'password'
    }
  },
  computed: {
    currentLocale() {
      return this.$i18n.locale
    },
    currentLocaleLabel() {
      const current = this.localeOptions.find(item => item.value === this.currentLocale)
      return current ? current.label : this.$t('common.language')
    },
    currentDateLabel() {
      return new Intl.DateTimeFormat(this.currentLocale, {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit'
      }).format(new Date())
    },
    rules() {
      return {
        againPassword: [
          { required: true, message: this.$t('login.confirmPasswordPlaceholder'), trigger: 'blur' },
          { required: true, trigger: 'blur', validator: this.validateConfirmPassword }],
        Account: [{ required: true, trigger: 'blur', validator: this.validateUsername }],
        beforPassword: [{ required: true, message: this.$t('login.oldPasswordPlaceholder'), trigger: 'blur' }],
        newPassword: [{ required: true, message: this.$t('login.newPasswordPlaceholder'), trigger: 'blur' }]
      }
    },
    loginRules() {
      return {
        username: [{ required: true, trigger: 'blur', validator: this.validateUsername }]
        // password: [{ required: true, trigger: 'blur', validator: validatePass }]
      }
    }
  },
  // 页面加载调用获取cookie值
  mounted() {
    this.getCookie()
  },
  methods: {
    validateConfirmPassword(rules, value, callback) {
      if (this.form.newPassword !== this.form.againPassword) {
        callback(new Error(this.$t('login.passwordNotSame')))
      } else {
        callback()
      }
    },
    validateUsername(rule, value, callback) {
      // if (!isvalidUsername(value)) {
      //   callback(new Error('请输入4-5位工号'))
      // } else {
      //   callback()
      // }
      callback()
    },
    showPwd() {
      if (this.pwdType === 'password') {
        this.pwdType = ''
      } else {
        this.pwdType = 'password'
      }
    },
    changeUser() {
      this.loginForm.password = ''
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$store.dispatch('Login', this.loginForm).then(() => {
            this.loading = false
            this.$router.push({ path: '/' })
          }).catch(() => {
            this.loading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
        if (this.loginForm.checked === true) { // 传入账号名，密码，和保存天数3个参数
          this.setCookie(this.loginForm.username, this.loginForm.password, this.loginForm.checked)
        } else {
          this.clearCookie()
        }
      })
    },
    // 设置cookie
    setCookie(username, password, checked) {
      Cookie.set('username', username, { expires: 7 })
      Cookie.set('password', password, { expires: 7 })
      Cookie.set('checked', checked, { expires: 7 })
    },
    // 读取 cookie
    getCookie() {
      this.loginForm.username = Cookie.get('username')
      this.loginForm.password = Cookie.get('password')
      this.loginForm.checked = Boolean(Cookie.get('checked'))
    },
    // 清除cookie
    clearCookie() {
      Cookie.remove('username')
      Cookie.remove('password')
      Cookie.remove('checked')
    },
    handleEdit() {
      this.addForm('form', [this.dialogFormVisible = true])
    },
    callOff() {
      this.dialogFormVisible = false
    },
    changeLanguage(locale) {
      if (SUPPORT_LOCALES.indexOf(locale) === -1 || locale === this.currentLocale) return
      setLocale(locale)
      this.$message.success(this.$t('common.language') + ': ' + this.currentLocaleLabel)
    },
    EditPassword(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          editPassword(this.form.Account, this.form.beforPassword, this.form.newPassword, 5).then(response => {
            if (response.data.result[0].result === '1') {
              if (response.data.output[0].返回 === '1') {
                cloudEditPassword(this.form.Account, this.form.newPassword).then(response => {
                  console.log(response, 333)
                  if (response.data[0].result === '1') {
                    this.$message.success(this.$t('login.changeSuccess'))
                    this.dialogFormVisible = false
                  } else {
                    this.$message.error(this.$t('login.editFailed'))
                  }
                })
              } else {
                this.$message.error(this.$t('login.accountPasswordError'))
              }
            } else {
              this.$message.error(this.$t('login.editFailed'))
            }
          })
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
  .login-container {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background:
      linear-gradient(115deg, rgba(7, 30, 72, 0.72), rgba(17, 91, 174, 0.44)),
      url("../../../static/login.png") center center / cover no-repeat;

    input:-webkit-autofill {
      -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
      -webkit-text-fill-color: #24405f !important;
    }

    input {
      background: transparent;
      border: none;
      -webkit-appearance: none;
      padding: 0 8px 0 14px;
      color: #24405f;
      height: 56px;
      line-height: 56px;
    }

    .el-input {
      display: inline-block;
      height: 56px;
      width: calc(100% - 56px);
    }

    .el-input__inner {
      border: none !important;
      background: transparent !important;
      font-size: 17px !important;
      color: #24405f !important;
      padding: 0 !important;
      height: 56px;
      line-height: 56px;
    }

    .el-form-item {
      margin-bottom: 18px;
      border: 1px solid rgba(125, 162, 214, 0.36);
      background: rgba(245, 249, 255, 0.92);
      border-radius: 18px;
      color: #454545;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
      transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
    }

    .el-form-item:focus-within {
      border-color: rgba(21, 118, 232, 0.72);
      box-shadow: 0 14px 26px rgba(21, 118, 232, 0.14);
      transform: translateY(-1px);
    }
  }

  .login-backdrop {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(90deg, rgba(8, 33, 79, 0.78) 0%, rgba(8, 33, 79, 0.32) 40%, rgba(255, 255, 255, 0.08) 100%);
  }

  .login-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(6px);
  }

  .login-orb--one {
    top: 10%;
    left: 8%;
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, rgba(93, 176, 255, 0.28) 0%, rgba(93, 176, 255, 0) 72%);
  }

  .login-orb--two {
    right: 18%;
    bottom: 12%;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(159, 210, 171, 0.22) 0%, rgba(159, 210, 171, 0) 72%);
  }

  .login-orb--three {
    top: 28%;
    right: 10%;
    width: 140px;
    height: 140px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 74%);
  }

  .login-shell {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 36px;
    max-width: 1320px;
    min-height: 100%;
    margin: 0 auto;
    padding: 40px 48px;
  }

  .login-hero {
    flex: 1;
    max-width: 540px;
    color: #ffffff;
  }

  .login-hero__badge {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .login-hero__title {
    margin: 22px 0 0;
    font-size: 44px;
    line-height: 1.2;
    font-weight: 700;
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  }

  .login-hero__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 34px;
  }

  .hero-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 132px;
    padding: 22px;
    border-radius: 24px;
    backdrop-filter: blur(12px);
    box-shadow: 0 20px 40px rgba(8, 26, 58, 0.18);
  }

  .hero-card--primary {
    background: rgba(255, 255, 255, 0.16);
  }

  .hero-card--soft {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(126, 198, 255, 0.12));
  }

  .hero-card__value {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
  }

  .hero-card__label {
    margin-top: 12px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.84);
    letter-spacing: 0.04em;
  }

  .login-form {
    position: relative;
    width: 100%;
    max-width: 500px;
    padding: 28px 28px 30px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 28px 60px rgba(9, 31, 74, 0.22);
    backdrop-filter: blur(18px);
  }

  .login-form__header {
    position: relative;
    padding-right: 110px;
  }

  .login-language {
    position: absolute;
    top: 0;
    right: 0;

    .login-language-button {
      min-width: 86px;
      min-height: 38px;
      padding: 0 12px;
      border-radius: 12px;
      background: rgba(21, 118, 232, 0.08);
      color: #1576e8;
      font-size: 13px;
      box-shadow: inset 0 0 0 1px rgba(21, 118, 232, 0.12);
    }

    .login-language-button:hover,
    .login-language-button:focus {
      color: #0f5eb8;
      background: rgba(21, 118, 232, 0.12);
    }
  }

  .title {
    margin: 0;
    padding-right: 10px;
    color: #123d70;
    text-align: left;
  }

  .title__main {
    font-size: 31px;
    line-height: 1.28;
    font-weight: 700;
    letter-spacing: 0.02em;
  }

  .title__meta {
    margin-top: 10px;
    font-size: 13px;
    color: #7890ab;
    letter-spacing: 0.05em;
  }

  .line {
    width: 100%;
    margin: 24px auto 24px;
    height: 1px;
    background: linear-gradient(90deg, rgba(21, 118, 232, 0.44), rgba(21, 118, 232, 0));
  }

  .content {
    width: 100%;
  }

  .svg-container {
    padding: 0 0 0 18px;
    color: #1576e8;
    font-size: 20px !important;
    vertical-align: middle;
    width: 48px;
    line-height: 56px;
    display: inline-block;

    &_login {
      font-size: 20px;
    }
  }

  .signIn {
    width: 100%;
    min-height: 56px;
    margin-top: 16px;
    border: none;
    border-radius: 18px;
    font-size: 18px;
    color: #ffffff;
    box-shadow: 0 18px 32px rgba(21, 118, 232, 0.26);
    background: linear-gradient(135deg, #1576e8 0%, #2ea2ff 55%, #77d1b8 100%);
  }

  .signIn:hover,
  .signIn:focus {
    background: linear-gradient(135deg, #1169cf 0%, #2194ee 55%, #67c2aa 100%);
  }

  .remeberPassword {
    color: #4f6987;
  }

  .change-password-button {
    margin-left: auto;
    color: #1576e8;
  }

  .show-pwd {
    position: absolute;
    right: 16px;
    top: 16px;
    font-size: 17px;
    color: #1576e8;
    cursor: pointer;
    user-select: none;
  }

  .login-dropdown.el-dropdown-menu {
    border: none;
    border-radius: 14px;
    box-shadow: 0 18px 36px rgba(25, 63, 115, 0.16);
    padding: 8px;
  }

  .login-dropdown .el-dropdown-menu__item {
    border-radius: 10px;
    color: #23466f;
  }

  .login-dropdown .el-dropdown-menu__item:not(.is-disabled):hover {
    background: #edf5ff;
    color: #1576e8;
  }

  @media (max-width: 1080px) {
    .login-shell {
      justify-content: center;
      padding: 28px 20px;
    }

    .login-hero {
      display: none;
    }
  }

  @media (max-width: 640px) {
    .login-form {
      max-width: none;
      padding: 22px 18px 24px;
      border-radius: 24px;
    }

    .login-form__header {
      padding-right: 0;
    }

    .login-language {
      position: static;
      display: flex;
      justify-content: flex-end;
      margin-bottom: 14px;
    }

    .title__main {
      font-size: 24px;
    }
  }
</style>
<style>
  .remeberPassword .el-checkbox__inner:hover{
    border: 1px solid #1576e8;
  }
  .remeberPassword .el-checkbox__input.is-checked .el-checkbox__inner{
    background-color: #1576e8;
    border-color: #1576e8;
  }
  .remeberPassword .el-checkbox__input.is-checked+.el-checkbox__label{
    color: #1576e8;
  }
  .remeberPassword .el-checkbox__input.is-focus .el-checkbox__inner{
    border-color: #1576e8;
  }
  .login-container input:-webkit-autofill{
    -webkit-box-shadow:0 0 0 1000px #fff inset !important;
    -webkit-text-fill-color: #29335b !important;
  }
</style>
