<template>
  <!-- 紙本發文列表 -->
  <div>
    <functionBar class="F_bar"></functionBar>
    <div>
      <div class="container" fluid></div>
      <div style="margin-left: 18%; margin-top: 30px; color: black; width: 60%">
        <b-row>
          <b-col cols="2">
            <div style="margin-top: 9px; text-align: right">篩選條件:</div>
          </b-col>
          <b-col cols="2">
            <b-form-select
              v-model="searchCondition.condition"
              :options="conditions"
            >
            </b-form-select>
          </b-col>

          <b-col cols="4">
            <multiselect
              v-model="searchCondition.keyword"
              tag-placeholder="加入欄位"
              placeholder="可輸入複合檢索詞、字號、主旨"
              :options="keywords"
              :multiple="true"
              :showNoOptions="false"
              :taggable="true"
              @tag="addTagKeyword"
            >
              <!-- <span slot="caret" v-if="!searchCondition.keyword.length"></span> -->
            </multiselect>
          </b-col>
            <b-col cols="2">
            <b-form-select
              v-model="searchCondition.operator"
              :options="operators"
            >
            </b-form-select>
          </b-col>
          <b-col cols="2" style="padding: 0">
            <b-button
              class="btn_search"
              style="float: left; margin-top: 4px"
              @click="filterList"
              >篩選
            </b-button>
            <b-button
              class="btn_search"
              style="float: left; margin-top: 4px; margin-left: 5px"
              @click="clearInput"
              >清除
            </b-button>
          </b-col>
        </b-row>
      </div>
      <div style="width:90%;overflow: auto;margin-left:80px;height:600px;margin-top: 10px;">
      <b-table
        id="my-table"
        class="text-center"
        thead-class="thClass"
        small
        ref="selectableTable"
        striped
        :fields="fields"
        :items="list"
        :per-page="perPage"
        :current-page="currentPage"
        fixed
        :sort-desc.sync="sortDesc"
        :sort-by.sync="sortBy"
        bordered
        sticky-header="577px"
      >
        <!-- <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> -->

        <!-- HEAD -->

        <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>
        <!-- BODY -->
        <template #cell(issue_date)="data">
          <span style="font-weight: normal; color: black; font-size: 15px">{{
            data.value
          }}</span>
        </template>
        <template #cell(issue_text_number)="data">
          <span style="font-weight: normal; color: black; font-size: 15px">{{
            data.value
          }}</span>
        </template>
        <template #cell(subject)="data">
          <router-link
            :to="{
              name:
                (data.item.status == '辦理中' && 'PaperPostCreate') ||
                (data.item.status == '已完成' && 'ArchivesPostView'),
              query: { odid: data.item._id },
            }"
            @click.native="pushTo(data.item)"
            style="font-weight: normal; color: blue; font-size: 15px"
          >
            <span v-b-popover.hover="{content: `${data.value}`, placement: 'left' , title: '主旨'}"
              >{{ data.value }}
            </span>
          </router-link>
        </template>
        <template #cell(undertaker.name)="data">
          <span style="font-weight: normal; color: black; font-size: 15px">{{
            data.value
          }}</span>
        </template>
        <template #cell(status)="data">
          <span style="font-weight: normal; color: black; font-size: 15px">{{
            data.value
          }}</span>
          <span
            v-if="
              data.item.handle_period < currentDay &&
              data.item.status == '辦理中'
            "
            style="font-weight: normal; color: red; font-size: 15px"
            >(已逾時)</span
          >
        </template>
      </b-table>
      </div>
      <b-pagination
        v-model="currentPage"
        :total-rows="rows"
        :per-page="perPage"
        aria-controls="my-table"
      ></b-pagination>
    </div>
  </div>
</template>

