<template>
  <div>
    <div
      class="border-bottom border-light mb-3"
      style="
        font-size: 18px;
        font-weight: 800;
        color: #5e72e4;
        margin-bottom: 0px;
      "
    >
      <a
        style="user-select: none; padding-left: 40px"
      >
        相關聯公文
      </a>
    </div>
    <b-table
      id="my-table"
      class="text-center"
      thead-class="thClass"
      small
      responsive="sm"
      ref="selectableTable"
      striped
      bordered
      :fields="fields"
      :items="referenceList"
      :per-page="perPage"
      :current-page="currentPage"
      :sort-desc.sync="sortDesc"
      :sort-by.sync="sortBy"
    >
      <!-- row -->
     <template #head()="{ label, field: { key, sortable } }">
          <span style="font-weight: normal; color: white; font-size: 15px">{{
            label
          }}</span>
          <template v-if="sortable">
            <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>
      <!-- data -->
      <template #cell(distinguish)="data">
        <span style="font-weight: normal; color: black; font-size: 14px">{{
          data.value
        }}</span>
      </template>

      <template #cell(reference_number)="data">
        <span style="font-weight: normal; color: black; font-size: 14px">{{
          data.value.length === 0 ? "" : data.value.join("、")
        }}</span>
      </template>

      <template #cell(issue_text_number)="data">
        <span style="font-weight: normal; color: black; font-size: 14px">{{
          data.value
        }}</span>
      </template>

      <template #cell(issue_date)="data">
        <span style="font-weight: normal; color: black; font-size: 14px">{{
          data.value
        }}</span>
      </template>

      <template #cell(subject)="data">
        <span
          style="cursor: pointer; color: #0000ff; text-decoration: underline"
          @click.prevent="pushTo(data.item)"
        >
          <!-- 直接寫路徑的方式很爛，請你去做優化，對沒錯，就是正在看這一行的你 -->
          <a
            style="color: #0000ff"
            :href="
              (data.item.distinguish == '發文' &&
                data.item.status == '辦理中' &&
                '/?#/documentManagement/post/Create' +
                  '?odid=' +
                  data.item._id) ||
              (data.item.distinguish == '發文' &&
                data.item.status == '已完成' &&
                '/?#/documentManagement/post/archivesPostView' +
                  '?odid=' +
                  data.item._id) ||
              (data.item.distinguish == '來文' &&
                data.item.status == '辦理中' &&
                '/?#/documentManagement/receive/create' +
                  '?odid=' +
                  data.item._id) ||
              (data.item.distinguish == '來文' &&
                data.item.status == '已完成' &&
                '/?#/documentManagement/receive/archivesReceiveView' +
                  '?odid=' +
                  data.item._id)
            "
          >
            {{ data.value }}
          </a>
        </span>
      </template>

      <template #cell(received_date)="data">
        <span style="font-weight: normal; color: black; font-size: 14px">{{
          data.value
        }}</span>
      </template>

      <template #cell(issuer)="data">
        <span style="font-weight: normal; color: black; font-size: 14px">{{
          data.value
        }}</span>
      </template>
    </b-table>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      perPage: 10,
      currentPage: 1,
      useCustomIcons: true,
      sortBy: null,
      sortDesc: false,
      fields: [
        {
          key: 'distinguish',
          label: '文別',
          sortable: true,
          tdClass: 'align-middle'
        },
        {
          key: 'reference_number',
          label: '依據文號',
          sortable: true,
          tdClass: 'align-middle'
        },
        {
          key: 'issue_text_number',
          label: '來(發)文字號',
          sortable: true,
          tdClass: 'align-middle'
        },
        {
          key: 'issue_date',
          label: '來(發)文日期',
          sortable: true,
          tdClass: 'align-middle'
        },
        { key: 'subject', label: '主旨', tdClass: 'truncate' },
        {
          key: 'received_date',
          label: '收文日期',
          sortable: true,
          tdClass: 'align-middle'
        },
        {
          key: 'issuer',
          label: '來文單位',
          sortable: true,
          tdClass: 'align-middle'
        }
      ]
    }
  },
  methods: {
    async pushTo (data) {
      let routeData
      switch (data.distinguish) {
        case '發文':
          switch (data.status) {
            case '辦理中':
              routeData = this.$router.resolve({
                name: 'PaperPostCreate',
                query: { odid: data._id }
              })
              window.open(routeData.href)
              break
            case '已完成':
              routeData = this.$router.resolve({
                name: 'ArchivesPostView',
                query: { odid: data._id }
              })
              window.open(routeData.href)
              break
          }
          break
        case '來文':
          switch (data.status) {
            case '辦理中':
              routeData = this.$router.resolve({
                name: 'PaperReceiveCreate',
                query: { odid: data._id }
              })
              window.open(routeData.href)
              break
            case '已完成':
              routeData = this.$router.resolve({
                name: 'ArchivesReceiveView',
                query: { odid: data._id }
              })
              window.open(routeData.href)
              break
          }
          break
      }
    }
  },
  computed: {
    rows () {
      return this.referenceList.length
    },
    ...mapGetters('officialDocument', ['referenceList'])
  }
}
</script>

<style>
.thClass {
  background-color: #1d325f;
  color: white;
}
.table.b-table > thead > tr > th,
.table.b-table > tfoot > tr > td {
  background-image: none !important;
}
</style>
<style lang="scss" scoped>
/deep/ .truncate {
  max-width: 250px;
  white-space: normal !important;
  word-wrap: break-word;
  vertical-align: middle !important;
  text-align: left;
}
/deep/ .align-middle {
  max-width: 200px;
  white-space: normal !important;
  word-wrap: break-word;
}
.text-center {
  width: 100%;
  height: 100%;
  padding-left: 5%;
  padding-right: 5%;
  margin-top: 10px;
}
.table thead th {
  font-size: 15px;
}
</style>
