<template>
  <div>
    <b-container style="padding-top: 20px">
      <b-card no-body>
        <b-tabs pills cards>
          <b-tab title="標案資料">
            <div
              style="
                overflow-y: auto;
                overflow-x: hidden;
                height: 700px;
                margin-top: 0px;
              "
            >
              <!-- 標別 | 標案編號 -->
              <b-row style="padding-top: 25px">
                <b-col cols="2" class="text">
                  <span style="color: black">標別：</span>
                </b-col>
                <b-col cols="4"
                  ><div style="margin-top: 5px">
                    <span style="color: black;margin-left:40px">{{ tender.tender }}</span>
                  </div>
                </b-col>
                <b-col cols="2" class="text">
                  <span style="color: black">標案編號：</span>
                </b-col>
                <b-col cols="4"
                  ><div style="margin-top: 5px">
                    <span style="color: black">{{ tender.tenderNumber }}</span>
                  </div>
                </b-col>
              </b-row>
              <!-- 工程名稱 -->
              <b-row style="padding-top: 25px">
                <b-col cols="2" class="text">
                  <span style="color: black">工程名稱：</span>
                </b-col>
                <b-col cols="10"
                  ><div style="margin-top: 4px">
                    <span style="color: black;margin-left:40px">{{ tender.project_name }}</span>
                  </div>
                </b-col>
              </b-row>
              <!-- 承攬廠商 -->
              <b-row style="padding-top: 50px">
                <b-col cols="2" class="text">
                  <span style="color: black">承攬廠商：</span>
                </b-col>
                <b-col cols="10"
                  ><div style="margin-top: 4px">
                    <span style="color: black;margin-left:40px">{{ tender.owner }}</span>
                  </div>
                </b-col>
              </b-row>
              <!-- 開工日期 | 預計竣工日期 -->
              <b-row style="padding-top: 25px">
                <b-col cols="2" class="text">
                  <span style="color: black">開工日期：</span>
                </b-col>
                <b-col cols="4">
                  <div style="margin-top: 5px">
                    <span style="color: black;margin-left:40px">{{ getFormattedDate(tender.start_date) }}</span>
                  </div>
                </b-col>
                <b-col cols="2" class="text">
                 <span style="color: black">預計竣工日期：</span>
                </b-col>
                <b-col cols="4">
                  <div style="margin-top: 5px">
                    <span style="color: black">{{
                      getFormattedDate(tender.scheduled_complete)
                    }}</span>
                  </div>
                </b-col>
              </b-row>
              <!-- 實際竣工日期 | 原契約工期 -->
              <b-row style="padding-top: 25px">
                <b-col cols="2" class="text">
                  <span style="color: black">實際竣工日期：</span>
                </b-col>
                <b-col cols="4">
                  <div style="margin-top: 5px">
                    <span style="color: black;margin-left:40px">{{ getFormattedDate(tender.actual_complete) }}</span>
                  </div>
                </b-col>
                <b-col cols="2" class="text">
                  <span style="color: black">原契約工期：</span>
                </b-col>
                <b-col cols="4"
                  ><div style="margin-top: 5px">
                    <span style="color: black">{{ tender.contract_day }}</span>
                  </div>
                </b-col>
              </b-row>
              <!-- 契約金額 -->
              <b-row style="padding-top: 25px">
                <b-col cols="2" class="text">
                  <span style="color: black">契約金額(NT$)：</span>
                </b-col>
                <b-col cols="4"
                  ><div style="margin-top: 5px">
                   <span style="color: black;margin-left:40px">{{ tender.contract_amount }}</span>
                  </div>
                </b-col>
              </b-row>
              <!-- 展延預定完工日期 |契約變更次數-->
              <b-row style="padding-top: 25px">
                <b-col cols="3" class="text" style="padding-right: 0px">
                  <span style="color: black">展延預定完工日期：</span>
                </b-col>
                <b-col cols="3" style="padding-left: 0px"
                  ><div style="margin-top: 5px;margin-left:-55px">
                    <span style="color: black">{{
                      getFormattedDate(tender.scheduled_complete)
                    }}</span>
                  </div>
                </b-col>
                <b-col cols="2" class="text">
                  <span style="color: black">契約變更次數：</span>
                </b-col>
                <b-col cols="4"
                  ><div style="margin-top: 5px">
                    <span style="color: black">{{ changeNumber }}</span>
                  </div>
                </b-col>
              </b-row>
              <!-- 變更後契約金額 |變更天數-->
              <b-row style="padding-top: 25px">
                <b-col cols="3" class="text" style="padding-right: 0px">
                  <span style="color: black">變更後契約金額：</span>
                </b-col>
                <b-col cols="3" style="padding-left: 0px"
                  ><div style="margin-top: 5px">
                    <span style="color: black;margin-left:-55px">{{ change }}</span>
                  </div>
                </b-col>
                <b-col cols="2" class="text">
                  <span style="color: black">變更天數：</span>
                </b-col>
                <b-col cols="4"
                  ><div style="margin-top: 5px">
                    <span style="color: black">{{ changeDay }}</span>
                  </div>
                </b-col>
              </b-row>
              <!-- 工期展延次數 | 工期展延天數累計-->
              <b-row style="padding-top: 25px">
                <b-col cols="2" class="text">
                  <span style="color: black">工期展延次數：</span>
                </b-col>
                <b-col cols="4"
                  ><div style="margin-top: 5px">
                    <span style="color: black;margin-left:40px">{{ extendNumber }}</span>
                  </div>
                </b-col>
                <!-- <b-col cols="3" class="text" style="padding-right: 0px">
                  <span style="color: black">工期展延天數(累計)：</span>
                </b-col>
                <b-col cols="3" style="padding-left: 0px"
                  ><div style="margin-top: 5px">
                    <span style="color: black">還沒傳</span>
                  </div>
                </b-col> -->
              </b-row>
              <!-- 工程概述 -->
              <b-row style="padding-top: 25px">
                <b-col cols="2" class="text">
                 <span style="color: black">工程概述：</span>
                </b-col>
                <b-col cols="10"
                  ><div style="margin-top: 5px">
                    <span style="color: black;margin-left:40px">{{ tender.introduction }}</span>
                  </div>
                </b-col>
              </b-row>
            </div>
          </b-tab>
          <b-tab title="單位資料">
            <b-container>
              <div
                style="
                  overflow-y: auto;
                  overflow-x: hidden;
                  height: 700px;
                  margin-top: 0px;
                "
              >
                <!-- 單位基本資料 -->
                <b-row style="padding: 15px 0 10px 70px">
                  <div
                    style="font-size: 20px; font-weight: bold; margin-left: 2%"
                  >
                    單位基本資料：
                  </div>
                </b-row>
                <b-row style="padding-left: 120px; padding-right: 60px">
                  <div style="margin-top: 10px; margin-left: 40px; width: 80%">
                    <!-- 主辦單位 -->
                    <b-card
                      no-body
                      class="mb-1"
                      v-for="(item, index) in this.tender.hostControl"
                      :key="'info-' + index"
                    >
                      <div>
                        <b-button
                          v-b-toggle="`Host`"
                          :disabled="Host.checked"
                          block
                          class="btn_module"
                        >
                          主辦單位
                        </b-button>
                        <b-collapse
                          :id="`Host`"
                          style="padding: 0 15px 15px 15px"
                        >
                          <div class="infoTitle">
                            <span class="midText" style="font-weight: bold"
                              >基本資料</span
                            >
                          </div>
                          <b-row style="margin-bottom: 20px">
                            <b-col cols="12">
                              <b-row>
                                <b-col cols="6">
                                  <span style="color: black; font-weight:700;">單位名稱：</span>
                                  <b-form-input
                                    :disabled="isFix"
                                    style="width: 100%; font-size: 16px"
                                    v-model="item.organizer"
                                  ></b-form-input>
                                  <span style="color: black; font-weight:700;">電子郵件：</span>
                                  <b-form-input
                                    :disabled="isFix"
                                    style="width: 100%; font-size: 16px"
                                    v-model="item.email"
                                  ></b-form-input>
                                  <span style="color: black; font-weight:700;">聯絡地點：</span>
                                  <b-form-input
                                    :disabled="isFix"
                                    style="width: 100%; font-size: 16px"
                                    v-model="item.address"
                                  ></b-form-input>
                                </b-col>
                                <b-col cols="6">
                                  <span style="color: black; font-weight:700;">聯絡人：</span>
                                  <b-form-input
                                    :disabled="isFix"
                                    style="width: 100%; font-size: 16px"
                                    v-model="item.contactPerson"
                                  ></b-form-input>
                                  <span style="color: black; font-weight:700;">聯絡電話：</span>
                                  <b-form-input
                                    :disabled="isFix"
                                    style="width: 100%; font-size: 16px"
                                    v-model="item.contactNumber"
                                  ></b-form-input>
                                </b-col>
                              </b-row>
                            </b-col>
                          </b-row>
                        </b-collapse>
                      </div>
                    </b-card>
                    <!-- 設計單位 -->
                    <b-card
                      no-body
                      class="mb-1 mt-4"
                      v-for="(item, index) in this.tender.design_unit"
                      :key="'info1-' + index"
                    >
                      <div>
                        <b-button
                          v-b-toggle="`Design`"
                          :disabled="Design.checked"
                          block
                          class="btn_module"
                        >
                          設計單位
                        </b-button>
                        <b-collapse
                          :id="`Design`"
                          style="padding: 0 15px 15px 15px"
                          class="mt-2"
                        >
                          <div class="infoTitle">
                            <span class="midText" style="font-weight: bold"
                              >基本資料</span
                            >
                          </div>
                          <b-row style="margin-top: 10px">
                            <b-col cols="6">
                              <span style="color: black; font-weight:700;">單位名稱：</span>
                              <b-form-input
                                :disabled="isFix"
                                style="width: 100%; font-size: 16px"
                                v-model="item.organizer"
                              ></b-form-input>
                              <span style="color: black; font-weight:700;">電子郵件：</span>
                              <b-form-input
                                :disabled="isFix"
                                style="width: 100%; font-size: 16px"
                                v-model="item.email"
                              ></b-form-input>
                              <span style="color: black; font-weight:700;">聯絡地點：</span>
                              <b-form-input
                                :disabled="isFix"
                                style="width: 100%; font-size: 16px"
                                v-model="item.address"
                              ></b-form-input>
                            </b-col>
                            <b-col cols="6">
                              <span style="color: black; font-weight:700;">聯絡人：</span>
                              <b-form-input
                                :disabled="isFix"
                                style="width: 100%; font-size: 16px"
                                v-model="item.contactPerson"
                              ></b-form-input>
                              <span style="color: black; font-weight:700;">聯絡電話：</span>
                              <b-form-input
                                :disabled="isFix"
                                style="width: 100%; font-size: 16px"
                                v-model="item.contactNumber"
                              ></b-form-input>
                            </b-col>
                          </b-row>
                        </b-collapse>
                      </div>
                    </b-card>
                  </div>
                </b-row>
                <b-row style="padding-left: 120px; padding-right: 60px">
                  <div style="margin-left: 40px; width: 80%">
                    <!-- 專案管理 -->
                    <b-card
                      no-body
                      class="mb-1 mt-4"
                      v-for="(item, index) in this.tender.PCMControl"
                      :key="'info-' + index"
                    >
                      <div>
                        <b-button
                          v-b-toggle="`PCM`"
                          :disabled="PCM.checked"
                          block
                          class="btn_module"
                        >
                          專案管理
                        </b-button>
                        <b-collapse
                          :id="`PCM`"
                          style="padding: 0 15px 15px 15px"
                        >
                          <div class="infoTitle">
                            <span class="midText" style="font-weight: bold"
                              >基本資料</span
                            >
                          </div>
                          <b-row style="margin-bottom: 20px">
                            <b-col cols="12">
                              <b-row>
                                <b-col cols="6">
                                  <span style="color: black; font-weight:700;">單位名稱：</span>
                                  <b-form-input
                                    :disabled="isFix"
                                    style="width: 100%; font-size: 16px"
                                    v-model="item.organizer"
                                  ></b-form-input>
                                  <span style="color: black; font-weight:700;">電子郵件：</span>
                                  <b-form-input
                                    :disabled="isFix"
                                    style="width: 100%; font-size: 16px"
                                    v-model="item.email"
                                  ></b-form-input>
                                  <span style="color: black; font-weight:700;">聯絡地點：</span>
                                  <b-form-input
                                    :disabled="isFix"
                                    style="width: 100%; font-size: 16px"
                                    v-model="item.address"
                                  ></b-form-input>
                                </b-col>
                                <b-col cols="6">
                                  <span style="color: black; font-weight:700;">聯絡人：</span>
                                  <b-form-input
                                    :disabled="isFix"
                                    style="width: 100%; font-size: 16px"
                                    v-model="item.contactPerson"
                                  ></b-form-input>
                                  <span style="color: black; font-weight:700;">聯絡電話：</span>
                                  <b-form-input
                                    :disabled="isFix"
                                    style="width: 100%; font-size: 16px"
                                    v-model="item.contactNumber"
                                  ></b-form-input>
                                </b-col>
                              </b-row>
                            </b-col>
                          </b-row>
                        </b-collapse>
                      </div>
                    </b-card>
                    <!-- 監造工務管理 -->
                    <b-card
                      no-body
                      class="mb-1 mt-4"
                      v-for="(item, index) in this.tender.CSControl"
                      :key="'info1-' + index"
                    >
                      <div>
                        <b-button
                          v-b-toggle="`CS`"
                          :disabled="CS.checked"
                          block
                          class="btn_module"
                        >
                          監造工務管理
                        </b-button>
                        <b-collapse
                          :id="`CS`"
                          style="padding: 0 15px 15px 15px"
                          class="mt-2"
                        >
                          <div class="infoTitle">
                            <span class="midText" style="font-weight: bold"
                              >基本資料</span
                            >
                          </div>
                          <b-row style="margin-top: 10px">
                            <b-col cols="6">
                              <span style="color: black; font-weight:700;">單位名稱：</span>
                              <b-form-input
                                :disabled="isFix"
                                style="width: 100%; font-size: 16px"
                                v-model="item.organizer"
                              ></b-form-input>
                              <span style="color: black; font-weight:700;">電子郵件：</span>
                              <b-form-input
                                :disabled="isFix"
                                style="width: 100%; font-size: 16px"
                                v-model="item.email"
                              ></b-form-input>
                              <span style="color: black; font-weight:700;">聯絡地點：</span>
                              <b-form-input
                                :disabled="isFix"
                                style="width: 100%; font-size: 16px"
                                v-model="item.address"
                              ></b-form-input>
                            </b-col>
                            <b-col cols="6">
                              <span style="color: black; font-weight:700;">聯絡人：</span>
                              <b-form-input
                                :disabled="isFix"
                                style="width: 100%; font-size: 16px"
                                v-model="item.contactPerson"
                              ></b-form-input>
                              <span style="color: black; font-weight:700;">聯絡電話：</span>
                              <b-form-input
                                :disabled="isFix"
                                style="width: 100%; font-size: 16px"
                                v-model="item.contactNumber"
                              ></b-form-input>
                            </b-col>
                          </b-row>
                        </b-collapse>
                      </div>
                    </b-card>
                    <!-- 施工管理 -->
                    <b-card
                      no-body
                      class="mb-1 mt-4"
                      v-for="(item, index) in this.tender.ManagementControl"
                      :key="'info3-' + index"
                    >
                      <div>
                        <b-button
                          v-b-toggle="`Management`"
                          :disabled="Management.checked"
                          block
                          class="btn_module"
                        >
                          施工管理
                        </b-button>
                        <b-collapse
                          :id="`Management`"
                          style="padding: 0 15px 15px 15px"
                          class="mt-2"
                        >
                          <div class="infoTitle">
                            <span class="midText" style="font-weight: bold"
                              >基本資料</span
                            >
                          </div>
                          <b-row style="margin-top: 10px">
                            <b-col cols="6">
                              <span style="color: black; font-weight:700;">單位名稱：</span>
                              <b-form-input
                                :disabled="isFix"
                                style="width: 100%; font-size: 16px"
                                v-model="item.organizer"
                              ></b-form-input>
                              <span style="color: black; font-weight:700;">電子郵件：</span>
                              <b-form-input
                                :disabled="isFix"
                                style="width: 100%; font-size: 16px"
                                v-model="item.email"
                              ></b-form-input>
                              <span style="color: black; font-weight:700;">聯絡地點：</span>
                              <b-form-input
                                :disabled="isFix"
                                style="width: 100%; font-size: 16px"
                                v-model="item.address"
                              ></b-form-input>
                            </b-col>
                            <b-col cols="6">
                              <span style="color: black; font-weight:700;">聯絡人：</span>
                              <b-form-input
                                :disabled="isFix"
                                style="width: 100%; font-size: 16px"
                                v-model="item.contactPerson"
                              ></b-form-input>
                              <span style="color: black; font-weight:700;">聯絡電話：</span>
                              <b-form-input
                                :disabled="isFix"
                                style="width: 100%; font-size: 16px"
                                v-model="item.contactNumber"
                              ></b-form-input>
                            </b-col>
                          </b-row>
                        </b-collapse>
                      </div>
                    </b-card>
                  </div>
                </b-row>
              </div>
            </b-container>
          </b-tab>
        </b-tabs>
      </b-card>
    </b-container>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import moment from 'moment'

