<template>
  <!-- 監造報表基本資料 -->
  <div class="word">
    <b-row class="mb-3">
      <b-col cols="12" style="font-weight: bold">
        <span>監造報表基本資料:</span>
      </b-col>
    </b-row>
    <b-row class="mb-3">
      <!-- 工程名稱 -->
      <b-col cols="2">
        <div>
          <span>工程名稱:</span>
        </div>
      </b-col>
      <b-col cols="10">
        <span>{{ tender.project_name }}</span>
      </b-col>
    </b-row>
    <b-row class="mb-3">
      <!-- 契約工期 -->
      <b-col cols="2">
        <div>
          <span>契約工期:</span>
        </div>
      </b-col>
      <b-col cols="4">
        <span>{{ tender.contract_day }}天</span>
      </b-col>
      <!-- 開工工期 -->
      <b-col cols="2">
        <div>
          <span>開工工期:</span>
        </div>
      </b-col>
      <b-col cols="4">
        <span>{{ getFormattedDate(tender.start_date) }}</span>
      </b-col>
    </b-row>
    <b-row class="mb-3">
      <!-- 契約金額 -->
      <b-col cols="2">
        <div>
          <span>契約金額:</span>
        </div>
      </b-col>
      <!-- 原契約 -->
      <b-col cols="4">
        <span>原契約:{{ tender.contract_amount }}</span>
      </b-col>
      <!-- 變更後 -->
      <b-col cols="6">
        <span>變更後:{{ change }}</span>
      </b-col>
    </b-row>
    <b-row class="mb-3">
      <!-- 預定完工日期 -->
      <b-col cols="2">
        <div>
          <span>預定完工日期:</span>
        </div>
      </b-col>
      <b-col cols="4">
        <span>{{ getFormattedDate(tender.scheduled_complete) }}</span>
      </b-col>
      <!-- 實際完工日期 -->
      <b-col cols="2">
        <div>
          <span>實際完工日期:</span>
        </div>
      </b-col>
      <b-col cols="4">
        <span>{{ getFormattedDate(tender.actual_complete) }}</span>
      </b-col>
    </b-row>
    <b-row class="mb-3">
      <!-- 契約變更次數 -->
      <b-col cols="2">
        <div>
          <span>契約變更次數:</span>
        </div>
      </b-col>
      <b-col cols="4">
        <span>{{ changeNumber }}次</span>
      </b-col>
      <!-- 工期展延天數 -->
      <b-col cols="2">
        <div>
          <span>工期展延天數:</span>
        </div>
      </b-col>
      <b-col cols="4">
        <span>200天</span>
      </b-col>
    </b-row>
    <b-row class="mb-3">
      <!-- 本日氣象 -->
      <b-col cols="2">
        <div style="margin-top:7px">
          <span>本日氣象:</span>
        </div>
      </b-col>
      <!-- 上午 -->
      <b-col cols="4">
        <span>上午:</span>
        <b-form-select :options="op" style="width: 30%" v-model="supervision.weather_morning"> </b-form-select>
      </b-col>
      <!-- 下午 -->
      <b-col cols="6">
        <span>下午:</span>
        <b-form-select :options="op" style="width: 20%" v-model="supervision.weather_afternoon"> </b-form-select>
      </b-col>
    </b-row>
    <b-row class="mb-3">
      <!-- 預定進度 -->
      <b-col cols="2">
        <div style="margin-top:7px">
          <span>預定進度(%):</span>
        </div>
      </b-col>
      <b-col cols="4">
        <b-form-input style="width: 50%" v-model="supervision.scheduled"></b-form-input>
      </b-col>
      <!-- 實際進度 -->
      <b-col cols="2">
        <div style="margin-top:7px">
          <span>實際進度(%):</span>
        </div>
      </b-col>
      <b-col cols="4">
        <b-form-input style="width: 50%" v-model="supervision.actual"></b-form-input>
      </b-col>
    </b-row>
  </div>
</template>

<script>
import moment from 'moment'
import { mapState } from 'vuex'
export default {
  data () {
    return {
      op: [
        { value: '晴', text: '晴' },
        { value: '雨', text: '雨' },
        { value: '陰', text: '陰' }
      ],
      change: '',
      changeNumber: ''
    }
  },
  async mounted () {
    await this.$store.dispatch('tenders/lookupTender', this.currentUser.defaultTender)
    await this.$store.dispatch('supervision/initSupervision')
    await this.getChangeContract()
  },
  methods: {
    getFormattedDate (date) { // 轉換日期格式
      let d = null
      if (date) {
        return moment(date).format('YYYY-MM-DD')
      } else {
        return d
      }
    },
    async getChangeContract () {
      await this.$store.dispatch('tenders/getOtherList', this.currentUser.defaultTender)
      for (let i = 0; i < this.tenderList.changeContract.length; i++) {
        const element = this.tenderList.changeContract[i]
        this.change = element.change_amount
      }
      this.changeNumber = this.tenderList.changeContract.length
    }
  },
  computed: {
    ...mapState({
      currentUser: state => state.user.current,
      tender: (state) => state.tenders.tenders,
      tenderList: (state) => state.tenders.tenderList,
      supervision: state => state.supervision.supervision
    })
  }
}
</script>

<style scoped>
.word {
  color: black;
  font-size: 16px;
}
</style>
