<template>
<!-- 無用 -->
  <div class="container">
    <div style="color: black">
      <div class="title" style="
          border-top-left-radius: 10px;
          border-top-right-radius: 10px;
          ">
          <b-row>
            <div
              style="
                font-size: 20px;
                font-weight: bold;
                padding-left: 30px;
              "
            >
              人員資料
            </div>
          </b-row>
      </div>

      <b-row
        style="
          padding-top: 30px;
          padding-left: 40px;
          padding-right: 60px;
          padding-bottom: 20px
        "
      >
        <b-col cols="6">
          <b-form-group
              label-cols-sm="3"
              label-align-sm="left"
              class="input"
              label="姓名:"
              label-for="input-lg"
            >
              <b-form-input v-model="selected.name" :disabled="isFix" id="input-lg" style="width: 100%"></b-form-input>
            </b-form-group>
          <b-form-group
              label-cols-sm="3"
              label-align-sm="left"
              class="input"
              label="人員編號:"
              label-for="input-lg"
            >
              <b-form-input v-model="selected.staffID" :disabled="isFix" id="input-lg" style="width: 100%"></b-form-input>
            </b-form-group>
            <b-form-group
              label-cols-sm="3"
              label-align-sm="left"
              class="input"
              label="帳號:"
              label-for="input-lg"
            >
              <b-form-input v-model="selected.account" :disabled="isFix" id="input-lg" style="width: 100%"></b-form-input>
            </b-form-group>
          <b-form-group
            label-cols-sm="3"
            label-align-sm="left"
            class="input"
            label="工程名稱:"
            label-for="input-lg"
          >
            <b-form-input
            :disabled="isFix" id="input-lg"
            style="width: 100%">
            </b-form-input>
          </b-form-group>
          <b-form-group
              label-cols-sm="3"
              label-align-sm="left"
              class="input"
              label="單位:"
              label-for="input-lg"
            >
              <b-form-input v-model="selected.unit" :disabled="isFix" id="input-lg" style="width: 100%"></b-form-input>
            </b-form-group>
            <b-form-group
              label-cols-sm="3"
              label-align-sm="left"
              class="input"
              label="電子郵件:"
              label-for="input-lg"
            >
              <b-form-input v-model="selected.email" :disabled="isFix" id="input-lg" style="width: 100%"></b-form-input>
            </b-form-group>
            <b-form-group
              label-cols-sm="3"
              label-align-sm="left"
              class="input"
              label="聯絡電話:"
              label-for="input-lg"
            >
              <b-form-input
              v-model="selected.contactNumber"
                :disabled="isFix" id="input-lg"
                style="width: 100%"
              ></b-form-input> </b-form-group
            >
        </b-col>
        <b-col cols="6">
            <b-form-group
              label-cols-sm="3"
              label-align-sm="left"
              class="input"
              label="職務代理人:"
              label-for="input-lg"
            >
              <b-form-input
              v-model="selected.substitute"
                :disabled="isFix" id="input-lg"
                style="width: 100%"
              ></b-form-input> </b-form-group
            >
          </b-col>
      </b-row>
      <div
      class="border-bottom border-light mb-3"
      style="
        font-size: 18px;
        font-weight: 800;
        color: #5e72e4;
        margin-bottom: 0px;
      "
    >
      <a
        style="user-select: none; padding-left: 40px"
      >
        權限相關資料
      </a>
    </div>
      <b-row>
        <b-col>
        </b-col>
        <b-col>
        </b-col>
      </b-row>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      isFix: true
    }
  },
  methods: {
    isInformationSaved () {
      this.isFix = true
    },
    isInformationEditing () {
      this.isFix = false
    }
  },
  computed: {
    ...mapState('staff', ['selected'])
  }
}
</script>

<style lang="scss" scoped>
.title {
  padding-top: 17px;
  background-color: rgb(255, 255, 255);
  height: 60px;
  width: 100%;

}
.container {
  border-radius: 10px;
  margin-top: 75px;
  border-width: 2px;
  border-style: solid;
  border-color: rgb(221, 221, 221);
  width: 100%;
  height: 90%;
  align-items: center;
  padding-top: 0;
  padding-right: 0px;
  padding-left: 0px;
  background-color: rgb(221, 221, 221);
}
.input {
  padding-left: 20px;
  margin-bottom: 12px;
}
</style>