<script>
import functionBar from '@/views/DocumentManagement/MainPage/functionBar.vue'
import { mapActions, mapState } from 'vuex'
import Multiselect from 'vue-multiselect'
import 'vue-multiselect/dist/vue-multiselect.min.css'
export default {
  data () {
    return {
      keywords: [],
      selected: [], // Must be an array reference!
      perPage: 12,
      currentPage: 1,
      sortBy: null,
      sortDesc: false,
      fields: [
        {
          key: 'issue_date',
          label: '發文日期',
          sortable: true,
          tdClass: 'align-middle',
          thStyle: { background: '#1d325f' }
        },
        {
          key: 'issue_text_number',
          label: '發文字號',
          sortable: true,
          tdClass: 'align-middle',
          thStyle: { background: '#1d325f' }
        },
        { key: 'subject',
          label: '主旨',
          tdClass: 'align-middle',
          sortable: true,
          thStyle: { background: '#1d325f' }},
        {
          key: 'undertaker.name',
          label: '承辦人',
          sortable: true,
          tdClass: 'align-middle',
          thStyle: { background: '#1d325f' }
        },
        {
          key: 'status',
          label: '辦理狀態',
          sortable: true,
          tdClass: 'align-middle',
          thStyle: { background: '#1d325f' }
        }
      ],
      currentDay: '',
      conditions: [
        { value: null, text: '請選擇條件' },
        { value: 'keyword', text: '關鍵字' },
        { value: 'issue_text_number', text: '字號' },
        { value: 'subject', text: '主旨' }
      ],
      operators: [
        { value: 'and', text: 'and' },
        { value: 'or', text: 'or' }
      ],
      searchCondition: {
        condition: null,
        operator: 'and',
        keyword: []
      }
    }
  },
  async mounted () {
    try {
      await this.getList({ distinguish: '發文' })
    } catch (err) {
      console.log(err)
    }
    let today = new Date()
    let currentToday = new Date()
    let dd = String(today.getDate()).padStart(2, '0')
    let mm = String(today.getMonth() + 1).padStart(2, '0')
    let yyyy = today.getFullYear()
    currentToday = yyyy + '-' + mm + '-' + dd
    this.currentDay = currentToday
  },
  methods: {
    ...mapActions('officialDocument', [
      'getList',
      'getOfficialDocument',
      'lookupOfficialDoc',
      'lookupSearchList'
    ]),
    async pushTo (data) {
      switch (data.status) {
        case '辦理中':
          this.$router.push({
            name: 'PaperPostCreate',
            query: { odid: data._id }
          })
          break
        case '已完成':
          this.$router.push({
            name: 'ArchivesPostView',
            query: { odid: data._id }
          })
          break
      }
    },
    addTagKeyword (newTag) {
      this.searchCondition.keyword.push(newTag)
    },
    async filterList () {
      // keyword 還不能用，設計如果word沒有打就不用跳alert  用頁面判斷收發文
      if (this.searchCondition.condition === null) {
        alert('請選擇篩選條件')
      } else if (this.searchCondition.keyword.length === 0) {
        alert('輸入關鍵字')
      } else {
        let searchList = await this.lookupSearchList({
          routeName: this.$route.name,
          condition: this.searchCondition.condition,
          operator: this.searchCondition.operator,
          keyword:
            this.searchCondition.keyword.length === 0
              ? []
              : this.searchCondition.keyword
        })
        if (searchList.length !== 0) {
          this.$store.commit('officialDocument/setList', searchList)
        }
      }
    },
    clearInput () {
      this.searchCondition.condition = null
      this.searchCondition.operator = 'and'
      this.searchCondition.keyword = ''
      this.getList({ distinguish: '發文' })
    }
  },
  components: {
    functionBar,
    Multiselect
  },
  computed: {
    rows () {
      return this.list.length
    },
    ...mapState('officialDocument', ['list'])
  }
}
</script>

<style>
.thClass {
  background-color: #1d325f;
  color: white;
  /* position: sticky;
  top:0 */
}
/* 把原B排序黑醜箭頭拔掉 */
.table.b-table > thead > tr > th,
.table.b-table > tfoot > tr > td {
  background-image: none !important;
}
</style>
<style lang="scss" scoped>
/deep/.popover{
  padding: 10px;
  max-width: 450px;
  text-align: left;
  background-color: white;
}
/deep/ .popover-header{
  font-size: 18px;
  color: black;
}
/deep/ .popover-body{
  font-size: 16px;
  color: black;
}
/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%;
}
.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: translateY(1);
}
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 20px;
  margin-top: 20px;
}
.form-control {
  color: black;
}
.custom-select {
  color: black;
}
.table thead th {
  font-size: 15px;}
</style>
