<template>
  <div style="background-color:#474e5d">
      <div
        class="container"
        style="overflow: scroll; height: 900px; overflow-x: hidden"
      >
        <div class="main-timeline">
          <!-- 1 -->
          <div class="timeline left">
            <div class="card" style="background-color: #f2f3f8">
              <div class="card-body p-4">
                <h3>January-1月</h3>
                <p
                  class="mb-0"
                  v-for="(note, i) in januaryList"
                  :key="i"
                  @click="handleEventClick(note)"
                  style="cursor: pointer;margin-top:5px"
                >
                • <b-badge variant="info">{{
                  note.start
                }}</b-badge>
                 |<span style="font-weight: 800;" @mouseover="addUnderline" @mouseout="removeUnderline"> {{note.title | ellipsis }}</span>
                 </p>
              </div>
            </div>
          </div>
          <!-- 2 -->
          <div class="timeline right">
            <div class="card" style="background-color: #f2f3f8">
              <div class="card-body p-4">
                <h3>February-2月</h3>
                <p
                  class="mb-0"
                  v-for="(note, i) in februaryList"
                  :key="i"
                  @click="handleEventClick(note)"
                  style="cursor: pointer;margin-top:5px"
                >
                • <b-badge variant="info">{{
                  note.start
                }}</b-badge>
                 |<span style="font-weight: 800;" @mouseover="addUnderline" @mouseout="removeUnderline"> {{note.title | ellipsis }}</span>
                </p>
              </div>
            </div>
          </div>
          <!-- 3 -->
          <div class="timeline left">
            <div class="card" style="background-color: #f2f3f8">
              <div class="card-body p-4">
                <h3>March-3月</h3>
                <p
                  class="mb-0"
                  v-for="(note, i) in marchList"
                  :key="i"
                  @click="handleEventClick(note)"
                  style="cursor: pointer;margin-top:5px"
                >
                  • <b-badge variant="info">{{
                  note.start
                }}</b-badge>
                 |<span style="font-weight: 800;" @mouseover="addUnderline" @mouseout="removeUnderline"> {{note.title | ellipsis }}</span>
                </p>
              </div>
            </div>
          </div>
          <!-- 4 -->
          <div class="timeline right">
            <div class="card" style="background-color: #f2f3f8">
              <div class="card-body p-4">
                <h3>April-4月</h3>
                <p
                  class="mb-0"
                  v-for="(note, i) in aprilList"
                  :key="i"
                  @click="handleEventClick(note)"
                  style="cursor: pointer;margin-top:5px"
                >
                  • <b-badge variant="info">{{
                  note.start
                }}</b-badge>
                 |<span style="font-weight: 800;" @mouseover="addUnderline" @mouseout="removeUnderline"> {{note.title | ellipsis }}</span>
                </p>
              </div>
            </div>
          </div>
          <!-- 5 -->
          <div class="timeline left">
            <div class="card" style="background-color: #f2f3f8">
              <div class="card-body p-4">
                <h3>May-5月</h3>
                <p
                  class="mb-0"
                  v-for="(note, i) in mayList"
                  :key="i"
                  @click="handleEventClick(note)"
                  style="cursor: pointer;margin-top:5px"
                >
                  • <b-badge variant="info">{{
                  note.start
                }}</b-badge>
                 |<span style="font-weight: 800;" @mouseover="addUnderline" @mouseout="removeUnderline"> {{note.title | ellipsis }}</span>
                </p>
              </div>
            </div>
          </div>
          <!-- 6 -->
          <div class="timeline right">
            <div class="card" style="background-color: #f2f3f8">
              <div class="card-body p-4">
                <h3>June-6月</h3>
                <p
                  class="mb-0"
                  v-for="(note, i) in juneList"
                  :key="i"
                  @click="handleEventClick(note)"
                  style="cursor: pointer;margin-top:5px"
                >
                 • <b-badge variant="info">{{
                  note.start
                }}</b-badge>
                 |<span style="font-weight: 800;" @mouseover="addUnderline" @mouseout="removeUnderline"> {{note.title | ellipsis }}</span>
                </p>
              </div>
            </div>
          </div>
          <!-- 7 -->
          <div class="timeline left">
            <div class="card" style="background-color: #f2f3f8">
              <div class="card-body p-4">
                <h3>July-7月</h3>
                <p
                  class="mb-0"
                  v-for="(note, i) in julyList"
                  :key="i"
                  @click="handleEventClick(note)"
                  style="cursor: pointer;margin-top:5px"
                >
                  • <b-badge variant="info">{{
                  note.start
                }}</b-badge>
                 |<span style="font-weight: 800;" @mouseover="addUnderline" @mouseout="removeUnderline"> {{note.title | ellipsis }}</span>
                </p>
              </div>
            </div>
          </div>
          <!-- 8 -->
          <div class="timeline right">
            <div class="card" style="background-color: #f2f3f8">
              <div class="card-body p-4">
                <h3>August-8月</h3>
                <p
                  class="mb-0"
                  v-for="(note, i) in augustList"
                  :key="i"
                  @click="handleEventClick(note)"
                  style="cursor: pointer;margin-top:5px"
                >
                  • <b-badge variant="info">{{
                  note.start
                }}</b-badge>
                 |<span style="font-weight: 800;" @mouseover="addUnderline" @mouseout="removeUnderline"> {{note.title | ellipsis }}</span>
                </p>
              </div>
            </div>
          </div>
          <!-- 9 -->
          <div class="timeline left">
            <div class="card" style="background-color: #f2f3f8">
              <div class="card-body p-4">
                <h3>September-9月</h3>
                <p
                  class="mb-0"
                  v-for="(note, i) in septemberList"
                  :key="i"
                  @click="handleEventClick(note)"
                  style="cursor: pointer;margin-top:5px"
                >
                  • <b-badge variant="info">{{
                  note.start
                }}</b-badge>
                 |<span style="font-weight: 800;" @mouseover="addUnderline" @mouseout="removeUnderline"> {{note.title | ellipsis }}</span>
                </p>
              </div>
            </div>
          </div>
          <!-- 10 -->
          <div class="timeline right">
            <div class="card" style="background-color: #f2f3f8">
              <div class="card-body p-4">
                <h3>October-10月</h3>
                <p
                  class="mb-0"
                  v-for="(note, i) in octoberList"
                  :key="i"
                  @click="handleEventClick(note)"
                  style="cursor: pointer;margin-top:5px"
                >
                  • <b-badge variant="info">{{
                  note.start
                }}</b-badge>
                 |<span style="font-weight: 800;" @mouseover="addUnderline" @mouseout="removeUnderline"> {{note.title | ellipsis }}</span>
                </p>
              </div>
            </div>
          </div>
          <!-- 11 -->
          <div class="timeline left">
            <div class="card" style="background-color: #f2f3f8">
              <div class="card-body p-4">
                <h3>November-11月</h3>
                <p
                  class="mb-0"
                  v-for="(note, i) in novemberList"
                  :key="i"
                  @click="handleEventClick(note)"
                  style="cursor: pointer;margin-top:5px"
                >
                 • <b-badge variant="info">{{
                  note.start
                }}</b-badge>
                 |<span style="font-weight: 800;" @mouseover="addUnderline" @mouseout="removeUnderline"> {{note.title | ellipsis }}</span>
                </p>
              </div>
            </div>
          </div>
          <!-- 12 -->
          <div class="timeline right">
            <div class="card" style="background-color: #f2f3f8">
              <div class="card-body p-4">
                <h3>December-12月</h3>
                <p
                  class="mb-0"
                  v-for="(note, i) in decemberList"
                  :key="i"
                  @click="handleEventClick(note)"
                  style="cursor: pointer;margin-top:5px"
                >
                  • <b-badge variant="info">{{
                  note.start
                }}</b-badge>
                 |<span style="font-weight: 800;" @mouseover="addUnderline" @mouseout="removeUnderline"> {{note.title | ellipsis }}</span>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    <modal
      :isOpen="ChronologyEventModalOpen"
      title="事件內容"
      @closeEvent="ChronologyEventModalOpen = false"
    >
      <chronologyEvent @closeEvent="ChronologyEventModalOpen = false" />
    </modal>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import chronologyEvent from '@/views/Calendar/ModalContent/chronologyEvent.vue'

