<template>
  <div>
    <div class="demo-app">
      <div class="demo-app-sidebar">
        <div>
          <b-row>
            <b-col cols="12">
              <b-form-select
                style="width: 260px; margin-left: -10px; margin-top: -20px"
                v-model="ChangePage"
                :options="list"
              >
              </b-form-select>
            </b-col>
          </b-row>
          <b-row
            class="mt-3"
            style="cursor: pointer"
            v-show="isFix === true"
          >
            <el-date-picker
              v-model="fullYear"
              type="year"
              :clearable="false"
              @change="confirm"
              style="width:95%;margin-left:5px"
            >
            </el-date-picker>
          </b-row>
          <b-row
            class="mt-3"
            @click="exportChronologyList()"
            style="cursor: pointer"
            v-show="isFix === true"
          >
            <b-col cols="6" class="mt-3">
              <span class="button">匯出列表</span>
            </b-col>
            <b-col cols="6" class="mt-3">
              <b-icon
                class="w-15 float-right p-0 mr-0 mt-0"
                icon="list-check"
                aria-hidden="true"
                style="height: 20px; width: auto"
              ></b-icon>
            </b-col>
          </b-row>
          <!-- 匯出到這 -->
          <b-row
            class="mt-3"
            @click="addEvent"
            style="cursor: pointer"
            v-show="isFix === false && eventManagement.permission === 2"
          >
            <b-col cols="6" class="mt-3">
              <span class="button">新增事件</span>
            </b-col>
            <b-col cols="6" class="mt-3">
              <b-icon
                class="w-15 float-right p-0 mr-0 mt-0"
                icon="calendar-plus"
                aria-hidden="true"
                style="height: 20px; width: auto"
              ></b-icon>
            </b-col>
          </b-row>
          <b-row
            class="mt-3"
            @click="addEventType"
            style="cursor: pointer"
            v-show="isFix === false && eventType.permission === 2"
          >
            <b-col cols="6">
              <span class="button">參數設置</span>
            </b-col>
            <b-col cols="6">
              <b-icon
                class="w-15 float-right p-0 mr-0 mt-0"
                icon="tools"
                aria-hidden="true"
                style="height: 20px; width: auto"
              ></b-icon>
            </b-col>
          </b-row>
        </div>
        <div
          style="width: 300px; margin-left: -28px; margin-top: 10px"
          v-show="isFix === false"
        >
          <b-row style="margin-left: -5px; margin-top: 60px">
            <b-col
              cols="11"
              @click="isCollapsed = !isCollapsed"
              style="cursor: pointer"
              class="ml-1"
            >
              <span style="font-size: 16px; font-weight: 800">事件類別</span>
              <div class="float-right">
                <span v-if="isCollapsed">▲</span>
                <span v-else>▼</span>
              </div>
            </b-col>
            <b-col cols="12">
              <div class="overList">
              <b-collapse
                style="padding-top: 10px"
                :visible="!isCollapsed"
                id="collapse-2"
              >
                <div v-for="(note, i) in type" :key="i">
                  <b-row class="mt-3">
                    <b-col cols="1" class="mt-1">
                      <input
                        type="checkbox"
                        style="width: 15px; height: 15px"
                        :id="note.name"
                        @click="selectList(note.name)"
                        checked
                      />
                    </b-col>
                    <b-col
                      cols="8"
                      style="
                        margin-top: 3px;
                        color: black;
                        font-size: 16px;
                        font-weight: 600;
                      "
                    >
                      <span :id="note.name">{{ note.name }}</span>
                    </b-col>
                    <b-col cols="2" style="border-radius: 50%">
                      <b-icon
                        class="p-0 ml-2"
                        aria-hidden="true"
                        style="height: 16px; width: auto; border-radius: 50%"
                        :style="note"
                      ></b-icon>
                    </b-col>
                  </b-row>
                </div>
              </b-collapse>
              </div>
            </b-col>
          </b-row>
        </div>
      </div>
      <div class="demo-app-main" v-show="isFix === false">
        <FullCalendar class="demo-app-calendar" :options="calendarOptions">
          <template #eventContent="arg">
            <div class="word">
              <span style="cursor: pointer" :style="getEventTitleStyle(arg.event.start, arg.event.end)">
              <i v-if="arg.event.extendedProps.titlePrefix">{{arg.event.extendedProps.titlePrefix}}{{ arg.event.title }}</i>
              <i v-else>{{ arg.event.title }}</i>
            </span></div>
          </template>
        </FullCalendar>
      </div>
      <div v-show="isFix === true" class="calendar container">
        <chronology ref="chronology" :getYear="fullYear" />
      </div>
    </div>
    <modal
      :isOpen="AddEventModalOpen"
      title="新增事件"
      @closeEvent="AddEventModalOpen = false"
    >
      <addEvent @closeEvent="getEvent" />
    </modal>
    <modal
      :isOpen="EditEventModalOpen"
      title="編輯事件"
      @closeEvent="editEvent"
    >
      <editEvent :get-content="content" @closeEvent="editEvent" />
    </modal>
    <modal
      :isOpen="AddEventTypeModalOpen"
      title="參數設置"
      @closeEvent="closeAddTypeModal"
    >
      <add-event-type @closeEvent="AddEventTypeModalOpen = false" />
    </modal>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import editEvent from '@/views/Calendar/ModalContent/editEvent.vue'
