<template>
  <div>
    <div class="text-dark mt-1">
      <span style="font-weight: 900; font-size: 23px;">使用者管理</span>
    </div>
    <!-- <span style="font-size: 15px">使用者({{ number }})</span> -->
    <hr style="margin-top: 15px; margin-bottom: 15px" />
    <b-row style="margin-bottom: 10px">
      <b-button
        class="btn_edit"
        style="float: left; margin-left: 15px"
        @click="addNewUser"
      >
        <b-icon icon="people" />&nbsp;新增專案人員
      </b-button>
    </b-row>
    <div style="overflow-y: auto; overflow-x: hidden">
      <b-table
        id="my-table"
        class="text-center"
        thead-class="thClass1"
        ref="selectableTable"
        small
        responsive="sm"
        bordered
        hover
        no-border-collapse
        sticky-header="calc(80vh - 130px)"
        style="background-color: white"
        :fields="fields"
        :items="staffList"
        :sort-desc.sync="sortDesc"
        :sort-by.sync="sortBy"
      >
        <!-- HEAD -->
        <template #head()="{ label, field: { key, sortable } }">
          <span style="font-weight: normal; color: white; font-size: 15px">
            {{ label }}
          </span>
          <!-- <template v-if="sortable">
            <b-icon
              font-scale="1.3"
              v-if="sortBy !== key"
              icon="arrow-down-up"
            ></b-icon>
            <b-icon
              font-scale="1.3"
              v-else-if="sortDesc"
              icon="arrow-down"
            ></b-icon>
            <b-icon font-scale="1.3" v-else icon="arrow-up"></b-icon>
          </template> -->
        </template>

        <!-- BODY -->
        <template #cell(staffID)="data">
          <span style="font-weight: normal; color: black; font-size: 15px">
            {{ data.value }}
          </span>
        </template>
        <template #cell(name)="data">
          <a>
            <span
              style="font-weight: 900; font-size: 15px; color:blue; cursor:pointer"
              @click="pushTo(data.item)"
            >
              {{ data.value }}
            </span>
          </a>
        </template>
        <template #cell(tender)="data">
          <span style="font-weight: normal; color: black; font-size: 15px">
            {{ data.item.tender.map(value => {return value.tender}).join('、') }}
          </span>
        </template>
        <template #cell(email)="data">
          <span style="font-weight: normal; color: black; font-size: 15px">
            {{ data.value }}
          </span>
        </template>
        <template #cell(emailPass)="data">
          <span style="font-weight: normal; color: black; font-size: 15px">
            {{ data.value }}
          </span>
        </template>
        <template #cell(contactNumber)="data">
          <span style="font-weight: normal; color: black; font-size: 15px">
            {{ data.value }}
          </span>
        </template>
        <template #cell(delete)="data">
          <b-button
            @click="deleteStaff(data.item)"
            size="sm"
            variant="danger"
            class="align-middle"
            style="font-size: 14px"
          >
            刪除
          </b-button>
        </template>

        <template #cell(selected)="{ rowSelected }">
          <template v-if="rowSelected">
            <span aria-hidden="true">&check;</span>
          </template>
        </template>
      </b-table>
    </div>
  </div>
</template>
<script>
// import addNewPerson from '@/views/MultiProjects/ModalContent/addNewPerson.vue'
import { mapState, mapActions } from 'vuex'

export default {
  data () {
    return {
      sortBy: null,
      sortDesc: false,
      staffList: [],
      fields: [
        {
          key: 'staffID',
          label: '人員編號',
          tdClass: 'align-middle',
          thStyle: { background: '#1d325f' }
        },
        {
          key: 'name',
          label: '姓名',
          tdClass: 'align-middle',
          thStyle: { background: '#1d325f' }
        },
        {
          key: 'tender',
          label: '所屬標別',
          tdClass: 'align-middle',
          thStyle: { background: '#1d325f' }
        },
        {
          key: 'email',
          label: '電子郵件',
          tdClass: 'align-middle',
          thStyle: { background: '#1d325f' }
        },
        {
          key: 'emailPass',
          label: 'SMTP憑證密碼',
          tdClass: 'align-middle',
          thStyle: { background: '#1d325f' }
        },
        {
          key: 'contactNumber',
          label: '聯絡電話',
          tdClass: 'align-middle',
          thStyle: { background: '#1d325f' }
        },
        {
          key: 'delete',
          label: '',
          sortable: false,
          tdClass: 'align-middle',
          thStyle: { background: '#1d325f' }
        }
      ]
    }
  },
  async mounted () {
    await this.reloadPage()
  },
  components: {
    modal: () => import('@/views/Modal/index.vue')
  },
  methods: {
    ...mapActions('staff', ['initStaff']),
    async reloadPage () {
      this.staffList = await this.$store.dispatch('project/lookupStaffs', {
        selects: ['_id', 'staffID', 'name', 'tender', 'email', 'emailPass', 'contactNumber']
      })
    },
    async addNewUser () {
      this.$router.push({ name: 'EditUser' })
    },
    async deleteStaff (data) {
      const h = this.$createElement
      let yes = confirm('確定刪除人員資料?')
      if (yes) {
        await this.$store.dispatch('staff/deleteStaff', data._id)
        await this.reloadPage()
        this.$emit('reloadPage')
        this.$message({
          message: h('span', { style: 'color: teal' }, '成功刪除人員'),
          type: 'success',
          duration: '1500'
        })
      }
    },
    async pushTo (data) { // 檢視列表中使用者
      this.$router.push({
        name: 'EditUser',
        query: { sid: data._id }
      })
      await this.$store.dispatch('staff/lookUp', data._id)
    }
  },
  computed: {
    ...mapState({
      project: (state) => state.project.current,
      currentUser: (state) => state.user.current
    })
  }
}
</script>

<style>
.thClass1 {
  background-color: #1d325f;
  color: rgb(255, 255, 255);
}
</style>
<style scoped>
::-webkit-scrollbar {
  width: 3px;
}
::-webkit-scrollbar-track {
  border-radius: 10px;
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  border-radius: 15px;
  background: #888;
}
::-webkit-scrollbar-thumb:hover {
  background: #555;
}
.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_edit {
  background-color: rgb(75, 102, 255);
  font-size: 16px;
  color: #ffffff;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
  border: none;
  padding: 5px 9px;
}
.btn_edit:hover {
  color: rgb(255, 255, 255);
  background-color: rgb(49, 68, 175);
  transform: translateY(1);
}
</style>
