<template>
  <div class="mainContent">
        <b-form-group
            label-cols="2"
            label=" 起訖日期 :"
            label-for="input-default"
            style="margin-bottom:0">
        <b-row>
            <b-col>
                <b-form-datepicker
                class="mb-2"
                style="width:100%;height:40px"
                placeholder="請選擇日期">
                </b-form-datepicker>
            </b-col>
            ~
            <b-col>
                <b-form-datepicker
                class="mb-2"
                style="width:100%;height:40px"
                placeholder="請選擇日期">
                </b-form-datepicker>
            </b-col>
        </b-row>
        </b-form-group>

        <b-form-group
            label-cols="2"
            label="隸屬專案 :"
            label-for="input-default"
            style="margin-bottom:0">
            <b-form-select style="width:150px;height:40px;margin-top:5px" :options="options">
              <template #first>
                <option value="">請選擇</option>
              </template>
            </b-form-select>
        </b-form-group>

        <b-form-group
            label-cols="2"
            label="簽約人 :"
            label-for="input-default"
            style="margin-bottom:0">
            <b-form-select style="width:150px;height:40px;margin-top:5px" :options="secret">
            </b-form-select>
        </b-form-group>

        <b-table
          id="my-table"
          class="text-center"
          thead-class="thClass"
          small
          responsive="sm"
          striped
          bordered
          :fields="fields"
          :items="displayTableItem"
          :per-page="perPage"
          :current-page="currentPage"
        >
        </b-table>
        <div class="btns1">
            <button class="btn" @click="closeModal">
                列印
            </button>
            <button class="btn" @click="submit">
                返回
            </button>
        </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      perPage: 16,
      currentPage: 1,
      isAddModalOpen: false,
      fields: [
        {
          key: 'construction_number', label: '工程編號', sortable: true
        },
        {
          key: 'contract_number', label: '契約編號', sortable: true
        },
        {
          key: 'contract_name', label: '契約名稱'
        },
        {
          key: 'subject', label: '主旨', formatter: 'mainSubject'
        },
        {
          key: 'status', label: '處理狀態'
        },
        {
          key: 'date_of_contract_start', label: '起始日期', sortable: true
        },
        {
          key: 'date_of_contract_end', label: '結束日期', sortable: true
        }
      ],
      postData:
        [
          {
            selected: false, construction_number: '1100000001', contract_number: '1100000001', contract_name: '北市科', subject: 'test', status: '未結案件', date_of_contract_start: '2020/06/16', date_of_contract_end: '2022/06/16'
          }
        ],
      options: [
        { value: '1', text: '備忘錄' },
        { value: '2', text: '簽' },
        { value: '3', text: '函' }
      ],
      secret: [
        { value: '1', text: '密' },
        { value: '2', text: '機密' },
        { value: '3', text: '極機密' },
        { value: '3', text: '絕對機密' }
      ]
    }
  },

  methods: {
    submit () {
      this.$emit('closeEvent')
    },
    addProcess () {
      this.selectList.push('internal_unit_department,position,staff_name')
    },
    deleteEvent (select) {
      this.selectList.splice(this.selectList.indexOf(select))
    },
    closeModal (bvModalEvt) {
      if (confirm('是否確定列印?!')) {
        this.$nextTick(() => {
          this.$bvModal.hide('modal-prevent-closing')
          this.$emit('closeEvent')
          if (this.isControledByRoute) this.$router.go(-1)
        })
      } else {
        bvModalEvt.preventDefault()
      }
    }
  },
  computed: {
    rows () {
      return this.postData.length
    },
    displayTableItem () {
      var tableItem = []
      this.postData.forEach(element => {
        var item = {}
        item.construction_number = element.construction_number
        item.contract_number = element.contract_number
        item.contract_name = element.contract_name
        item.subject = element.subject
        item.status = element.status
        item.date_of_contract_start = element.date_of_contract_start
        item.date_of_contract_end = element.date_of_contract_end
        // 加入資料

        tableItem.push(item)
      })
      return tableItem
    }
  }
}
</script>

<style>
.thClass{
  background-color:#1D325F;
  color: white;
}
</style>
<style scoped>
.mainContent{
  height:500px;
  width:800px;
  background-color: rgb(255, 255, 255);
  padding: 0;
}
.text-center{
    width: 100%;
    height: 70%;
    padding-left: 5%;
    padding-right: 5%;
    overflow:scroll;
    margin-top: 10px;
}
.table thead th{
  font-size: 15px;
}
.btns1{
 float: right;
 margin-right: 0%;
}
.btn{
  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:hover{
  color: black;
  background-color: rgb(228, 228, 228);
  transform: scale(1.1);
}
</style>
