<template>
  <div>
    <functionBar class="F_bar" @reload="reload" />
    <!-- 會議項目總覽列表 -->
      <div>
        <div class="container" fluid></div>
        <div style="margin-left: 20vw; margin-top: 25px; color: black; width: 45vw">
          <!-- 關鍵字 -->
          <b-row>
            <b-col cols="2">
            <div style="margin-top: 10px; text-align: right">關鍵字:</div>
            </b-col>
            <b-col cols="8">
              <b-form-input id="filter-input" v-model="filter" type="search" style="width:35vw; margin-left: -1.3vw"
            placeholder="請輸入關鍵字">
              </b-form-input>
            </b-col>
          </b-row>
        </div>
        <div style="width:80vw;overflow: auto;margin-left:3.5vw;height:75vh;margin-top: 1.5vh;position: relative; z-index: 1"
        >
        <!-- TABLE -->
        <b-table
        :items="sortedList"
        :fields="fields"
        :filter="filter"
        thead-class="thClass"
        small
        class="text-center"
        responsive="sm"
        striped
        bordered
        :per-page="perPage"
        :current-page="currentPage"
        :sort-desc.sync="sortDesc"
        :sort-by.sync="sortBy"
        style="overflow-x: hidden; margin-left: 10px"
        >
        <!-- HEAD -->
        <template #head()="{ label, field: { key, sortable }}">
            <span style="font-weight: normal; color: white; font-size: 1.9vh">{{ label }}</span>
            <template v-if="sortable && key !== 'combined_datetime'">
                <b-icon font-scale="1.3" v-if="sortBy !== key" icon="arrow-down-up"></b-icon>
                <b-icon font-scale="1.3" v-else-if="sortDesc" icon="arrow-down"></b-icon>
                <b-icon font-scale="1.3" v-else icon="arrow-up"></b-icon>
            </template>
        </template>
        <!-- BODY -->
        <!-- 會議時間 -->
        <template #cell(combined_datetime)="data">
          <span style="font-weight: normal; color: black; font-size: 1.9vh">
            {{ formatCombinedDateTime(data.value, 'combined_datetime', data.item) }}
          </span>
        </template>
        <!-- <template v-slot:cell(conference_date)="data">
           <span style="font-weight: normal; color: black; font-size: 1.9vh">
            {{ getFormattedDateTime(data.value) }} -->
             <!-- {{ getFormattedDateTime(data.item.conference_date, data.item.conference_time) }} -->
           <!-- </span>
        </template> -->
        <!-- <template v-slot:cell(conference_date)="data">
            <span style="font-weight: normal; color: black; font-size: 1.9vh">
              {{ getFormattedDate(data.value) }}
            </span>
        </template> -->
        <!-- 會議結束時間 -->
        <template #cell(end_time)="data">
            <span style="font-weight: normal; color: black; font-size: 1.9vh">
              {{ getFormattedTime(data.value) }}
            </span>
        </template>
        <!-- 會議名稱 -->
        <template #cell(conference_name)="data">
            <router-link
              :to="{
                name: 'ConferenceDetail',
                query: { fid: data.item._id },
              }"
              style="font-weight: normal; color: blue; font-size: 1.9vh"
            >
            <span v-b-popover.hover="{content: `${getFormattedTime(data.item.conference_time)} ${data.value}`, placement: 'left' , title: '會議名稱'}">{{ getFormattedTime(data.item.conference_time) }} - {{ data.value | ellipsis }}
              </span>
            </router-link>
        </template>
        <!-- 會議類別 -->
        <template #cell(conference_classification)="data">
            <span style="font-weight: normal; color: black; font-size: 1.9vh">
              {{ data.value }}
            </span>
        </template>
        <!-- 會議地點 -->
        <template #cell(venue)="data">
            <span style="font-weight: normal; color: black; font-size: 1.9vh">
              {{ data.value }}
            </span>
        </template>
        <!-- 相關說明 -->
        <template #cell(description)="data">
            <span
            style="font-weight: normal; color: black; font-size: 1.9vh"
            v-b-popover.hover="{content: `${data.value}`, placement: 'left' , title: '相關說明'}"
            >
              說明:{{ data.value | ellipsis }}
            </span>
        </template>
        <!-- 列管數 -->
        <template #cell(issueId)="data">
            <span style="font-weight: normal; color: black; font-size: 1.9vh">
              {{ data.value.length }}
            </span>
        </template>
       </b-table>
       </div>
       </div>
        <!-- 分頁符號 -->
        <b-pagination
          v-model="currentPage"
          pills
          :total-rows="rows"
          :per-page="perPage"
          aria-controls="my-table"
          style="margin-top:4vh"
        >
        </b-pagination>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
