<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">
        <paper-create-content ref="paperCreateContent" />
      </b-col>
      <b-col class="sideContent" cols="3" style="margin-top: 80px">
        <b-container>
          <b-col cols="12" class="mb-5">
            <scan-related-document ref="scanRelatedDocument" />
          </b-col>
          <b-col cols="12" class="mb-5">
            <task-related-document ref="taskRelatedDocument" />
          </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 paperCreateContent from '@/views/DocumentManagement/DocumentEdit/paperCreateContent.vue'
import taskRelatedDocument from '@/views/DocumentManagement/DocumentEdit/taskRelatedDocument.vue'
import scanRelatedDocument from '@/views/DocumentManagement/DocumentEdit/scanRelatedDocument.vue'
import handlingSituation from '@/views/DocumentManagement/DocumentEdit/handlingSituation.vue'
import handlingStatus from '@/views/DocumentManagement/DocumentEdit/handlingStatus.vue'
import relatedDocument from '@/views/DocumentManagement/DocumentEdit/relatedDocument.vue'
import 'vue-multiselect/dist/vue-multiselect.min.css'
import { mapState } from 'vuex'

export default {
  data () {
    return {
      isSave: ''
    }
  },
  components: {
    functionBar,
    paperCreateContent,
    taskRelatedDocument,
    handlingSituation,
    handlingStatus,
    relatedDocument,
    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.paperCreateContent.isSaved()
      // this.$refs.scanRelatedDocument.isSaved()
      // this.$refs.taskRelatedDocument.isSaved()
    },
    isEdited () {
      this.isSave = false
      this.$refs.paperCreateContent.isEdited()
      // this.$refs.scanRelatedDocument.isEdited()
      // this.$refs.taskRelatedDocument.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;
}
</style>