export default {
  components: {
    modal: () => import('@/views/Modal/index.vue'),
    chronologyEvent
  },
  props: ['getYear'],
  data () {
    return {
      ChronologyEventModalOpen: false,
      eventList: [], // all-list
      januaryList: [],
      februaryList: [],
      marchList: [],
      aprilList: [],
      mayList: [],
      juneList: [],
      julyList: [],
      augustList: [],
      septemberList: [],
      octoberList: [],
      novemberList: [],
      decemberList: []
    }
  },
  async mounted () {
    await this.getEvents()
  },
  methods: {
    ...mapActions('schedule', ['getScheduleList']),
    async getEvents () {
      await this.getScheduleList({ chronology: true })
      this.eventList = []
      for (let obj of this.scheduleList) {
        if (new Date(obj.start).getFullYear() === this.getYear.getFullYear()) {
          this.eventList.push(obj)
        }
      }
      this.januaryList = []
      this.februaryList = []
      this.marchList = []
      this.aprilList = []
      this.mayList = []
      this.juneList = []
      this.julyList = []
      this.augustList = []
      this.septemberList = []
      this.octoberList = []
      this.novemberList = []
      this.decemberList = []
      for (let index of this.eventList) {
        switch (new Date(index.start).getMonth()) {
          case 0:
            this.januaryList.push(index)
            break
          case 1:
            this.februaryList.push(index)
            break
          case 2:
            this.marchList.push(index)
            break
          case 3:
            this.aprilList.push(index)
            break
          case 4:
            this.mayList.push(index)
            break
          case 5:
            this.juneList.push(index)
            break
          case 6:
            this.julyList.push(index)
            break
          case 7:
            this.augustList.push(index)
            break
          case 8:
            this.septemberList.push(index)
            break
          case 9:
            this.octoberList.push(index)
            break
          case 10:
            this.novemberList.push(index)
            break
          case 11:
            this.decemberList.push(index)
            break
        }
      }
    },
    async handleEventClick (clickInfo) {
      this.content = clickInfo.event.extendedProps.scheduleId

      if (clickInfo.event.backgroundColor === '#eb9114') {
        // 會議另開
        await this.$store.dispatch('schedule/getScheduleContent', this.content)
        const conference = this.conference.find(conf => conf._id === this.schedule.conferenceId)

        if (conference) {
          this.$router.push({
            name: 'ConferenceDetail',
            query: { fid: conference._id }
          })
        }
      } else {
        this.EditEventModalOpen = true

        // 不需要对结束时间进行处理，直接使用clickInfo.event.end
        const formattedEndDate = clickInfo.event.endStr

        await this.lookSchedule(clickInfo, formattedEndDate, this.content)
      }
    },
    addUnderline (event) {
      event.target.classList.add('underline')
    },
    removeUnderline (event) {
      event.target.classList.remove('underline')
    },
    async lookSchedule (data, end, id) {
      // 調整日期專用
      await this.$store.dispatch('schedule/getScheduleContent', id)
      await this.$store.dispatch('schedule/lookupSchedule', {
        id: id,
        title: data.title,
        start: data.start,
        end: end,
        scheduleType: this.schedule.scheduleType,
        thing: this.schedule.thing,
        chronology: this.schedule.chronology,
        imageFile: this.schedule.imageFile
      })
    }
  },
  computed: {
    ...mapState({
      schedule: (state) => state.schedule.Schedule,
      scheduleList: (state) => state.schedule.ScheduleList
    })
  },
  filters: {
    ellipsis (value) {
      if (value.length > 18) { return value.slice(0, 20) + '...' }
      return value
    }
  }
}
</script>

