 <template>
<!-- 檔管作業列表 -->
  <div>
    <functionBar class="F_bar"></functionBar>
    <div>
      <div class="container" fluid></div>
      <b-table
        id="my-table"
        class="text-center"
        thead-class="thClass"
        small
        responsive="sm"
        ref="selectableTable"
        striped
        bordered
        :fields="fields"
        :items="list"
        :per-page="perPage"
        :current-page="currentPage"
        fixed
      >
      <!-- <template slot="top-row" slot-scope="{ fields }">
          <td v-for="field in fields" :key="field.key">
            <input v-model="fields[field.key]" :placeholder="field.label">
          </td>
        </template> -->

        <template #head(distinguish)="row">
          <span style="font-weight:normal;color:white;font-size:14px">{{row.label}}</span>
        </template>

        <template #head(issue_date)="row">
          <span style="font-weight:normal;color:white;font-size:14px">{{row.label}}</span>
        </template>

        <template #head(issue_text_number)="row">
          <span style="font-weight:normal;color:white;font-size:14px">{{row.label}}</span>
        </template>

        <template #head(subject)="row">
          <span style="font-weight: normal;color:white;font-size:14px">{{row.label}}</span>
        </template>

        <template #head(staffId.name)="row">
          <span style="font-weight: normal;color:white;font-size:14px">{{row.label}}</span>
        </template>

        <template #head(status)="row">
          <span style="font-weight:normal;color:white;font-size:14px">{{row.label}}</span>
        </template>

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

        <template #cell(subject)="data">
          <router-link :to="{}" @click.native="pushTo(data.item)" style="font-weight:normal;color:blue;font-size:14px"><span v-b-tooltip.hover.left :title=data.value>{{ data.value}}</span></router-link>
        </template>

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

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

    </div>
    <b-pagination
        v-model="currentPage"
        :total-rows="rows"
        :per-page="perPage"
        aria-controls="my-table"
      ></b-pagination>

  </div>
</template>

<script>
import functionBar from '@/views/DocumentManagement/MainPage/functionBar.vue'
import { mapState, mapActions, mapMutations } from 'vuex'

export default {
  data () {
    return {
      perPage: 12,
      currentPage: 1,
      fields: [
        { key: 'distinguish', label: '文別', sortable: true, tdClass: 'align-middle' },
        { key: 'issue_date', label: '來(發)文日期', sortable: true, tdClass: 'align-middle' },
        { key: 'issue_text_number', label: '來(發)文字號', sortable: true, tdClass: 'align-middle' },
        { key: 'subject', label: '主旨', tdClass: 'truncate' },
        { key: 'undertaker.name', label: '承辦人', tdClass: 'align-middle' },
        { key: 'status', label: '辦理狀態', tdClass: 'align-middle' }
      ]
    }
  },
  async mounted () {
    try {
      await this.getList({status: '已完成'})
    } catch (err) {
      console.log(err)
    }
  },
  methods: {
    ...mapActions('officialDocument', ['getList', 'lookupOfficialDoc']),
    ...mapMutations('officialDocument', ['setOfficialDoc']),
    async pushTo (data) {
      this.lookupOfficialDoc(data._id)
      switch (data.distinguish) {
        case '發文' :
          this.$router.push({ name: 'ArchivesPostView' })
          break
        case '來文' :
          this.$router.push({ name: 'ArchivesReceiveView' })
          break
      }
    }
  },
  components: {
    functionBar,
    modal: () => import('@/views/Modal/index.vue')
  },
  computed: {
    rows () {
      return this.list.length
    },
    ...mapState({
      list: state => state.officialDocument.list
    })
  }
}
</script>

<style>
.tooltip > .tooltip-inner {
    border: 1px solid;
    padding: 10px;
    max-width: 450px;
    color: black;
    text-align: left;
    background-color: white;
    background: white;
    opacity: 1.0;
    filter: alpha(opacity=100);
}
.tooltip > .tooltip-arrow {
    border-bottom-color: black;
}
.tooltip.in{opacity:0!important;}
.thClass{
  background-color:#1D325F;
  color: white;
}
</style>
<style lang="scss" scoped>
/deep/ .align-middle {
  max-width: 200px;
  white-space: normal !important;
}
/deep/ .truncate {
  width: 50px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.container{
  height: 50px;
  margin-top: 10px;
  margin-left: 5%;
  padding-top: 10px;
  padding-left: 1%;
  padding-right: 1%;
}
.text-center{
    width: 100%;
    height: 100%;
    padding-left: 5%;
    padding-right: 5%;
    margin-top: 10px;
}
.table thead th{
  font-size: 15px;
}
.btns2{
 float: right;
 margin-right: 5%;
}
.btn_refresh{
  background-color: #f7fafc;
  font-size:14px;
  padding-left:7px;
  padding-right: 7px;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-left: 10px;
  color:#1D325F;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}
.btn_refresh:hover{
  color: black;
  background-color: rgb(228, 228, 228);
  transform: scale(1.1);
}
.btn_search{
  background-color: rgb(75, 102, 255);
  font-size:15px;
  padding-left:10px;
  padding-right: 10px;
  padding-top: 6px;
  padding-bottom: 6px;
  color:white;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}
.btn_search:hover{
  color: black;
  background-color: rgb(228, 228, 228);
  transform: scale(1.1);
}
.pagination{
  display: flex;
  align-items:center;
  justify-content:center;
  padding-bottom: 20px;
  margin-top: 20px;
}

</style>
