<template>
  <div class="container">
    <b-row style="height: 60px; margin-top: 20px">
      <b-col cols="10">
        <span style="font-size: 20px; font-weight: 800">會議基本資訊:</span>
        <b-button v-if="isedit" @click="Save()" class="btn2">
          <b-icon-pencil /> 儲存
        </b-button>
        <b-button
          class="btn1"
          size="sm"
          @click="Edit"
          v-else
          v-show="conferenceManagement.permission === 2"
        >
          <b-icon icon="pencil-square" /> 編輯
        </b-button>
      </b-col>
    </b-row>
    <div style="margin-top: -15px">
      <b-row>
        <b-col cols="12">
          <!-- 會議開始時間 -->
          <b-list-group horizontal>
            <b-list-group-item class="word">
              <div class="label">會議開始時間</div>
            </b-list-group-item>
            <!-- 日期 -->
            <b-list-group-item class="grclass">
              <b-row v-if="isedit">
                <b-col cols="5">
                  <b-form-datepicker
                    v-model="conference.conference_date"
                    placeholder="mm/dd"
                    style="
                      text-align: left;
                      height: 40px;
                      width: 220px;
                    "
                    @input="syncDates('start')"
                  ></b-form-datepicker>
                </b-col>
                <!-- 時間 -->
                <b-col cols="3">
                  <div style="margin-left: 40px; margin-top: 10px">時間:</div>
                </b-col>
                <b-col cols="4">
                  <div style="margin-left: -35px">
                    <b-form-timepicker
                      v-model="conference.conference_time"
                      placeholder="hh/mm"
                      style="
                        text-align: left;
                        margin-left: 15px
                        margin-top: -10px;
                        height: 40px;
                        width: 140px;
                      "
                    ></b-form-timepicker>
                  </div>
                </b-col>
              </b-row>
              <span v-else
                >{{ getFormattedDate(conference.conference_date) }}
                {{ getFormattedTime(conference.conference_time) }}
              </span>
            </b-list-group-item>
          </b-list-group>
          <!-- 結束日期 -->
          <b-list-group horizontal>
            <b-list-group-item class="word">
              <div class="label">會議結束時間</div>
            </b-list-group-item>
            <b-list-group-item class="grclass">
              <b-row v-if="isedit">
                <b-col cols="5">
                  <b-form-datepicker
                    v-model="conference.end_date"
                    placeholder="mm/dd"
                    style="
                      text-align: left;
                      height: 40px;
                      width: 220px;
                    "
                    @input="syncDates('end')"
                  ></b-form-datepicker>
                </b-col>
                <!-- 時間 -->
                <b-col cols="3">
                  <div style="margin-left: 40px; margin-top: 10px">時間:</div>
                </b-col>
                <b-col cols="4">
                  <div style="margin-left: -35px">
                    <b-form-timepicker
                      v-model="conference.end_time"
                      placeholder="hh/mm"
                      style="
                        text-align: left;
                        margin-left: 15px
                        margin-top: -10px;
                        height: 40px;
                        width: 140px;
                      "
                    ></b-form-timepicker>
                  </div>
                </b-col>
              </b-row>
              <span v-else
                >{{ getFormattedDate(conference.end_date) }}
                {{ getFormattedTime(conference.end_time) }}
              </span>
            </b-list-group-item>
          </b-list-group>
          <!-- 會議名稱 -->
          <b-list-group horizontal>
            <b-list-group-item class="word">
              <div class="label">會議名稱</div>
            </b-list-group-item>
            <b-list-group-item class="grclass">
              <b-form-input
                v-model="conference.conference_name"
                type="text"
                v-if="isedit"
                style="margin-top: -10px; height: 35px"
              ></b-form-input>
              <span
                v-else
                v-b-popover.hover="{
                  content: `${conference.conference_name}`,
                  placement: 'left',
                  title: '會議名稱',
                }"
              >
                {{ conference.conference_name}}</span
              >
            </b-list-group-item>
          </b-list-group>
          <!-- 會議地點 -->
          <b-list-group horizontal>
            <b-list-group-item class="word">
              <div class="label">會議地點</div>
            </b-list-group-item>
            <b-list-group-item class="grclass0">
              <b-form-input
                v-model="conference.venue"
                type="text"
                v-if="isedit"
                style="margin-top: -10px; height: 35px"
              ></b-form-input>
              <span v-else>{{ conference.venue }}</span>
            </b-list-group-item>
          </b-list-group>
          <!-- 會議類別 -->
          <b-list-group horizontal>
            <b-list-group-item class="word">
              <div class="label">會議類別</div>
            </b-list-group-item>
            <b-list-group-item class="grclass">
              <div v-if="isedit" style="margin-top: -10px">
                <b-form-select
                  v-model="conference.conference_classification"
                  :options="conference_classifications.paramsValue"
                ></b-form-select>
              </div>
              <div v-else>
                <span>{{ conference.conference_classification }}</span>
              </div>
            </b-list-group-item>
          </b-list-group>
          <!-- 相關說明 -->
          <b-list-group horizontal>
            <b-list-group-item class="word">
              <div class="label">相關說明</div>
            </b-list-group-item>
            <b-list-group-item class="grclass">
              <b-form-textarea
                v-model="conference.description"
                type="text"
                v-if="isedit"
                style="height: 120px"
              ></b-form-textarea>
              <div v-else style="word-wrap: break-word">
                {{ conference.description }}
              </div>
            </b-list-group-item>
          </b-list-group>
          <!-- 出席人員 -->
          <b-list-group horizontal>
            <b-list-group-item class="word">
              <div class="label">出席人員</div>
            </b-list-group-item>
            <b-list-group-item class="grclass">
              <div v-if="isedit" style="margin-top: -10px">
                <multiselect
                  v-model="conference.member"
                  placeholder="請選擇參與人員"
                  :multiple="true"
                  :taggable="true"
                  :searchable="false"
                  :options="staffs"
                  :close-on-select="false"
                  :clear-on-select="false"
                  selectLabel="請選擇"
                  selectedLabel="已選擇"
                  deselectLabel="取消選擇"
                  label="name"
                  track-by="_id"
                >
                </multiselect>
              </div>
              <div v-else style="word-wrap: break-word">
                <span>{{ conferenceMemberName }}</span>
              </div>
            </b-list-group-item>
          </b-list-group>
          <!-- 主持人 -->
          <b-list-group horizontal>
            <b-list-group-item class="word">
              <div class="label">主持人</div>
            </b-list-group-item>
            <b-list-group-item class="grclass">
              <div v-if="isedit" style="margin-top: -10px">
                <multiselect
                  v-model="conference.host"
                  placeholder="請選擇主持人"
                  :multiple="true"
                  :taggable="true"
                  :searchable="false"
                  :options="staffs"
                  :close-on-select="false"
                  :clear-on-select="false"
                  selectLabel="請選擇"
                  selectedLabel="已選擇"
                  deselectLabel="取消選擇"
                  label="name"
                  track-by="_id"
                >
                </multiselect>
              </div>
              <div v-else style="word-wrap: break-word">
                <span>{{ conferenceHostName }}</span>
              </div>
            </b-list-group-item>
          </b-list-group>
          <!-- 紀錄 -->
          <b-list-group horizontal>
            <b-list-group-item class="word">
              <div class="label">紀錄</div>
            </b-list-group-item>
            <b-list-group-item class="grclass">
              <div v-if="isedit" style="margin-top: -10px">
                <multiselect
                  v-model="conference.recorder"
                  placeholder="請選擇紀錄人員"
                  tag-placeholder="新增人員"
                  :taggable="true"
                  :options="staffs"
                  :clear-on-select="false"
                  selectLabel="請選擇"
                  selectedLabel="已選擇"
                  deselectLabel="取消選擇"
                  label="name"
                  track-by="_id"
                >
                </multiselect>
              </div>
              <div v-else style="word-wrap: break-word">
                <span v-if="conference.recorder != null">
                  {{ conference.recorder.name }}
                </span>
                <span v-else></span>
              </div>
            </b-list-group-item>
          </b-list-group>
          <!-- 會議議題 -->
          <b-list-group horizontal>
            <b-list-group-item class="word">
              <div class="label">會議議題</div>
            </b-list-group-item>
            <b-list-group-item
              style="height: auto; background-color: #ddddff; width: 600px"
            >
              <multiselect
                v-model="conference.issueId"
                placeholder="請選擇議題"
                :multiple="true"
                :options="content"
                :taggable="true"
                :searchable="false"
                :close-on-select="false"
                :clear-on-select="false"
                selectLabel="請選擇"
                selectedLabel="已選擇"
                deselectLabel="取消選擇"
                label="description"
                track-by="id"
                v-if="isedit"
              >
              </multiselect>
              <div style="word-wrap: break-word" v-else>
                <span>{{ conferenceContent }}</span>
              </div>
            </b-list-group-item>
          </b-list-group>
        </b-col>
      </b-row>
    </div>
  </div>
