<template>
    <div class="employee-table">
        <el-table
            height="495"
            @selection-change="selectMember"
            @row-click="linkToDetail"
            :data="tableData">
                <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>
</template>
<script>
export default {
    name: "employee-table",
    props: {
        employeeList: {
            type: Array,
            default() {
                return [];
            }
        },
        headList: {
            type: Array,
            default() {
                return ["selection", "name", "phoneNumber", "positionName", "activationStatus"];
            }
        }
    },
    data() {
        return {
            tableData: []
        };
    },
    methods: {
        /**
         * table选择员工
         */
        selectMember(selection) {
            this.$emit("selectMember", selection);
        },
        /**
         * 跳转至员工详情
         */
        linkToDetail(row) {
            console.log(row);
            window.location.href = "#/employee?employeeClerkId="+row.employeeClerkId;
        }
    },
    mounted() {
        // let arr = [];
        // console.log( this.employeeList, " this.employeeList");
        // this.employeeList.forEach(clerk => {
        //     arr.push(clerk.ext.employeeClerk);
        // });
        // this.tableData = arr;
        let list = this.employeeList;
        let arr = [];
        console.log( list, " this.list");
        list.forEach(clerk => {
            clerk.ext.employeeClerk.sharedContactEmployeeStoreId = clerk.sharedContactEmployeeStoreId;
            arr.push(clerk.ext.employeeClerk);
        });
        this.tableData = arr;
    },
    watch: {
        employeeList(list) {
            let arr = [];
            console.log( list, " this.list");
            list.forEach(clerk => {
                clerk.ext.employeeClerk.sharedContactEmployeeStoreId = clerk.sharedContactEmployeeStoreId;
                arr.push(clerk.ext.employeeClerk);
            });
            this.tableData = arr;
        }
    }
};
</script>
<style lang="scss">
.el-table .cell .is-manager {
    display: inline-block;
    font-size: 10px;
    color: #fff;
    width:56px;
    height:13px;
    text-align: center;
    line-height: 15px;
    background:rgba(247,203,39,1);
    border-radius:2px;
}
.el-table tr {
    cursor: pointer;
}
</style>

