<template>
  <div>
    <div
      style="
        font-size: 17px;
        font-weight: 800;
        color: #5e72e4;
        margin-bottom: 0px;
      "
    >
      <div style="float: left; padding-top: 10px">
        <a @click="isCollapsed = !isCollapsed" style="user-select: none">
          相關議題
          <span v-if="isCollapsed">▲</span>
          <span v-else>▼</span>
        </a>
      </div>
    </div>
    <div style="height: 300px; width: 100%; overflow: auto; margin-top: 15px">
      <hr style="border-top: 1px solid gray; margin-top: 0; margin-bottom: 0" />
      <b-collapse
        style="padding-top: 10px"
        :visible="!isCollapsed"
        id="collapse-2"
      >
        <ul
          class="list-group list-group-flush"
          style="list-style-type: none; font-weight: 600; font-size: 14px"
        >
          <b-card v-for="(item, index) in referenceIssue" :key="index" class="card-body">
            <b-row style="margin-right: 15px;">
              <b-col cols="3" style="font-weight: bold">
                <span>{{ item.item_number }}</span>
              </b-col>
              <b-col cols="6">
                <span
                style="font-weight: bold; color:blue; cursor:pointer; text-decoration:none"
                @click.prevent="detail(item)"
                v-b-popover.hover="{content: `${item.description}`, placement: 'left' , title: '議題'}"
                >
                  <u
                    :href="
                      (item.issue_status == '列管中' &&
                        '/?#/workCollaboration/conferenceManagement/agendaOverview/View' +
                          '?fid=' + item._id) ||
                      (item.issue_status == '解除列管' &&
                        '/?#/workCollaboration/conferenceManagement/agendaOverview/Consult' + '?fid=' + item._id)"
                  >
                    {{ item.description | ellipsis }}
                  </u>
                </span>
              </b-col>
              <b-col cols="3">
                <b-badge variant="success">
                  <span>{{ item.undertaker }}</span>
                </b-badge>
              </b-col>
            </b-row>
          </b-card>
        </ul>
      </b-collapse>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
  data () {
    return {
      // itemList: [{ name: 'ff' }],
      isCollapsed: false,
      referenceIssue: []
    }
  },
  async created () {
    if (this.$route.query.fid !== undefined) {
      await this.$store.dispatch('conference/lookupConference', this.$route.query.fid)
    }
    await this.relatedAgenda()
  },
  methods: {
    ...mapActions('issue', ['lookupIssue', 'lookupResolution']),
    async detail (item) {
      let routeData
      await this.lookupIssue(item._id)
      await this.lookupResolution(item.id)
      switch (item.issue_status) {
        case '列管中':
          routeData = this.$router.resolve({
            name: 'AgendaView',
            query: { fid: item.id }
          })
          window.open(routeData.href)
          break
        case '解除列管':
          routeData = this.$router.resolve({
            name: 'ConsultAgenda',
            query: { fid: item.id }
          })
          window.open(routeData.href)
          break
      }
    },
    async relatedAgenda () {
      let issueList = await this.$store.dispatch('issue/lookupIssueList')
      const getSame = (array1, array2) => {
        return array1.filter(object1 => {
          return array2.some(object2 => {
            return object1.description === object2.description
          })
        })
      }
      this.referenceIssue = getSame(issueList, this.conference.issueId)
    }
  },
  filters: {
    ellipsis (value) {
      if (value.length > 18) { return value.slice(0, 12) + '...' }
      return value
    }
  },
  computed: {
    ...mapState({
      conference: (state) => state.conference.Conference,
      list: (state) => state.issue.list
    })
  }
}
</script>

<style scoped>
.card-body {
  padding: 5px;
}
</style>
