<template>
  <div>
    <functionBar class="F_bar" v-if="!isFix" @isSaved="isSaved"></functionBar>
    <div
      class="container"
      style="
        box-shadow: 3px 1px 5px rgb(157, 156, 156);
        border-radius: 15px 15px 15px 15px;
      "
    >
      <div
        style="
          background-color: rgb(199, 197, 197);
          border-radius: 15px 15px 0 0;
        "
      >
        <div style="color: black; padding-left: 30px">
          <b-row style="height: 50px">
            <b-col cols="6">
              <b-form-group
                label-cols-sm="4"
                label-align-sm="left"
                style="margin-right: 5px; font-size: 20px; font-weight: bold"
                label="變更契約資料"
                label-for="input-lg"
              >
                <div style="width: 100%; padding-top: 11px">
                </div>
              </b-form-group>
            </b-col>
          </b-row>
        </div>
      </div>

      <div
        style="
          border-radius: 0px 0px 15px 15px;
          padding-top: 20px;
          padding-bottom: 30px;
        "
      >
        <div style="color: black">
          <!-- 變更編號名稱|契約變更次數 -->
          <b-row>
            <b-col class="label_col" style="padding-left: 40px" cols="2">
              <span>變更編號名稱:</span>
            </b-col>
            <b-col cols="4">
              <div
                v-if="isFix"
                style="width: 97%; padding: 7px 12px 10px; font-size: 16px"
              >
                <span>{{ changeContract.contractNumber }}</span>
              </div>
              <div v-else>
                <b-form-input
                  style="width: 95%; font-size: 16px"
                  v-model="changeContract.contractNumber"
                ></b-form-input>
              </div>
            </b-col>
          </b-row>

          <!-- 核准文號|核准日期 -->
          <b-row style="margin-top: 22px">
            <b-col cols="2" style="padding-left: 40px" class="label_col">
              <span>核准文號:</span>
            </b-col>
            <b-col cols="4">
              <div
                v-if="isFix"
                style="width: 97%; padding: 7px 12px 10px; font-size: 16px"
              >
                <span>{{ changeContract.approval_number.issue_text_number }}</span>
              </div>
              <div v-else>
                <multiselect
                  v-model="changeContract.approval_number"
                  placeholder="請選擇文號"
                  style="font-size: 16px; width: 110%"
                  :options="approvedList"
                  label="issue_text_number"
                  track-by="id"
                  deselect-label="已選擇"
                  selectLabel="請選擇"
                  selectedLabel="已選擇"
                  deselectLabel="取消選擇"
                >
                </multiselect>
              </div>
            </b-col>
            <b-col class="label_col" style="padding-left: 40px" cols="2">
              <span>核准日期:</span>
            </b-col>
            <b-col cols="4">
              <div
                v-if="isFix"
                style="width: 97%; padding: 7px 12px 10px; font-size: 16px"
              >
                <span>{{ getFormattedDate(changeContract.approvalDate) }}</span>
              </div>
              <div v-else>
               <b-form-datepicker
                  style="font-size: 16px; width: 95%"
                  placeholder="請選擇日期"
                  v-model="changeContract.approvalDate"
                >
                </b-form-datepicker>
              </div>
            </b-col>
          </b-row>
          <!-- 變更內容及項目 -->
          <b-row style="margin-top: 22px">
            <b-col class="label_col" cols="2">
              <span style="color: red">*</span>
              <span>變更內容及項目:</span>
            </b-col>
            <b-col cols="10">
              <b-form-textarea
                placeholder="請輸入變更內容及項目"
                rows="3"
                no-resize
                style="width: 98%; height: 80px; padding: 8px 12px 10px; font-size: 16px"
                v-model="changeContract.detail"
                :disabled="isFix"
              ></b-form-textarea>
            </b-col>
          </b-row>
          <!-- 加帳| 減帳-->
          <b-row style="margin-top: 22px">
            <b-col cols="2" style="padding-left: 40px" class="label_col">
              <span>加帳:</span>
            </b-col>
            <b-col cols="4">
              <div
                v-if="isFix"
                style="width: 97%; padding: 7px 12px 10px; font-size: 16px"
              >
                <span>{{ changeContract.addBill }}</span>
              </div>
              <div style="width: 95%" v-else>
               <b-form-input
                  style="width: 95%; font-size: 16px"
                  v-model="changeContract.addBill"
                  @input="calculateChangeAmount"
                ></b-form-input>
              </div>
            </b-col>
            <b-col cols="2" style="padding-left: 40px" class="label_col">
              <span>減帳:</span>
            </b-col>
            <b-col cols="4">
              <div
                v-if="isFix"
                style="width: 97%; padding: 7px 12px 10px; font-size: 16px"
              >
                <span>{{ changeContract.reduceBill }}</span>
              </div>
              <div v-else>
             <b-form-input
                  style="width: 95%; font-size: 16px"
                  v-model="changeContract.reduceBill"
                  @input="calculateChangeAmount"
                ></b-form-input>
              </div>
            </b-col>
          </b-row>
          <!-- 變更後契約金額| 變更天數-->
          <b-row style="margin-top: 22px">
            <b-col cols="2" style="padding-left: 40px" class="label_col">
              <span>變更後契約金額:</span>
            </b-col>
            <b-col cols="4">
              <div
                style="width: 97%; padding: 7px 12px 10px; font-size: 16px"
              >
                <span>{{ changeContract.change_amount }}</span>
              </div>
            </b-col>
            <b-col cols="2" style="padding-left: 40px" class="label_col">
              <span>變更天數:</span>
            </b-col>
            <b-col cols="4">
              <div
                v-if="isFix"
                style="width: 97%; padding: 7px 12px 10px; font-size: 16px"
              >
                <span>{{ changeContract.change_day }}</span>
              </div>
              <div v-else>
                <b-form-input
                  style="width: 95%; font-size: 16px"
                  v-model="changeContract.change_day"
                ></b-form-input>
              </div>
            </b-col>
          </b-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import functionBar from '@/views/ContractManagement/ContractEdit/functionBar.vue'
