<template>
    <lj-win-common title="人员列表">

        <mu-paper :z-depth="3" slot="header_sub" style="background-color: white;">       
                <lj-searchbar hint="人员编号/姓名" @search="handleSearchbar"
                                v-model="bindingParms.keyword"
                                style="width: 100%;"/>
                <div>
                    <van-dropdown-menu>
                        <van-dropdown-item class="itemClass" :title="departTitle" ref="deRef" >
                            <van-cascader
                                :closeable="false"
                                v-model="cascaderValue"
                                title="请选择部门"
                                :options="departOption"
                                @close="show = false"
                                @change="onChange"
                                @finish="onFinish"
                            />
                            <div class="departClass">
                                <mu-button color="primary" @click="submitQueryParams" 
                                    style="margin-right:10px;">确认</mu-button>
                            </div>
                        </van-dropdown-item>
                        <van-dropdown-item v-model="value2" :options="sortOption" @change="itemChange"/>
                    </van-dropdown-menu>
                </div>       
        </mu-paper>

        <div slot="body" style="padding:1px 0">
            <mu-load-more @refresh="refresh" :refreshing="refreshing" :loading="loading" @load="load" :loaded-all="loadedAll">
                <div class="mxClass" v-for="item in empListshow" :key="item.empid">
                    <div class="showClass" style="display: flex;align-items:center;">
                        <div class="imgclass" >
                            <lj-img-vant v-if="item.filemd5" style="width: 20vw; height: 20vw;" :Round="true" fit="cover"
                                 :md5="item.filemd5"  />	
                            <div v-else>
                                <mu-avatar size="60">{{item.empname | strFilter}}</mu-avatar>
                            </div>
                                <!-- src="https://img01.yzcdn.cn/vant/cat.jpeg"			 -->
                        </div>
                        <div class="concentClass" @click="openEmp(item)">
                            <van-cell size="large" is-link style="padding:0;" :border="false">
                                <template #title>
                                    <span class="custom-title" style="font-size:16px;" >{{item.empname}}</span>
                                    <van-tag type="danger" style="font-size:10px;">{{item.empcode}}</van-tag>
                                </template>
                                <template #default>
                                    <van-tag type="primary">{{item.duty}}</van-tag>
                                </template>
                                <template #label>
                                    <span class="custom-title">{{item.rz_str}}</span>
                                    <van-tag type="success ">{{item.age}}</van-tag>
                                    <div>{{item.departmentname}}</div>
                                </template>
                            </van-cell>
                        </div>
                    </div>
                </div>
            </mu-load-more>
        </div>
    </lj-win-common>
</template>

<script>
	import LjWinCommon from 'components/lj-win-common';
	import LjImgVant from "components/lj-img-vant";
    import LjSearchbar from "components/lj-searchbar";

	export default {
		components: {
			LjWinCommon,
			LjImgVant,
            LjSearchbar,
		},
		data() {
			return {
                show: false,
                cascaderValue: "",
                value2: 'a',
                departOption: [
                    {text: "全部",value: -1}
                ],
                sortOption: [
                    { text: '默认排序', value: 'a' },
                    { text: '年龄排序', value: 'b' },
                    { text: '入职排序', value: 'c' },
                ],
				token:'',
                refreshing:false,
                loading:false,
                loadedAll:false,
                currentPageIndex:1,
                currentPageSize:20,
                currentRequestBody:{},
                empListshow:[],
                bindingParms: {keyword: ""},
                departParms:{},
                departTitle : "部门选择",
                departmentid: 0,
                departDic :{},
                selectValue:{
                    departTitle: "部门选择",
                    departmentid: 0
                }
                
			}
		},
		created() {
            this.token = $lj.getStorage("token");
		},
		mounted() {
            this.departSelect();
            this.refresh();
		},
		methods: {
			refresh() {
                this.loadedAll = false;
                this.empListshow = [];
                this.currentPageIndex = 1;
                this.value2 = 'a';
                this.currentRequestBody = {
                    token : $lj.getStorage("token"),
                    departmentid: this.departmentid,
                    pageindex : this.currentPageIndex,
                    pagesize : this.currentPageSize
                }
                this.currentRequestBody = Object.assign(this.currentRequestBody,this.bindingParms,this.departParms);
                let self = this;
                $lj.postLJRequest("GetL1EmpInfoList", this.currentRequestBody, function (ret) {
                    if (ret) {
                        if (ret.empList.length === 0) {
                            $lj.toast("未查找到相关记录，请更改搜索条件后重试");
                            return;
                        }
                        self.addList(ret.empList);

                    }
                }) 
			},
            handleSearchbar(){
               this.refresh(); 
            },
            load() {
				this.currentPageIndex += 1;
                this.currentRequestBody.pageindex = this.currentPageIndex;
                this.loading = true;
                let self = this;
                $lj.postLJRequest('GetL1EmpInfoList', this.currentRequestBody, function (ret) {
                    self.loading = false;
                    if (ret) {
                    	if (ret.empList) {
                    		if (ret.empList.length > 0) {
                    			self.addList(ret.empList);
                    		} else {
	                            self.loadedAll = true;
                    			$lj.toast('没有更多数据了');
                    		}
                    	}
                    }
                })
			},
            addList(Listmx){
                this.empListshow = this.empListshow.concat(Listmx);
            },
            itemChange(value){
                switch (value) {
                    case 'a':
                        this.empListshow.sort(function (object1, object2) {
                            return object1.empid - object2.empid;
                        });
                        break;
                    case 'b':
                        this.empListshow.sort(function (object1, object2) {
                            return object1.age - object2.age;
                        });
                        break;
                    case 'c':
                        this.empListshow.sort(function (object1, object2) {
                            return object1.zzday - object2.zzday;
                        });
                        break;
                    default:
                        break;
                }
            },

            onChange(value, selectedOptions, tabIndex ){
                this.selectValue.departTitle = this.departDic[value.value];
                this.selectValue.departmentid = value.value;

            },
            onFinish(value){

            },
            departSelect(){
                let self = this;
                var body = {
                    token: this.token,
                    RecurionType:1
                }
                $lj.postLJRequest("GetL1Department", body , function (ret) {
                    if (ret.DepartRecurionList) {
                        self.departOption = self.departOption.concat(ret.DepartRecurionList);
                    }

                    if(ret.DepartmentList){  
                        self.departDic[-1] = "全部"; 
                        ret.DepartmentList.forEach(element => {
                            self.departDic[element.departmentid] = element.departmentname;
                        });
                    }
                }) 
            },
            submitQueryParams(){
                this.show = false;
                this.$refs.deRef.toggle();

                this.departTitle = this.selectValue.departTitle;
                this.departmentid = this.selectValue.departmentid;

                this.$nextTick(() => {
                    this.refresh();
                })
            },
            openEmp(item){
                $lj.openWin("empinfo-mx", {
                    empid:item.empid,
                    empname:item.empname,
                    empcode:item.empcode
                });
            }
		}
	}

</script>

<style>
.mxClass{
    border-radius:20px;
    margin: 10px 10px;
    background-color:white;
    padding: 5px 2px 2px;
}
.imgclass{
    margin-left: 5px;
}
.concentClass{
    /* background-color:cornsilk; */
    margin-left: 5px;
    height: 20vw;
    width: 72%;
}
.itemClass{
    position: relative;
}
.departClass{
    position:absolute;
    right:10px;
    top: 10px;
}
</style>