<template>
    <div class="e-r-l-container">
        <div class="handle-area">
            <div class="flex1">
                <template v-if="!isUnEmployee">
                    <el-select v-model="clerkType" placeholder="选择类型" @change="reGetList" class="m-r-10">
                        <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>
                </template>
                <div class="block" v-else>
                    <span class="demonstration">离职日期</span>
                    <el-date-picker
                        v-model="fireDate"
                        type="daterange"
                        align="right"
                        value-format="yyyy-MM-dd"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        @change="selectDate"
                        :picker-options="pickerOptions2">
                    </el-date-picker>
                </div>
            </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",
    props: {
        isUnEmployee: {
            type: Boolean,
            default: false
        }
    },
    components: {
        listItem,
        handleDialog
    },
    data() {
        return {
            pickerOptions2: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                    picker.$emit('pick', [start, end]);
                    }
                }]
            },
            employeeList: [],
            pageNum: 1,
            pageSize: 20,
            sortType: "desc",
            sortColumn: "hireDate",
            statusList: ["全部", "正式", "试用", "离职"],
            typeLsit: ["全部", "全职", "兼职", "外包", "实习", "无类型"],
            clerkType: 0,
            clerkStatus: 0,
            total: 0,
            handleType: "turnPositive",
            typeTitle: "",
            dialogVisible: false,
            employeeObj: {},
            fireDate: [],
            startDate: "",
            endDate: ""
        };
    },
    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 isUnEmployee = ths.isUnEmployee;
            let url = isUnEmployee ? "/haoban-manage-web/record/find-fire-employee-record-page" : "/haoban-manage-web/record/find-on-work-employee-record-page"
            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,
                startDate: ths.startDate,
                endDate: ths.endDate
            };
            getRequest(url, params)
            .then(res => {
                console.log(res, "list");
                if (res.data.errorCode == 1) {
                    ths.employeeList = res.data.result.list;
                    ths.total = isUnEmployee ? res.data.result.total : res.data.result.pageInfo.total;
                } else {
                    ths.$message.error({
                        message: res.data.message
                    });
                }
            })
            .catch(e => {
                ths.$message({
                    message: e.message
                });
            });
        },
        selectDate(date) {
            console.log(date);
            if (!!date) {
                this.startDate = date[0];
                this.endDate = date[1];
            } else {
                this.startDate = "";
                this.endDate = "";
            }
            this.getEmloyeeList();
        }
    },
    beforeMount() {
        this.getEmloyeeList();
    },
    computed: {
        propList() {
            let isUnEmployee = this.isUnEmployee;
            return isUnEmployee ? ["headPic", "clerkName", "clerkPhone", "groupName", "clerkCode", "positionName", "clerkType", "hireDate", "fireDate", "fireReason", "handleUnEmployee"] : ["headPic", "clerkName", "clerkPhone", "groupName", "clerkCode", "positionName", "clerkType", "hireDate", "correctionDate", "handleEmployee"]
        }
    }
}
</script>
<style lang="scss">
.e-r-l-container {
    margin-top: 24px;
    padding: 24px;
    background: #fff;
    .handle-area {
        display: flex;
        .flex1 {
            flex: 1;
            display: flex;
            .demonstration {
                color: #606266;
                margin-right: 10px;
                font-size: 14px;
            }
        }
    }
    .list-table {
        margin-top: 22px;
    }
    .pagination {
        text-align: right;
        margin-top: 20px;
    }
}
</style>


