<template>
  <div>
    <div class="background" style="z-index: -1; position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;">
  <img :src="backgroundImg" style="width: 100%; height: 100%; object-fit: cover;" alt="" />
</div>

    <div class="front">
      <b-row> </b-row>
      <div class="title">
        <span>臺北郵局公辦都市更新案</span>
      </div>
      <div class="card">
        <b-container class="bv-example-row">
          <b-row>
            <b-col>
              <div style="margin-top: 30px">
                <img
                  :src="logo"
                  style="width: 150px; height: auto; display: flex; margin: auto"
                />
                <h2
                  class="text-center text-black font-weight-bold text3"
                  style="font-size: 25px; margin-top: 25px"
                >
                  PMIS專案管理資訊系統
                </h2>
                <h2 class="text-center text-gray text2" style="font-size: 18px">
                  中華郵政股份有限公司
                </h2>
              </div>
            </b-col>
            <b-col>
              <div>
                <h1>系統登入</h1>
                <b-form v-if="show">
                  <b-form-group
                    id="input-group-1"
                    label="帳號:"
                    label-for="input-1"
                    style="margin-top: 20px; margin-bottom: 10px"
                  >
                    <b-form-input
                      id="input-1"
                      @keyup.enter="login"
                      v-model="user.account"
                      type="text"
                      placeholder="請輸入帳號"
                      required
                    ></b-form-input>
                  </b-form-group>

                  <b-form-group id="input-group-2" label="密碼:" label-for="input-2">
                    <b-form-input
                      id="input-2"
                      @keyup.enter="login"
                      v-model="user.password"
                      placeholder="請輸入密碼"
                      required
                      type="password"
                    ></b-form-input>
                  </b-form-group>
                  <b-button class="btn_login" @click="login()" style="margin-left: 150px"
                    >登入</b-button
                  >
                </b-form>
              </div>
            </b-col>
          </b-row>
        </b-container>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'userLogIn',
  data () {
    return {
      backgroundImg: require('../../../assets/png/000.png'),
      logo: require('../../../assets/png/Logo.png'),
      user: {
        account: '',
        password: ''
      },
      show: true
    }
  },
  methods: {
    async login () {
      if (this.user.account === '' && this.user.password === '') {
        alert('請輸入帳號或密碼!')
        return
      }
      try {
        await this.$store.dispatch('user/login', this.user)
        if (this.$route.query.search) {
          this.$router.push({
            path: this.$route.query.search.path,
            query: this.$route.query.search.query
          })
        } else {
          this.$router.push({ name: 'Dashboard' })
        }
      } catch (err) {
        console.log(err)
        alert('帳號或密碼錯誤')
      }
    }
  }
}
</script>

<style scoped>
.title {
  margin-top: 23%;
  margin-left: 7%;
  font-size: 72px;
  color: #10253f;
  font-weight: bold;
  font-family: "Microsoft Yahei";
  text-shadow: 4px 4px 10px #fff;
}
.card {
  max-width: 800px;
  max-height: 400px;
  background-color: rgb(230, 227, 227);
  box-shadow: 2px 2px 2px 2px;
  margin-left: 7%;
  margin-top: 1%;
  border-radius: 30px;
  padding: 30px;
}
.btn_login {
  background-color: rgb(75, 102, 255);
  font-size: 16px;
  padding-left: 8px;
  padding-right: 8px;
  padding-top: 6px;
  padding-bottom: 6px;
  color: #ffffff;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
  border: none;
}
.btn_login:hover {
  color: rgb(255, 255, 255);
  background-color: rgb(49, 68, 175);
  transform: translateY(1);
}
</style>
