<template>
  <div>
    <div
      class="background"
      style="
        z-index: -1;
        position: fixed;
        background-repeat: no-repeat;
        width: 100%;
        overflow: auto;
      "
    >
      <img :src="backgroundImg" width="101% " height="100%" alt="" />
    </div>
    <div class="front">
      <b-row style="padding-top: 30px">
        <b-col cols="10">
          <b-button class="btn_title">PMIS專案管理資訊系統</b-button>
        </b-col>
        <b-col cols="2">
          <b-nav-item-dropdown
            right
            style="
              float: right;
              padding-top: 2px;
              padding-right: 30px;
              margin-right:20px
              color: white;
              font-size: 25px;
            "
          >
            <b-dropdown-item to="/projectManagement">專案管理</b-dropdown-item>
            <b-dropdown-item to="/userManagement/userList">使用者管理</b-dropdown-item>
            <b-dropdown-item to="/personalInformation"
              >個人資料</b-dropdown-item
            >
            <b-dropdown-divider></b-dropdown-divider>
            <b-dropdown-item to="/signin/userLogIn"
              ><b-icon icon="box-arrow-left " font-scale="1"></b-icon
              >登出</b-dropdown-item
            >
          </b-nav-item-dropdown>

          <div
            style="
              padding-top: 9px;
              font-size: 20px;
              float: right;
              color: white;
              font-weight: bold;
            "
          >
            {{ currentUser.name }}
          </div>
        </b-col>
      </b-row>

      <div style="border: 0; width: 74%">
        <b-container class="mt-3">
          <b-list-group vertical>
            <b-list-group-item style="min-width: 700px" class="rounded mb-3">
              <b-row>
                <b-col cols="10">
                  <b-row>
                    <span
                      style="
                        margin-left: 5%;
                        font-size: 30px;
                        font-weight: bold;
                      "
                    >
                      {{ project.name }}
                    </span>
                  </b-row>
                  <b-row style="margin-top: 20px">
                    <b-col cols="5">
                      <span
                        style="
                          font-size: 25px;
                          font-weight: bold;
                          margin-left: 15%;
                        "
                        >計畫編號：</span
                      >
                      <span style="font-size: 25px; font-weight: bold">
                        {{ project.number }}
                      </span>
                    </b-col>

                    <b-col cols="7">
                      <span
                        style="
                          font-size: 25px;
                          font-weight: bold;
                          margin-left: 5%;
                        "
                        >連絡電話：</span
                      >
                      <span style="font-size: 25px; font-weight: bold">
                        {{ project.contactNumber }}
                      </span>
                    </b-col>
                  </b-row>
                  <b-row>
                    <b-col cols="5">
                      <span
                        style="
                          font-size: 25px;
                          font-weight: bold;
                          margin-left: 15%;
                        "
                        >負責人：</span
                      >
                      <span style="font-size: 25px; font-weight: bold">
                        {{ project.owner }}
                      </span>
                    </b-col>
                    <b-col cols="7">
                      <span
                        style="
                          font-size: 25px;
                          font-weight: bold;
                          margin-left: 5%;
                        "
                        >地址：</span
                      >
                      <span style="font-size: 25px; font-weight: bold">
                        {{ project.address }}
                      </span>
                    </b-col>
                  </b-row>
                </b-col>
                <b-col cols="2" style="margin-top: 49px">
                  <b-button @click="enterProject" class="btn">進入</b-button>
                </b-col>
              </b-row>
            </b-list-group-item>
          </b-list-group>
        </b-container>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  // name: 'productdetailspage',
  data () {
    return {
      backgroundImg: require('../../assets/png/000.png'),
      projectList: []
    }
  },
  methods: {
    enterProject () {
      this.$router.push({ name: 'Dashboard' })
    }
  },
  computed: {
    ...mapState({
      project: state => state.project.current,
      currentUser: state => state.user.current
    })
  }
}
</script>

<style scoped>
.project-group {
  width: 800px;
  height: 250px;
  background-color: white;
  border-radius: 10%;
  border-style: solid;
  border-width: 3px;
  border-color: rgb(163, 163, 163);
  margin-left: 3%;
  margin-top: 3%;
  padding-top: 15px;
}
.btn {
  background-color: rgb(75, 102, 255);
  font-size: 20px;
  padding-left: 13px;
  padding-right: 13px;
  padding-top: 7px;
  padding-bottom: 7px;
  margin-left: 45px;
  color: #ffffff;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
  border: none;
}
.btn:hover {
  color: rgb(255, 255, 255);
  background-color: rgb(49, 68, 175);
  transform: translateY(0);
}
.btn_title {
  background-color: #1d325f;
  font-size: 40px;
  color: white;
  margin-left: 70px;
}
</style>
