<template>
  <!-- 延展里程碑 -->
  <div>
    <div>
      <b-row>
        <b-col cols="3">
          <span style="font-size: 30px; font-weight: bold">展延紀錄</span>
        </b-col>
        <b-col cols="9" v-show="isClose">
          <b-button
            v-show="isSave === true"
            size="sm"
            variant="primary"
            style="margin-top: 7px; margin-left: 10px"
            @click="sure()"
            >確定</b-button
          >
          <b-button
            v-show="isSave === false"
            @click="addRow"
            style="margin-top: 7px; margin-left: 10px"
            size="sm"
            variant="primary"
            >新增里程碑</b-button
          >
          <b-button
            v-show="isSave === false"
            @click="addCheckpoint"
            style="margin-top: 7px; margin-left: 10px"
            size="sm"
            variant="primary"
            >新增專案查核點</b-button
          >
        </b-col>
      </b-row>
      <b-list-group class="w-80">
        <!-- header -->
        <b-list-group-item v-for="(item, index) in extendList" :key="index">
          <b-row>
            <!-- 延展項目 -->
            <b-col cols="2">
              <div style="margin-top: 20px">
                <span>延展項目:</span>
              </div>
            </b-col>
            <b-col cols="10">
              <div
                v-if="item.isFix === false"
                style="margin-top: 10px"
              >
                <multiselect
                  v-model="item.extendNumber"
                  placeholder="請選擇項目"
                  deselect-label="已選擇"
                  style="font-size: 16px; width: 95%"
                  :options="approvedList"
                  label="number"
                  track-by="_id"
                  selectLabel="請選擇"
                  selectedLabel="已選擇"
                  deselectLabel="取消選擇"
                >
                </multiselect>
              </div>
              <div v-else style="margin-top: 20px">
                <span>{{ item.extendNumber.number }}</span>
              </div>
            </b-col>
            <!-- 展延日期 -->
            <b-col cols="2">
              <div style="margin-top: 20px">
                <span>展延日期:</span>
              </div>
            </b-col>
            <b-col cols="10">
              <b-form-datepicker
                v-if="item.isFix === false"
                placeholder="請填寫日期"
                style="width: 50%; margin-top: 10px"
                class="float-left"
                v-model="item.extendFinalDate"
              ></b-form-datepicker>
              <div v-else style="margin-top: 20px">
                <span>
                  {{ getFormattedDate(item.extendFinalDate) }}
                </span>
              </div>
            </b-col>
            <!-- 原定日期 -->
            <b-col cols="2">
              <div style="margin-top: 20px">
                <span>原定日期:</span>
              </div>
            </b-col>
            <b-col cols="9">
              <div style="margin-top: 20px">
                <span>{{ getFormattedDate(item.extendNumber.final_date) }}</span>
              </div>
            </b-col>
            <!-- 取消 -->
            <b-col cols="1">
              <!-- <b-icon
                v-show="isSave === false"
                variant="danger"
                class="w-15 float-right p-0 mr-3 mt-3"
                icon="trash-fill"
                aria-hidden="true"
                style="height: 30px; width: auto"
              ></b-icon> -->
              <b-icon
                v-show="item.isFix === false"
                @click="cancel()"
                variant="danger"
                class="w-15 float-right p-1 mr-3 mt-3"
                icon="x-circle-fill"
                aria-hidden="true"
                style="height: 30px; width: auto"
              ></b-icon>
            </b-col>
          </b-row>
        </b-list-group-item>
      </b-list-group>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import moment from 'moment'
import Multiselect from 'vue-multiselect'
import 'vue-multiselect/dist/vue-multiselect.min.css'

export default {
  data () {
    return {
      extendList: [],
      isSave: false,
      isClose: true,
      approvedList: [],
      mileStone: [],
      checkPoint: []
    }
  },
  async mounted () {
    await this.extendMileStone()
    await this.extendCheckPoint()
  },
  components: {
    Multiselect
  },
  methods: {
    async addRow () { // 新增里程碑
      this.isSave = true
      await this.$store.dispatch('tenders/getOtherList', this.currentUser.defaultTender)
      this.approvedList = this.tenderList.mileStone
      let item = {
        extendNumber: '',
        extendFinalDate: '',
        signal: '0',
        isFix: false
      }
      this.extendList.push(item)
    },
    async addCheckpoint () { // 新增專案查核點
      this.isSave = true
      await this.$store.dispatch('tenders/getOtherList', this.currentUser.defaultTender)
      this.approvedList = this.tenderList.checkPoint
      let item = {
        extendNumber: '',
        extendFinalDate: '',
        signal: '1',
        isFix: false
      }
      this.extendList.push(item)
    },
    async cancel () { // 取消新增
      this.extendList.splice(-1, 1)
      this.isSave = false
    },
    async sure () { // 確定新增
      let yes = confirm('確定新增?')
      let list = this.extendList.length - 1
      if (yes) {
        this.extendList[list].isFix = true
        this.isSave = false
      }
      for (let i = 0; i < this.extendList.length; i++) {
        const element = this.extendList[i]
        if (element.signal === '0') {
          this.mileStone.push(element)
          this.$store.state.tenders.mileStoneList = (Array.from(new Set(this.mileStone)))
        } else {
          this.checkPoint.push(element)
          this.$store.state.tenders.checkPointList = Array.from(new Set(this.checkPoint))
        }
      }
    },
    getFormattedDate (date) { // 轉換日期格式
      let d = null
      if (date) {
        return moment(date).format('YYYY-MM-DD')
      } else {
        return d
      }
    },
    async extendMileStone () {
      await this.$store.dispatch('tenders/getOtherList', this.currentUser.defaultTender)
      for (let i = 0; i < this.tenderList.mileStone.length; i++) {
        const element = this.tenderList.mileStone[i]
        if (element.extendRecord && element.extendRecord.length !== undefined && element.extendRecord.length > 0) {
          this.extend = []
          this.extend = element.extendRecord
          let list = this.extend.length - 1
          if (this.extend[list].extendId === this.extendRecord._id) {
            let obj = {
              extendNumber: element,
              extendFinalDate: element.extension_finalDate
            }
            this.extendList.push(obj)
          }
        }
      }
    },
    async extendCheckPoint () {
      await this.$store.dispatch('tenders/getOtherList', this.currentUser.defaultTender)
      for (let i = 0; i < this.tenderList.checkPoint.length; i++) {
        const element = this.tenderList.checkPoint[i]
        if (element.extendRecord && element.extendRecord.length !== undefined && element.extendRecord.length > 0) {
          this.extend = []
          this.extend = element.extendRecord
          let list = this.extend.length - 1
          if (this.extend[list].extendId === this.extendRecord._id) {
            let obj = {
              extendNumber: element,
              extendFinalDate: element.extension_finalDate
            }
            this.extendList.push(obj)
          }
        }
      }
    }
  },
  computed: {
    ...mapState({
      currentUser: state => state.user.current,
      tenderList: (state) => state.tenders.tenderList,
      extendRecord: state => state.tenders.extendRecord
    })
  },
  watch: {
    extendRecord: {
      handler (newVal, oldVal) {
        if (newVal._id === undefined) {
          this.isClose = true
        } else {
          this.isClose = false
        }
      }
    }
  }
}
</script>

<style scoped>
.col-3 {
  padding-right: 0px;
}
.col-9 {
  padding-left: 0px;
}
</style>