import addEvent from '@/views/Calendar/ModalContent/addEvent.vue'
import addEventType from '@/views/Calendar/ModalContent/addEventType.vue'
import chronology from '../../../../views/Calendar/Memorabilla/chronology.vue'
import ExcelJS from 'exceljs'

export default {
  name: 'GoDatePicker',
  components: {
    modal: () => import('@/views/Modal/index.vue'),
    addEvent,
    editEvent,
    addEventType,
    FullCalendar,
    chronology
  },
  data: function () {
    return {
      fullYear: new Date(), // 大事記篩選
      isFix: false,
      ChangePage: '行事曆',
      isCollapsed: false,
      content: '',
      type: [],
      typeList: [], // 篩選條件用
      year: [{ value: '2000', text: '2000' }],
      AddEventModalOpen: false,
      EditEventModalOpen: false,
      AddEventTypeModalOpen: false,
      currentEvents: [],
      calendarOptions: {
        locale: 'zh-tw',
        plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
        headerToolbar: {
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        initialView: 'dayGridMonth',
        firstDay: '1',
        editable: false,
        selectable: true,
        selectMirror: true,
        dayMaxEvents: true,
        weekends: true,
        select: this.handleDateSelect,
        eventClick: this.handleEventClick,
        eventsSet: this.handleEvents,
        buttonText: {
          // 文本将显示在headerToolbar / footerToolbar的按钮上。不支持HTML注入。所有特殊字符将被转义。
          today: '今天',
          month: '月',
          week: '周',
          day: '天'
        },
        events: [],
        eventTextColor: 'black'
      },
      sidebarItems: [{ name: '行事曆' }, { name: '大事紀' }],
      list: [
        { value: '行事曆', text: '行事曆' },
        { value: '大事紀', text: '大事紀' }
      ],
      // 事件類別
      scheduleClassification: {},
      calendar: [],
      // 權限
      eventManagement: {},
      eventType: {},
      workbook: {}
    }
  },
  async mounted () {
    await this.getConferenceList()
    await this.getEvents()
    this.reloadPage()
    this.usePermission()
  },
  methods: {
    ...mapActions('schedule', ['getScheduleList', 'initSchedule', 'printChronologyZip']),
    ...mapActions('paramsSetting', ['lookupParam']),
    ...mapActions('conference', ['getConferenceList']),
    handleWeekendsToggle () {
      this.calendarOptions.weekends = !this.calendarOptions.weekends
    },
    async handleDateSelect (selectInfo) {
      if (this.eventManagement.permission === 2) {
        this.AddEventModalOpen = true
        await this.$store.dispatch('schedule/handleDateSelect', {
          startDate: selectInfo.startStr,
          endDate: selectInfo.endStr
        })
      }
    },
    async handleEventClick (clickInfo) {
      this.content = clickInfo.event.extendedProps.scheduleId

      // 會議另開
      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
        const formattedEndDate = clickInfo.event.endStr
        await this.lookSchedule(clickInfo, formattedEndDate, this.content)
      }
    },
    async lookSchedule (data, end, id) {
      await this.$store.dispatch('schedule/getScheduleContent', id)
      await this.$store.dispatch('schedule/lookupSchedule', {
        id: id,
        title: data.event.title,
        start: data.event.startStr,
        end: end,
        scheduleType: this.schedule.scheduleType,
        color: this.schedule.color,
        thing: this.schedule.thing,
        chronology: this.schedule.chronology,
        imageFile: this.schedule.imageFile
      })
    },
    handleEvents (events) {
      const calendarEvents = events.map(event => {
        const isAllDay = this.isOneDayEvent(event.start, event.end)
        return {
          ...event,
          allDay: isAllDay
        }
      })
      this.currentEvents = calendarEvents
    },
    editEvent () {
      this.EditEventModalOpen = false
      this.selectList()
    },
    getEvent () {
      this.AddEventModalOpen = false
      this.selectList()
    },
    async addEvent () {
      // 新增事件
      this.AddEventModalOpen = true
      await this.initSchedule()
    },
    getFormattedTime (time) {
      return this.formatTime(time)
    },
    formatTime (time) {
      if (time && time.length >= 3) {
        return time.substr(0, time.length - 3)
      } else {
        return ''
      }
    },
    getTimeObject (time) {
      const [hours, minutes] = time.split(':')
      return {
        hour: parseInt(hours),
        minute: parseInt(minutes)
      }
    },
    isOneDayEvent (start, end) {
      const startDate = new Date(start)
      const endDate = new Date(end)
      const oneDay = 24 * 60 * 60 * 1000

      return endDate - startDate <= oneDay
    },
    getEventTitleStyle (start, end) {
      const startDate = new Date(start)
      const endDate = new Date(end)
      const oneDay = 24 * 60 * 60 * 1000

      if (endDate - startDate <= oneDay) {
        return {
          whiteSpace: 'normal'
        }
      } else {
        return {
          whiteSpace: 'nowrap'
        }
      }
    },
    async getEvents () {
      this.$router.push({ name: 'Memorabilia' })
      await this.getScheduleList()
      await this.$store.dispatch('conference/getConferenceList')
      const calendarEvents = []
      for (const obj of this.scheduleList) {
        if (obj.start && obj.end) {
          let titlePrefix = ''
          if (obj.scheduleType === '會議') {
            const conference = this.conference.find(conf => conf._id === obj.conferenceId)
            if (conference) {
              const start = new Date((obj.start + ' ' + conference.conference_time).toString())
              const end = new Date((obj.start + ' ' + conference.end_time).toString())
              titlePrefix = `${this.getFormattedTime(conference.conference_time)} - `
              const startFormatted = `${start.toLocaleDateString()} ${start.toLocaleTimeString()}`
              const endFormatted = `${end.toLocaleDateString()} ${end.toLocaleTimeString()}`
              calendarEvents.push({
                titlePrefix: titlePrefix,
                title: obj.title,
                start: start,
                end: end,
                color: obj.color,
                scheduleId: obj._id,
                startFormatted,
                endFormatted
              })
            }
          } else {
            let start = new Date((obj.start + ' ' + '00:00:00').toString())
            let end = new Date(obj.end)
            end.setDate(end.getDate() + 1)
            calendarEvents.push({
              title: obj.title,
              start: start,
              end: end,
              color: obj.color,
              scheduleId: obj._id,
              allDay: true
            })
          }
        }
        this.calendarOptions.events = calendarEvents
        this.calendarOptions.eventClick = info => {
          this.handleEventClick(info)
        }
      }
    },
    async reloadPage () { // 篩選條件用
      this.scheduleClassification = await this.lookupParam(
        'schedule_classification'
      )
      this.type = this.scheduleClassification.paramsItems
      for (let type of this.type) {
        this.typeList.push(type.name)
      }
    },
    async reload () {
      await this.getConferenceList()
      this.getNewConferenceList()
    },
    closeAddEventModal () {
      this.AddEventModalOpen = false
    },
    closeEditEventModal () {
      this.EditEventModalOpen = false
    },
    closeAddTypeModal () {
      this.AddEventTypeModalOpen = false
      this.reloadPage()
    },
    addEventType () {
      this.AddEventTypeModalOpen = true
    },
    async selectList (name) {
      await this.getScheduleList()
      this.typeList.includes(name)
        ? this.typeList = this.typeList.filter((item) => {
          return item !== name
        })
        : this.typeList.push(name)
      const list = this.typeList
      const allList = this.scheduleList
      const getDifference = (array1, array2) => {
        return array1.filter(object1 => {
          return array2.some(object2 => {
            return object1.scheduleType === object2
          })
        })
      }
      const newScheduleList = getDifference(allList, list)
      this.calendarOptions.events = []
      let titlePrefix = ''
      newScheduleList.forEach((obj, i) => {
        let conference = this.conference.find(conf => conf._id === obj.conferenceId)
        if (conference) {
          if (obj.scheduleType === '會議') {
            let start = new Date((obj.start + ' ' + (conference ? conference.conference_time : '')).toString())
            let end = new Date((obj.start + ' ' + (conference ? conference.end_time : '')).toString())
            let startFormatted = `${start.toLocaleDateString()} ${start.toLocaleTimeString()}`
            let endFormatted = `${end.toLocaleDateString()} ${end.toLocaleTimeString()}`
            titlePrefix = `${this.getFormattedTime(conference.conference_time)} - `
            this.calendarOptions.events[i] = {
              titlePrefix: titlePrefix,
              title: obj.title,
              start: start,
              end: end,
              color: obj.color,
              scheduleId: obj._id,
              startFormatted,
              endFormatted
            }
          } else {
            let start = new Date((obj.start + ' ' + '00:00:00').toString())
            let end = new Date(obj.end)
            end.setDate(end.getDate() + 1)
            this.calendarOptions.events[i] = {
              title: obj.title,
              start: start,
              end: end,
              color: obj.color,
              scheduleId: obj._id,
              allDay: true
            }
          }
        } else {
          let start = new Date((obj.start + ' ' + '00:00:00').toString())
          let end = new Date(obj.end)
          end.setDate(end.getDate() + 1)
          this.calendarOptions.events[i] = {
            title: obj.title,
            start: start,
            end: end,
            color: obj.color,
            scheduleId: obj._id,
            allDay: true
          }
        }
      })
    },
    confirm () { // 大事記篩選
      this.$refs.chronology.getEvents()
    },
    async exportChronologyList () { // 匯出大事記列表
      this.workbook.creator = this.currentUser.name
      this.workbook = new ExcelJS.Workbook()
      this.workbook.created = new Date()
      this.workbook.modified = new Date()
      this.workbook.lastPrinted = new Date()
      this.workbook.properties.date1904 = true
      await this.createWorkSheet()
      this.workbook.xlsx.writeBuffer().then(async (buffer) => {
        const fileName = `${this.fullYear.getFullYear()}大事記列表.xlsx`
        const blobData = new Blob([buffer], {
          type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'
        })
        await new Promise(resolve => setTimeout(resolve, 100)) // 等待非同步完成再繼續
        this.printChronologyZip({ year: this.fullYear, fileName: fileName, blobData: blobData })
      }).catch((err) => {
        console.log(err)
      })
    },
    async createWorkSheet () {
      const workSheet = this.workbook.addWorksheet('大事記')
      await this.getScheduleList({ chronology: true })
      const list = []
      Object.values(this.scheduleList).forEach((event) => {
        if (new Date(event.start).getFullYear() === this.fullYear.getFullYear()) {
          if (String(Number(event.end.slice(-2))).length === 1) {
            let endDate = event.end.slice(0, 8) + String(Number(event.end.slice(-2)) - 1).padStart(2, '0')
            if (String(endDate.slice(-2)) === '00') {
              let day = new Date(
                endDate.slice(0, 4),
                String(Number(endDate.slice(5, 7)) - 1).padStart(2, '0')
              )
              let end = new Date(day.getFullYear(), day.getMonth(), 0)
              let endToday =
                end.getFullYear() + '-' + String(end.getMonth() + 1).padStart(2, '0') + '-' + String(end.getDate()).padStart(2, '0')
              if (event.imageFile.length === 0) {
                let init = {
                  start: event.start,
                  end: endToday,
                  type: event.scheduleType,
                  title: event.title,
                  thing: event.thing
                }
                list.push(Object.values(init))
              }
              for (let i = 0; i < event.imageFile.length; i++) {
                const element = event.imageFile[i]
                let init = {
                  start: event.start,
                  end: endToday,
                  type: event.scheduleType,
                  title: event.title,
                  thing: event.thing,
                  imageId: element._id,
                  imageName: element.name,
                  description: element.description
                }
                list.push(Object.values(init))
              }
            } else {
              if (event.imageFile.length === 0) {
                let init = {
                  start: event.start,
                  end: endDate,
                  type: event.scheduleType,
                  title: event.title,
                  thing: event.thing
                }
                list.push(Object.values(init))
              }
              for (let i = 0; i < event.imageFile.length; i++) {
                const element = event.imageFile[i]
                let init = {
                  start: event.start,
                  end: endDate,
                  type: event.scheduleType,
                  title: event.title,
                  thing: event.thing,
                  imageId: element._id,
                  imageName: element.name,
                  description: element.description
                }
                list.push(Object.values(init))
              }
            }
          } else {
            let endDate = event.end.slice(0, 8) + String(Number(event.end.slice(-2)) - 1)
            if (String(endDate.slice(7)).length === 2) {
              let end = endDate.slice(0, 8) + String(endDate.slice(-1)).padStart(2, '0')
              if (event.imageFile.length === 0) {
                let init = {
                  start: event.start,
                  end: end,
                  type: event.scheduleType,
                  title: event.title,
                  thing: event.thing
                }
                list.push(Object.values(init))
              }
              for (let i = 0; i < event.imageFile.length; i++) {
                const element = event.imageFile[i]
                let init = {
                  start: event.start,
                  end: end,
                  type: event.scheduleType,
                  title: event.title,
                  thing: event.thing,
                  imageId: element._id,
                  imageName: element.name,
                  description: element.description
                }
                list.push(Object.values(init))
              }
            } else {
              if (event.imageFile.length === 0) {
                let init = {
                  start: event.start,
                  end: endDate,
                  type: event.scheduleType,
                  title: event.title,
                  thing: event.thing
                }
                list.push(Object.values(init))
              }
              for (let i = 0; i < event.imageFile.length; i++) {
                const element = event.imageFile[i]
                let init = {
                  start: event.start,
                  end: endDate,
                  type: event.scheduleType,
                  title: event.title,
                  thing: event.thing,
                  imageId: element._id,
                  imageName: element.name,
                  description: element.description
                }
                list.push(Object.values(init))
              }
            }
          }
        }
      })
      // console.log(list)
      workSheet.addTable({
        name: '大事記',
        ref: 'A1',
        style: {
          // theme: 'null',
        },
        columns: [
          {name: '開始日期'}, {name: '結束日期'},
          {name: '類別'},
          {name: '標題'}, {name: '事件說明'},
          {name: '照片檔案編號'}, {name: '照片檔名'}, {name: '照片說明'}
        ],
        rows: list
      })
      workSheet.columns = [
        { header: '開始日期', key: 'start', width: 13 },
        { header: '結束日期', key: 'end', width: 13 },
        { header: '類別', key: 'scheduleType', width: 18 },
        { header: '標題', key: 'title', width: 35 },
        { header: '事件說明', key: 'thing', width: 40 },
        { header: '照片檔案編號', key: 'imageName', width: 30 },
        { header: '照片檔名', key: 'imageId', width: 35 },
        { header: '照片說明', key: 'description', width: 60 }
      ]
      const columnsToFormat = ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1']
      columnsToFormat.forEach((cell) => {
        const header = workSheet.getCell(cell)
        header.font = { bold: true, color: { argb: 'FF000000' } }
        header.fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FFC6E0B4' } }
        header.border = { bottom: { style: 'medium', color: { argb: 'FF000000' } } }
        if (cell === 'H1') {
          header.border = {
            right: { style: 'medium', color: { argb: 'FF000000' } },
            bottom: { style: 'medium', color: { argb: 'FF000000' } }
          }
        }
      })
      const grouped = list.reduce((acc, cur, index) => {
        const key = `${cur[2]}_${cur[3]}_${cur[4]}`
        if (!acc[key]) acc[key] = []
        acc[key].push(index)
        return acc
      }, {})
      for (const row of Object.values(grouped)) { // 導出後開啟有問題，應該要重新定義表格寬高(暫不處理)
        if (row.length > 1) {
          for (const col of ['A', 'B', 'C', 'D', 'E']) {
            workSheet.mergeCells(`${col}${row[0] + 2}:${col}${row[row.length - 1] + 2}`)
            // workSheet.getCell(`${col}${row[0] + 2}`).alignment.wrapText = true
          }
        }
      }
      for (const i of [1, 2, 3, 4, 5, 6, 7, 8]) {
        const column = workSheet.getColumn(i)
        if (i === 1 || i === 2) {
          column.alignment = { vertical: 'middle', horizontal: 'center', wrapText: true }
          column.numFmt = 'yyyy/m/d'
        } else if (i === 3) {
          column.alignment = { vertical: 'middle', horizontal: 'center', wrapText: true }
          column.numFmt = '@'
        } else {
          column.alignment = { vertical: 'middle', horizontal: 'left', wrapText: true }
          column.numFmt = 'G/通用格式'
        }
      }
      // 根據數據將工作表用粗線包圍
      for (const row of Object.keys(list)) {
        const view = workSheet.getCell(`H${Number(row) + 2}`)
        view.border = { right: { style: 'medium', color: { argb: 'FF000000' } } }
        if (`H${Number(row) + 2}` === `H${list.length + 1}`) {
          view.border = {
            right: { style: 'medium', color: { argb: 'FF000000' } },
            bottom: { style: 'medium', color: { argb: 'FF000000' } }
          }
        }
      }
      const bottom = list.length + 1
      const viewBorder = [`A${bottom}`, `B${bottom}`, `C${bottom}`, `D${bottom}`, `E${bottom}`, `F${bottom}`, `G${bottom}`]
      viewBorder.forEach((cell) => {
        const view = workSheet.getCell(cell)
        view.border = { bottom: { style: 'medium', color: { argb: 'FF000000' } } }
      })
    },
    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.eventManagement = a
              if (a.name === '參數設置') this.eventType = a
            }
          }
        }
      })
    }
  },
  computed: {
    ...mapState({
      schedule: (state) => state.schedule.Schedule,
      scheduleList: (state) => state.schedule.ScheduleList,
      currentUser: (state) => state.user.current,
      conferenceList: (state) => state.conference.ConferenceList,
      conference: (state) => state.conference.ConferenceList
    })
  },
  watch: {
    ChangePage: {
      handler (Val) {
        if (Val === '行事曆') {
          this.isFix = false
          console.log('跳轉')
          this.$router.push({ name: 'Memorabilia' })
          this.$forceUpdate()
        } else {
          this.isFix = true
          this.$refs.chronology.getEvents()
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
h2 {
  margin: 0;
  font-size: 16px;
}
ul {
  margin: 0;
  padding: 0 0 0 1.5em;
}
li {
  margin: 1.5em 0;
  padding: 0;
}
b {
  /* used for event dates/times */
  margin-right: 3px;
}
::-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;
}
// 篩選
.demo-app {
  display: flex;
  height: 94vh;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
  background: #ffffff;
}
.demo-app-sidebar {
  width: 300px;
  height: auto;
  padding: 2em;
  line-height: 1;
  background: rgb(242, 243, 248);
  border-right: 1px solid #d3e2e8;
}
.demo-app-main {
  flex-grow: 1;
  padding: 1em 0 0em 0;
  max-height: 880px;
}
.fc {
  /* the calendar root */
  max-width: 1600px;
  max-height: 100%;
  margin: 0 auto;
}
.button {
  font-size: 20px;
  font-weight: bold;
  margin-left: -10px;
}
.custom-select {
  color: black;
}
.calendar {
  height: 900px;
  padding-right: 0px;
}
.word {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.overList {
  height: 500px;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
</style>