import functionBar from '@/views/ConferenceManagement/MainPage/functionBar.vue'
import moment from 'moment'

export default {
  data () {
    return {
      filter: null,
      perPage: 13,
      currentPage: 1,
      sortBy: null,
      sortDesc: false,
      fields: [
        {
          key: 'combined_datetime',
          label: '會議日期和時間',
          sortable: true,
          sortBy: ['combined_datetime'],
          tdClass: 'align-middle',
          thStyle: { background: '#1d325f', color: '#ffffff' },
          formatter: this.formatCombinedDateTime
        },
        {
          key: 'end_time',
          label: '會議結束時間',
          sortable: false,
          tdClass: 'align-middle',
          thStyle: {background: '#1d325f', color: '#ffffff'}
        },
        {
          key: 'conference_name',
          label: '會議名稱',
          sortable: false,
          tdClass: 'align-middle',
          thStyle: {background: '#1d325f', color: '#ffffff'}
        },
        {
          key: 'conference_classification',
          label: '會議類別',
          sortable: false,
          tdClass: 'align-middle',
          thStyle: {background: '#1d325f', color: '#ffffff'}
        },
        {
          key: 'venue',
          label: '會議地點',
          sortable: false,
          tdClass: 'align-middle',
          thStyle: {background: '#1d325f', color: '#ffffff'}
        },
        {
          key: 'description',
          label: '相關說明',
          sortable: false,
          tdClass: 'align-middle',
          thStyle: {background: '#1d325f', color: '#ffffff'}
        },
        {
          key: 'issueId',
          label: '列管數',
          sortable: true,
          tdClass: 'align-middle',
          thStyle: {background: '#1d325f', color: '#ffffff'}
        }],
      issueIdList: [],
      fullList: []
    }
  },
  components: {
    functionBar
  },
  async mounted () {
    try {
      await this.getConferenceList()
      await this.getNewConferenceList()
      console.log(this.fullList)
    } catch (err) {
      console.log(err)
    }
  },
  methods: {
    ...mapActions('conference', ['getConferenceList', 'deleteConference']),
    formatCombinedDateTime (value, key, item) {
      if (key === 'combined_datetime') {
        const formattedDate = this.getFormattedDate(item.conference_date)
        const formattedTime = this.getFormattedTime(item.conference_time)
        return `${formattedDate} ${formattedTime}`
      }
      return value
    },
    getFormattedTime (time) {
      return this.formatTime(time)
    },
    formatTime (time) {
      if (time && time.length >= 3) {
        return time.substr(0, time.length - 3)
      } else {
        return ''
      }
    },
    getFormattedDate (date) {
      let d = null
      if (date) {
        return moment(date).format('YYYY-MM-DD')
      } else {
        return d
      }
    },
    getTimeObject (time) {
      const [hours, minutes] = time.split(':')
      return {
        hour: parseInt(hours),
        minute: parseInt(minutes)
      }
    },
    async reload () {
      await this.getConferenceList()
      this.getNewConferenceList()
    },
    async getNewConferenceList () {
      this.fullList = []
      for (let i = 0; i < this.conferenceList.length; i++) {
        const conference = this.conferenceList[i]
        const issueIdList = []
        for (let j = 0; j < conference.issueId.length; j++) {
          const issue = conference.issueId[j]
          if (issue.issue_status !== '解除列管') {
            issueIdList.push(issue)
          }
        }
        this.fullList.push({
          conference_date: conference.conference_date,
          conference_time: conference.conference_time,
          conference_name: conference.conference_name,
          end_date: conference.end_date,
          end_time: conference.end_time,
          description: conference.description,
          issueId: issueIdList,
          venue: conference.venue,
          conference_classification: conference.conference_classification,
          _id: conference._id
        })
      }
    },
    getSortValue (item, key) {
      if (key === 'combined_datetime') {
        const formattedDate = this.getFormattedDate(item.conference_date)
        const formattedTime = this.getFormattedTime(item.conference_time)
        return formattedDate + ' ' + formattedTime
      } else if (key === 'issueId') {
        return item[key].length
      }
      return item[key]
    }
    // getNewConferenceList () {
    //   this.fullList = []
    //   for (let i = 0; i < this.conferenceList.length; i++) {
    //     const ele = this.conferenceList[i]
    //     const element = this.conferenceList[i].issueId
    //     this.issueIdList = []
    //     for (let i = 0; i < element.length; i++) {
    //       const ele = element[i]
    //       if (ele.issue_status !== '解除列管') {
    //         this.issueIdList.push(ele)
    //       }
    //     }
    //     this.fullList.push({
    //       conference_date: ele.conference_date,
    //       conference_name: ele.conference_name,
    //       end_time: ele.end_time,
    //       description: ele.description,
    //       issueId: this.issueIdList,
    //       venue: ele.venue,
    //       conference_classification: ele.conference_classification,
    //       _id: ele._id
    //     })
    //   }
    // }
  },
  filters: {
    ellipsis (value) {
      if (value.length > 18) { return value.slice(0, 10) + '...' }
      return value
    }
  },
  computed: {
    sortedList () {
      const sortedData = [...this.fullList]

      // Sort by combined_datetime in ascending order
      sortedData.sort((a, b) => {
        const aValue = this.getSortValue(a, 'combined_datetime')
        const bValue = this.getSortValue(b, 'combined_datetime')
        return aValue.localeCompare(bValue)
      })

      return sortedData
    },
    rows () {
      return this.conferenceList.length
    },
    ...mapState({
      conferenceList: (state) => state.conference.ConferenceList
    })
  }
}
</script>

