<template>
  <!-- 議題回應 -->
  <div>
    <b-row>
      <b-col cols="12">
        <span style="font-size: 30px; font-weight: bold">處理情況</span>
        <b-button
          v-show="issave"
          size="sm"
          class="btn"
          variant="primary"
          @click="Sure()"
          >確定</b-button
        >
        <b-button
          v-show="isadd && conferenceManagement.permission === 2"
          size="sm"
          class="btn"
          variant="primary"
          @click="addRow()"
        >新增回應</b-button
        >
      </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="10">
            <b-form-select
              v-if="item.isFix === false"
              v-model="item.conferenceId"
              :options="
                conferenceList.map((conference) => {
                  return { text: conference.conference_name, value: conference._id };
                })
              "
              class="float-left"
            >
            </b-form-select>
            <div v-else 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="9">
            <b-form-datepicker
              v-if="item.isFix === false"
              placeholder="請填寫日期"
              style="width: 50%"
              class="float-left mt-2"
              v-model="item.resolutionTime"
            ></b-form-datepicker>
            <div v-else style="margin-top: 20px">
              <span>{{ getFormattedDate(item.resolutionTime) }}</span>
            </div>
          </b-col>
          <b-col cols="1">
            <b-icon
              v-show="isadd && conferenceManagement.permission === 2"
              @click="deleteResolution(item._id)"
              variant="danger"
              class="btn w-15 float-right p-0 mr-3 mt-3"
              icon="trash-fill"
              aria-hidden="true"
              style="height: 30px; width: auto"
            ></b-icon>
            <b-icon
              v-show="item.isFix === false"
              @click="cancel()"
              variant="danger"
              class="btn w-15 float-right p-1 mr-3 mt-3"
              icon="x-circle-fill"
              aria-hidden="true"
              style="height: 30px; width: auto"
            ></b-icon>
          </b-col>
          <b-col cols="2">
            <div style="margin-top: 20px">
              <span>討論內容:</span>
            </div>
          </b-col>
          <b-col cols="10">
            <b-textarea
              v-if="item.isFix === false"
              style="height: 90px"
              class="w-80 float-left mt-2"
              v-model="item.detail"
            ></b-textarea>
            <div style="margin-top: 20px" v-else>
              <span>{{ item.detail }}</span>
            </div>
          </b-col>
        </b-row>
      </b-list-group-item>
    </b-list-group>
    </div>
  </div>
</template>

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

export default {
  data () {
    return {
      isadd: true,
      issave: false,
      staffs: [],
      conferenceManagement: {}
    }
  },
  async created () {
    // 為了抓fid
    if (this.$route.query.fid !== undefined) {
      await this.$store.dispatch(
        'issue/lookupResolution',
        this.$route.query.fid
      )
    }
  },
  async mounted () {
    try {
      this.staffs = await this.$store.dispatch('project/lookupStaffs', {
        selects: ['name', '_id']
      })
      await this.getConferenceList()
      this.usePermission()
      // console.log(this.Resolution.resolution)
    } catch (err) {
      console.log(err)
    }
  },
  methods: {
    ...mapActions('issue', ['patchResolution', 'lookupResolution']),
    ...mapActions('conference', ['getConferenceList']),
    async deleteResolution (id) {
      if (!confirm('確定刪除回應嗎?')) return
      await this.$store.dispatch('issue/deleteResolution', id)
      alert('已刪除')
      await this.lookupResolution(this.issue.id)
    },
    addRow () {
      let item = {
        conferenceId: '',
        resolutionTime: '',
        detail: '',
        isFix: false
      }
      this.Resolution.resolution.push(item)
      this.isadd = false
      this.issave = true
    },
    async Sure () {
      // 確定按鈕的方法
      let yes = confirm('確定新增此回應?')
      let list = this.Resolution.resolution.length - 1
      if (yes) {
        this.$emit('ispatch')
        alert('新增成功')
        this.Resolution.resolution[list].isFix = true
        this.isadd = true
        this.issave = false
        await this.patchResolution()
        await this.lookupResolution(this.issue.id)
      }
    },
    async cancel () {
      this.Resolution.resolution.splice(-1, 1)
      this.isadd = true
      this.issave = false
      await this.lookupResolution(this.issue.id)
    },
    getFormattedDate (date) {
      // 轉換日期格式
      let d = null
      if (date) {
        return moment(date).format('YYYY-MM-DD')
      } else {
        return d
      }
    },
    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.conferenceManagement = a
            }
          }
        }
      })
    }
  },
  computed: {
    ...mapState({
      issue: (state) => state.issue.Issue,
      Resolution: (state) => state.issue.Resolution,
      conferenceList: (state) => state.conference.ConferenceList,
      currentUser: (state) => state.user.current
    })
  }
}
</script>

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