<template>
  <div>
    <!-- 人員資料functionbar -->
    <!-- <div class="shadow" v-show="$route.name === 'StaffInformationList'"> -->
      <!-- <b-button
        class="btn"
        @click="addPersonal()"
        v-show="currentUser.projectTitle !== '一般成員'"
      >
        <b-icon-person-plus-fill></b-icon-person-plus-fill>&ensp;新增人員
      </b-button> -->
      <!-- <b-button class="btn" @click="PersonalInformationEditModalOpen = true">
        <b-icon-person-lines-fill></b-icon-person-lines-fill>&ensp;人員設定
      </b-button> -->
    <!-- </div> -->
    <!-- 人員檢視functionbar -->
    <!-- <div class="shadow" v-show="$route.name === 'ViewStaff'">
      <b-button class="btn" @click="informationSaved" :disabled="isSave">
        <b-icon-cursor></b-icon-cursor> 儲存
      </b-button>
      <b-button class="btn" @click="informationEditing" :disabled="!isSave">
        <b-icon-pencil></b-icon-pencil> 編輯
      </b-button>
    </div> -->
    <!-- 人員設定functionbar -->
    <div class="shadow" v-show="$route.name === 'StaffInformationSetting' && currentUser.projectTitle == 'superuser'">
      <b-button
        class="btn"
        @click="staffInformationSaved()"
        :disabled="isCreate"
        v-show="currentUser.projectTitle == 'superuser'"
      >
        <b-icon-cursor></b-icon-cursor> 儲存
      </b-button>
      <b-button
        class="btn"
        @click="staffInformationEditing"
        :disabled="isSave"
        v-show="currentUser.projectTitle == 'superuser'"
      >
        <b-icon-pencil></b-icon-pencil> 編輯
      </b-button>
    </div>
    <!-- 新增人員functionbar -->
    <!-- <div class="shadow" v-show="$route.name === 'CreateStaff'">
      <b-button class="btn"> <b-icon-check2></b-icon-check2> 確定 </b-button>
      <b-button size="sm" class="mr-2 btn">
        <b-icon-x></b-icon-x> 取消
      </b-button>
    </div> -->

    <!-- <modal
      :isOpen="PersonalInformationEditModalOpen"
      title="人員列表"
      v-on:closeEvent="PersonalInformationEditModalOpen = false"
    >
      <personalInformationEdit @closeEvent="PersonalInformationEditModalOpen = false" />
    </modal> -->
  </div>
</template>

<script>
import personalInformationEdit from '@/views/BasicSetting/ModalContent/personalInformationEdit.vue'
import { mapActions, mapState } from 'vuex'
export default {
  data () {
    return {
      isSave: false,
      isCreate: true,
      PersonalInformationEditModalOpen: false,
      initStaff: {}
    }
  },
  methods: {
    ...mapActions('staff', ['updateStaffData']),
    addPersonal () {
      this.$store.commit('staff/setSelected', this.initStaff)
      this.$router.push({ name: 'StaffInformationSetting' })
    },
    async staffInformationSaved () {
      var yes = confirm('確認儲存?')
      if (yes) {
        await this.updateStaffData()
        this.isSave = false
        this.isCreate = true
        this.$emit('isStaffInformationSaved')
      }
    },
    staffInformationEditing () {
      this.isSave = true
      this.isCreate = false
      this.$emit('isStaffInformationEditing')
    }
  },
  components: {
    modal: () => import('@/views/Modal/index.vue'),
    personalInformationEdit
  },
  computed: {
    ...mapState({
      selected: state => state.staff.selected,
      currentUser: state => state.user.current
    })
  },
  watch: {
    selected: {
      handler (newVal, old) {
        if (newVal._id === undefined) {
          this.isSave = true
          this.isCreate = false
        } else {
          this.isSave = false
          this.isCreate = true
        }
      },
      immediate: true
    }
  }
}
</script>

<style scoped>
.shadow {
  background-color: #ffff;
  height: 65px;
  width: 100%;
  box-shadow: 2px 2px 20px rgba(0, 0, 0, 5);
  position: fixed;
  top: 55px;
  z-index: 500;
}
.btn {
  background-color: rgb(75, 102, 255);
  font-size: 16px;
  margin-top: 15px;
  margin-left: 15px;
  padding-left: 7px;
  padding-right: 7px;
  padding-top: 5px;
  padding-bottom: 5px;
  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.btn-secondary[disabled] {
  background-color: rgb(224, 224, 224);
  color: rgb(150, 150, 150);
}
</style>
