<template>
    <div class="e-r-l-container">
        <div class="handle-area">
            <div class="flex1">
                <el-button @click="callSelector" :disabled="disabled" style="margin-right: 10px; height:32px;">行政架构选人</el-button>
                <el-button @click="callStoreSelector" style="margin-right: 10px; height:32px;">门店架构选人</el-button>
                <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>
                <el-input v-model="searchParam" placeholder="请输入姓名或手机号" style="width: 218px;margin-left:10px;" @keyup.enter.native="searchFn" clearable @clear="searchFn"></el-input>
            </div>
            <el-button type="primary" @click="showExportSet">导出<i class="el-icon-upload el-icon--right"></i></el-button>
        </div>
        <ul class="selector-selected-list" v-if="selectionList.length > 0">
            <template v-for="(sld, index) in selectionList">
                <li :key="index + sld.id + sld.label" class="sld">{{sld.label}} <i class="el-icon-close" @click="delSld(sld, sld.isStoreGroup)"></i></li>
            </template>
            <li class="sld tip">共筛选出{{total}}人</li>
        </ul>
        <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>
        <vue-select-store ref="storeSelector" @handleSelectedList="handleStoreSelectedList"></vue-select-store>
        <vue-select-employee ref="departmentSelector" @handleSelectedList="handleSelectedList" :changed="changed" :treeData="treeData" :defaultSelection="adDefaultSelection"></vue-select-employee>
    </div>
