<template>
  <div class="container" style="border-radius: 10px">
    <div style="color: black">
      <div
        class="register"
        style="border-top-left-radius: 8px; border-top-right-radius: 8px"
      >
        <b-row>
          <div style="font-size: 20px; font-weight: bold; padding-left: 30px">
            專案資料
          </div>
        </b-row>
      </div>
      <b-row>
        <div
          style="
            padding-top: 10px;
            padding-left: 30px;
            padding-right: 0px;
            padding-bottom: 3px;
            font-size: 18px;
            font-weight: 600;
            color: rgb(64, 64, 64);
          "
        >
          基本資料
        </div>
      </b-row>
      <b-row style="padding-bottom: 10px">
        <b-col cols="12">
          <div style="height: 5px; width: 97%; padding-left: 30px">
            <hr
              style="
                border-top: 1px solid gray;
                margin-top: 0;
                margin-bottom: 0;
              "
            />
          </div>
        </b-col>
      </b-row>
      <b-row
        style="
          padding-top: 0px;
          padding-left: 40px;
          padding-right: 40px;
          padding-bottom: 0px;
        "
      >
        <b-col cols="6">
          <b-form-group
            label-cols-sm="3"
            label-align-sm="left"
            style="padding-left: 20px; margin-bottom: 12px"
            label="單位名稱:"
            label-for="input-lg"
          >
            <b-form-input
              id="input-lg"
              v-model="temporary.companyName"
              style="width: 95%"
              :disabled="isFix"
            ></b-form-input>
          </b-form-group>

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

          <b-form-group
            label-cols-sm="3"
            label-align-sm="left"
            style="padding-left: 20px; margin-bottom: 12px"
            label="專案地址:"
            label-for="input-lg"
          >
            <b-form-input
              id="input-lg"
              v-model="temporary.address"
              style="width: 95%"
              :disabled="isFix"
            ></b-form-input> </b-form-group
          ><b-form-group
            label-cols-sm="3"
            label-align-sm="left"
            style="padding-left: 20px; margin-bottom: 12px"
            label="聯絡地址:"
            label-for="input-lg"
          >
            <b-form-input
              id="input-lg"
              v-model="temporary.contractAddress"
              style="width: 95%"
              :disabled="isFix"
            ></b-form-input>
          </b-form-group>
          <b-form-group
            label-cols-sm="3"
            label-align-sm="left"
            style="padding-left: 20px; margin-bottom: 12px"
            label="郵遞區號:"
            label-for="input-lg"
          >
            <b-form-input
              id="input-lg"
              v-model="temporary.postalCode"
              style="width: 95%"
              :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="padding-left: 20px; margin-bottom: 12px"
            label="計畫編號:"
            label-for="input-lg"
          >
            <b-form-input
              id="input-lg"
              v-model="temporary.number"
              style="width: 95%"
              :disabled="isFix"
            ></b-form-input>
          </b-form-group>
          <b-form-group
            label-cols-sm="3"
            label-align-sm="left"
            style="padding-left: 20px; margin-bottom: 12px"
            label="負責人:"
            label-for="input-lg"
          >
            <b-form-input
              id="input-lg"
              style="width: 95%"
              :disabled="isFix"
              v-model="temporary.owner"
            ></b-form-input>
          </b-form-group>
          <b-form-group
            label-cols-sm="3"
            label-align-sm="left"
            style="padding-left: 20px; margin-bottom: 12px"
            label="聯絡電話:"
            label-for="input-lg"
          >
            <b-form-input
              id="input-lg"
              style="width: 95%"
              :disabled="isFix"
              v-model="temporary.contactNumber"
            ></b-form-input> </b-form-group
          ><b-form-group
            label-cols-sm="3"
            label-align-sm="left"
            style="padding-left: 20px; margin-bottom: 12px"
            label="傳真:"
            label-for="input-lg"
          >
            <b-form-input
              id="input-lg"
              v-model="temporary.fax"
              style="width: 95%"
              :disabled="isFix"
            ></b-form-input>
          </b-form-group>
          <b-form-group
            label-cols-sm="3"
            label-align-sm="left"
            style="padding-left: 20px; margin-bottom: 12px"
            label="電子郵件:"
            label-for="input-lg"
          >
            <b-form-input
              id="input-lg"
              v-model="temporary.email"
              style="width: 95%"
              :disabled="isFix"
            ></b-form-input>
          </b-form-group>
        </b-col>
      </b-row>
      <b-row>
        <div
          style="
            padding-top: 10px;
            padding-left: 30px;
            padding-right: 0px;
            padding-bottom: 3px;
            font-size: 18px;
            font-weight: 600;
            color: rgb(64, 64, 64);
          "
        >
          備註
        </div>
      </b-row>
      <b-row style="padding-bottom: 10px">
        <b-col cols="12">
          <div style="height: 5px; width: 97%; padding-left: 30px">
            <hr
              style="
                border-top: 1px solid gray;
                margin-top: 0;
                margin-bottom: 0;
              "
            />
          </div>
        </b-col>
      </b-row>
      <b-row
        style="
          padding-top: 0px;
          padding-left: 40px;
          padding-right: 40px;
          padding-bottom: 0px;
        "
      >
        <b-col cols="12">
          <b-form-group
            label-cols-sm="3"
            label-align-sm="left"
            style="padding-left: 20px; margin-bottom: 5px; color: black"
            label="工程概述："
            label-for="input-lg"
          >
          <b-form-textarea
            id="input-lg"
            v-model="temporary.projectOverview"
            style="width: 90%; color: black; height: 100px"
            no-resize
            :disabled="isFix"
          ></b-form-textarea>
          </b-form-group>
        </b-col>
      </b-row>
      <b-row
        style="
          padding-top: 0px;
          padding-left: 40px;
          padding-right: 40px;
          padding-bottom: 20px;
        "
      >
        <b-col cols="12">
          <b-form-group
            label-cols-sm="3"
            label-align-sm="left"
            style="padding-left: 20px; margin-bottom: 5px; color: black"
            label="備註："
            label-for="input-lg"
          >
          <b-form-textarea
            id="input-lg"
            v-model="temporary.remark"
            style="width: 90%; color: black; height: 100px"
            no-resize
            :disabled="isFix"
          ></b-form-textarea>
          </b-form-group>
        </b-col>
      </b-row>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  data () {
    return {
      isFix: true
    }
  },
  async mounted () {
    await this.lookupProject()
  },
  methods: {
    ...mapActions('project', ['lookupProject']),
    isFixed () {
      this.isFix = true
    },
    isEdited () {
      this.isFix = false
    }
  },
  computed: {
    ...mapState({
      temporary: (state) => state.project.current
    })
  }
}
</script>

<style lang="scss" scoped>
.title {
  background-color: rgb(255, 255, 255);
  height: 50px;
  width: 90%;
  border-width: 2px;
}
.no-padding [class*="col-"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.register {
  padding-top: 17px;
  background-color: rgb(199, 197, 197);
  color: #000000;
  height: 60px;
  width: 100%;
  border-bottom: 2px solid;
  border-color: rgb(199, 197, 197);
}
.form-control {
  color: black;
}
.custom-select {
  color: black !important;
  box-shadow: none;
  -webkit-box-shadow: none;
}
.form-control:disabled {
  background-color: #ffffff;
  border: 0;
  color: black;
}
.custom-select:disabled {
  background-color: #ffffff;
  border: 0;
  color: black !important;
}
.container {
  margin-top: 20px;
  border-width: 2px;
  border-style: solid;
  border-color: rgb(221, 221, 221);
  width: 90%;
  height: 100%;
  align-items: center;
  padding-top: 0;
  padding-right: 0px;
  padding-left: 0px;
  background-color: rgb(255, 255, 255);
}
</style>
