<template>
  <!-- 建立會議 -->
  <div>
    <b-card no-body>
      <!-- 會議日期和時間 -->
      <b-list-group horizontal>
        <b-list-group-item style="background-color: #9393ff">
          <div style="margin-top: 10px; color: white">會議日期</div>
        </b-list-group-item>
        <b-list-group-item class="grclass">
          <b-row>
            <b-col cols="4">
              <b-form-datepicker
                v-model="conference.conference_date"
                placeholder="mm/dd"
                style="text-align: left; width: 240px"
                @input="syncDates('start')"
              ></b-form-datepicker>
            </b-col>
            <b-col cols="2">
              <div style="margin-top: 10px">時間:</div>
            </b-col>
            <b-col cols="2"
              ><div style="margin-left: -85px">
                <b-form-timepicker
                  v-model="conference.conference_time"
                  placeholder="hh/mm"
                  style="text-align: left; width: 150px"
                ></b-form-timepicker>
              </div>
            </b-col> </b-row
        ></b-list-group-item>
      </b-list-group>
      <!-- 會議結束時間 -->
      <b-list-group horizontal>
        <b-list-group-item style="background-color: #9393ff">
          <div style="margin-top: 10px; color: white">結束時間</div>
        </b-list-group-item>
        <b-list-group-item class="grclass">
          <b-row>
            <b-col cols="4">
              <b-form-datepicker
                v-model="conference.end_date"
                placeholder="mm/dd"
                style="text-align: left; width: 240px"
                @input="syncDates('end')"
              ></b-form-datepicker>
            </b-col>
            <b-col cols="2">
              <div style="margin-top: 10px">時間:</div>
            </b-col>
            <b-col cols="2"
              ><div style="margin-left: -85px">
                <b-form-timepicker
                  v-model="conference.end_time"
                  placeholder="hh/mm"
                  style="text-align: left; width: 150px"
                ></b-form-timepicker>
              </div>
            </b-col> </b-row
        ></b-list-group-item>
      </b-list-group>
      <!-- 會議名稱 -->
      <b-list-group horizontal>
        <b-list-group-item style="background-color: #9393ff"
          ><div style="margin-top: 10px; color: white">
            會議名稱
          </div></b-list-group-item
        >
        <b-list-group-item class="grclass">
          <b-form-input v-model="conference.conference_name"></b-form-input>
        </b-list-group-item>
      </b-list-group>
      <!-- 會議地點 -->
      <b-list-group horizontal>
        <b-list-group-item style="background-color: #9393ff"
          ><div style="margin-top: 10px; color: white">
            會議地點
          </div></b-list-group-item
        >
        <b-list-group-item class="grclass"
          ><b-form-input v-model="conference.venue"></b-form-input
        ></b-list-group-item>
      </b-list-group>
      <!-- 會議類別-->
      <b-list-group horizontal>
        <b-list-group-item style="background-color: #9393ff"
          ><div style="margin-top: 10px; color: white">
            會議類別
          </div></b-list-group-item
        >
        <b-list-group-item class="grclass">
          <b-form-select
            v-model="conference.conference_classification"
            :options="conference_classifications.paramsValue"
          ></b-form-select>
        </b-list-group-item>
      </b-list-group>
      <!-- 主持人 -->
      <b-list-group horizontal>
        <b-list-group-item style="background-color: #9393ff; width: 98px"
          ><div style="margin-top: 10px; color: white">
            主持人
          </div></b-list-group-item
        >
        <b-list-group-item class="grclass">
          <b-form-select
            :options="
              staffs.map((staff) => {
                return { text: staff.name, value: staff._id };
              })
            "
            v-model="conference.host"
          ></b-form-select>
        </b-list-group-item>
      </b-list-group>
      <!-- 紀錄 -->
      <b-list-group horizontal>
        <b-list-group-item style="background-color: #9393ff; width: 98px"
          ><div style="margin-top: 10px; color: white">
            紀錄
          </div></b-list-group-item
        >
        <b-list-group-item class="grclass">
          <b-form-select
            :options="
              staffs.map((staff) => {
                return { text: staff.name, value: staff._id };
              })
            "
            v-model="conference.recorder"
          ></b-form-select>
        </b-list-group-item>
      </b-list-group>
      <!-- 相關說明 -->
      <b-list-group horizontal>
        <b-list-group-item style="background-color: #9393ff"
          ><div style="margin-top: 80px; color: white">
            相關說明
          </div></b-list-group-item
        >

        <b-list-group-item class="grclass2"
          ><b-row
            ><b-col cols="6"
              ><b-form-textarea
                v-model="conference.description"
                style="height: 200px; width: 500px"
              ></b-form-textarea
            ></b-col>
            <b-col cols="4"
              ><div style="margin-top: 140px; margin-left: 140px">
                <b-button
                  class="btn1"
                  v-show="$route.name === 'Overview'"
                  @click="conferenceSave"
                  >插入</b-button
                >
                <b-button
                  class="btn1"
                  v-show="$route.name === 'PaperPostCreate'"
                  @click="documentSave"
                  >插入</b-button
                >
                <b-button
                  class="btn1"
                  v-show="$route.name === 'PaperReceiveCreate'"
                  @click="documentSave"
                  >插入</b-button
                >
              </div></b-col
            >
          </b-row></b-list-group-item
        >
      </b-list-group>
    </b-card>
  </div>
