<template>
  <div class="container">
   <b-row style="margin-top: 11px">
            <b-col
              class="label_col"
              cols="2">
              <span>日期:</span>
            </b-col>
            <b-col cols="4">
              <b-form-datepicker
                class="mb-2"
                name="checkdate"
                style="width:80%"
                placeholder="請選擇日期"
              ></b-form-datepicker>
            </b-col>
            <span style="margin-right:75px">至</span>
            <b-col cols="4">
              <b-form-datepicker
                class="mb-2"
                name="checkdate"
                style="width:95%"
                placeholder="請選擇日期"
              ></b-form-datepicker>
            </b-col>
          </b-row>
          <b-row style="margin-top: 11px">
            <b-col
              class="label_col"
              cols="2">
              <span>工程名稱:</span>
            </b-col>
            <b-col cols="8">
              <b-form-input
              style="width: 98%"
              placeholder="請輸入關鍵字"
            />
            </b-col>
            <b-col cols="2" style="padding:0;">
              <b-button class="btn_search" style="float: left; margin-top: 4px;margin-left:5px">篩選</b-button>
            </b-col>
          </b-row>
  <div>
    <b-table
          id=""
          class="text-center"
          thead-class="thClass"
          small
          responsive="sm"
          ref=""
          striped
          bordered
          :fields="fields"
          :items="upload"
          fixed
        >
       </b-table>
  </div>
  <div class="btns2" style="padding-top: 15px ;">
    <b-row>
              <b-button class="btn_search" style=" margin-top: 4px;margin-left:15px">匯出</b-button>
              <b-button class="btn_search"
              style="margin-top: 4px;margin-left:15px"
              >
              返回
              </b-button>
            </b-row>
  </div>

  </div>
</template>

<script>
export default {
  data () {
    return {
      fields: [
        { key: 'file_name', label: '文件名稱', sortable: true, tdClass: 'align-middle' },
        { key: 'file_type', label: '文件類別', sortable: true, tdClass: 'align-middle' },
        { key: 'blame', label: '權責', sortable: true, tdClass: 'align-middle' },
        { key: 'handle_state', label: '辦理情況', sortable: true, tdClass: 'align-middle' }
      ],
      upload: [
        {
          file_name: 'G05車站南井計畫書',
          file_type: '計畫書',
          blame: '陳冠宇',
          handle_state: '未提送'
        }
      ]
    }
  }
}
</script>

<style>
.thClass{
   font-size: 16px;
   background-color: #1D325F;
   color:white
 }
</style>
<style lang="scss" scoped>

 .text-center{
   color:#f7fafc;
     width: 100%;
     height: 100%;
     margin-top: 10px;
 }
.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);
}
.btns2 {
  margin-left: 90%;
}
</style>
