<template>
  <div style="height: 960px; overflow-y: hidden">
     <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="/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-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: 10%;
          margin-top: 10px;
          width: 80%;
          height: auto;
          font-color: black;
          background-color: rgb(243, 243, 243);
          padding: 30px;
        "
    >
        <b-row style="margin:0 !important;">
            <b-col cols="2">
              <b-list-group>
                <b-list-group-item
                  :disabled="isClose"
                  class="btn-project"
                  @click="lookUpAllProject()"
                  style="color: black;margin-bottom: 10px;font-size: 18px; font-weight: bold"
                  :class="{ 'bg-primary': isAllProject, 'text-white': isAllProject }"
                  size="lg"
                >
                  所有標案
                </b-list-group-item>
              </b-list-group>

                <span style="font-weight: bold; font-size: 23px; color: black">標案</span>
                    <b-list-group>
                        <b-list-group-item
                            :disabled="isClose"
                            v-for="project in tendersList"
                            :key="project._id"
                            class="btn-project"
                            @click="setSelectedProject(project._id)"
                            style="color: black;font-size: 18px; font-weight: bold"
                            :class="{
                            'bg-primary': selectedProjectId === project._id,
                            'text-white': selectedProjectId === project._id,
                            }"
                            size="lg"
                        >
                            <span class="float-left">{{ project.tender }}</span>
                        </b-list-group-item>
                    </b-list-group>
            </b-col>

            <b-col cols="10">
              <all-project-list ref="allProjectList" v-if="isAllProject" @addNewProject="addNewProject" />
              <addTenderList ref="addTenderList" @addProject="addProject" @cancelAddProject="cancelAddProject" @isCloseFalse="isCloseFalse" @isCloseTrue="isCloseTrue" v-else :isAddProject="isAddProject"/>
            </b-col>
        </b-row>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
import allProjectList from '@/views/ProjectManagement/allProjectList.vue'
import projectContent from '@/views/ProjectManagement/projectContent.vue'
import addTenderList from '@/views/ProjectManagement/addTenderList.vue'

export default {
  // name: 'productDetailsPage',
  data () {
    return {
      backgroundImg: require('../../assets/png/000.png'),
      number: '1',
      selectedProjectId: '',
      // 如果要優化的話可以讓isAllProject跟isAddProject共用同一個，學弟妹加油
      isAllProject: true, // 控制component到 allProjectList畫面，預設是開，因為刷新頁面要專案列表畫面
      isClose: false, // 控制父物件的lisItem開關，新增專案跟編輯專案時listItem要關
      isAddProject: false // 控制component 到 projectContent 的 新增專案功能，只有新增專案的時候才會是true
    }
  },
  async mounted () {
    await this.getTenderList()
  },
  methods: {
    ...mapActions('tenders', ['initAddTender', 'getTenderList']),
    toMultiProject () {
      this.$router.push({ name: 'Dashboard' })
    },
    lookUpAllProject () {
      this.currentProjectList = [
        {
          project_name: 'E878',
          project_owner: '蔡阿修',
          project_contactNumber: '0226222222'
        }
      ]
      this.isAllProject = true
      this.selectedProjectId = null
      this.$router.push({name: 'ProjectManagement'})
    },
    async setSelectedProject (projectId) {
      // this.currentStaffList = await this.$store.dispatch('staff/lookUpList', projectId)
      this.selectedProjectId = projectId
      this.isAllProject = false
      await this.$router.push({
        query: {
          tid: projectId
        }
      })
      await this.$store.dispatch('tenders/lookupTender',
        this.$route.query.tid
      )
    },
    async addNewProject () { // do: 新增專案
      this.isAllProject = false // component轉換: 專案列表關閉，換成專案內容
      this.isClose = true // itemList不能點
      this.isAddProject = true // 顯示專案內容的 確認跟取消 Button(父傳子)
      // this.$nextTick(() => {
      //   this.$refs.projectContent.addNewProject()
      // })
      this.$nextTick(() => {
        this.$refs.addTenderList.addNewProject()
      })
      await this.initAddTender()
    },
    async addProject () { // 確認新增專案
      this.isAllProject = true // component轉換: 專案內容關閉，換成專案列表
      this.isClose = false // itemList可以點
      this.isAddProject = false // 顯示專案內容的 編輯與儲存專案資料 Button(父傳子)
      await this.getTenderList()
    },
    cancelAddProject () { // 取消新增專案
      this.isAllProject = true // component轉換: 專案內容關閉，換成專案列表
      this.isClose = false // itemList可以點
      this.isAddProject = false // 顯示專案內容的 編輯與儲存專案資料 Button(父傳子)
    },
    isCloseFalse () { // 不能修改專案內容
      this.isClose = false // itemList可以點
    },
    isCloseTrue () { // 正在修改專案內容
      this.isClose = true // itemList不能點
    }
  },
  components: {
    allProjectList,
    projectContent,
    addTenderList
  },
  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>
.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: 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: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 {
  color: rgb(0, 0, 0);
  background-color: rgb(255, 255, 255);
}
.btn-project:hover {
  color: rgb(0, 0, 0);
  background-color: rgb(255, 255, 255);
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}
</style>