</template>
<script>
import { mapActions, mapState } from 'vuex'

export default {
  data () {
    return {
      lastModified: '', // 添加這個變量來標記最後修改的是開始日期還是結束日期
      staffs: [],
      selected: '',
      options: [
        { value: 'a', text: '每月' },
        { value: 'b', text: '每周' }
      ],
      conference_classifications: {
        _id: '',
        paramsValue: []
      }
    }
  },
  async mounted () {
    // 將日期設為空
    this.conference.conference_date = null
    try {
      this.staffs = await this.$store.dispatch('project/lookupStaffs', {
        selects: ['_id', 'name']
      })
      this.conference_classifications = await this.lookupParam(
        'conference_classification'
      )
    } catch (err) {
      console.log(err)
    }
  },
  methods: {
    ...mapActions('conference', [
      'post',
      'getConferenceList',
      'patch',
      'patchSchedule'
    ]),
    ...mapActions('paramsSetting', ['lookupParam']),
    ...mapActions('officialDocument', ['conferencePatch']),
    // 建立會議按鈕
    async conferenceSave () {
      let wasNull = false
      if (
        this.conference.conference_name === '' ||
        this.conference.founder === ''
      ) { wasNull = true }
      // 判斷會議時間是否晚於會議結束時間
      const startTime = new Date(
        this.conference.conference_date + ' ' + this.conference.conference_time
      )
      const endTime = new Date(
        this.conference.end_date + ' ' + this.conference.end_time
      )

      if (startTime > endTime) {
        alert('會議時間不能晚於會議結束時間')
        return
      }
      if (wasNull) alert('會議名稱、建立人員尚需填寫!')
      else {
        let yes = window.confirm('確定建立?')
        if (yes) {
          this.postConference()
        } else {
          alert('取消建立')
        }
      }
    },
    // 建立會議(公文)
    async documentSave () {
      let wasNull = false
      if (
        this.conference.conference_name === '' ||
        this.conference.founder === ''
      ) { wasNull = true }
      if (wasNull) alert('會議名稱、建立人員尚需填寫!')
      else {
        let yes = window.confirm('確定建立?')
        if (yes) {
          await this.postConference()
          await this.saveOfficialDoc()
          await this.saveConference()
        } else {
          alert('取消建立')
        }
      }
    },
    async postConference () {
      await this.post()
      alert('建立成功')
      this.$emit('closeEvent')
      await this.getConferenceList()
    },
    async saveConference () {
      // 會議存入公文Id
      await this.$store.dispatch(
        'officialDocument/lookupOfficialDoc',
        this.OfficialDoc._id
      )
      this.conference.officialDocId = this.OfficialDoc._id
      console.log(this.conference.officialDocId)
      await this.patch(this.conference.officialDocId)
    },
    async saveOfficialDoc () {
      // 公文存入會議Id
      await this.$store.dispatch(
        'conference/lookupConference',
        this.conference._id
      )
      this.OfficialDoc.conferenceId = this.conference._id
      await this.conferencePatch(this.OfficialDoc._id)
    },
    syncDates (lastModified) {
      this.lastModified = lastModified // 紀錄最後修改的日期類型

      if (this.conference.conference_date && this.conference.end_date) {
        // 如果開始日期和結束日期都有值，將同步到最後填值的日期
        if (lastModified === 'start') {
          this.conference.end_date = this.conference.conference_date
        } else {
          this.conference.conference_date = this.conference.end_date
        }
      } else if (!this.conference.conference_date && this.conference.end_date) {
        // 如果開始日期為空而結束日期有值，將開始日期同步為結束日期
        this.conference.conference_date = this.conference.end_date
      } else if (!this.conference.end_date && this.conference.conference_date) {
        // 如果結束日期為空而開始日期有值，將結束日期同步為開始日期
        this.conference.end_date = this.conference.conference_date
      }
    }
  },
  computed: {
    ...mapState({
      conference: (state) => state.conference.Conference,
      OfficialDoc: (state) => state.officialDocument.officialDoc
    })
  }
}
</script>
<style>
.custom-select {
  color: black !important;
  box-shadow: none;
  -webkit-box-shadow: none;
}
.form-control {
  color: black;
}
.active-tab-class {
  background-color: #000000;
}
.grclass {
  background-color: #ddddff;
  width: 800px;
  height: 80px;
}
.grclass1 {
  background-color: #ddddff;
  width: 800px;
  height: 140px;
}
.grclass2 {
  background-color: #ddddff;
  width: 800px;
  height: 240px;
}
.grclass3 {
  width: 800px;
  height: 53px;
}
.btn1 {
  background-color: rgb(75, 102, 255);
  font-size: 18px;
  padding-left: 7px;
  padding-right: 7px;
  padding-top: 5px;
  padding-bottom: 5px;
  color: #ffffff;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
  border: none;
  float: center;
  text-align: justify;
}
.btn2 {
  background-color: rgb(245, 19, 19);
  font-size: 18px;
  padding-left: 7px;
  padding-right: 7px;
  padding-top: 5px;
  padding-bottom: 5px;
  color: #ffffff;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
  border: none;
  float: center;
  text-align: justify;
}
</style>