</template>
<script>
import { getRequest, postRequest, postJsonRequest } from '@/api/api';
import listItem from "components/employeeRecord/listItem";
import handleDialog from "components/employeeRecord/handleDialog";
import vueSelectStore from "components/common/vueSelectStore";
import vueSelectEmployee from "components/common/vueSelectEmployee";
export default {
    name: "employeeRecordList",
    props: {
        isUnEmployee: {
            type: Boolean,
            default: false
        }
    },
    components: {
        listItem,
        handleDialog,
        vueSelectStore,
        vueSelectEmployee
    },
    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: "",
            showSelector: true,
            searchParam: "",
            departMentSet: {},
            storeSet: {},
            treeData: {},
            selectionList: [],
            disabled: true,
            chooseClerkIdList: [],
            chooseGroupIdList: [],
            chooseStoreIdList: [],
            adList: [],
            adDefaultSelection: [],
            stList: [],
            changed: 0
        };
    },
    methods: {
        searchFn() {
            this.getEmloyeeList();
        },
        getGroupData() {
            let _this = this;
            let params = {
                isStoreGroup: 0
            };
            getRequest("/haoban-manage-web/dept/deptListForCompany", params)
            .then(res => {
                let treeData = [];
                let personData = [];
                if (res.data.errorCode == 1) {
                    treeData = res.data.result.departmentList || [];
                    personData = res.data.result.searchList || []
                }
                _this.treeData = {
                    treeData,
                    personData
                };
                _this.disabled = false;
            })
            .catch(e => {
            });
        },
        callSelector() {
            this.$refs.departmentSelector.treeSet.dialogVisible = true;
        },
        callStoreSelector() {
            this.$refs.storeSelector.treeSet.dialogVisible = true;
        },
        showExportSet() {
            let isUnEmployee = this.isUnEmployee;
            if (!isUnEmployee) {
                this.$emit("showExportSetFn");
            } else {
                let  local = window.location.origin;
                if (local.indexOf('localhost')!= -1) {
                    local = 'http://www.gicdev.com';
                }
                let ths = this;
                let params = {
                    pageNum: ths.pageNum,
                    chooseClerkIdList: ths.chooseClerkIdList.join(","),
                    chooseGroupIdList: ths.chooseGroupIdList.join(","),
                    chooseStoreIdList: ths.chooseStoreIdList.join(","),
                    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,
                    searchParam: ths.searchParam
                };
                let clerkType = ths.clerkType == 0 ? "" : ths.clerkType;
                location.href = local + "/haoban-manage-web/record/export-fire-employee-record?clerkType=" + clerkType + "&sortType=" + ths.sortType + "&sortColumn=" + ths.sortColumn + "&startDate=" + ths.startDate + "&endDate=" + ths.endDate + "&searchParam=" + ths.searchParam + "&chooseClerkIdList=" + ths.chooseClerkIdList.join(",") + "&chooseGroupIdList=" + ths.chooseGroupIdList.join(",") + "&chooseStoreIdList=" + ths.chooseStoreIdList.join(",");
            }
        },
        handleSelectedList(list) {
            this.adDefaultSelection = list;
            this.adList = list;
            let arr = this.selectionList.concat(list);
            this.selectionList = arr;
            this.formatSelectionList(arr);
        },
        handleStoreSelectedList(list) {
            this.stList = list;
            let arr = this.selectionList.concat(list);
            this.selectionList = arr;
            this.formatSelectionList(arr);
        },
        formatSelectionList(list) {
            let newList = this.unique(list);
            this.selectionList = newList;
            let ths = this;
            if (!!newList.length) {
                ths.chooseClerkIdList = [];
                ths.chooseStoreIdList = [];
                ths.chooseGroupIdList = [];
                newList.forEach(li => {
                    if (li.employeeClerkId) {
                        ths.chooseClerkIdList.push(li.employeeClerkId);
                    } else if (li.storeId) {
                        ths.chooseStoreIdList.push(li.storeId);
                    } else if (li.groupId) {
                        ths.chooseGroupIdList.push(li.groupId);
                    }
                });
                ths.getEmloyeeList();
            }
        },
        unique(arr){
            let unique = {};
            arr.forEach(item => {
                unique[JSON.stringify(item)] = item;// 键名不会重复
            })
            arr = Object.keys(unique).map((u) => { // Object.keys()返回对象的所有键值组成的数组，map方法是一个遍历方法，返回遍历结果组成的数组.将unique对象的键名还原成对象数组
                return JSON.parse(u);
            });
            return arr;
        },
        delSld(sld, isStoreGroup) {
            console.log(isStoreGroup);
            let ths = this;
            let idx = this.selectionList.indexOf(sld);
            this.selectionList.splice(idx, 1);
            this.formatSelectionList(this.selectionList);
            ths.adList.forEach(ad => {
                if (ad.id == sld.id) {
                    console.log(ad, ths.adList.indexOf(ad));
                    ths.adList.splice(ths.adList.indexOf(ad), 1);
                }
            });
            ths.changed += 1;
            ths.adDefaultSelection =  ths.adList.slice(0);
        },
        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) {
            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,
                chooseClerkIdList: ths.chooseClerkIdList.join(","),
                chooseGroupIdList: ths.chooseGroupIdList.join(","),
                chooseStoreIdList: ths.chooseStoreIdList.join(","),
                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,
                searchParam: ths.searchParam
            };
            getRequest(url, params)
            .then(res => {
                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) {
            if (!!date) {
                this.startDate = date[0];
                this.endDate = date[1];
            } else {
                this.startDate = "";
                this.endDate = "";
            }
            this.getEmloyeeList();
        }
    },
    beforeMount() {
        this.getEmloyeeList();
        this.getGroupData();
    },
    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;
            }
        }
    }
    .selector-selected-list {
        padding: 20px 0 0;
        display: flex;
        flex-wrap: wrap;
        .sld {
            padding: 8px 10px;
            box-sizing: border-box;
            background:rgba(244,244,245,1);
            border:1px solid rgba(233,233,235,1);
            border-radius:4px;
            font-size:12px;
            font-weight:400;
            color:rgba(144,147,153,1);
            margin-right: 10px;
            .el-icon-close {
                cursor: pointer;
            }
            &.tip {
                border: none;
                background: none;
            }
        }
    }
    .list-table {
        margin-top: 22px;
    }
    .pagination {
        text-align: right;
        margin-top: 20px;
    }
}
</style>


