<template>
  <div>
    <functionBar class="F_bar" />
    <div>
      <!-- 審查列表 -->
      <div>
        <div class="container" fluid></div>
        <div
          style="margin-left: 18%; margin-top: 15px; color: black; width: 60%"
        >
          <!-- 關鍵字 -->
          <b-row style="margin-top: 11px">
            <b-col cols="12">
            <div >
                <b-form-group
                  label="關鍵字:"
                  label-for="filter-input"
                  label-cols="1"
                  label-align="right"
                  label-size="1px"
                  class="mb-0"
                >
                  <b-input-group size="1px">
                    <b-form-input
                      id="filter-input"
                      v-model="filter"
                      type="search"
                      style="width:80%"
                      placeholder="請輸入關鍵字"
                    ></b-form-input>
                  </b-input-group>
                </b-form-group>
              </div>
            </b-col>
          </b-row>
        </div>
        <!-- Table -->
        <div style="margin-left:80px;width:90%;overflow: auto;margin-top: 10px;height:600px;">
        <b-table
          :items="list"
          :fields="fields"
          class="text-center"
          thead-class="thClass"
          small
          ref="selectableTable"
          striped
          bordered
          fixed
          :per-page="perPage"
          :current-page="currentPage"
          :sort-desc.sync="sortDesc"
          :sort-by.sync="sortBy"
          :filter="filter"
          align="center"
        >
          <!-- 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(document_number)="data">
            <span style="font-weight: normal; color: black; font-size: 15px">
              {{ data.value }}
            </span>
          </template>
          <!-- 文件名稱 -->
          <template #cell(document_name)="data">
            <router-link
              :to="{}"
              @click.native="pushTo(data.item)"
              style="font-weight: normal; color: blue; font-size: 15px"
            >
              <span v-b-tooltip.hover.left :title="data.value">
                {{ data.value }}
              </span>
            </router-link>
          </template>
          <!-- 文件類別 -->
          <template #cell(document_type)="data">
            <span style="font-weight: normal; color: black; font-size: 15px">
              {{ data.value }}
            </span>
          </template>
          <!-- 承辦人員 -->
          <template #cell(authority)="data">
            <span style="font-weight: normal; color: black; font-size: 15px">
              {{ data.value }}
            </span>
          </template>
          <!-- 辦理情況 -->
          <template #cell(situation)="data">
            <span v-if="data.item.controlWork.length === 0"></span>
            <span
              v-else-if="data.item.controlWork[data.item.controlWork.length -1].status === '待編輯'"
              style="font-weight: bold; color: black; font-size: 15px"
            >{{ data.item.controlWork[data.item.controlWork.length -1].item }} 版次:{{ data.item.controlWork[data.item.controlWork.length -1].version }} (<span style="font-weight: bold; color: red; font-size: 15px">{{data.item.controlWork[data.item.controlWork.length -1].status}}</span>)</span>
            <span v-else style="font-weight: bold; color: black; font-size: 15px">
              {{ data.item.controlWork[data.item.controlWork.length -1].item }} 版次:{{ data.item.controlWork[data.item.controlWork.length -1].version }} ({{data.item.controlWork[data.item.controlWork.length -1].status}})</span>
          </template>
        </b-table>
        </div>

        <!-- 分頁符號 -->
        <b-pagination
          v-model="currentPage"
          pills
          :total-rows="rows"
          :per-page="perPage"
          aria-controls="my-table"
        >
        </b-pagination>
      </div>
    </div>
  </div>
</template>

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

export default {
  data () {
    return {
      filter: null,
      filterOn: [],
      perPage: 12,
      currentPage: 1,
      sortBy: null,
      sortDesc: false,
      fields: [
        {
          key: 'document_number',
          label: '文件編號',
          sortable: true,
          tdClass: 'align-middle'
        },
        {
          key: 'document_name',
          label: '文件名稱',
          tdClass: 'align-middle'
        },
        {
          key: 'document_type',
          label: '文件類別',
          sortable: true,
          tdClass: 'align-middle'
        },
        {
          key: 'authority',
          label: '承辦人員',
          sortable: true,
          tdClass: 'align-middle'
        },
        {
          key: 'situation',
          label: '辦理情況',
          sortable: true,
          tdClass: 'align-middle'
        }
      ]
    }
  },
  components: {
    functionBar
  },
  async mounted () {
    try {
      await this.getDocList({ document_distinguish: '審查文件' })
    } catch (err) {
      console.log(err)
    }
  },
  methods: {
    ...mapActions('newDocument', ['getDocList', 'lookupDoc']),
    async pushTo (data) {
      await this.lookupDoc(data._id)
      this.$router.push({
        name: 'FileReviewEdit',
        query: {
          fid: data._id
        } })
    }
  },
  computed: {
    rows () {
      return this.list.length
    },
    ...mapState({
      list: (state) => state.newDocument.DocList
    })
  }
}
</script>

<style>
.thClass {
  font-size: 16px;
  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>
.F_bar {
  z-index: 999;
}
/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;
}
.shadow {
  background-color: #ffff;
  height: 65px;
  width: 100%;
  box-shadow: 2px 2px 20px rgba(0, 0, 0, 40);
  /* border-bottom-width:3px;
    border-bottom-color:#1D325F;
    border-bottom-style:solid */
  position: fixed;
  top: 55px;
  z-index: 500;
}

.btn {
  background-color: white;
  font-size: 16px;
  margin-left: 15px;
  padding-left: 7px;
  padding-right: 7px;
  padding-top: 5px;
  padding-bottom: 5px;
  color: #383838;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
  border: none;
}
.btn:hover {
  color: black;
  background-color: rgb(228, 228, 228);
}
.btn1 {
  background-color: rgb(75, 102, 255);
  font-size: 16px;
  padding-left: 7px;
  padding-right: 7px;
  padding-top: 5px;
  padding-bottom: 5px;
  color: #ffffff;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
  border: none;
  float: center;
  text-align: justify;
}
.container {
  height: 30px;
  margin-top: 50px;
  margin-left: 5%;
  padding-top: 10px;
  padding-left: 1%;
  padding-right: 1%;
}
.text-center {
  color: #f7fafc;
  width: 100%;
  height: auto;
  padding-left: 5%;
  padding-right: 5%;
}
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 20px;
  margin-top: 20px;
  color: #383838;
}
.label_col {
  margin-top: 8px;
  padding-left: 80px;
}
.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);
}
</style>
