<template>
<!-- 人員設定頁面 -->
<b-container fluid>
  <b-row>
      <functionBar class="F_bar" @isStaffInformationSaved="isStaffInformationSaved"  @isStaffInformationEditing="isStaffInformationEditing"/>
    </b-row>
  <b-row class="no-padding" style="margin-top: 20px">
    <b-col>
        <staff-information-setting-content ref="staffInformationSettingContent"/>
      </b-col>
  </b-row>
</b-container>
</template>

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

export default {
  data () {
    return {}
  },
  components: {
    functionBar,
    staffInformationSettingContent
  },
  methods: {
    isStaffInformationSaved () {
      this.isSave = true
      this.$refs.staffInformationSettingContent.isStaffInformationSaved()
    },
    isStaffInformationEditing () {
      this.isSave = false
      this.$refs.staffInformationSettingContent.isStaffInformationEditing()
    }
  },
  computed: {
    ...mapState({
      selected: (state) => state.staff.selected
    })
  }
  // watch: {
  //   selected: {
  //     handler (newName, oldName) {
  //       if (newName._id === undefined) {
  //         this.isSave = true
  //       } else {
  //         this.isSave = false
  //       }
  //     }
  //   }
  // }
}
</script>

<style lang="scss" scoped>
.main-content .container-fluid, .main-content .container-sm, .main-content .container-md, .main-content .container-lg, .main-content .container-xl{
  padding-left: 15px !important;
  padding-right: 39px !important;
}
.no-padding [class*="col-"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
</style>
