<i18n>
{
  "zh-CN": {
    "title": "企业网上银行",
    "lang-type": "简体版",
    "operate-book": "操作手册",
    "apply-book": "网上银行申请书",
    "custom-phone": "客服热线",
    "announce": "公告",
    "announce-content": "关于企业网银2020年4月28日功能更新的通知",
    "login-title": "企业网银登录",
    "login-v1": "专业版",
    "login-v2": "普通版",
    "forget-pwd": "忘记密码？",
    "user-placeholder": "请输入用户名",
    "pwd-placeholder": "请输入登录密码",
    "code-title": "验证码",
    "code-change": "换一换",
    "login-btn": "登 录",
    "about-bank": "关于企业网上银行 网站声明 本网站支持IPv6 客服 xxxxx",
    "tip1": "为了您能获得最佳体验，建议使用IE9及IE9以上浏览器登录网上银行。请登录正确的网上银行网址，操作系统支持：Windows(Vista、7、8、9、10)系统。",
    "tip2": "请不要在任何时候及情况下，将您的账号、密码告诉他人。使用完毕后请安全退出网上银行。"
  },
  "zh-TW": {
    "title": "企業網上銀行",
    "lang-type": "繁體版",
    "operate-book": "操作手冊",
    "apply-book": "網上銀行申請書",
    "custom-phone": "客服熱線",
    "announce": "公告",
    "announce-content": "關於企業網銀2020年4月28日功能更新的通知",
    "login-title": "企業網銀登陸",
    "login-v1": "專業版",
    "login-v2": "普通版",
    "forget-pwd": "忘記密碼？",
    "user-placeholder": "請輸入用戶名",
    "pwd-placeholder": "請輸入登錄密碼",
    "code-title": "驗證碼",
    "code-change": "換一換",
    "login-btn": "登 錄",
    "about-bank": "關於企業網上銀行 網站聲明 本網站支持IPv6 客服 xxxxx",
    "tip1": "為了您能獲得最佳體驗，建議使用IE9或者IE9以上瀏覽器登錄網上銀行。請登錄正確的網上銀行網址，操作系統支持：Windows(Vista、7、8、9、10)系統。",
    "tip2": "請不要在任何時候及情況下，將您的賬號、密碼告訴他人。使用完畢後請安全退出網上銀行。"
  }
}
</i18n>
<template>
  <div>
    <el-header>
      <el-row class="login-header" align="middle">
        <el-col :span="12">{{ t('title') }}</el-col>
        <el-col :span="12" class="login-header-r">
          <p @click="changeLange()">{{ t('lang-type') }}</p>
          <p>{{ t('operate-book') }}</p>
          <p>{{ t('apply-book') }}</p>
          <p>{{ t('custom-phone') }}</p>
        </el-col>
      </el-row>
    </el-header>
    <el-main class="login-main">
      <el-form ref="elForm" :model="form" :rules="rules" class="login-form" size="large">
        <p class="login-form-title">{{ t('login-title') }}</p>
        <el-form-item prop="loginType" >
          <el-radio-group v-model="form.loginType">
            <el-radio-button label="1">{{ t('login-v1') }}</el-radio-button>
            <el-radio-button label="2">{{ t('login-v2') }}</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="userName" >
          <el-input  prefix-icon="User" v-model="form.userName" :placeholder="t('user-placeholder')"/>
        </el-form-item>
        <el-form-item  prop="passWord" >
          <el-input prefix-icon="Lock" maxlength="6" v-model="form.passWord" type="password" :placeholder="t('pwd-placeholder')"/>
        </el-form-item>
        <el-form-item prop="checkCode">
          <el-input v-model="form.checkCode" maxlength="4" class="login-check-code">
            <template #prefix>
              <span style="margin-right: 5px;">{{ t('code-title') }}</span>
            </template>
            <template #append>
              <div>
                <img src="xxxx.png" width="60">
                <span>{{ t('code-change') }}</span>
              </div>
            </template>
          </el-input>
        </el-form-item>
        <div style="padding-top: 20px;">
          <p style="text-align: right; font-size: 12px; line-height: 20px;">{{ t('forget-pwd') }}</p>
          <el-button :loading="loading" type="primary" @click="submit" style="width: 100%;">{{ t('login-btn') }}</el-button>
        </div>
      </el-form>
    </el-main>
    <el-footer class="login-footer">
      <p>{{ t('about-bank') }}</p>
      <p>{{ t('tip1') }}</p>
      <p>{{ t('tip2') }}</p>
      <p></p>
    </el-footer>
  </div>
