<template>
  <div class="container">
    <!-- 里程碑編號 -->
    <b-row style="margin-top: 5px">
      <b-col class="label_col" cols="3">
        <span>里程碑編號:</span>
      </b-col>
      <b-col cols="9">
        <div style="width: 98%; margin-left: -50px; padding-right: 10px">
          <b-form-input style="font-size: 16px; width: 95%" v-model="mileStone.number"></b-form-input>
        </div>
      </b-col>
    </b-row>
    <!-- 開工工期 -->
    <b-row style="margin-top: 5px">
      <b-col class="label_col" cols="3">
        <span>開工工期:</span>
      </b-col>
      <b-col cols="9">
        <div style="width: 98%; margin-left: -50px; padding-right: 10px">
          <b-form-datepicker
            v-model="mileStone.start_date"
            style="font-size: 16px; width: 95%"
            placeholder="請選擇日期"
          >
          </b-form-datepicker>
        </div>
      </b-col>
    </b-row>
    <!-- 完工工期 -->
    <b-row style="margin-top: 5px">
      <b-col class="label_col" cols="3">
        <span>完工工期:</span>
      </b-col>
      <b-col cols="9">
        <div style="width: 98%; margin-left: -50px; padding-right: 10px">
          <b-form-datepicker
            v-model="mileStone.final_date"
            style="font-size: 16px; width: 95%"
            placeholder="請選擇日期"
          >
          </b-form-datepicker>
        </div>
      </b-col>
    </b-row>
    <!-- 契約工期 -->
    <b-row style="margin-top: 5px">
      <b-col class="label_col" cols="3">
        <span>契約工期:</span>
      </b-col>
      <b-col cols="7">
        <div style="width: 98%; margin-left: -50px; padding-right: 10px">
          <b-form-input style="font-size: 16px; width: 126%" v-model="mileStone.contract_date"></b-form-input>
        </div>
      </b-col>
      <!-- <b-col cols="2">
        <b-button
          class="btn2"
        >
          計算
        </b-button>
      </b-col> -->
    </b-row>
    <!-- 說明 -->
    <b-row style="margin-top: 10px">
      <b-col class="label_col" cols="3">
        <span>說明:</span>
      </b-col>
      <b-col cols="7">
        <div style="width: 98%; margin-left: -50px; padding-right: 10px">
          <b-form-textarea
            v-model="mileStone.directions"
            placeholder="請輸入變更內容及項目"
            rows="3"
            no-resize
            style="
              width: 126%;
              height: 200px;
              padding: 8px 12px 10px;
              font-size: 16px;
            "
          ></b-form-textarea>
        </div>
      </b-col>
      <b-col cols="2">
        <b-button
          class="btn1"
          @click="mileStoneSave"
        >
          新增
        </b-button>
      </b-col>
    </b-row>
    <!-- <b-row>
      <b-col>
        <b-button
          class="btn1"
          style="margin-top: 20px; margin-right: 90px; float: right"
        >
          新增
        </b-button>
      </b-col>
    </b-row> -->
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
export default {
  data () {
    return {}
  },
  mounted () {
    this.$store.commit('tenders/resetObject')
  },
  methods: {
    ...mapActions('tenders', ['addMileStone', 'getOtherList']),
    async mileStoneSave () { // 建立里程碑按鈕
      let wasNull = false
      if (this.mileStone.start_date == null || this.mileStone.final_date == null) wasNull = true
      if (wasNull) alert('開工日期、完工日期尚需填寫!')
      else {
        let yes = (window.confirm('確定建立?'))
        if (yes) {
          this.postMileStone()
        } else {
          alert('取消建立')
        }
      }
    },
    async postMileStone () {
      await this.addMileStone(this.currentUser.defaultTender)
      await this.getOtherList(this.currentUser.defaultTender)
      alert('建立成功')
      this.$emit('closeEvent')
    }
  },
  computed: {
    ...mapState({
      currentUser: state => state.user.current,
      mileStone: (state) => state.tenders.mileStone
    })
  }
}
</script>

<style scoped>
.label_col {
  margin-top: 8px;
  padding-left: 10px;
}
.container {
  margin-right: 20px;
  width: 600px;
  height:460px;
}
.btn1{
  background-color: rgb(75, 102, 255);
  font-size:16px;
  margin-top: 165px;
  margin-left: 0px;
  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;
}
.btn1:hover{
  color: rgb(255, 255, 255);
  background-color: rgb(49, 68, 175);
}
.btn2{
  background-color: rgb(75, 102, 255);
  font-size:16px;
  margin-top: 7px;
  margin-left: 0px;
  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;
}
.btn1:hover{
  color: rgb(255, 255, 255);
  background-color: rgb(49, 68, 175);
}
</style>
