<template>
  <b-navbar toggleable="lg" fixed="top">
    <b-navbar-brand
      href="./#/mainpage/dashboard"
      style="margin-left: 0px; margin-top: 5px"
    >
      <!-- <img
        src="https://duct.cpami.gov.tw/sino-jp32/logo_32f/025.png"
        class="maa"
      /> -->
      <img
        src="@/assets/png/Logo3.png"
        class="maa"
      />
      <a class="maatext" href="./#/mainpage/dashboard"
        >PMIS</a
      >
    </b-navbar-brand>

    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
    <b-collapse id="nav-collapse" is-nav style="margin-left: 10px">
      <b-navbar-nav v-for="(item, index) in navItems" :key="index">
        <b-nav-item
          @click="PushToRouter(item.name)"
          class="navitem"
          :id="item.name"
          >{{ item.meta.title }}</b-nav-item
        >
      </b-navbar-nav>
    </b-collapse>
    <div
      style="
        margin-right: 10px;
        font-weight: bold;
        font-size: 20px;
        margin-top: 4px;
      "
    >
      {{ project.name }}
    </div>
    <div
      class="selectList"
      v-show="this.tenderList.map(val => { return val.text }).includes('單標案') === false"
    >
      <b-form-select
        v-model="tender"
        :options="tenderList"
        @change="changeSelect"
        style="
          color: rgb(39, 67, 100);
          font-weight: bold;
          width: auto;
          font-size: 15px;">
      </b-form-select>
    </div>
    |
    <div
      style="
        margin-left: 10px;
        font-weight: bold;
        font-size: 20px;
        margin-top: 4px;
      "
    >
      {{ currentUser.name }}
    </div>
    <b-nav-item-dropdown
      right
      style="float: right; padding-top: 5px; color: white; font-size: 25px"
    >
      <!-- <b-dropdown-item to="/multiprojects"
        ><b-icon icon="list " font-scale="1"></b-icon
        >多專案列表</b-dropdown-item
      > -->
      <!-- <b-dropdown-divider></b-dropdown-divider> -->
      <b-dropdown-item @click="PushToProjectManagement">標案資料</b-dropdown-item>
      <b-dropdown-item @click="PushToUserList">使用者管理</b-dropdown-item>
      <b-dropdown-item @click="ViewPersonalInformationModalOpen = true"
        >個人資料</b-dropdown-item
      >
      <b-dropdown-divider></b-dropdown-divider>
      <b-dropdown-item @click="logout"
        ><b-icon icon="box-arrow-left " font-scale="1"></b-icon
        >登出</b-dropdown-item
      >
      <modal
        :isOpen="ViewPersonalInformationModalOpen"
        title="個人資料"
        v-on:closeEvent="ViewPersonalInformationModalOpen = false"
      >
        <viewPersonalInformation
          @closeEvent="ViewPersonalInformationModalOpen = false"
        />
      </modal>
    </b-nav-item-dropdown>
  </b-navbar>
</template>

<script>
import { mapActions, mapState } from 'vuex'
import Modal from '../../components/Modal.vue'
import viewPersonalInformation from '@/views/BasicSetting/PersonalSetting/ModalContent/viewPersonalInformation.vue'

