<template>
    <div class="page">
        <div class="totalNum flex">
            <div class="item">在职员工 <span class="num">66</span></div>
            <div class="item flex">
              <div>全职 <span class="num">66</span></div>
              <div>实习 <span class="num">66</span></div>
              <div>兼职 <span class="num">66</span></div>              
            </div>

            <div class="item flex">
              <div>试用 <span class="num">66</span></div>
              <div>正式 <span class="num">66</span></div>
              <div>待离职 <span class="num">66</span></div>              
            </div>
        </div>
        <el-row :gutter="20">
          <el-col :span="6" :xs="12" class="mytree">
              <div class="titles">选择部门</div>
              <el-scrollbar style="height: 100%">
                <el-tree
                    size="mini"
                    ref="siteTree"
                    :data="areaData"
                    id="el-tree"
                    node-key="id"
                    indent="4"
                    :props="treeProps"
                    :load="loadNode"
                    highlight-current
                    default-expand-all
                    :expand-on-click-node="false"
                    :render-content="renderContent"
                    @node-click="handleNodeClick"
                >
                </el-tree>
              </el-scrollbar>
          </el-col>
          <el-col :span="18" :xs="12">

              <el-row>
                <div class="controllList">
                  <!-- <el-button type="primary">新增员工</el-button> -->
                  <el-button type="primary">导出数据</el-button>
                  <el-dropdown class="moreControll">
                    <el-button type="primary">
                      更多操作<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item>同步数据</el-dropdown-item>
                      <el-dropdown-item>导入花名册</el-dropdown-item>
                      <el-dropdown-item>历史花名册</el-dropdown-item>
                      <el-dropdown-item>自定义列表字段</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                  <span class="freshTime">
                    <i class="el-icon-refresh"></i>
                    <span>上次同步时间：2023-04-09 09：00：00</span>
                  </span>
                </div>
                <LayoutTable notDel :data="tableData" :config="tableConfig">
                </LayoutTable>
              </el-row>
          </el-col>
        </el-row>        
      <!-- <drawer-show ref="drawerform" @ok="getData" /> -->
      <home-page v-if="isshowHome" :data="personData"></home-page>
    </div>
</template>

<script>
    /** 表单弹出框模式需引入 */
    import drawerShow from "./drawershow";
    import table from "@/assets/mixins/table";
    import tree from "@/assets/mixins/tree";
    import homePage from './homepage.vue'
    export default {
        name: "StaffList",
        components: {
          drawerShow,
          homePage
        },
        mixins: [table,tree],
        created() {
          this.$post("/dept/treeselect", {}).then(({ data }) => {
            this.areaData = data.result
          })
        },
        methods: {
            /** 重写新增方法 */
            toAdd(row) {
                this.$refs.drawerform.add(row);
            },
            /** 重写编辑方法 */
            toEdit(row) {
                this.$refs.drawerform.edit(row);
            },
            /** 重写查看方法 */
            toView(row) {
                // this.$refs.drawerform.view(row);
                // console.log(row)
                this.personData = row
                this.isshowHome = true
            },

            handleNodeClick(node) {
              this.currentNode = node;
              this.query = { deptId: node.id };
              this.getData();
            },
            // 切换标签页
            handleClick(e){
              console.log(this.activeName)
            }
        },
        data() {
            return {
                config: {
                    search: [
                        {
                            name: "name",
                            type: "text",
                            label: "员工姓名",
                            fuzzy: true
                        },
                        // {
                        //     name: "politicalstatus",
                        //     type: "select",
                        //     label: "政治面貌 ",
                        //     fuzzy: true
                        // },
                        // {
                        //     name: "staffType",
                        //     type: "select",
                        //     label: "员工类型",
                        //     fuzzy: true
                        // },
                        // {
                        //     name: "status",
                        //     type: "select",
                        //     label: "员工状态",
                        //     fuzzy: true
                        // },
                    ],
                    columns: [
                        {type: "selection", width: 60},
                        {type: "index",label: "序号",width: 50},
                        {label: "员工姓名", prop: "name"},
                        {label: "工号", prop: "workNum"},
                        {label: "部门", prop: "deptName"},
                        {label: "职位", prop: "positionName"},
                        {label: "员工类型", prop: "staffType",formatter: this.formatterStatus},
                        {label: "员工状态", prop: "status",formatter: this.formatter},
                        {label: "是否在政务中心", prop: "status",formatter: this.formatter},//未对
                        {label: "手机号", prop: "phoneNumber",formatter: this.formatter},
                        {
                            label: "操作",
                            width: 240,
                            formatter: row => {
                                return (
                                    <table-buttons noAdd noDel noEdit row={row} onView={this.toView}  />
                            )
                            }
                        }
                    ]
                },
                activeName:'first',
                isshowHome:false,
                personData:[]
            }
        }
    };
</script>


<style>
.el-card__body {
  padding: 10px;
}
.el-calendar-table .el-calendar-day {
  height: 70px;
}
.is-selected {
  color: #fa3b19;
}
</style>

<style lang="scss" scoped>
.totalNum{
  background: rgba(64, 158, 255,0.2);
  padding: 15px;
  border-left: 4px solid rgb(20, 134, 248);
  color: rgb(100, 100, 100);
  .item{
    padding: 0 10px;
    border-right: 1px solid gray;
  }
  .item:last-child{
    border: none;
  }
  .num{
    color: #409EFF;
    margin-left: 10px;
    margin-right: 20px;
  }
}
.controllList{
  margin-top: 20px;
  .moreControll{
    margin-left: 20px;
  }
}
.freshTime{
  color: #999;
  margin-left: 20px;
}
.cardTitle {
  font-size: 16px;
  color: rgb(20, 134, 248);
  list-style-type: none;
  border-bottom: 3px solid rgb(20, 134, 248);
  padding-bottom: 2px;
}
.mytree ::v-deep {
  padding: 10px;
  .el-tree--highlight-current
  ::v-deep
  .el-tree-node.is-checked
  > .el-tree-node__content {
    background-color: rgb(255, 255, 255);
    color: rgb(64, 158, 255);
  }
  .el-tree--highlight-current
  ::v-deep
  .el-tree-node.is-current
  > .el-tree-node__content {
    background-color: rgb(255, 255, 255);
    color: rgb(64, 158, 255);
  }
  .el-tree > .el-tree-node:after {
    border-top: none;
  }
  .el-tree-node {
    position: relative;
    padding-left: 16px;
  }
  //节点有间隙，隐藏掉展开按钮就好了,如果觉得空隙没事可以删掉
  .el-tree-node__expand-icon.is-leaf {
    display: none;
  }
  .el-tree-node__children {
    padding-left: 16px;
  }

  .el-tree-node :last-child:before {
    height: 38px;
  }

  .el-tree > .el-tree-node:before {
    border-left: none;
  }

  .el-tree > .el-tree-node:after {
    border-top: none;
  }

  .el-tree-node:before {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }

  .el-tree-node:after {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }

  .el-tree-node:before {
    border-left: 1px dashed #4386c6;
    bottom: 0px;
    height: 100%;
    top: -26px;
    width: 1px;
  }

  .el-tree-node:after {
    border-top: 1px dashed #4386c6;
    height: 20px;
    top: 12px;
    width: 24px;
  }
}
.titles{
  color: #409EFF;
  font-size: 16px;
  display: flex;
  align-items: center;
}
.titles::before{
  content: '';
  width:6px;
  height: 16px;
  background-color: #409EFF;
  display: inline-block;
  margin-right: 10px;
}
</style>
