<template>
  <div class="main-view">
    <div class="left-view center-flex">
      <div>
        <div class="title-view">
          Antd demo
        </div>
        <div class="content-view">
          This is a antd demo for test!
        </div>
      </div>
    </div>
    <div class="right-view center-flex">
      <a-form :form="form" class="form-view" @submit="login">
        <a-form-item>
          <a-input
            :placeholder="$t('username')"
            v-decorator="[
              'username',
              { rules: [{ required: true, message: $t('required') }] }
            ]"
          >
            <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)" />
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-input
            :placeholder="$t('password')"
            v-decorator="[
              'password',
              { rules: [{ required: true, message: $t('required') }] }
            ]"
          >
            <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" html-type="submit" block>{{
            $t("login")
          }}</a-button>
        </a-form-item>
        <a-form-item>
          <div class="bottom-view">
            <div>{{ $t("version") }}: 0.0.1</div>
            <a-select
              default-value="zhcn"
              style="width: 120px;"
              @change="handleLangChange"
            >
              <a-select-option v-for="lang in languageLst" :key="lang.name">
                {{ lang.text }}
              </a-select-option>
            </a-select>
          </div>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script>
const languageLst = [
  {
    name: "en",
    text: "English"
  },
  {
    name: "zhcn",
    text: "简体中文"
  }
];
export default {
  data() {
    return {
      languageLst,
      form: this.$form.createForm(this, { name: "login" })
    };
  },
  methods: {
    handleLangChange(lang) {
      this.$i18n.locale = lang;
    },
    login(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log(values);
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.main-view {
  display: flex;
  width: 100%;
  height: 100%;
}
.left-view {
  flex: 1;
  width: auto;
  height: 100%;
  background-color: @primary-color;
  flex-direction: column;
  .title-view {
    font-size: 24px;
    color: white;
    text-align: left;
  }
  .content-view {
    font-size: 16px;
    color: white;
    text-align: left;
  }
}
.right-view {
  width: 600px;
  height: 100%;
  .form-view {
    width: 80%;
  }
}
.center-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}
.bottom-view {
  display: flex;
  justify-content: space-between;
}
</style>