<template>
  <div>
    <div style="font-size: 25px; margin-bottom: 10px">專案管理</div>
    <hr style="margin-top: 15px; margin-bottom: 15px" />
    <b-row style="margin-bottom: 10px">
        <div v-if="isAddProject">
            <b-button  class="btn" @click="addProject">儲存</b-button>
            <b-button class="btn" @click="cancelAddProject">取消</b-button>
        </div>

        <div v-else>
        <b-button @click="editSave" class="btn" style="margin-left: 10px">
            <span v-if="isFix">編輯專案資料</span>
            <span v-else @click="dropdownSave">儲存專案資料</span>
        </b-button>
        </div>
    </b-row>

    <b-row style="padding-top: 30px; padding-left: 10px; padding-bottom: 20px">
      <b-col cols="6">
        <b-form-group
          label-cols-sm="3"
          label-align-sm="left"
          style="color: black; margin-bottom: 12px"
          label="單位名稱:"
          label-for="input-lg"
        >
          <b-form-input
            id="input-lg"
            style="width: 100%"
            v-model="project.unit"
            :disabled="isFix"
          >
          </b-form-input>
        </b-form-group>

        <b-form-group
          label-cols-sm="3"
          label-align-sm="left"
          style="color: black; margin-bottom: 12px"
          label="工程委託:"
          label-for="input-lg"
        >
          <b-form-select
            id="input-lg"
            v-model="project.engineeringEntrust"
            :options="engineeringEntrust"
            style="width: 100%"
            :disabled="isFix"
          >
          </b-form-select>
        </b-form-group>

        <b-form-group
          label-cols-sm="3"
          label-align-sm="left"
          style="color: black; margin-bottom: 12px"
          label="計畫編號:"
          label-for="input-lg"
        >
          <b-form-input
            id="input-lg"
            v-model="project.number"
            style="width: 100%"
            :disabled="isFix"
          >
          </b-form-input>
        </b-form-group>

        <b-form-group
          label-cols-sm="3"
          label-align-sm="left"
          style="color: black; margin-bottom: 12px"
          label="工程名稱:"
          label-for="input-lg"
        >
          <b-form-input
            id="input-lg"
            v-model="project.name"
            style="width: 100%"
            :disabled="isFix"
          >
          </b-form-input>
        </b-form-group>

        <b-form-group
          label-cols-sm="3"
          label-align-sm="left"
          style="color: black; margin-bottom: 12px"
          label="負責人:"
          label-for="input-lg"
        >
          <b-form-input
            id="input-lg"
            v-model="project.owner"
            style="width: 100%"
            :disabled="isFix"
          >
          </b-form-input>
        </b-form-group>

        <b-form-group
          label-cols-sm="3"
          label-align-sm="left"
          style="color: black; margin-bottom: 12px"
          label="專案地址:"
          label-for="input-lg"
        >
          <b-form-input
            id="input-lg"
            v-model="project.address"
            style="width: 100%"
            :disabled="isFix"
          >
          </b-form-input>
        </b-form-group>
      </b-col>

      <b-col cols="6">
        <b-form-group
          label-cols-sm="3"
          label-align-sm="left"
          style="color: black; margin-bottom: 12px"
          label="聯絡地址:"
          label-for="input-lg"
        >
          <b-form-input
            id="input-lg"
            v-model="project.contactAddress"
            style="width: 100%"
            :disabled="isFix"
          >
          </b-form-input>
        </b-form-group>
        <b-form-group
          label-cols-sm="3"
          label-align-sm="left"
          style="color: black; margin-bottom: 12px"
          label="郵遞區號:"
          label-for="input-lg"
        >
          <b-form-input
            id="input-lg"
            v-model="project.postalCode"
            style="width: 100%"
            :disabled="isFix"
          >
          </b-form-input>
        </b-form-group>

        <b-form-group
          label-cols-sm="3"
          label-align-sm="left"
          style="color: black; margin-bottom: 12px"
          label="聯絡電話:"
          label-for="input-lg"
        >
          <b-form-input
            id="input-lg"
            v-model="project.contactNumber"
            style="width: 100%"
            :disabled="isFix"
          ></b-form-input>
        </b-form-group>

        <b-form-group
          label-cols-sm="3"
          label-align-sm="left"
          style="color: black; margin-bottom: 12px"
          label="傳真:"
          label-for="input-lg"
        >
          <b-form-input
            id="input-lg"
            v-model="project.fax"
            style="width: 100%"
            :disabled="isFix"
          >
          </b-form-input>
        </b-form-group>

        <b-form-group
          label-cols-sm="3"
          label-align-sm="left"
          style="color: black; margin-bottom: 12px"
          label="電子郵件:"
          label-for="input-lg"
        >
          <b-form-input
            id="input-lg"
            v-model="project.email"
            style="width: 100%"
            :disabled="isFix"
          ></b-form-input>
        </b-form-group>

        <b-form-group
          label-cols-sm="3"
          label-align-sm="left"
          style="color: black; margin-bottom: 20px"
          label="備註:"
          label-for="input-lg"
        >
          <b-form-input
            id="input-lg"
            v-model="project.remark"
            style="width: 100%"
            :disabled="isFix"
          >
          </b-form-input>
        </b-form-group>
      </b-col>
    </b-row>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  props: ['isAddProject'],
  data () {
    return {
      project: [
        {
          unit: '',
          engineeringEntrust: '',
          number: '',
          name: '',
          owner: '',
          address: '',
          contactAddress: '',
          postalCode: '',
          contactNumber: '',
          fax: '',
          email: '',
          remark: ''
        }
      ],
      engineeringEntrust: [
        '專案管理(ProjectConstructionManagement)',
        '監造公務管理(CounterStrike)',
        '施工管理(constructionManagement)'
      ],
      isFix: true
    }
  },
  async mounted () {
  },
  components: {},
  methods: {
    editSave () {
      if (!this.isFix) {
        let yes = confirm('確認修改專案資料?')
        if (yes) {
          this.isFix = true
          this.$emit('isCloseFalse')
          alert('已修改專案資料!')
        }
      } else {
        this.isFix = false
        this.$emit('isCloseTrue')
      }
    },
    addProject () {
      var wasNull = false
      if (this.project.unit === '' || this.project.engineeringEntrust === '' || this.project.number === '' || this.project.name === '' || this.project.owner === '' || this.project.address === '' || this.project.contactAddress === '' || this.project.postalCode === '' || this.project.contactNumber === '' || this.project.fax === '' || this.project.fax === '') wasNull = true
      if (wasNull) alert('尚有內容未填!')
      else {
        var yes = confirm('確定新增傳案?')
        if (yes) {
          if (this.project._id === undefined) {
            this.postProject()
          }
          alert('新增成功 恭喜~~~~~')
          this.$emit('addProject')
        } else {
          alert('取消儲存')
        }
      }
    },
    cancelAddProject () {
      let yes = confirm('確定要離開嗎???? 你確定?')
      if (yes) {
        alert('取消成功')
        this.$emit('cancelAddProject')
      }
    },
    addNewProject () {
      this.isFix = false
    }
  },
  computed: {
    ...mapState({
      current: (state) => state.project.current
    })
  }
}
</script>

<style>
.thClass1 {
  background-color: #1d325f;
  color: rgb(255, 255, 255);
}
</style>
<style scoped>
.project-group {
  width: 800px;
  height: 250px;
  background-color: white;
  border-radius: 10%;
  border-style: solid;
  border-width: 3px;
  border-color: rgb(163, 163, 163);
  margin-left: 3%;
  margin-top: 3%;
  padding-top: 15px;
}
.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);
}
.btn_title {
  background-color: #1d325f;
  font-size: 40px;
  color: white;
  margin-left: 70px;
}
.btn_title:hover {
  color: rgb(255, 255, 255);
  background-color: rgb(49, 68, 175);
}
</style>
