<template>
    <div class="e-r-l-container">
        <div class="handle-area">
            <div class="flex1">
                <el-select v-model="clerkType" placeholder="选择类型" @change="reGetList">
                    <el-option
                        v-for="(type, index) in typeLsit"
                        :key="index"
                        :label="type"
                        :value="index">
                    </el-option>
                </el-select>
                <el-select v-model="clerkStatus" placeholder="选择状态" @change="reGetList">
                    <el-option
                        v-for="(type, index) in statusList"
                        :key="index"
                        :label="type"
                        :value="index">
                    </el-option>
                </el-select>
            </div>
            <el-button type="primary">导出<i class="el-icon-upload el-icon--right"></i></el-button>
        </div>
        <el-table
            class="list-table"
            height="490px"
            :data="employeeList"
            @sort-change="sortList"
            :default-sort="{prop: 'hireDate', order: 'descending'}"
            >
            <template v-for="prop in propList">
                <list-item :item="prop" :key="prop" @callHandle="callHandle"></list-item>
            </template>
        </el-table>
        <el-pagination
            class="pagination"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[20, 40, 60, 80]"
            :page-size="pageSize"
            :current-page="pageNum"
            layout="total, sizes, prev, pager, next"
            :total="total">
        </el-pagination>
        <el-dialog
            :title="typeTitle"
            :visible.sync="dialogVisible"
            width="480px">
           <handle-dialog :employee="employeeObj" :handleType="handleType" :typeTitle="typeTitle" @handleSuccess="handleSuccess"></handle-dialog>
        </el-dialog>
    </div>
</template>
<script>
import { getRequest, postRequest, postJsonRequest } from '@/api/api';
import listItem from "components/employeeRecord/listItem";
import handleDialog from "components/employeeRecord/handleDialog";
export default {
    name: "employeeRecordList",
    components: {
        listItem,
        handleDialog
    },
    data() {
        return {
            employeeList: [],
            pageNum: 1,
            pageSize: 20,
            sortType: "desc",
            sortColumn: "hireDate",
            statusList: ["全部", "正式", "试用", "离职"],
            typeLsit: ["全部", "全职", "兼职", "外包", "实习", "无类型"],
            clerkType: 0,
            clerkStatus: 0,
            total: 0,
            propList: ["headPic", "clerkName", "clerkPhone", "groupName", "clerkCode", "positionName", "clerkType", "hireDate", "correctionDate", "handleEmployee"],
            handleType: "turnPositive",
            typeTitle: "",
            dialogVisible: false,
            employeeObj: {}
        };
    },
    methods: {
        handleSuccess() {
            this.dialogVisible = false;
            this.getEmloyeeList();
        },
        callHandle(obj, type, typeTitle) {
            this.handleType = type;
            this.employeeObj = obj;
            this.typeTitle = typeTitle;
            this.dialogVisible = true;
        },
        handleSizeChange(val) {
            this.pageSize = val;
            this.getEmloyeeList();
        },
        handleCurrentChange(val) {
            this.pageNum = val;
            this.getEmloyeeList();
        },
        sortList(obj) {
            console.log(obj);
            this.sortColumn = obj.prop,
            this.sortType = obj.order == "descending" ? "desc" : "asc";
            this.getEmloyeeList();
        },
        reGetList() {
            this.getEmloyeeList();
        },
        getEmloyeeList() {
            let ths = this;
            let params = {
                pageNum: ths.pageNum,
                pageSize: ths.pageSize,
                sortType: ths.sortType,
                clerkStatus: ths.clerkStatus == 0 ? "" : ths.clerkStatus,
                sortColumn: ths.sortColumn,
                clerkType: ths.clerkType == 0 ? "" : ths.clerkType
            };
            getRequest("/haoban-manage-web/record/find-on-work-employee-record-page", params)
            .then(res => {
                console.log(res, "list");
                if (res.data.errorCode == 1) {
                    ths.employeeList = res.data.result.list;
                    ths.total = res.data.result.pageInfo.total;
                } else {
                    ths.$message.error({
                        message: res.data.message
                    });
                }
            })
            .catch(e => {
                ths.$message({
                    message: e.message
                });
            });
        }
    },
    beforeMount() {
        this.getEmloyeeList();
    }
}
</script>
<style lang="scss">
.e-r-l-container {
    margin-top: 24px;
    padding: 24px;
    background: #fff;
    .handle-area {
        display: flex;
        .flex1 {
            flex: 1;
        }
    }
    .list-table {
        margin-top: 22px;
    }
    .pagination {
        text-align: right;
        margin-top: 20px;
    }
}
</style>


