<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 v-model="checkPoint.number" v-if="isFix" style="font-size: 16px; width: 95%" ></b-form-input>
          <div v-else style="margin-top:8px">{{ checkPoint.number }}</div>
        </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-input v-model="checkPoint.contract_date" v-if="isFix" style="font-size: 16px; width: 95%"></b-form-input>
          <div v-else style="margin-top:8px">{{ checkPoint.contract_date }}</div>
        </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="checkPoint.final_date"
            style="font-size: 16px; width: 95%"
            placeholder="請選擇日期"
            v-if="isFix"
          >
          </b-form-datepicker>
          <div v-else style="margin-top:8px">{{ getFormattedDate(checkPoint.final_date) }}</div>
        </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="checkPoint.extension_date"
            v-if="isFix"
            style="font-size: 16px; width: 95%"
            placeholder="請選擇日期"
          >
          </b-form-datepicker>
          <div v-else style="margin-top:8px">{{ getFormattedDate(checkPoint.extension_date) }}</div>
        </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-input v-model="checkPoint.extension_day" v-if="isFix" style="font-size: 16px; width: 95%"></b-form-input>
          <div v-else style="margin-top:8px">{{ checkPoint.extension_day }}</div>
        </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-input v-model="checkPoint.contract_totalDay" v-if="isFix" style="font-size: 16px; width: 95%"></b-form-input>
          <div v-else style="margin-top:8px">{{ checkPoint.contract_totalDay }}</div>
        </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="checkPoint.extension_finalDate"
            v-if="isFix"
            style="font-size: 16px; width: 95%"
            placeholder="請選擇日期"
          >
          </b-form-datepicker>
          <div v-else style="margin-top:8px">{{ getFormattedDate(checkPoint.extension_finalDate) }}</div>
        </div>
      </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="checkPoint.directions"
            v-if="isFix"
            placeholder="請輸入變更內容及項目"
            rows="3"
            no-resize
            style="
              width: 126%;
              height: 200px;
              padding: 8px 12px 10px;
              font-size: 16px;
            "
          ></b-form-textarea>
          <div v-else style="margin-top:8px">{{ checkPoint.directions }}</div>
        </div>
      </b-col>
      <b-col cols="2">
        <b-button
          class="btn1"
          v-if="isFix"
          @click="Renew"
        >
        更新
        </b-button>
        <b-button
          class="btn1"
          v-else
          @click="Edit"
          v-show="isOpen === 2"
        >
        編輯
        </b-button>
      </b-col>
    </b-row>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
import moment from 'moment'
export default {
  props: ['isOpen'],
  data () {
    return {
      isFix: false
    }
  },
  async mounted () {
    await this.getOtherList(this.currentUser.defaultTender)
  },
  methods: {
    ...mapActions('tenders', ['patchCheckPoint', 'patch', 'getOtherList']),
    Edit () {
      this.isFix = true
    },
    async Renew (index) {
      let yes = confirm('確定更新')
      if (yes) {
        this.isFix = false
        await this.patchCheckPoint({tenderId: this.currentUser.defaultTender, checkPointId: this.checkPoint._id})
        await this.getOtherList(this.currentUser.defaultTender)
        alert('建立成功')
        this.$emit('closeEvent')
      }
    },
    getFormattedDate (date) {
      // 轉換日期格式
      let d = null
      if (date) {
        return moment(date).format('YYYY-MM-DD')
      } else {
        return d
      }
    }
  },
  computed: {
    ...mapState({
      currentUser: state => state.user.current,
      checkPoint: (state) => state.tenders.checkPoint
    })
  }
}
</script>

<style scoped>
.label_col {
  margin-top: 8px;
  padding-left: 10px;
  height: 40px;
}
.container {
  margin-right: 20px;
  width: 600px;
  height:600px;
}
.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>