</template>

<script lang="ts">
import { useLoginStore } from '@/portal/store/login'
import { computed, defineComponent, reactive } from 'vue-demi'
import { useSettingsStore } from '@/portal/store/settings'
import type { FormRules } from 'element-plus'
import { useLoading } from 'common/hooks/loading'
import { useForm } from 'common/hooks/form'
import { useI18n } from 'vue-i18n'

export default defineComponent({
  name: 'LoginIndex',
  setup () {
    const form = reactive({
      userName: '',
      passWord: '',
      checkCode: '',
      loginType: '1'
    })

    const loginStore = useLoginStore()

    const { elForm, validate } = useForm()
    const { loading, wrapperLoadingPromiseFn } = useLoading()
    const submit = wrapperLoadingPromiseFn(async function submit () {
      await validate()
      await loginStore.login({
        ...form
      })
    })

    const { t } = useI18n({
      messages: {
        'zh-CN': {
          maxlength: '长度不能少于 {len} 个字符',
          'input-checkcode': '请输入验证码'
        },
        'zh-TW': {
          maxlength: '長度不能少於 {len} 個字符',
          'input-checkcode': '請輸入驗證碼'
        }
      }
    })

    const settingsStore = useSettingsStore()
    function changeLange () {
      settingsStore.triggerLocale()
    }

    const rules = computed<FormRules>(() => ({
      userName: [
        { required: true, message: t('user-placeholder'), trigger: 'blur' }
      ],
      passWord: [
        { required: true, message: t('pwd-placeholder'), trigger: 'blur' },
        { min: 6, max: 20, message: t('maxlength', { len: 6 }), trigger: 'blur' }
      ],
      checkCode: [
        { required: true, message: t('input-checkcode'), trigger: 'blur' },
        { min: 4, max: 6, message: t('maxlength', { len: 4 }), trigger: 'blur' }
      ]
    }))

    return {
      elForm,
      loading,
      form,
      rules,
      changeLange,
      submit,
      t
    }
  }
})
</script>

<style lang="scss">
.login-header {
  height: 100%;
  padding: 0 200px;
}
.login-main {
  background: linear-gradient(to right, var(--el-color-primary-light-5), var(--el-color-primary-light-8));
  height: 850px;
  position: relative;
  .login-form {
    position: absolute;
    right: 200px;
    top: calc(50% - 250px);
    width: 438px;
    height: 475px;
    background-color: rgba(0,0,0,0.1);
    padding: 0 70px;
    .login-form-title {
      font-size: 26px;
      font-weight: bold;
      letter-spacing: 5px;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      width: 200px;
      margin: 25px 0;
      background-image: linear-gradient(90deg, var(--el-color-primary), var(--el-color-primary-light-5) 90%);
    }
    .el-radio-group {
      width: 100%;
      &>label {
        flex: 1;
        span.el-radio-button__inner {
          width: 100%;
        }
      }
    }
    .login-check-code {
      .el-input-group__append {
        background: #ffffff;
        & > div {
          display: flex;
          align-items: center;
          span {
            margin: 0 10px;
          }
        }
      }
    }
  }
}
.login-header-r {
  text-align: right;
  display: flex;
  justify-content: flex-end;
  &>p {
     margin-left: 20px;
  }
}
.login-footer {
  text-align: center;
  line-height: 20px;
  padding: 10px 0 100px;
  font-size: 14px;
  font-family: PingFangSC-Regular;
  &>p:not(:first-child) {
    font-size: 12px;
    color: #737373;
  }
}
</style>
