<template>
    <lj-win-common title="责任主体选择" ref="baseWin">
        <template slot="body">
            <van-tabs v-model="activeTab" @click="handleClickTab">
                <van-tab title="员工">
                    <div ref="header_sub">
                        <lj-searchbar-pro
                            ref="searchbarPro"
                            :keyword="keyword"
                            apiName=""
                            v-on:update:keyword="emitChangeKeyword"
                            hint="输入员工名称/编号进行查找"
                            @search="handleSearchbar"
                            @cancel="handleSearchbarCancel"
                            @blurSearch="handleSearchBlur"
                        >
                        </lj-searchbar-pro>
                    </div>
                    <!-- <lj-grid :tableData="emplist" :columns="unifiedColumns" :editing="ifedit" @cell-click="handleGridCellClick" /> -->
                </van-tab>
                <van-tab title="工作中心">
                    <!-- <lj-grid :tableData="workgroupList" :columns="unifiedColumns" :editing="ifedit" @cell-click="handleGridCellClick" /> -->
                </van-tab>
                <van-tab title="工组">
                    <!-- <lj-grid :tableData="wrkgrpList" :columns="unifiedColumns" :editing="ifedit" @cell-click="handleGridCellClick" /> -->
                </van-tab>
                <van-tab title="部门">
                    <!-- <lj-grid :tableData="deptList" :columns="unifiedColumns" :editing="ifedit" @cell-click="handleGridCellClick" /> -->
                </van-tab>
            </van-tabs>

            <lj-grid :tableData="unifiedDatas" :columns="unifiedColumns" :editing="ifedit" @cell-click="handleGridCellClick" />

            <van-action-sheet v-model="showActionSheet" title="已选行">
                <lj-grid :tableData="selectedItems" :columns="unifiedColumns" :editing="ifedit" @cell-click="handleGridCellClick" />
            </van-action-sheet>
        </template>
        <template slot="footer">
            <van-row type="flex" justify="center" align="center">
                <van-col span="2"></van-col>
                <van-col span="4" class="footer-left-badge" @click="showActionSheet = true">
                    <van-badge :content="selectedItems.length">
                        <span class="footer-badge">已选</span>
                    </van-badge>
                </van-col>
                <van-col span="18">
                    <van-button block type="info" @click="handleSubmit">选择</van-button>
                </van-col>
            </van-row>
        </template>
    </lj-win-common>
</template>

