<template>
<!-- 紙本收文畫面 -->
  <b-container fluid>
    <b-row>
      <functionBar class="F_bar" @isSaved="isSaved" @isEdited="isEdited" @isBySave="isBySave"/>
    </b-row>
    <b-row class="no-padding" style=" padding-top: 25px;">
      <b-col cols="9">
        <receive-document-content ref="receiveDocumentContent"/>
      </b-col>
      <b-col class="sideContent" cols="3" style="margin-top:80px">
        <b-container>
            <b-col cols="12" class="mb-4">
              <scan-related-document />
            </b-col>
            <b-col cols="12" class="mb-4">
              <handling-status />
            </b-col>
        </b-container>
      </b-col>
    </b-row>
    <b-row class="no-padding" style="margin-top: 20px">
      <b-col>
        <related-document />
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
import functionBar from '@/views/DocumentManagement/DocumentEdit/functionBar.vue'
import receiveDocumentContent from '@/views/DocumentManagement/DocumentEdit/receiveDocumentContent.vue'
import handlingSituation from '@/views/DocumentManagement/DocumentEdit/handlingSituation.vue'
import handlingStatus from '@/views/DocumentManagement/DocumentEdit/handlingStatus.vue'
import scanRelatedDocument from '@/views/DocumentManagement/DocumentEdit/scanRelatedDocument.vue'
import {mapState} from 'vuex'
import relatedDocument from '@/views/DocumentManagement/DocumentEdit/relatedDocument.vue'
import 'vue-multiselect/dist/vue-multiselect.min.css'

export default {
  data () {
    return {
      isSave: ''
    }
  },
  components: {
    functionBar,
    receiveDocumentContent,
    handlingSituation,
    relatedDocument,
    handlingStatus,
    scanRelatedDocument
  },
  beforeRouteLeave (to, from, next) {
    if (this.isSave === true) {
      const answer = window.confirm('尚未儲存，確定離開當前畫面?')
      if (answer) {
        next()
      } else {
        next(false)
      }
    } else {
      next()
    }
  },
  methods: {
    isSaved () {
      this.isSave = true
      this.$refs.receiveDocumentContent.isSaved()
    },
    isEdited () {
      this.isSave = false
      this.$refs.receiveDocumentContent.isEdited()
    },
    isBySave (isSave) {
      this.isSave = isSave
    }
  },
  computed: {
    ...mapState({
      officialDoc: (state) => state.officialDocument.officialDoc
    })
  },
  watch: {
    officialDoc: {
      handler (newName, oldName) {
        if (newName._id === undefined) {
          this.isSave = true
        } else {
          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: 15px !important;
  padding-right: 39px !important;
  background-color: white;
}
.no-padding [class*="col-"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.col-9 {
  margin-top: 65px;
}
.col-3 {
  margin-top: 65px;
}
/* .btn{
  background-color: #1D325F;
  font-size:14px;
  padding-left:7px;
  padding-right: 7px;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-left: 10px;
  color:#ffffff;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}
.btn:hover{
  color: black;
  background-color: rgb(228, 228, 228);
  transform: scale(1.1);
} */
</style>
