<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: 90vw;
          height: calc(90vh - 50px);
          font-color: black;
          background-color: rgb(243, 243, 243);
          padding: 20px 30px 10px 30px;
          margin-bottom:20px;
        "
      >
        <!-- <div style="height:50px;">
          <b-button class="btn" style="float:right;margin-left:20px;">指派人員</b-button>
          <b-button class="btn" style="float:right;margin-left:20px;">編輯人員</b-button>
          <b-button class="btn" style="float:right;margin-left:20px;">新增人員</b-button>
        </div> -->
        <b-row>
          <b-col cols="2">
            <b-list-group>
              <b-list-group-item
                style="font-size: 18px; font-weight: bold"
                class="moduleClick"
                size="lg"
              >
                所有使用者
                <div class="tenderStaff px-1 text-dark float-right">
                  <span style="font-size: 15px;">
                    {{ staffList.length }}
                  </span>
                </div>
              </b-list-group-item>
            </b-list-group>
            <div class="text-dark mt-3">
              <span style="font-weight: 900; font-size: 21px;">各標案人數</span>
            </div>
            <hr style="margin-top: 5px; margin-bottom: 20px;" />
            <b-list-group>
              <b-list-group-item
                v-for="tender in tendersList"
                :key="tender._id"
                style="font-size: 16px; font-weight: bold"
                class="btn_project"
                size="lg"
              >
                <span class="float-left">{{ tender.tender }}</span>
                <div class="tenderStaff px-1 text-dark float-right">
                  <span style="font-size: 15px;">
                    {{ tender.memberCounts }}
                  </span>
                </div>
              </b-list-group-item>
            </b-list-group>
          </b-col>

          <b-col cols="10">
            <user-list-content @reloadPage="reloadPage" />
          </b-col>
        </b-row>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import userListContent from '@/views/UserManagement/userListContent.vue'

export default {
  // name: 'productDetailsPage',
  data () {
    return {
      backgroundImg: require('@/assets/png/000.png'),
      memberAttendCounts: [],
      staffList: []
    }
  },
  components: {
    modal: () => import('@/views/Modal/index.vue'),
    userListContent
  },
  async mounted () {
    if (Object.keys(this.$route.query).length !== 0) {
      await this.$store.dispatch('staff/lookUp', this.$route.query.sid)
    } else {
      await this.getTenderList()
      await this.reloadPage()
    }
  },
  methods: {
    ...mapActions('tenders', ['getTenderList']),
    async reloadPage () {
      this.staffList = await this.$store.dispatch('project/lookupStaffs', { selects: ['_id'] })
      // 統計各標案人員 (可應付單人多標案，彈性到不行!!)
      let memberAttend = []
      let counts = {}
      this.memberAttendCounts = []
      Object.values(this.staffList).forEach((item) => {
        item.tender.map(value => { return value.tender }).forEach(obj => { memberAttend.push(obj) })
      })
      memberAttend.forEach(count => {
        counts[count] = (counts[count] || 0) + 1
      })
      Object.entries(counts).forEach(obj => {
        Object.values(this.tendersList).forEach(item => {
          if (item.tender === obj[0]) { item.memberCounts = obj[1] }
        })
      })
    },
    toMultiProject () { // 進入專案
      this.$router.push({ name: 'Dashboard' })
    }
  },
  computed: {
    ...mapState({
      project: (state) => state.project.current,
      tendersList: (state) => state.tenders.tenderList,
      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>
