<template>
<div>
    <div class="text-dark mt-1"><span style="font-size: 25px; margin-bottom: 10px; font-weight: bold">標案資料</span></div>
    <!-- <span style="font-size: 15px">使用者({{ number }})</span> -->
    <hr style="margin-top: 15px; margin-bottom: 15px" />
    <b-row style="margin-bottom: 10px">
      <b-button
        class="btn_edit"
        style="float: left; margin-left: 20px"
        @click="addNewProject"
        >新增標案
      </b-button>
    </b-row>

    <b-table
      id="my-table"
      class="text-center"
      thead-class="thClass1"
      small
      striped
      responsive="sm"
      ref="selectableTable"
      bordered
      :fields="fields"
      style="background-color: white"
      :items="list"
    >
      <template #cell(tender)="data">
          <span style="font-weight: normal; color: black; font-size: 15px">{{
            data.value
          }}</span>
        </template>

      <template #cell(project_name)="data">
          <span style="font-weight: normal; color: black; font-size: 15px">{{
            data.value
          }}</span>
        </template>
    </b-table>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  data () {
    return {
      fields: [
        {
          key: 'tender',
          label: '標別',
          tdClass: 'align-middle',
          thStyle: { width: '20%' }
        },
        {
          key: 'project_name',
          label: '工程名稱',
          tdClass: 'align-middle',
          thStyle: { width: '45%' }
        }
      ],
      list: []
    }
  },
  async mounted () {
    await this.getTenderList()
    this.list = this.tendersList
  },
  methods: {
    ...mapActions('tenders', ['getTenderList']),
    // ...mapMutations('project', ['resetCurrent']),
    addNewProject () {
      // this.resetCurrent()
      this.$emit('addNewProject')
    }
  },
  components: {

  },
  computed: {
    ...mapState({
      project: (state) => state.project.current,
      currentUser: (state) => state.user.current,
      tendersList: (state) => state.tenders.tenderList
      // list: (state) => state.project.list
    })
  }
}
</script>

<style>
.thClass1 {
  background-color: #1d325f;
  color: rgb(255, 255, 255);
}
</style>
<style scoped>
.project-group {
  width: 800px;
  height: 250px;
  background-color: white;
  border-radius: 10%;
  border-style: solid;
  border-width: 3px;
  border-color: rgb(163, 163, 163);
  margin-left: 3%;
  margin-top: 3%;
  padding-top: 15px;
}
.btn_edit {
  background-color: rgb(75, 102, 255);
  font-size: 15px;
  padding-left: 13px;
  padding-right: 13px;
  padding-top: 7px;
  padding-bottom: 7px;
  color: #ffffff;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
  border: none;
}
.btn_edit:hover {
  color: rgb(255, 255, 255);
  background-color: rgb(49, 68, 175);
  transform: translateY(0);
}
.btn_title {
  background-color: #1d325f;
  font-size: 40px;
  color: white;
  margin-left: 70px;
  border: none;
}
.btn_title:hover {
  color: rgb(255, 255, 255);
  background-color: rgb(49, 68, 175);
}
</style>
