<template>
  <div>
    <!-- 變更契約 -->
    <div class="shadow" v-show="$route.name === 'ContractChangingEdit'">
      <b-button
        class="btn1"
        @click="Save"
      >
        <b-icon-cursor></b-icon-cursor> 儲存
      </b-button>
    </div>
    <!-- 展延紀錄 -->
    <div class="shadow" v-show="$route.name === 'ExtendedRecordRecord'">
      <b-button class="btn1" @click="extendSave">
        <b-icon-cursor></b-icon-cursor> 儲存
      </b-button>
    </div>
  </div>
</template>

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

export default {
  data () {
    return {
    }
  },
  methods: {
    ...mapActions('tenders', ['addChangeContract', 'getOtherList', 'addExtendRecord', 'addMileStoneRecord', 'addCheckPointRecord']),
    async Save () { // 變更契約儲存鈕
      let wasNull = false
      if (this.changeContract.detail === '') wasNull = true
      if (wasNull) alert('變更內容及項目未填寫！')
      else {
        let yes = (window.confirm('確定儲存？'))
        if (yes) {
          this.isCreate = true
          this.$emit('isSaved')
          await this.postChangeContract()
        } else {
          alert('取消儲存')
        }
      }
    },
    async postChangeContract () { // 變更契約
      await this.addChangeContract(this.currentUser.defaultTender)
      await this.getOtherList(this.currentUser.defaultTender)
      alert('新增成功')
    },
    async extendSave () { // 展延紀錄儲存鈕
      if ((this.extendRecord.approval_number === null) ||
          (this.extendRecord.approval_number === undefined) ||
          (this.extendRecord.explain === undefined) ||
          (this.extendRecord.explain === '')) {
        alert('說明或核准文號未填寫!')
      } else {
        let yes = (window.confirm('確定儲存?'))
        if (yes) {
          this.$emit('isSaved')
          await this.postExtendRecord()
        } else {
          alert('取消儲存')
        }
      }
    },
    async postExtendRecord () { // 展延紀錄
      await this.addExtendRecord(this.currentUser.defaultTender)
      await this.getOtherList(this.currentUser.defaultTender)
      alert('新增成功')
    }
  },
  computed: {
    ...mapState({
      currentUser: state => state.user.current,
      changeContract: (state) => state.tenders.changeContract,
      extendRecord: (state) => state.tenders.extendRecord
    })
  }
}
</script>

<style scoped>
.shadow
{
    background-color:#ffff;
    height: 65px;
    width: 100%;
    box-shadow: 2px 2px 20px rgba(0, 0, 0, 40);
    /* border-bottom-width:3px;
    border-bottom-color:#1D325F;
    border-bottom-style:solid */
    position: fixed;
    top:55px;
    z-index: 500;
}
.btn{
  background-color: white;
  font-size:16px;
  margin-top: 15px;
  margin-left: 15px;
  padding-left:7px;
  padding-right: 7px;
  padding-top: 5px;
  padding-bottom: 5px;
  color: #383838;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);

}
.btn:hover{
  color: black;
  background-color: rgb(228, 228, 228);
}
.btn1{
  background-color: rgb(75, 102, 255);
  font-size:16px;
  margin-top: 15px;
  margin-left: 15px;
  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>