<style scoped>
HTML
CSS
/* 實際時間軸（垂直標尺）*/
.main-timeline {
  position: relative;
}

/* 實際時間軸（垂直標尺）*/
.main-timeline::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 900px;
  background-color:  #f0f2f5;
  top: 0;
  bottom: 0;
  left: 55%;
  margin-left: 65px;
}

/* 圍繞內容的容器 */
.timeline {
  position: relative;
  background-color: inherit;
  width: 50%;
  left: 50%;
}

/*時間軸上的圓圈*/
.timeline::after {
  content: "";
  position: absolute;
  width: 25px;
  height: 25px;
  right: -8px;
  background-color: white;
  border: 5px solid #FF9F55;
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}

/* 將容器放在左邊 */
.left {
  padding: 0px 40px 20px 0px;
  left: 13px;
}

/* 將容器放在右邊 */
.right {
  padding: 0px 0px 20px 40px;
  left: 553px;
}

/* 向左容器添加箭頭（指向右）*/
.left::before {
  content: " ";
  position: absolute;
  top: 18px;
  z-index: 1;
  right: 30px;
  border: medium solid white;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent #f2f3f8;
}

/* 向右側容器添加箭頭（指向左側）*/
.right::before {
  content: " ";
  position: absolute;
  top: 18px;
  z-index: 1;
  left: 30px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent #f2f3f8 transparent transparent;
}

/* 修復右側容器的圓圈 */
.right::after {
  left: -12px;
}

/* 媒體查詢 - 在小於 600 像素寬的屏幕上響應時間軸 */
@media screen and (max-width: 600px) {
  /* Place the timelime to the left */
  .main-timeline::after {
    left: 31px;
  }

  /* 全寬容器 */
  .timeline {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
  }

  /* 確保所有箭頭都指向左側 */
  .timeline::before {
    left: 55px;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent #f2f3f8 transparent transparent;
  }

  /*確保所有圓圈都在同一個地方*/
  .left::after,
  .right::after {
    left: 18px;
  }

  .left::before {
    right: auto;
  }

  /* 使所有右側容器的行為與左側容器相同 */
  .right {
    left: 0%;
  }
  .container,
  .container-fluid,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl {
    width: 1400px;
  }
}
.underline {
  text-decoration: underline;
}
.word {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@500;700&display=swap');
::-webkit-scrollbar {
  width: 3px;
}
::-webkit-scrollbar-track {
  border-radius: 10px;
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  border-radius: 15px;
  background: #888;
}
::-webkit-scrollbar-thumb:hover {
  background: #555;
}
</style>
