<template>
    <div class="administrative-estrutura-container">
        <search-menu @handleSearchKey="handleSearchKey" @handleTreeSelection="handleTreeSelection"></search-menu>
        <div class="af-right-container">
            <div class="af-right-header">
                <span class="title-span">人事部（5人）</span>
                <span class="id-span">部门ID： 1233344</span>
                <span class="handle-area">
                    <a class="J_add-child a-href">添加子部门</a>
                    <span class="hurdle"></span>
                    <a class="J_edit a-href">编辑</a>
                </span>
            </div>
            <div class="af-right-button-box">
                <el-button type="primary">添加成员</el-button>
                <el-button>批量导入/导出</el-button>
                <el-button type="danger" plain>批量删除</el-button>
                <el-button class="J_show-children"><el-checkbox class="m-r-10" v-model="showChildMember"></el-checkbox><a class="a-href">显示子成员</a></el-button>
            </div>
            <el-table
                :data="employeeList">
                <el-table-column
                    type="selection"
                    width="42">
                </el-table-column>
                <el-table-column
                    label="姓名"
                    prop="name"
                ></el-table-column>
                <el-table-column
                    label="手机号"
                    prop="phoneNumber"
                ></el-table-column>
                <el-table-column
                    label="职位"
                    prop="positionName"
                ></el-table-column>
                <el-table-column
                    label="状态"
                >
                    <template slot-scope="scope">
                        <div class="status-icon" :class="scope.row.activationStatus == 1 ? 'is-active' : ''">
                            <i class="iconfont icon-shouji"></i>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-sizes="[100, 200, 300, 400]"
                    :page-size="pageSize"
                    :current-page="currentPage"
                    layout="total, sizes, prev, pager, next"
                    :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
    import searchMenu from "components/contacts/searchMenu";
    export default {
        name: "administrativeEstrutura",
        components: {
            searchMenu
        },
        data() {
            return {
                showChildMember: false,
                pageSize: 100,
                currentPage: 1,
                total: 0,
                employeeList: [
                    {
                        employeeClerkId: 222,
                        name: "陈景良",
                        phoneNumber: "13777800255",
                        isManager: 0,
                        positionName: "HRM",
                        sort: 1,
                        activationStatus: 1,
                        userId: 111,
                        departmentId: "hr001",
                        hireDate: "2018-12-12"
                    },
                    {
                        employeeClerkId: 223,
                        name: "陈景良2",
                        phoneNumber: "13777800256",
                        isManager: 0,
                        positionName: "HRM",
                        sort: 2,
                        activationStatus: 0,
                        userId: 112,
                        departmentId: "hr002",
                        hireDate: "2018-12-12"
                    },
                    {
                        employeeClerkId: 224,
                        name: "陈景良3",
                        phoneNumber: "13777800257",
                        isManager: 0,
                        positionName: "HRM",
                        sort: 3,
                        activationStatus: 1,
                        userId: 113,
                        departmentId: "hr003",
                        hireDate: "2018-12-12"
                    }
                ]
            };
        },
        methods: {
            handleSizeChange() {},
            handleCurrentChange() {},
            /**
             * 树形菜单搜索 
             */
            handleSearchKey(key) {
                console.log(key, "searchKey");
            },
            
            /**
             * 树形菜单选择项处理
             */
            handleTreeSelection(obj, node) {
                console.log(obj, node, "selection");
            }
        }
    };
</script>
<style lang="scss">
    .administrative-estrutura-container {
        display: flex;
        .af-right-container {
            height: 690px;
            background: #fff;
            flex: 1;
            padding: 0 24px;
            .af-right-header {
                height: 70px;
                line-height: 70px;
                font-weight: 400;
                font-size: 14px;
                color: #606266;
                .title-span {
                    color: #303133;
                    font-size: 20px;
                }
                .handle-area {
                    float: right;
                    .hurdle {
                        width:1px;
                        height:16px;
                        display: inline-block;
                        background: #DCDFE6;
                        margin: 0 10px;
                        vertical-align: sub;
                    }
                }
            }
            .af-right-button-box {
                padding: 8px 15px;
                background: #EBEEF5;
            }
            .pagination {
                margin-top: 30px;
                text-align: right;
            }
            .status-icon {
                width: 34px;
                height: 32px;
                line-height: 32px;
                text-align: center;
                background: #ECF5FF;
                border: 1px solid #D9ECFF;
                border-radius: 4px;
                &.is-active {
                    .iconfont {
                        color: #409EFF;
                    }
                }
            }
        }
    }
</style>


