<template>
  <!-- 議題回應 -->
  <div>
    <b-row>
      <b-col cols="12">
        <span style="font-size: 30px; font-weight: bold">處理情況</span>
      </b-col>
    </b-row>
    <div style="height: 750px; width: auto; overflow-y: auto">
    <b-list-group class="w-80">
      <!-- header -->
      <b-list-group-item
        v-for="(item, index) in Resolution.resolution"
        :key="index"
      >
        <b-row>
          <b-col cols="2">
            <div style="margin-top: 10px">
              <span>會議名稱:</span>
            </div>
          </b-col>
          <b-col cols="9">
            <div style="margin-top: 10px">
              <span>{{ item.conferenceId.conference_name }}</span>
            </div>
          </b-col>
          <b-col cols="2">
            <div style="margin-top: 20px">
              <span>日期:</span>
            </div>
          </b-col>
          <b-col cols="10">
            <div style="margin-top: 20px">
              <span>{{ getFormattedDate(item.resolutionTime) }}</span>
            </div>
          </b-col>
          <b-col cols="2">
            <div style="margin-top: 20px">
              <span>討論內容:</span>
            </div>
          </b-col>
          <b-col cols="10">
            <div style="margin-top: 20px">
              <span>{{ item.detail }}</span>
            </div>
          </b-col>
        </b-row>
      </b-list-group-item>
    </b-list-group>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import moment from 'moment'

export default {
  data () {
    return {
    }
  },
  async created () { // 為了抓fid
    if (this.$route.query.fid !== undefined) {
      await this.$store.dispatch(
        'issue/lookupRespond',
        this.$route.query.fid
      )
    }
  },
  async mounted () {
    try {
      this.staffs = await this.$store.dispatch('project/lookupStaffs', {
        selects: ['name', '_id']
      })
    } catch (err) {
      console.log(err)
    }
  },
  methods: {
    getFormattedDate (date) { // 轉換日期格式
      let d = null
      if (date) {
        return moment(date).format('YYYY-MM-DD')
      } else {
        return d
      }
    }
  },
  computed: {
    ...mapState({
      issue: state => state.issue.Issue,
      Resolution: state => state.issue.Resolution
    })
  }
}
</script>

<style scoped>
.btn{
  margin-top: -16px;
  margin-left: 20px;
}
.w-80 {
    width: 100% !important;
}
</style>
