<template>
  <div>
    <functionBar class="F_bar" v-show="!isFix" @isSaved="isSaved"/>
    <b-container fluid>
      <b-row>
        <b-col cols="6">
          <basicInformation ref="basicInformation"></basicInformation>
        </b-col>
        <b-col cols="6">
          <durationExtension ref="durationExtension" style="margin-top: 80px"></durationExtension>
        </b-col>
      </b-row>
    </b-container>
  </div>
</template>
<script>
import functionBar from '@/views/ContractManagement/ContractEdit/functionBar.vue'
import basicInformation from '@/views/ContractManagement/ContractEdit/basicInformation.vue'
import durationExtension from '@/views/ContractManagement/ContractEdit/durationExtension.vue'
import { mapState } from 'vuex'

export default {
  data () {
    return {
      isFix: '',
      isSave: true
    }
  },
  components: {
    functionBar,
    basicInformation,
    durationExtension
  },
  beforeRouteLeave (to, from, next) {
    if (this.isSave === true) {
      const answer = window.confirm('尚未儲存，確定離開當前畫面?')
      if (answer) {
        next()
      } else {
        next(false)
      }
    } else {
      next()
    }
  },
  mounted () {
    this.$store.commit('tenders/resetList')
  },
  computed: {
    ...mapState({
      extendRecord: (state) => state.tenders.extendRecord
    })
  },
  methods: {
    isSaved () {
      this.isFix = true
      this.isSave = false
      this.$refs.basicInformation.isSaved()
    }
  },
  watch: {
    extendRecord: {
      handler (newVal, oldVal) {
        if (newVal._id === undefined) {
          this.isFix = false
          this.isSave = true
        } else {
          this.isFix = true
          this.isSave = false
        }
      }
    }
  }
}
</script>

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