import { mapState, mapActions } from 'vuex'
import moment from 'moment'
import Multiselect from 'vue-multiselect'
import 'vue-multiselect/dist/vue-multiselect.min.css'

export default {
  data () {
    return {
      isFix: '',
      isSave: '',
      approvedList: []
    }
  },
  components: {
    Multiselect,
    functionBar
  },
  beforeRouteLeave (to, from, next) {
    if (this.isSave === true) {
      const answer = window.confirm('尚未儲存，確定離開當前畫面?')
      if (answer) {
        next()
      } else {
        next(false)
      }
    } else {
      next()
    }
  },
  async mounted () {
    try {
      await this.$store.dispatch('tenders/lookupTender', this.currentUser.defaultTender)
      await this.$store.dispatch('tenders/getOtherList', this.currentUser.defaultTender)
      await this.officialList()
      if (this.changeContract._id === undefined) {
        this.$store.dispatch(
          'tenders/initChangeContract'
        )
      }
    } catch (err) {
      console.log(err)
    }
  },
  computed: {
    ...mapState({
      changeContract: (state) => state.tenders.changeContract,
      currentUser: state => state.user.current,
      tenders: state => state.tenders.tenders,
      tenderList: state => state.tenders.tenderList
    })
  },
  async created () {
    if (this.$route.query.fid !== undefined) {
      await this.$store.dispatch(
        'tenders/lookupChange', {tenderId: this.currentUser.defaultTender, changeContractId: this.$route.query.fid}
      )
    }
  },
  methods: {
    ...mapActions('tenders', ['lookupChange']),
    ...mapActions('officialDocument', ['lookupList']),
    async officialList () {
      this.approvedList = await this.lookupList({ distinguish: '來文' })
    },
    calculateChangeAmount () { // 計算金額
      if (this.tenderList.changeContract.length < 1) {
        const amount = Number(this.tenders.contract_amount) + Number(this.changeContract.addBill) - Number(this.changeContract.reduceBill)
        this.changeContract.change_amount = amount
      } else {
        for (let i = 0; i < this.tenderList.changeContract.length; i++) {
          const element = this.tenderList.changeContract[i]
          const amounts = Number(element.change_amount) + Number(this.changeContract.addBill) - Number(this.changeContract.reduceBill)
          this.changeContract.change_amount = amounts
        }
      }
    },
    getFormattedDate (date) {
      // 轉換日期格式
      let d = null
      if (date) {
        return moment(date).format('YYYY-MM-DD')
      } else {
        return d
      }
    },
    isSaved () {
      this.isFix = true
      this.isSave = false
    }
  },
  watch: {
    changeContract: {
      handler (newVal, oldVal) {
        if (newVal._id === undefined) {
          this.isFix = false
          this.isSave = true
        } else {
          this.isFix = true
          this.isSave = false
        }
      }
    }
  }
}
</script>

<style scoped>
.form-group.required .control-label:after {
  content: "*";
  color: red;
}
.main-content .container-fluid,
.main-content .container-sm,
.main-content .container-md,
.main-content .container-lg,
.main-content .container-xl {
  padding-left: 15px !important;
  padding-right: 39px !important;
}
.label_col {
  margin-top: 8px;
  padding-left: 30px;
}
.form-control {
  color: black;
}
.custom-select {
  color: black !important;
  box-shadow: none;
  -webkit-box-shadow: none;
}
.custom-select:disabled {
  color: black !important;
  opacity: 1;
  background-color: #ffffff;
  background-image: none !important;
  border: 0;
}
.form-control:disabled {
  background-color: #ffffff;
  background: none;
  border: 0;
  color: black;
}
.form-control:disabled::-webkit-input-placeholder {
  color: #fff;
}
.b-form-btn-label-control.form-control[aria-disabled="true"],
.b-form-btn-label-control.form-control[aria-readonly="true"] {
  background-color: #ffffff;
  border: 0;
  color: black;
}
.container {
  margin-top: 0px;
  width: 90%;
  height: 95%;
  padding: 0;
  margin-top: 100px;
}
</style>
