<template>
<div>
  <functionBar @addAgenda="newAgenda" class="F_bar"/>
  <b-container fluid>
      <div style="margin-top: 40px">
        <b-row>
          <b-col cols="8">
            <basicInformation
              ref="basicInformation"
              @isedit="isedit"
              @ispatch="ispatch"
              @reload="reload"
            />
          </b-col>
          <b-col cols="4">
            <b-container fluid style="margin-left: -200px; margin-top: 20px; width: 600px">
              <b-col cols="12" class="mb-5">
                <task-related-document ref="taskRelatedDocument" />
              </b-col>
              <b-col cols="12" class="mb-5">
                <related-correspondence ref="relatedCorrespondence" />
              </b-col>
              <b-col cols="12" class="mb-4">
                <related-agenda ref="relatedAgenda" />
              </b-col>
            </b-container>
          </b-col>
        </b-row>
      </div>
  </b-container>
</div>
</template>
<script>
import functionBar from '@/views/ConferenceManagement/ConferenceEdit/functionBar.vue'
import basicInformation from '@/views/ConferenceManagement/ConferenceEdit/basicInformation.vue'
import taskRelatedDocument from '@/views/ConferenceManagement/ConferenceEdit/taskRelatedDocument.vue'
import relatedCorrespondence from '@/views/ConferenceManagement/ConferenceEdit/relatedCorrespondence.vue'
import relatedAgenda from '@/views/ConferenceManagement/ConferenceEdit/relatedAgenda.vue'

export default {
  data () {
    return {}
  },
  beforeRouteLeave (to, from, next) {
    if (this.isedit === true) {
      const answer = window.confirm('尚未儲存，確定離開當前畫面?')
      if (answer) {
        next()
      } else {
        next(false)
      }
    } else {
      next()
    }
  },
  components: {
    functionBar,
    basicInformation,
    taskRelatedDocument,
    relatedCorrespondence,
    relatedAgenda
  },
  methods: {
    isedit () {
      this.isedit = true
    },
    ispatch () {
      this.isedit = false
    },
    reload () {
      this.$refs.relatedAgenda.relatedAgenda()
    },
    newAgenda () {
      this.$refs.relatedAgenda.relatedAgenda()
      this.$refs.basicInformation.issueList()
    }
  }
}
</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: 0px !important;
} */
.no-padding [class*="col-"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.btn1 {
  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.3);
  border: none;
}
.btn2 {
  background-color: #ffffff;
  font-size: 16px;
  margin-top: 5px;
  margin-left: 15px;
  padding-left: 7px;
  padding-right: 7px;
  padding-top: 3px;
  padding-bottom: 3px;
  color: rgb(75, 102, 255);
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
  border: none;
}
.btn3 {
  background-color: rgb(75, 102, 255);
  font-size: 16px;
  margin-top: 5px;
  margin-left: 15px;
  padding-left: 7px;
  padding-right: 7px;
  padding-top: 3px;
  padding-bottom: 3px;
  color: #ffffff;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
  border: none;
}
</style>
