<template>
  <div style="color: black;width: 500px">
    <b-row style="margin-top:0">
      <b-col cols="4" style="padding:0">
        <div class="title">姓名:</div>
      </b-col>
      <b-col cols="8" style="padding:0">
        <div class="value">{{ current.name }}</div>
      </b-col>
    </b-row>
    <b-row class="row">
      <b-col cols="4" style="padding:0">
        <div class="title">人員編號:</div>
      </b-col>
      <b-col cols="8" style="padding:0">
        <div class="value">{{ current.staffID }}</div>
      </b-col>
    </b-row>
    <b-row class="row">
      <b-col cols="4" style="padding:0">
        <div class="title">單位:</div>
      </b-col>
      <b-col cols="8" style="padding:0">
        <div class="value">{{ current.unit }}</div>
      </b-col>
    </b-row>
    <b-row class="row">
      <b-col cols="4" style="padding:0">
        <div class="title">帳號:</div>
      </b-col>
      <b-col cols="8" style="padding:0">
        <div class="value">{{ current.account }}</div>
      </b-col>
    </b-row>
    <b-row class="row">
      <b-col cols="4" style="padding:0">
        <div class="title">電子郵件:</div>
      </b-col>
      <b-col cols="8" style="padding:0">
        <div class="value">{{ current.email }}</div>
      </b-col>
    </b-row>
    <b-row class="row">
      <b-col cols="4" style="padding:0">
        <div class="title">聯絡電話:</div>
      </b-col>
      <b-col cols="8" style="padding:0">
        <div class="value">{{ current.contactNumber }}</div>
      </b-col>
    </b-row>
    <b-row class="row" style="margin-bottom:20px">
      <b-col cols="4" style="padding:0">
        <div class="title">計畫職稱:</div>
      </b-col>
      <b-col cols="8" style="padding:0">
        <div class="value">{{ current.projectTitle }}</div>
      </b-col>
    </b-row>
    <b-row class="row" style="margin-bottom:20px">
      <b-col cols="4" style="padding:0">
        <div class="title">職務代理:</div>
      </b-col>
      <b-col cols="8" style="padding:0">
        <div class="value">{{ substitute }}</div>
      </b-col>
    </b-row>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      list: [],
      substitute: {}
    }
  },
  async mounted () {
    await this.getSubstitute()
  },
  methods: {
    async getSubstitute () {
      this.list = await this.$store.dispatch('project/lookupStaffs', {
        selects: ['_id', 'staffID', 'name', 'email', 'contactNumber', 'group', 'projectTitle', 'substitute']
      })
      for (let i = 0; i < this.list.length; i++) {
        const one = this.list[i]
        if (one._id === this.current.substitute) {
          this.substitute = one.name
        }
      }
    }
  },
  computed: {
    ...mapState('user', ['current'])
  }
}
</script>

<style lang="scss" scoped>
.row {
  margin-top: 20px;
}
.title {
  margin-left: 20px;
}
.value {
  margin-right: 20px
}
.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>
