<!-- 展延紀錄 -->
<template>
  <div>
    <functionBar class="F_bar"></functionBar>
     <b-container fluid>
      <div style="margin-top: 70px">
        <b-row style="margin-top: 5px">
          <b-col cols="12">
            <div style="margin-left: 11.8vw; margin-top: 1.5vh; color: black; width: 55vw">
              <b-form-group
                label="關鍵字:"
                label-for="filter-input"
                label-cols="2"
                label-align="right"
                label-size="1px"
              >
                <b-input-group size="1px">
                  <b-form-input
                    id="filter-input"
                    v-model="filter"
                    type="search"
                    placeholder="請輸入關鍵字"
                  ></b-form-input>
                </b-input-group>
              </b-form-group>
            </div>
          </b-col>
        </b-row>
        <div>
          <b-row>
            <b-col>
    <b-table
      :items="tenderExtendList.extendRecord"
      :fields="fields"
      class="text-center"
      :filter="filter"
      thead-class="thClass"
      small
      responsive="sm"
      ref="selectableTable"
      striped
      bordered
      fixed
      :per-page="perPage"
        :current-page="currentPage"
    >
    <!-- HEAD -->
        <template #head()="{label}">
          <span style="font-weight: normal; color: white; font-size: 15px">{{
            label
          }}</span>
        </template>
    <!-- 展延序號 -->
      <template #cell(extend_number)="data">
        <span style="font-weight: normal; color: black; font-size: 15px">{{ ( currentPage - 1 ) * perPage + data.index + 1  }}</span>
      </template>
      <!-- 展延名稱 -->
      <template #cell(extend_name)="data">
        <router-link
            :to="{}"
            @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(approvalDate)="data">
        <span style="font-weight: normal; color: black; font-size: 15px">{{ getFormattedDate(data.value) }}</span>
      </template>
    </b-table>
    <!-- 分頁符號 -->
    <b-pagination
                v-model="currentPage"
                pills
                :total-rows="rows"
                :per-page="perPage"
                aria-controls="my-table"
              >
              </b-pagination>
  </b-col>
          </b-row>
        </div>
      </div>
  </b-container>
  </div>
</template>

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

export default {
  data () {
    return {
      filter: null,
      perPage: 10,
      currentPage: 1,
      fields: [
        {
          key: 'extend_number',
          label: '展延序號',
          sortable: false,
          tdClass: 'align-middle',
          thStyle: { background: '#1d325f', color: '#ffffff', width: '30px' }
        },
        {
          key: 'extend_name',
          label: '展延名稱',
          sortable: false,
          tdClass: 'align-middle',
          thStyle: { background: '#1d325f', color: '#ffffff', width: '90px' }
        },
        {
          key: 'approvalDate',
          label: '展延核准日期',
          sortable: false,
          tdClass: 'align-middle',
          thStyle: { background: '#1d325f', color: '#ffffff', width: '40px' }
        }
      ],
      fullList: [],
      list: []
    }
  },
  components: {
    functionBar
  },
  async mounted () {
    await this.getOtherList(this.currentUser.defaultTender)
    this.list = this.tenderExtendList.extendRecord
  },
  methods: {
    ...mapActions('tenders', ['getOtherList']),
    getFormattedDate (date) { // 轉換日期格式
      let d = null
      if (date) {
        return moment(date).format('YYYY-MM-DD')
      } else {
        return d
      }
    },
    async pushTo (data) {
      this.$router.push({
        name: 'ExtendedRecordRecord',
        query: { fid: data._id }
      })
    }
  },
  computed: {
    rows () {
      return this.list.length
    },
    ...mapState({
      currentUser: state => state.user.current,
      tenderExtendList: (state) => state.tenders.tenderList,
      extendRecord: (state) => state.tenders.extendRecord
    })
  }
}
</script>

<style>
.thClass /deep/ {
  font-size: 16px;
  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>
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 20px;
  margin-top: 20px;
  color: #383838;
}

.btn1 {
  background-color: rgb(75, 102, 255);
  font-size: 16px;
  margin-left: 5px;
  padding-left: 7px;
  padding-right: 7px;
  padding-top: 5px;
  padding-bottom: 5px;
  color: #ffffff;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
  border: none;
}
.del {
  background-color: rgb(245, 19, 19);
  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.3);
  border: none;
}
/deep/ .align-middle {
  max-width: 400px;
  white-space: normal !important;
}
/deep/ .truncate {
  width: 400px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