<style>
.thClass /deep/ {
  font-size: 2vh;
  background-color: #1d325f;
  color: white;
}
</style>

<style lang="scss" scoped>
.container {
  height: 6.25vh;
  margin-top: 0px;
  margin-left: 5vw;
  padding-top: 1.25vh;
  padding-left: 0.125vw;
  padding-right: 0.125vw;
}
.F_bar {
  z-index: 999;
}
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 2.5vh;
  margin-top: 2.5vh;
  color: #383838;
}
.text-center {
  color: #f7fafc;
  width: 80vw;
  height: 68.5vh;
  padding-left: 0.5vw;
  padding-right: 0.5vw;
  margin-top: 0.5vh;
}
.btn1 {
  background-color: rgb(75, 102, 255);
  font-size: 2vh;
  margin-left: 2vw;
  padding-left: 2vw;
  padding-right: 1vw;
  padding-top: 0.8vh;
  padding-bottom: 0.5vh;
  color: #ffffff;
  box-shadow: 0.25vw 0.25vw 1.25vw rgba(0, 0, 0, 0.3);
  border: none;
}
.del {
  background-color: rgb(245, 19, 19);
  font-size: 2vh;
  padding-left: 2vw;
  padding-right: 1vw;
  padding-top: 0.8vh;
  padding-bottom: 0.5vh;
  color: #ffffff;
  box-shadow: 0.25vw 0.25vw 1.25vw rgba(0, 0, 0, 0.3);
  border: none;
}
/deep/ .align-middle {
  max-width: 400px;
  white-space: normal !important;
}
</style>