export default {
  data () {
    return {
      tender: '',
      tenderList: [],
      // navItems: this.$recursiveChildrenSearch({ name: 'Homepage' })
      //   .filter(
      //     child => {
      //       if (
      //         child.meta.title === '專案管理' &&
      //       this.$store.state.user.current.group === '專管單位'
      //       ) {
      //         child.meta.isOnNavbar = true
      //       } else if (
      //         child.meta.title === '監造施工管理' &&
      //       this.$store.state.user.current.group === '專管單位' &&
      //       this.$store.state.user.current.projectTitle !== '一般成員'
      //       ) {
      //         child.meta.isOnNavbar = true
      //       } else if (
      //         child.meta.title === '監造施工管理' &&
      //       this.$store.state.user.current.group === '監造單位'
      //       ) {
      //         child.meta.isOnNavbar = true
      //       }
      //       return child.meta === undefined ? false : child.meta.isOnNavbar
      //     }
      //   ),
      ViewPersonalInformationModalOpen: false
    }
  },
  async mounted () {
    document
      .getElementById(this.$route.matched[1].name)
      .classList.add('navitemChoosed')
    await this.$store.dispatch('tenders/getTenderList')
    await this.tenderSelect()
    // console.log(this.tender)
  },
  methods: {
    ...mapActions('staff', ['lookUp', 'updateStaffData']),
    ...mapActions('tenders', ['getTenderList']),
    getClass (name) {
      return {
        navitemChoosed: this.$route.matched[1].name === name,
        navitemNotChoosed: this.$route.matched[1].name !== name
      }
    },
    async logout () {
      let result = await this.$store.dispatch('user/logout')
      if (result) {
        this.$router.push({ name: 'UserLogIn' })
      } else {
        alert('登出失敗!')
      }
    },
    async tenderSelect () { // 選取標案
      if (this.currentUser.group !== 'superuser') {
        await this.lookUp(this.currentUser._id)
        this.tenderList = this.selected.tenderPermissions
          .filter(val => val.isOpen === true)
          .map(name => { return { value: name.tenderId._id, text: name.tenderId.tender } })
      } else {
        await this.getTenderList()
        this.tenderList = this.tendersList
          .map(name => { return { value: name._id, text: name.tender } })
      }
      this.tender = this.currentUser.defaultTender
    },
    async changeSelect () {
      await this.lookUp(this.currentUser._id)
      this.selected.defaultTender = this.tender
      await this.updateStaffData()
      this.$router.push({ name: 'Dashboard' })
    },
    PushToUserList () {
      let string = prompt('請輸入密碼！', '')

      if (string === 'MAAPMIS') {
        this.$router.push({ name: 'UserList' })
      } else if (string == null || '') {

      } else if (string !== 'MAAPMIS') {
        alert('密碼錯誤！')
      }
    },
    PushToProjectManagement () {
      let string = prompt('請輸入密碼！', '')

      if (string === 'MAAPMIS') {
        this.$router.push({ name: 'ProjectManagement' })
      } else if (string == null || '') {

      } else if (string !== 'MAAPMIS') {
        alert('密碼錯誤！')
      }
    },
    PushToRouter (routerPath) {
      if (routerPath === 'BimCooperation') {
        window.open('https://b2.autodesk.com/login')
      }
      this.$router.push({ name: routerPath })
    }
  },
  watch: {
    $route: function (from, to) {
      this.navItems.forEach(navItem => {
        document.getElementById(navItem.name).classList.remove('navitemChoosed')
      })
      document
        .getElementById(this.$route.matched[1].name)
        .classList.add('navitemChoosed')
    }
  },
  computed: {
    ...mapState({
      project: state => state.project.current,
      currentUser: state => state.user.current,
      tendersList: (state) => state.tenders.tenderList,
      tenders: (state) => state.tenders.tenders,
      selected: (state) => state.staff.selected
    }),
    navItems () {
      if (this.$store.state.user.current.group === '專管單位') {
        return this.$recursiveChildrenSearch({ name: 'Homepage' }).filter(
          child => {
            if (child.meta.title === '專案管理') {
              child.meta.isOnNavbar = true
            } else if (child.meta.title === '監造施工管理') {
              if (this.$store.state.user.current.projectTitle !== '一般成員') {
                child.meta.isOnNavbar = false
              } else {
                child.meta.isOnNavbar = false
              }
            }
            return child.meta === undefined ? false : child.meta.isOnNavbar
          }
        )
      } else if (this.$store.state.user.current.group === '監造單位') {
        return this.$recursiveChildrenSearch({ name: 'Homepage' }).filter(
          child => {
            if (child.meta.title === '專案管理') {
              child.meta.isOnNavbar = false
            } else if (child.meta.title === '監造施工管理') {
              child.meta.isOnNavbar = false
            }
            return child.meta === undefined ? false : child.meta.isOnNavbar
          }
        )
      } else if (this.$store.state.user.current.group === 'superuser') {
        return this.$recursiveChildrenSearch({ name: 'Homepage' }).filter(
          child => {
            if (child.meta.title === '專案管理') {
              child.meta.isOnNavbar = true
            } else if (child.meta.title === '監造施工管理') {
              child.meta.isOnNavbar = false
            }
            return child.meta === undefined ? false : child.meta.isOnNavbar
          }
        )
      } else if (this.$store.state.user.current.group === '實施者') {
        return this.$recursiveChildrenSearch({ name: 'Homepage' }).filter(
          child => {
            if (child.meta.title === '專案管理') {
              child.meta.isOnNavbar = true
            } else if (child.meta.title === '監造施工管理') {
              child.meta.isOnNavbar = true
            }
            return child.meta === undefined ? false : child.meta.isOnNavbar
          }
        )
      }
    }
  },
  components: {
    modal: () => import('@/views/Modal/index.vue'),
    Modal,
    viewPersonalInformation
  }
}
</script>

<style scoped>
.navbar {
  background-color: rgb(255, 255, 255) !important;
  border-bottom-color: #888888;
  box-shadow: 2px 2px 10px rgba(93, 93, 93, 0.2);
  height: 55px;
  padding-left: 30px;
}

.selectList {
  margin-right: 10px;
  font-weight: bold;
  font-size: 20px;
  margin-top: 4px;
  color: black;
}
.maatext {
  display: inline;
  color: rgb(39, 67, 100);
  font-size: 23px;
  margin-left: 5px;
}
.maa {
  height: 40px;
  width: 40px;
  display: inline;
  margin-top: -20px;
  margin-bottom: -10px;
  margin-left: 15px;
}

.navbar-light .navbar-nav .nav-link {
  color: #050505a8;
  font-weight: 600;
}
.navitem:hover {
  color: #050505a8;
  font-weight: 600;
  background-color: #d6d6d6d2;
  padding-top: 12px;
  padding-bottom: 12px;
}
/* .nav-item{
   border-right:2px solid #d8d8d8c4;
} */
/* .navbar-toggler {
  /* background-color: #818181ba;
} */
.navitemChoosed {
  background-color: #d6d6d6d2;
  padding-top: 12px;
  padding-bottom: 12px;
}
.navitemNotChoosed {
  background-color: #ffffff;
}
</style>
