<template>
  <div class="staff">
    <el-card>
      <el-row>
        <el-col class="menu" :span="6">
          <el-tree
            ref="treeList"
            :data="menuList"
            :props="defaultProps"
            :expand-on-click-node="false"
            :highlight-current="true"
            node-key="departmentId"
            @node-click="handleNodeClick"
          >
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span>{{ data.departmentName}}</span>
              <span>{{" " + data.memberCount}}</span>
            </span>
          </el-tree>
        </el-col>
        <el-col :span="18">
          <div class="block">
            <el-form :inline="true">
              <el-form-item label="员工姓名">
                <el-input clearable v-model="query.name" @keyup.enter.native="handleGetTable"></el-input>
              </el-form-item>
              <el-form-item label="人员状态">
                <el-select v-model="query.staffStatus" placeholder="请选择">
                  <el-option
                    v-for="item in staffStateList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" :loading="loading" @click="handleGetTable">查询</el-button>
                <el-button @click="clear">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div class="table">
            <el-table
              v-loading="loading"
              :data="tableData"
              :header-cell-style="{'color': '#909399', 'background-color': '#f5f7fa'}"
              style="width: 100%"
              height="600"
            >
              <el-table-column header-align="center" align="center" label="工号" prop="staffNo"></el-table-column>
              <el-table-column header-align="center" align="center" width="260" label="员工姓名">
                <template slot-scope="scope">
                  <div class="conatnt-name">
                    <span>{{ scope.row.name }}</span>
                    <span class="conatnt-name-label" v-if="scope.row.departmentLeader===1">部门负责人</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column header-align="center" align="center" label="职位" prop="position">
                <template slot-scope="scope">
                  <div class="conatnt-name">
                    <span>{{ scope.row.position || "暂无信息" }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column header-align="center" align="center" label="状态" prop="staffStatus"></el-table-column>
              <el-table-column header-align="center" align="center" label="操作">
                <template slot-scope="scope">
                  <el-button type="text" @click="handleView(scope.row)">查看档案</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              class="bl-form3"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="query.currentPage"
              :page-sizes="[10, 20, 50]"
              :page-size="query.limit"
              layout="total, sizes, prev, pager, next"
              :total="query.pageTotal"
            ></el-pagination>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-dialog
      top="60px"
      title="员工档案"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      width="60%"
    >
      <div class="dialogVisible-tabs">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="基础信息" name="first">
            <basis v-if="employeesInfo.baseInfo" :info="employeesInfo.baseInfo" />
            <div class="noInfo" v-else>暂无信息</div>
          </el-tab-pane>
          <el-tab-pane label="教育背景" name="second">
            <education v-if="employeesInfo.educationInfo" :info="employeesInfo.educationInfo" />
            <div class="noInfo" v-else>暂无信息</div>
          </el-tab-pane>
          <el-tab-pane label="职业信息" name="third">
            <professional v-if="employeesInfo.occupationInfo" :info="employeesInfo.occupationInfo" />
            <div class="noInfo" v-else>暂无信息</div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import menuTree from '@/components/menu-tree'
import basis from './componments/basis.vue'
import professional from './componments/professional'
import education from './componments/education'
import { apiOrganizationList, apiEmployeesList, apiEmployeesInfo } from '@/api/api_staff'
export default {
  components: {
    menuTree,
    professional,
    basis,
    education
  },
  data () {
    return {
      activeName: 'first',
      dialogVisible: false,
      defaultProps: {
        children: 'list',
        label: 'name'
      },
      menuList: [], // 架构数据
      tableData: [], // 表格数据
      employeesInfo: {}, // 员工档案
      // 在职状态
      staffStateList: [
        { value: '0', label: '在职' },
        { value: '1', label: '离职' }
      ],
      loading: false,
      query: {
        page: 1,
        limit: 20,
        pageTotal: 0,
        departmentId: null
      }
    }
  },
  watch: {
    $route: function (val) {
      if (val.name === 'staff') {
        this.clear()
        this.handleGetTableList(val.query.id)
      }
    }
  },
  computed: {
    current () {
      return this.$route.query.hasOwnProperty('id') ? this.$route.query.id ? this.$route.query.id.toString() : '' : ''
    }
  },
  created () {
    this.handleGetMenuList()
    this.handleGetTableList(this.current)
  },
  methods: {
    async getEmployeesInfo (data) {
      const result = await apiEmployeesInfo(data)
      if (result.code === 0) {
        this.activeName = 'first'
        this.dialogVisible = true
        this.employeesInfo = result.data
      } else {
        this.$message.error(result.msg)
      }
    },
    // 选择节点重新查询
    handleNodeClick (data) {
      // highlight - current
      this.query.departmentId = data.departmentId
      this.handleGetTable()
    },
    // 获取侧边架构列表
    async handleGetMenuList () {
      const result = await apiOrganizationList()
      this.menuList = result
    },
    // 获取数据列表 { page: 0, limit: 5 }
    async handleGetTableList (id) {
      let result = await apiEmployeesList(Object.assign({}, this.query, { limit: this.query.limit }))

      if (result.code === 0) {
        this.tableData = result.page.list
        this.query.pageTotal = result.page.totalCount
      } else {
        this.$message.error(result.msg)
      }
      this.loading = false
    },
    clear () {
      this.query = {
        page: 1,
        limit: 10,
        pageTotal: 0,
        departmentId: null
      }
      this.$refs.treeList.setCurrentKey()
      this.handleGetTableList()
    },
    async handleGetTable () {
      this.query.page = 1
      this.loading = true
      await this.handleGetTableList()
      this.loading = false
    },
    handleCurrentChange (val) {
      this.query.page = val
      this.handleGetTableList()
    },
    handleSizeChange (val) {
      this.query.limit = val
      this.handleGetTableList()
    },
    // 弹窗相关
    handleClick (tab, event) {
    },
    async handleView (data) {
      await this.getEmployeesInfo(data.staffId)
    }
  }
}
</script>
<style lang="scss">
.el-tree {
  font-size: 16px;
}
.conatnt-name {
  position: relative;
  &-label {
    position: absolute;
    font-size: 10px;
    background: rgba(24, 144, 255, 1);
    border-radius: 5px;
    color: #fff;
    padding: 0 4px;
    top: -4px;
    transform: scale(0.7);
  }
}
.el-tree-node__content {
  margin: 10px 0 !important;
}
.el-table td,
.el-table th {
  padding: 8px 0 !important;
}
</style>
<style lang="scss" scoped>
.staff .block,
.staff .table {
  margin-left: 20px;
}
.el-form-item .el-form-item {
  margin-bottom: 22px;
}
.add-wrap {
  margin-bottom: 22px;
}
.turn-work-list {
  background-color: pink;
  padding-bottom: 10px;
  margin-bottom: 20px;
}
.dialogVisible-tabs {
  // width: 248px;
  margin: 0 auto;
}
.bl-form3 {
  &.el-pagination {
    margin-top: 16px;
    text-align: right;
  }
}
.noInfo {
  text-align: center;
}
</style>