<script>
    import LjWinCommon from "components/lj-win-common";
    import LjGrid from "components/lj-grid";
    import LjSearchbarPro from 'components/lj-searchbar-pro';
    import LjBagde from "components/L1APP/pda/lj-bagde";
    export default {
        components: {
            LjWinCommon,
            LjGrid,
            LjSearchbarPro,
            LjBagde
        },
        data() {
            return {
                winMode: "",
                activeTab: 0,
                ifedit: true,
                empColumn: [
                    {label: "选", property: "checked",type: "selection",editable: true,width: 70,fixed: true},
                    {label: "所在部门", property: "departmentname",width: screen.width * 0.2,editable:false},
                    {label: "工号", property: "empcode",editable:false},
                    {label: "姓名", property: "empname",width: screen.width * 0.2,editable:false},
                    {label: "性别", property: "sex",width: screen.width * 0.2,editable:false},
                    {label: "出生日期", property: "Birthday", width: screen.width * 0.2,editable:false,slot: this.formatDateSlotRender},
                    {label: "入职日期", property: "Joindate", width: screen.width * 0.2,editable:false,slot: this.formatDateSlotRender},
                    {label: "职务", property: "duty", width: screen.width * 0.2,editable:false},
                    {label: "部门", property: "handtype", width: screen.width * 0.2,editable:false}
                ], // 员工
                workgroupColumn: [
                    {label: "选", property: "checked",type: "selection",editable: true,width: 70,fixed: true},
                    {label: "工作中心号", property: "workgroupcode",width: screen.width * 0.2,editable:false},
                    {label: "工作中心\r\n名称", property: "workgroupname",editable:false},
                    {label: "所属工段", property: "wrkgrpname",width: screen.width * 0.2,editable:false},
                    {label: "工段主管\r\n工号", property: "empcode",width: screen.width * 0.2,editable:false},
                    {label: "工段主管\r\n姓名", property: "empname", width: screen.width * 0.2,editable:false},
                    {label: "摘要", property: "workshop", width: screen.width * 0.2,editable:false},
                    {label: "所属车间", property: "wkpname", width: screen.width * 0.2,editable:false}
                ], // 工作中心
                wrkgrpColumn: [
                    {label: "选", property: "checked",type: "selection",editable: true,width: 70,fixed: true},
                    {label: "工段号", property: "wrkgrpcode",width: screen.width * 0.2,editable:false},
                    {label: "工段名称", property: "wrkgrpname",editable:false},
                    {label: "工段主管\r\n工号", property: "empcode",width: screen.width * 0.2,editable:false},
                    {label: "工段主管\r\n姓名", property: "empname", width: screen.width * 0.2,editable:false},
                    {label: "所属车间", property: "wkpname", width: screen.width * 0.2,editable:false}
                ], // 工组
                deptColumn: [
                    {label: "选", property: "checked",type: "selection",editable: true,width: 70,fixed: true},
                    {label: "部门编号", property: "deptcode",width: screen.width * 0.2,editable:false},
                    {label: "部门名称", property: "departmentname",editable:false},
                    {label: "负责人", property: "gw_empname",width: screen.width * 0.2,editable:false},
                    {label: "部门详细\r\n信息", property: "handtype",width: screen.width * 0.2,editable:false}
                ], // 部门
                keyword: "",
                selectedItems: [],
                showActionSheet: false,
                unifiedColumns: [],
                unifiedDatas: []
            }
        },
        created() {
            let pageParm = $lj.getPageParam();
            if (pageParm.type) {
                this.activeTab = pageParm.type || 0;
            }

            this.handleClickTab(this.activeTab);
        },
        methods: {
            handleClickTab(index, title) {
                // 切换页，清除已选行
                this.selectedItems = [];
                // 获取相关页数据
                if(index === 0) this.handleGetEmpList();
                else if(index === 1) this.handleGetWorkgroupList();
                else if(index === 2) this.handleGetScWorkGroupList();
                else if(index === 3) this.handleGetDeptList();
            },
            handleGetEmpList() {
                let self = this;
                $lj.postLJRequest("GetL1EmpInfoList", {
                    token: $lj.getStorage("token"),
                    keyword: this.keyword
                }, function (ret) {
                    self.initValue(ret.empList);
                })
            },
            handleGetWorkgroupList() {
                let queryParams = {
                }
                let self = this;
                $lj.postLJRequest("CommonDynamicSelect", {
                    token: $lj.getStorage("token"),
                    dsname: "app_event_pic_group_workgroup_ch",
                    queryparams: queryParams
                }, function (ret) {
                    if(ret.datatable) {
                        self.initValue(ret.datatable);
                    }
                })
            },
            handleGetScWorkGroupList() {
                let queryParams = {
                }
                let self = this;
                $lj.postLJRequest("CommonDynamicSelect", {
                    token: $lj.getStorage("token"),
                    dsname: "app_event_pic_group_sc_wrkgrp_ch",
                    queryparams: queryParams
                }, function (ret) {
                    if(ret.datatable) {
                        self.initValue(ret.datatable);
                    }
                })
            },
            handleGetDeptList() {
                let queryParams = {
                }
                let self = this;
                $lj.postLJRequest("CommonDynamicSelect", {
                    token: $lj.getStorage("token"),
                    dsname: "app_event_pic_group_dept_ch",
                    queryparams: queryParams
                }, function (ret) {
                    if(ret.datatable) {
                        self.initValue(ret.datatable);
                    }
                })
            },
            handleSubmit() {
                let extra = {
                    type: this.activeTab,
                    list: this.selectedItems
                };

                if(!this.checkListCanChosen(extra.list)) return;

                $lj.sendEvent("responsible_entity_select", extra);
                $lj.closeWin();
            },
            formatDateSlotRender(h, {row, column, rowIndex}) {
                let self = this;
                return h('span', {
                    domProps: {
                        innerHTML: $lj.dateformat(new Date(row[column.property]),'yyyy-MM-dd')
                    }
                })
            },
            /**回调绑定值 */
            emitChangeKeyword(val) {
                this.keyword = val;
            },
            /**搜索 */
            handleSearchbar(item, ifscan) {
                this.handleGetEmpList();
            },
            /**取消搜索 */
            handleSearchbarCancel(item) {
                this.handleGetEmpList();
            },
            /**失去聚焦搜索条 */
            handleSearchBlur() {
                setTimeout(() => {
                    this.$refs.baseWin.initStyle();
                }, 200);
            },
            checkListCanChosen(list) {
                if(this.activeTab == 0) return true;
                for(let item of list) {
                    if(item.gw_empid <= 0) {
                        switch(this.activeTab) {
                            case 1:
                                $lj.toast(`${item.workgroupname}的负责人未设置，请先到工组资料进行设置!`);
                                break;
                            case 2:
                                $lj.toast(`${item.wrkgrpname}的负责人未设置，请先到工组资料进行设置!`);
                                break;
                            case 3:
                                $lj.toast(`${item.departmentname}的负责人未设置，请先到部门资料进行设置!`);
                                break;
                            default:
                                break;
                        }
                        return false;
                    }
                }

                return true;
            },
            handleGridCellClick({column,row,index}) {
                if (!column) {
                    return;
                }

                if(column.property == "checked") {
                    if (row.checked) {
                        this.handleRowChecked(row);
                    } else {
                        this.handleRowUnChecked(row);
                    }
                }
            },
            handleRowChecked(row) {
                this.selectedItems.push(row);
            },
            handleRowUnChecked(row) {
                let itemsTemp = [];
                for (let item of this.selectedItems) {
                    if (item !== row) {
                        itemsTemp.push(item);
                    }
                }
                this.selectedItems = itemsTemp;
            },
            /**
             * 提升勾选行位置
             * @param {*} row 
             */
            shiftData(row,rowIndex) {
                let key = ""
                if(this.activeTab === 0) {
                    key = "empid";
                }
                else if(this.activeTab === 1) {
                    key = "workgroupid";
                }
                else if(this.activeTab === 2) {
                    key = "wrkgrpid";
                }
                else if(this.activeTab === 3) {
                    key = "departmentid";
                }
                // 移除已选中的行  
                const index = this.unifiedDatas.findIndex(r => r[key] === row[key]);
                console.log("index :>>>",index);
                if (index !== -1) {
                    this.$set(this.selectedItems,rowIndex,this.unifiedDatas[index]);
                    this.$set(this.unifiedDatas[index],"checked",true);
                }
            },
            initValue(list) {
                // 更新column
                if(this.activeTab === 0) {
                    this.unifiedColumns = this.empColumn;
                }
                else if(this.activeTab === 1) {
                    this.unifiedColumns = this.workgroupColumn;
                }
                else if(this.activeTab === 2) {
                    this.unifiedColumns = this.wrkgrpColumn;
                }
                else if(this.activeTab === 3) {
                    this.unifiedColumns = this.deptColumn;
                }
                // 更新data
                this.unifiedDatas = [...list];
                // 如果存在选中列表，则默认选中
                for(let index in this.selectedItems) {
                    this.shiftData(this.selectedItems[index],index);
                }
            }
        },
        computed: {

        }
    }
</script>
<style lang="less" scoped>
    // .footer-left-badge {
    //     margin-left: 10px;
    // }
    
    .footer-badge {
        font-size: 16px;
    }

</style>