<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 style="padding-top: 30px; margin:0 !important;">
        <b-col cols="10">
          <b-button @click="toMultiProject" class="btn-title">
            {{ project.name }}
          </b-button>
        </b-col>
        <b-col cols="2">
          <b-nav-item-dropdown
            right
            style="float: right; padding-top: 5px; color: white"
          >
            <b-dropdown-item to="/projectManagement">標案資料</b-dropdown-item>
            <b-dropdown-item
              @click="ViewPersonalInformationModalOpen = true"
            >
              個人資料
            </b-dropdown-item>
            <b-dropdown-divider></b-dropdown-divider>
            <b-dropdown-item to="/signIn/userLogIn">登出</b-dropdown-item>
          </b-nav-item-dropdown>
          <b-avatar variant="primary" style="float: right"></b-avatar>
          <div
            style="
              padding-right: 10px;
              padding-top: 9px;
              float: right;
              color: white;
            "
          >
            {{ currentUser.name }}
          </div>
        </b-col>
      </b-row>

      <div
        style="
          border-radius: 8px;
          margin-left: 5%;
          margin-top: 10px;
          width: 91vw;
          height: calc(90vh - 50px);
          font-color: black;
          background-color: rgb(243, 243, 243);
          padding: 20px 30px 10px 30px;
          margin-bottom:20px;
        "
      >
        <staff-information-setting-content />
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import staffInformationSettingContent from '@/views/BasicSetting/PersonalSetting/MainPage/staffInformationSettingContent.vue'

export default {
  data () {
    return {
      backgroundImg: require('@/assets/png/000.png')
    }
  },
  components: {
    modal: () => import('@/views/Modal/index.vue'),
    staffInformationSettingContent
  },
  async mounted () {

  },
  methods: {
    toMultiProject () { // 進入專案
      this.$router.push({ name: 'Dashboard' })
    }
  },
  computed: {
    ...mapState({
      project: (state) => state.project.current,
      currentUser: (state) => state.user.current
    })
  }
}
</script>

<style>
.thClass1 {
  background-color: #1d325f;
  color: rgb(255, 255, 255);
}
</style>
<style scoped>
.btn_edit {
  background-color: rgb(75, 102, 255);
  font-size: 15px;
  padding-left: 13px;
  padding-right: 13px;
  padding-top: 7px;
  padding-bottom: 7px;
  color: #ffffff;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
  border: none;
}
.btn_edit: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;
  border: none;
  padding: 10px;
}
.btn-title:hover {
  color: rgb(255, 255, 255);
  background-color: rgb(49, 68, 175);
}
.btn_project {
  background-color: rgb(255, 255, 255);
  font-size: 12px;
  color: #000000;
}
/* .btn_project:hover {
  color: rgb(0, 0, 0);
  background-color: rgb(236, 236, 236);
} */
.moduleClick {
  color: white;
  background-color: rgb(75, 102, 255);
}
/* .moduleClick:hover {
  color: white;
  background-color: rgb(49, 68, 175);
} */
.tenderStaff {
  background-color: rgb(205, 212, 255);
  border-radius: 5px;
}
</style>