export default {
  props: ['isAddProject'],
  data () {
    return {
      PCM: {
        group: 'PCM',
        issuer: '',
        issue_text_number: '',
        title: '',
        issueHandlingDay: '',
        receiveHandlingDay: '',
        outputFileName: '',
        checked: false
      },
      CS: {
        group: 'CS',
        issuer: '',
        issue_text_number: '',
        title: '',
        issueHandlingDay: '',
        receiveHandlingDay: '',
        outputFileName: '',
        checked: false
      },
      Management: {
        group: 'Management',
        issuer: '',
        issue_text_number: '',
        title: '',
        issueHandlingDay: '',
        receiveHandlingDay: '',
        outputFileName: '',
        checked: false
      },
      Host: {
        group: 'Host',
        issuer: '',
        issue_text_number: '',
        title: '',
        issueHandlingDay: '',
        receiveHandlingDay: '',
        outputFileName: '',
        checked: false
      },
      Design: {
        group: 'Design',
        issuer: '',
        issue_text_number: '',
        title: '',
        issueHandlingDay: '',
        receiveHandlingDay: '',
        outputFileName: '',
        checked: false
      },
      the: [
        {
          group: '',
          issuer: '',
          issue_text_number: '',
          title: '',
          issueHandlingDay: '',
          receiveHandlingDay: '',
          outputFileName: '',
          checked: false
        }
      ],
      isFix: true,
      change: '',
      changeDay: '',
      changeNumber: '',
      extendNumber: ''
    }
  },
  async mounted () {
    try {
      await this.$store.dispatch(
        'tenders/lookupTender',
        this.currentUser.defaultTender
      )
      await this.$store.dispatch(
        'tenders/getOtherList',
        this.currentUser.defaultTender
      )
      await this.getChangeContract()
    } catch (err) {
      console.log(err)
    }
  },
  methods: {
    getFormattedDate (date) {
      // 轉換日期格式
      let d = null
      if (date) {
        return moment(date).format('YYYY-MM-DD')
      } else {
        return d
      }
    },
    async getChangeContract () {
      for (let i = 0; i < this.tenderList.changeContract.length; i++) {
        const element = this.tenderList.changeContract[i]
        this.change = element.change_amount
        this.changeDay = element.change_day
      }
      this.extendNumber = this.tenderList.extendRecord.length
      this.changeNumber = this.tenderList.changeContract.length
    }
  },
  computed: {
    ...mapState({
      currentUser: (state) => state.user.current,
      tender: (state) => state.tenders.tenders,
      tenderList: (state) => state.tenders.tenderList
    })
  }
}
</script>

