<template>
  <div>
    <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="10">
              <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"
              >
              </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 style="margin-top: 22px">
            <b-col cols="3" style="padding-left: 40px" class="label_col">
              <span>展延名稱:</span>
            </b-col>
            <b-col cols="8" style="margin-left:-50px">
              <div
                v-if="isFix"
                style="width: 97%; padding: 7px 12px 10px; font-size: 16px"
              >
                <span>{{ extendRecord.extend_name }}</span>
              </div>
              <div v-else>
                <b-form-input
                  style="width: 110%; font-size: 16px" v-model="extendRecord.extend_name"
                ></b-form-input>
              </div>
            </b-col>
          </b-row>
          <!-- 核准日期-->
          <b-row style="margin-top: 22px">
            <b-col cols="3" style="padding-left: 40px" class="label_col">
              <span>核准日期:</span>
            </b-col>
            <b-col cols="8" style="margin-left:-50px">
              <div
                v-if="isFix"
                style="width: 97%; padding: 7px 12px 10px; font-size: 16px"
              >
                <span>{{ getFormattedDate(extendRecord.approvalDate) }}</span>
              </div>
              <div v-else>
               <b-form-datepicker
                  v-model="extendRecord.approvalDate"
                  style="width: 110%; font-size: 16px"
                  placeholder="請選擇日期"
                ></b-form-datepicker>
              </div>
            </b-col>
          </b-row>
          <!-- 核准文號-->
          <b-row style="margin-top: 22px">
            <b-col class="label_col" cols="3">
              <span style="color: red">*</span>
              <span>核准文號:</span>
            </b-col>
            <b-col cols="8" style="margin-left:-50px">
              <div
                v-if="isFix"
                style="width: 97%; padding: 7px 12px 10px; font-size: 16px"
              >
                <span>{{ extendRecord.approval_number.issue_text_number }}</span>
              </div>
              <div v-else>
                <multiselect
                  v-model="extendRecord.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-row>
          <!-- 說明 -->
          <b-row style="margin-top: 22px">
            <b-col class="label_col" cols="3">
              <span style="color: red">*</span>
              <span>說明:</span>
            </b-col>
            <b-col cols="8" style="margin-left:-50px">
              <div
                v-if="isFix"
                style="width: 97%; padding: 7px 12px 10px; font-size: 16px"
              >
                <span>{{ extendRecord.explain }}</span>
              </div>
              <div v-else>
              <b-form-textarea
                v-model="extendRecord.explain"
                placeholder="請輸入內容"
                rows="3"
                no-resize
                style="width: 110%; height: 200px; padding: 8px 12px 10px; font-size: 16px"
              ></b-form-textarea>
              </div>
            </b-col>
          </b-row>
        </div>
      </div>
    </div>
  </div>
</template>

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

export default {
  data () {
    return {
      isFix: '',
      approvedList: []
    }
  },
  components: {
    Multiselect,
    functionBar
  },
  async mounted () {
    try {
      await this.officialList()
    } catch (err) {
      console.log(err)
    }
  },
  methods: {
    ...mapActions('officialDocument', ['lookupList']),
    isSaved () {
      this.isFix = true
    },
    async officialList () {
      this.approvedList = await this.lookupList({ distinguish: '來文' })
    },
    getFormattedDate (date) { // 轉換日期格式
      let d = null
      if (date) {
        return moment(date).format('YYYY-MM-DD')
      } else {
        return d
      }
    }
  },
  computed: {
    ...mapState({
      extendRecord: (state) => state.tenders.extendRecord,
      currentUser: state => state.user.current
    })
  },
  async created () {
    if (this.$route.query.fid !== undefined) {
      await this.$store.dispatch(
        'tenders/lookupExtendRecord',
        {tenderId: this.currentUser.defaultTender, extendRecordId: this.$route.query.fid}
      )
      // console.log(this.$route.query.fid)
    }
  },
  watch: {
    extendRecord: {
      handler (newVal, oldVal) {
        if (newVal._id === undefined) {
          this.isFix = false
        } else {
          this.isFix = true
        }
      }
    }
  }
}
</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: 120px;
  margin-left: 40px;
}
</style>
