<template>
  <div>
    <!-- 契約編輯 -->
    <div  class="shadow" v-show="$route.name === 'ContractSearchList'">
      <b-button
        class="btn_delete"
        @click="deleteContractSearchListModalOpen = true">
      <b-icon-trash-fill></b-icon-trash-fill>&ensp;刪除契約</b-button>
    </div>

    <!-- 變更契約列表 -->
    <div class="shadow" v-show="$route.name === 'ContractChangingList'">
      <b-button
        class="btn1"
        @click="ChangingContract()"
        :disabled="contractChanging.permission === 1"
      >
        <b-icon-file-earmark-plus></b-icon-file-earmark-plus>變更契約</b-button>
    </div>

    <!-- 新增里程碑 -->
    <div class="shadow" v-show="$route.name === 'MilestoneInformationList'">
      <b-button
        class="btn1"
        @click="MilestoneListModalOpen = true"
        :disabled="extendedRecord.permission === 1"
      >
        <b-icon-file-earmark-plus></b-icon-file-earmark-plus>新增里程碑</b-button>
    </div>
    <!-- 新增專案查核點 -->
    <div  class="shadow" v-show="$route.name === 'CheckpointInformationList'">
      <b-button
        class="btn1"
        @click="CheckpointListModalOpen = true"
        :disabled="extendedRecord.permission === 1"
      >
        <b-icon-file-earmark-plus></b-icon-file-earmark-plus>新增查核點</b-button>
    </div>

    <!-- 新增展延紀錄 -->
    <div
      class="shadow"
      v-show="$route.name === 'ExtendedRecordList'"
    >
      <b-button
        class="btn1"
        @click="addExtend()"
        :disabled="extendedRecord.permission === 1"
      >
        <b-icon-file-earmark-plus></b-icon-file-earmark-plus>新增展延</b-button>
    </div>
    <modal
      :is-open="MilestoneListModalOpen"
      title="建立里程碑"
      @closeEvent="MilestoneListModalOpen = false"
    >
    <milestoneList @closeEvent="MilestoneListModalOpen = false"/>
    </modal>
    <modal
      :is-open="CheckpointListModalOpen"
      title="建立專案查核點"
      @closeEvent="CheckpointListModalOpen = false"
    >
    <checkpointList @closeEvent="CheckpointListModalOpen = false"/>
    </modal>

    <modal
           :isOpen="deleteContractSearchListModalOpen"
            title="刪除契約"
           v-on:closeEvent="deleteContractSearchListModalOpen = false"
          >
          <deleteContractSearchList @closeEvent="deleteContractSearchListModalOpen = false" />
          </modal>
  </div>
</template>

<script>
import deleteContractSearchList from '@/views/ContractManagement/ModalContent/deleteContractSearchList.vue'
import milestoneList from '@/views/ContractManagement/ModalContent/milestoneList.vue'
import checkpointList from '@/views/ContractManagement/ModalContent/checkpointList.vue'
import { mapState, mapActions } from 'vuex'

export default {
  components: {
    modal: () => import('@/views/Modal/index.vue'), // 不用寫在import只需寫在這邊
    milestoneList,
    checkpointList,
    deleteContractSearchList
  },
  data () {
    return {
      deleteContractSearchListModalOpen: false,
      MilestoneListModalOpen: false,
      CheckpointListModalOpen: false,
      contractChanging: {},
      extendedRecord: {}
    }
  },
  mounted () {
    this.usePermission()
  },
  methods: {
    ...mapActions('tenders', ['initChangeContract', 'initExtendRecord']),
    async ContractEdit () {
      await this.initChangeContract()// 待改
      this.$router.push({ name: 'ContractChangingEdit' })
    },
    async ChangingContract () {
      await this.initChangeContract()
      this.$router.push({ name: 'ContractChangingEdit' })
    },
    async addExtend () {
      await this.initExtendRecord()
      this.$router.push({ name: 'ExtendedRecordRecord' })
    },
    usePermission () { // 確認權限
      Object.values(this.currentUser.tenderPermissions).forEach(obj => {
        if (obj.tenderId === this.currentUser.defaultTender) {
          let permission = obj.permission
            .filter(name => name.title === '文件管理')
            .map(val => { return val.functionItem })
          for (const element of permission) {
            for (const a of element) {
              if (a.name === '變更契約') this.contractChanging = a
              if (a.name === '展延紀錄') this.extendedRecord = a
            }
          }
        }
      })
    }
  },
  computed: {
    ...mapState({
      currentUser: (state) => state.user.current
    })
  }
}
</script>

<style scoped>
.shadow
{
    background-color:#ffff;
    height: 65px;
    width: 100%;
    box-shadow: 2px 2px 20px rgba(0, 0, 0, 40);
    /* border-bottom-width:3px;
    border-bottom-color:#1D325F;
    border-bottom-style:solid */
    position: fixed;
    top:55px;
    z-index: 500;
}
.btn{
  background-color: white;
  font-size:16px;
  margin-top: 15px;
  margin-left: 15px;
  padding-left:7px;
  padding-right: 7px;
  padding-top: 5px;
  padding-bottom: 5px;
  color: #383838;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);

}
.btn:hover{
  color: black;
  background-color: rgb(228, 228, 228);
}
.btn1{
  background-color: rgb(75, 102, 255);
  font-size:16px;
  margin-top: 15px;
  margin-left: 15px;
  padding-left:7px;
  padding-right: 7px;
  padding-top: 5px;
  padding-bottom: 5px;
  color: #ffffff;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
  border:none;
}
.btn1:hover{
  color: rgb(255, 255, 255);
  background-color: rgb(49, 68, 175);
}
.btn_delete {
  background-color: red;
  font-size: 16px;
  padding-left: 7px;
  padding-right: 7px;
  padding-top: 10px;
  padding-bottom: 5px;
  color: #ffffff;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
  border: none;
  text-align: justify;
  margin-top: 10px;
  margin-left: 17px;
}
.btn1.btn-secondary[disabled] {
  background-color: rgb(224, 224, 224);
  color: rgb(150, 150, 150);
}
</style>