<style scoped>
.custom-switch {
  padding-left: 4rem;
  padding-top: 5px;
}
.btn_module {
  background-color: rgb(75, 102, 255);
  font-size: 16px;
  color: #ffffff;
  width: 100%;
}
.infoTitle {
  position: relative;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  height: 2px;
  background-color: #1d325f;
  text-align: center;
  font-size: 20px;
  color: #1d325f;
}
.midText {
  position: absolute;
  left: 50%;
  background-color: #ffffff;
  padding: 0 10px 0 10px;
  transform: translateX(-50%) translateY(-50%);
}
.btn {
  background-color: rgb(75, 102, 255);
  font-size: 15px;
  padding-left: 13px;
  padding-right: 13px;
  padding-top: 7px;
  padding-bottom: 7px;
  color: #ffffff;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
  border: none;
}
.btn:hover {
  color: rgb(255, 255, 255);
  background-color: rgb(49, 68, 175);
  transform: translateY(0);
}
.text {
  padding-left: 30px;
  font-size: 20px;
  font-weight: bold;
  display: flex;
  align-items: center;
}
.col-2 {
  padding-right: 0px;
}
.col-4 {
  padding-left: 0px;
}
.col-10 {
  padding-left: 0px;
}
.form-control {
  color: black !important;
}
.form-control:disabled {
  background-color: #ffffff;
  background: none;
  border: 0;
  color: black;
}
::-webkit-scrollbar {
  width: 3px;
}
::-webkit-scrollbar-track {
  border-radius: 10px;
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  border-radius: 15px;
  background: #888;
}
::-webkit-scrollbar-thumb:hover {
  background: #555;
}
</style>