</template>
<script>
import { mapActions, mapState, mapGetters } from 'vuex'
import functionBar from '@/views/ConferenceManagement/ConferenceEdit/functionBar.vue'
import moment from 'moment'
import Multiselect from 'vue-multiselect'
import 'vue-multiselect/dist/vue-multiselect.min.css'
export default {
  data () {
    return {
      lastModified: '', // 添加這個變量來標記最後修改的是開始日期還是結束日期
      isedit: false,
      staffs: [],
      content: [],
      conferenceSchedule: {},
      conference_classifications: {
        _id: '',
        paramsValue: []
      },
      conferenceManagement: {}
    }
  },
  components: {
    Multiselect,
    functionBar
  },
  async created () {
    if (this.$route.query.fid !== undefined) {
      await this.$store.dispatch(
        'conference/lookupConference',
        this.$route.query.fid
      )
    }
    this.$emit('reload')
  },
  async mounted () {
    try {
      this.staffs = await this.$store.dispatch('project/lookupStaffs', {
        selects: ['name', '_id']
      })
      this.conference_classifications = await this.lookupParam(
        'conference_classification'
      )
      await this.issueList()
      // 會議行事曆
      await this.$store.dispatch('schedule/getScheduleList')
      for (let i = 0; i < this.scheduleList.length; i++) {
        const element = this.scheduleList[i]
        if (element.conferenceId === this.$route.query.fid) {
          this.conferenceSchedule = element
        }
      }
      this.usePermission()
      // this.$store.commit('issue/resetList')
    } catch (err) {
      console.log(err)
    }
  },
  filters: {
    ellipsis (value) {
      if (value.length > 18) {
        return value.slice(0, 60) + '...'
      }
      return value
    }
  },
  methods: {
    ...mapActions('conference', ['lookupConference', 'patchSchedule']),
    ...mapActions('paramsSetting', ['lookupParam']),
    Edit () {
      this.$emit('isedit')
      this.isedit = true
    },
    async Save () {
      let wasNull = false
      const startFormattedDate = this.getFormattedDate(this.conference.conference_date)
      const endFormattedDate = this.getFormattedDate(this.conference.end_date)

      const startTime = new Date(startFormattedDate + ' ' + this.conference.conference_time)
      const endTime = new Date(endFormattedDate + ' ' + this.conference.end_time)
      if (startTime > endTime) wasNull = true
      if (wasNull) alert('會議時間不能晚於會議結束時間！')
      else {
        let yes = (window.confirm('確定儲存？'))
        if (yes) {
          this.isedit = false
          this.$emit('ispatch')
          await this.patchSchedule(this.conferenceSchedule._id)
          alert('修改成功！')
          this.$emit('reload')
        } else {
          alert('取消儲存')
        }
      }
    },
    getFormattedDate (date) {
      // 轉換日期格式
      let d = null
      if (date) {
        return moment(date).format('YYYY-MM-DD')
      } else {
        return d
      }
    },
    getFormattedTime (time) {
      return this.formatTime(time)
    },
    formatTime (time) {
      if (time && time.length >= 3) {
        return time.substr(0, time.length - 3)
      } else {
        return ''
      }
    },
    async issueList () {
      this.content = await this.$store.dispatch('issue/lookupIssueList')
    },
    syncDates (lastModified) {
      this.lastModified = lastModified // 紀錄最後修改的日期類型

      if (lastModified === 'start') {
        this.conference.end_date = this.conference.conference_date
      } else {
        this.conference.conference_date = this.conference.end_date
      }
    },

    usePermission () {
      // 確認權限
      Object.values(this.currentUser.tenderPermissions).forEach((obj) => {
        if (obj.tenderId === this.currentUser.defaultTender) {
          let permission = obj.permission
            .filter((name) => name.title === '工作協同')
            .map((val) => {
              return val.functionItem
            })
          for (const element of permission) {
            for (const a of element) {
              if (a.name === '會議管理') this.conferenceManagement = a
            }
          }
        }
      })
    }
  },
  computed: {
    ...mapState({
      conference: (state) => state.conference.Conference,
      scheduleList: (state) => state.schedule.ScheduleList,
      currentUser: (state) => state.user.current
    }),
    ...mapGetters('conference', [
      'conferenceMemberName',
      'conferenceContent',
      'conferenceHostName'
    ])
  }
}
</script>
<style lang="scss" scoped>

.container {
  margin-top: 60px;
  width: 75%;
  height: 95%;
  margin-left: 20px;
}
.grclass {
  height: auto;
  background-color: #ddddff;
  width: 650px;

}
.grclass0 {
  height: auto;
  background-color: #ddddff;
  width: 650px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.form-control {
  color: black;
}
.btn1 {
  background-color: rgb(75, 102, 255);
  font-size: 16px;
  margin-top: -5px;
  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;
}
.word {
  text-align: center;
  color: white;
  position: relative;
  display: flex;
  align-items: center;
  white-space: nowrap;
  background-color: #9393ff;
}
.label {
  width: 100px;
  display: inline-block;
}
</style>
