<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 style="float: right" v-show="isFix === false">
        <b-button
          v-show="this.conference.officialDocId === null && conferenceManagement.permission === 2"
          @click="addReceive"
          variant="primary"
          class="m-1 p-1 float-right"
        >
          加入來文</b-button
        >
        <b-button
          v-show="this.conference.officialDocId === null && conferenceManagement.permission === 2"
          @click="addPost"
          variant="primary"
          class="m-1 p-1 float-right"
        >
          加入發文</b-button
        >
      </div>
    </div>
    <div style="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: 16px"
        >
          <b-card
            v-if="isFix === true"
            style="margin-top: 4px"
            class="card-body"
          >
            <b-form-select
              v-model="conference.officialDocId"
              :options="subject"
              class="float-left"
              style="width: 360px"
            >
            </b-form-select>
            <b-icon
              @click="save()"
              variant="success"
              class="btn w-15 float-right p-1 mr-3 mt-2"
              icon="check-circle-fill"
              aria-hidden="true"
              style="height: 30px; width: auto"
            ></b-icon>
            <b-icon
              @click="cancel()"
              variant="danger"
              class="btn w-15 float-right p-1 mr-3 mt-2"
              icon="x-circle-fill"
              aria-hidden="true"
              style="height: 30px; width: auto"
            ></b-icon>
          </b-card>
          <b-card
            v-else-if="this.conference.officialDocId !== null"
            style="margin-top: 4px"
            class="card-body"
          >
          <span
          style="color: #0000ff; cursor: pointer"
          @click.prevent="PushToSubject()"
            :href="
              (this.conference.officialDocId.distinguish == '發文' &&
                '/?#/documentManagement/post/Create' +
                  '?odid=' +
                  this.conference.officialDocId._id) ||
              (this.conference.officialDocId.distinguish == '來文' &&
                '/?#/documentManagement/receive/create' +
                  '?odid=' +
                  this.conference.officialDocId._id)
            ">
            {{ conference.officialDocId.subject }}</span>
          <b-icon
              @click="clear()"
              variant="danger"
              class="btn w-15 float-right p-1 mr-3"
              icon="file-earmark-excel-fill"
              aria-hidden="true"
              style="height: 30px; width: auto"
            ></b-icon>
          </b-card>
        </ul>
      </b-collapse>
    </div>
  </div>
</template>

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

export default {
  data () {
    return {
      isFix: false,
      isCollapsed: false,
      subject: [],
      conferenceManagement: {}
    }
  },
  async mounted () {
    // await this.$store.dispatch('officialDocument/lookupOfficialDoc', this.conference.officialDocId)
    // console.log(this.conference)
    // console.log(this.conference.officialDocId.distinguish)
    this.usePermission()
  },
  methods: {
    ...mapActions('officialDocument', ['getList', 'conferencePatch']),
    ...mapActions('conference', ['patch', 'lookupConference']),
    async addReceive () {
      this.isFix = true
      await this.officialList('來文')
    },
    async cancel () {
      this.isFix = false
    },
    async addPost () {
      this.isFix = true
      await this.officialList('發文')
    },
    async save () {
      await this.patch()
      alert('儲存成功')
      this.isFix = false
      await this.lookupConference(this.conference._id)
      // console.log(this.conference.officialDocId._id)
      await this.saveConference()
    },
    async saveConference () {
      // console.log(this.conference.officialDocId._id)
      await this.$store.dispatch('officialDocument/lookupOfficialDoc', this.conference.officialDocId._id)
      this.OfficialDoc.conferenceId = this.conference._id
      await this.conferencePatch(this.conference.officialDocId._id)
    },
    async officialList (distinguish) {
      if (distinguish === '發文') {
        this.subject = []
        await this.getList({ distinguish: '發文' })
        for (let i = 0; i < this.List.length; i++) {
          const element = this.List[i]
          if (element.conferenceId === null || element.conferenceId === undefined) {
            this.subject.push({ value: element._id, text: element.subject })
          }
        }
      } else {
        this.subject = []
        await this.getList({ distinguish: '來文' })
        for (let i = 0; i < this.List.length; i++) {
          const element = this.List[i]
          if (element.conferenceId === null || element.conferenceId === undefined) {
            this.subject.push({ value: element._id, text: element.subject })
          }
        }
      }
    },
    async clear () {
      if (this.conferenceManagement.permission === 1) {
        alert('無刪除權限!')
      } else {
        await this.$store.dispatch('officialDocument/lookupOfficialDoc', this.conference.officialDocId._id)
        this.OfficialDoc.conferenceId = null
        await this.conferencePatch(this.conference.officialDocId._id)
        this.conference.officialDocId = null
        await this.patch()
        alert('刪除成功')
      }
    },
    PushToSubject () {
      let routeData
      switch (this.conference.officialDocId.distinguish) {
        case '發文':
          routeData = this.$router.resolve({
            name: 'PaperPostCreate',
            query: { odid: this.conference.officialDocId._id }
          })
          window.open(routeData.href)
          break
        case '來文':
          routeData = this.$router.resolve({
            name: 'PaperReceiveCreate',
            query: { odid: this.conference.officialDocId._id }
          })
          window.open(routeData.href)
          break
      }
    },
    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({
      conference: (state) => state.conference.Conference,
      List: (state) => state.officialDocument.list,
      OfficialDoc: (state) => state.officialDocument.officialDoc,
      currentUser: (state) => state.user.current
    })
  }
}
</script>

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