<template>
    <div class="mta-role-import">
        <el-dialog v-if="showDialogType===1"
                   :title="dialogTitleText"
                   :userRoleId="userRoleId"
                   class="mta-dialog"
                   :visible.sync="showDialog"
                   :show-close="true"
                   @close="dialogClose"
                   :close-on-click-modal="false"
                   center
                   :width="dlWidth">
            <div class="mta-role-import-wrap ">
                <div :class="{'extendTree_width': isExtendTree, 'extendTree_position': isRemovePosition}"
                     class="addUserInfo-body-left response-tree-div flex-column"
                     style="border: 1px #CCC solid;padding-right:5px;">
                        <span style="width: 98%; text-align: right;display: inline-block">
                            <i @click="handleExtentTree" class="el-icon-arrow-left" v-if="isExtendTree"></i>
                            <i @click="handleExtentTree" class="el-icon-arrow-right" v-else></i>
                        </span>
                    <perfect-scrollbar>
                        <mta-editable-tree
                                :allowDropStatue="true"
                                :draggable="false"
                                :newData="newUserData"
                                @handleClick="getHandleClick"
                                ref="orgTree"
                        ></mta-editable-tree>
                    </perfect-scrollbar>
                </div>
                <div class="mta-ur-table addUserInfo-body-right" :class="{extendTreeWrapdialogTable: isRemovePosition}">
                    <el-row class="mta-UE-first-row" type="flex">
                        <el-col>
                            <!--用户名-->
                            <div>
                                <el-input
                                        placeholder="请输入查询用户名"
                                        class="response-dialog-input" v-model="searchUserName"></el-input>
                                <el-input
                                        placeholder="请输入查询姓名"
                                        class="response-dialog-input" v-model="searchRealName"></el-input>
                                <!--查询-->
                            </div>
                            <el-button @click="searchUsers" class="response-small-btn" size="small" type="primary"> 查询
                            </el-button>
                        </el-col>
                    </el-row>
                    <el-row class="response-dialog-row" type="flex">
                        <el-col :span="24">
                            <el-table
                                    :data="UsersData"
                                    border
                                    height="100"
                                    :stripe="true"
                                    ref="usersTable"
                                    header-row-class-name="headerBackgroundColor"
                                    @selection-change="tableSelectChange"
                                    class="response-simple-table"
                                    style="width: 100%">
                                <el-table-column
                                        fixed
                                        type="selection"
                                        width="50">
                                </el-table-column>
                                <el-table-column
                                        prop="userName"
                                        label="用户名"
                                        :show-overflow-tooltip="true"
                                        min-width="125">
                                </el-table-column>
                                <el-table-column
                                        prop="realName"
                                        label="真实姓名"
                                        :show-overflow-tooltip="true"
                                        min-width="110">
                                </el-table-column>
                                <el-table-column
                                        prop="orgName"
                                        label="部门名称 "
                                        :show-overflow-tooltip="true"
                                        min-width="120">
                                </el-table-column>
                                <el-table-column
                                        prop="positionName"
                                        label="职位名称"
                                        :show-overflow-tooltip="true"
                                        min-width="110">
                                </el-table-column>
                                <!--<el-table-column
                                        label="操作"
                                        min-width="200">
                                    <template slot-scope="scope">
                                        <el-button @click="ToUserDelete(scope.row)" type="text">移除</el-button>
                                    </template>
                                </el-table-column>-->
                            </el-table>
                            <el-pagination
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    :current-page="nowPage"
                                    :page-sizes="[10, 50, 100]"
                                    :page-size="pageSize"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    class="response-el-pagination"
                                    :total.sync="totalPageAdd">
                            </el-pagination>
                        </el-col>
                    </el-row>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleCancel">取 消</el-button>
                <el-button type="primary" @click="SaveAddUser">确 定</el-button>
            </span>
        </el-dialog>
        <!--dialog2待使用-->
        <el-dialog v-if="showDialogType===2"
                   :title="dialogTitleText"
                   :userRoleId="userRoleId"
                   class="mta-dialog"
                   :visible.sync="showDialog"
                   :requestData="requestData"
                   :show-close="true"
                   @close="dialogClose"
                   :close-on-click-modal="false"
                   center
                   :width="dlWidth">

            <h2>待使用</h2>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleCancel">取 消</el-button>
                <el-button type="primary" @click="SaveAddUser">确 定</el-button>
            </span>
        </el-dialog>
        <!-- <el-dialog
                 class="BatchFailureDL"
                 title=""
                 :close-on-click-modal="false"
                 :visible.sync="BatchFailureDLShow"
                 width="500px"
                 center
         >
             <div class="be_careful"><i></i>你确定要将该人员移除么？</div>
             <span slot="footer" class="dialog-footer">
                 <el-button @click="BatchFailureDLShow = false">取 消</el-button>
                 <el-button type="primary" @click="ToSaveUserDelete">确 定</el-button>
             </span>
         </el-dialog>-->
    </div>
</template>

<script>
    //组件说明
    import MtaEditableTree
                                from '../../../../components/management/Layout/EditableTreeOrg/EditableTree.vue';
    import {
        getOrganizationListTree,
    }
                                from '@/api/organizational';
    import {
        getUserAddList,
        getUserRoleAdd,
        getUserRoleDelete,
    }                           from '@/api/userRoles';
    import {
        getAdminUserList,
    }                           from '@/api/user.js';
    import { mapGetters }       from 'vuex';
    import { PerfectScrollbar } from 'vue2-perfect-scrollbar';


    export default {
        name:       'AddUserImport',
        data() {
            return {
                screenWidth:      0, // 监听 页面尺寸
                isExtendTree:     false, // 展开树容器
                isRemovePosition: false, // 移除定位
                timer1:           null,
                searchUserName:   '',//查询用户名
                searchRealName:   '',//查询真实姓名
                //UsersData:   [],//表格
                userSelectArr:    [],//表格选中
                nowPage:          1,//分页
                pageSize:         10,
                //totalPage:          0,
                newUserData:      [],//树数据
                treeSelectData:   '',//树
                //BatchFailureDLShow: false,//删除弹窗
                //diaRoleId:   '',//删除-RoleId
                //delUserId:   '',//删除-UserId
                showDialog:       this.dialogVisible,
                curOrgId:         0,//


            };
        },
        props:      {
            //弹窗显隐 flag
            dialogVisible:   {
                type:    Boolean,
                require: true,
            },
            // 1为模版下载 2为 试题批量导入
            showDialogType:  {
                type:    Number,
                default: 1,
            },
            //入参 默认fileUrl
            requestData:     {
                type:    Array,
                default: () => [],
            },
            UsersData:       {
                type:    Array,
                default: () => [],
            },
            // 弹窗title  文字描述
            dialogTitleText: {
                type:    String,
                default: '新增人员',
            },
            //弹窗宽度
            dlWidth:         {
                type:    String,
                default: '70%',
            },
            // 1为模版下载 2为 试题批量导入
            userRoleId:      {
                type:    Number,
                default: 0,
            },
            totalPageAdd:    {
                type:    Number,
                default: 0,
            },
        },
        components: {
            MtaEditableTree,
            PerfectScrollbar
        },
        computed:   {
            ...mapGetters([
                              'getAuth',
                          ]),
        },
        methods:    {
            // 清理时间 timer1
            clearTimer1Fun() {
                if (this.timer1) {
                    clearTimeout(this.timer1);
                    this.timer1 = null;
                }
            },
            // 初始化 tree 展开状态
            initTreeExtandStatu() {
                this.screenWidth = 0; // 监听 页面尺寸
                this.isExtendTree = false; // 展开树容器
                this.isRemovePosition = false; // 移除定位
                // 清理时间
                this.clearTimer1Fun();
            },
            handleExtentTree() {
                this.isExtendTree = !this.isExtendTree;
                // console.log(this.$refs.fullscreen);
            },
            addShijuanFenlei() {
                this.lianxiTypeVisible = true;
                this.setTreeExtends();
                this.getkaoShiClassifyListFun();
            },
            //查询按钮
            searchUsers() {
                this.nowPage = 1;
                const option = {
                    page:     this.nowPage,
                    size:     this.pageSize,
                    realName: this.searchRealName,
                    userName: this.searchUserName,
                    roleId:   this.userRoleId,
                    orgId:    this.curOrgId,
                };
                this.getUserAddListData(option);
            },
            //分页
            handleSizeChange(val) {
                this.pageSize = val;
                // 参数获取
                const option = {
                    page:     this.nowPage,
                    size:     this.pageSize,
                    realName: this.searchRealName,
                    userName: this.searchUserName,
                    roleId:   this.userRoleId,
                    orgId:    this.curOrgId,
                };
                this.getUserAddListData(option);
            },
            handleCurrentChange(val) {
                this.nowPage = val;
                const option = {
                    page:     this.nowPage,
                    size:     this.pageSize,
                    realName: this.searchRealName,
                    userName: this.searchUserName,
                    roleId:   this.userRoleId,
                    orgId:    this.curOrgId,
                };
                this.getUserAddListData(option);
            },
            // 树点击事件
            getHandleClick(NewData) {
                this.treeSelectData = NewData;
                this.curOrgId = NewData.data.id;
                this.searchUserName = '';
                this.searchRealName = '';
                const option = {
                    page:     this.nowPage,
                    size:     this.pageSize,
                    realName: this.searchRealName,
                    userName: this.searchUserName,
                    roleId:   this.userRoleId,
                    orgId:    this.curOrgId,
                };

                this.getUserAddListData(option);

            },
            //树
            getOrganizationTreeData() {
                const loading = this.loading();
                getOrganizationListTree()
                .then(res => {
                    if (res.code === 0) {
                        // const {otherTree: other, selfTree: self} = res.data;
                        const opt = [];

                        if (res.data.selfTree) {

                            if (this.getAuth.orgId === 0) {
                                opt.push(res.data.selfTree);
                            } else {
                                /**
                                 * @Time 2019/10/17
                                 * @Author wxy
                                 * @Description 此处children已和后台YJ确定只具备一个元素即children.length = 1
                                 */
                                opt.push(res.data.selfTree.children[0]);
                            }
                        }
                        this.newUserData = opt;
                    }

                });
                loading.close();
            },


            //新增人员-关闭弹窗
            dialogClose() {
                if (this.showDialogType === 1) {
                    this.$emit('update:dialogVisible', false);
                    this.searchUserName = '';//查询用户名
                    this.searchRealName = '';//查询真实姓名
                } else {
                    this.$emit('update:dialogVisible', false);
                    this.searchUserName = '';//查询用户名
                    this.searchRealName = '';//查询真实姓名
                }
                this.initTreeExtandStatu();
            },
            //新增人员-保存按钮
            SaveAddUser() {
                const opt = {
                    roleId:  this.userRoleId,
                    userIds: this.userSelectArr,
                };
                window.loading1 = this.$loading({
                                                    background: 'rgba(0, 0, 0, 0.7)',
                                                });
                getUserRoleAdd(opt).then(res => {
                    if (res.code === 0 && res.data) {
                        const option = {
                            page:     this.nowPage,
                            size:     this.pageSize,
                            realName: this.searchRealName,
                            userName: this.searchUserName,
                            roleId:   this.userRoleId,
                            orgId:    this.curOrgId,
                        };
                        const opt = {
                            page: this.nowPage,
                            size: this.pageSize,
                            name: '',
                        };
                        this.getUserAddListData(option);
                        this.$parent.getRoleListData(opt);
                        this.$emit('update:dialogVisible', false);
                        this.$message.success('新增成功');
                    } else {
                        this.$emit('update:dialogVisible', false);
                        this.$message.error('新增失败');
                    }
                    window.loading1.close();
                });
            },
            //新增人员-取消按钮
            handleCancel() {
                this.$emit('update:dialogVisible', false);
            },
            //表格选中
            tableSelectChange(selection) {
                this.userSelectArr = [];
                selection.forEach((item) => {
                    this.userSelectArr.push(item.userId);
                });
            },

            //删除
            /* ToUserDelete(data){
                 //this.diaRoleId = this.userRoleId;
                 this.delUserId = data.userId;
                 this.BatchFailureDLShow = true;
             },*/

            //确定用户删除
            /* ToSaveUserDelete(){
                 const opt = {
                     roleId: this.userRoleId,
                     userId: this.delUserId,
                 };
                 window.loading1 = this.$loading();
                 getUserRoleDelete(opt).then(res => {
                     if (res.code === 0 && res.data) {
                         const option = {
                             page:      this.nowPage,
                             size:      this.pageSize,
                             realName: this.searchRealName,
                             userName: this.searchUserName,
                             roleId: this.userRoleId,
                         };
                         this.getUserListData(option);
                         this.BatchFailureDLShow = false;
                         this.$message.success('删除成功');
                     } else {
                         this.BatchFailureDLShow = false;
                         this.$message.error('删除失败');
                     }
                     window.loading1.close();
                 });
             },*/
            //用户列表
            getUserAddListData(opt) {
                const loading = this.$loading({background:"rgba(0, 0, 0, 0.7)"});
                getUserAddList(opt)
                .then(res => {
                    if (res.code === 0) {
                        const { data, total } = res.data;
                        // this.UsersData = data;
                        //this.totalPageAdd = total;
                        this.nowPage = 1;
                        this.$emit('update:totalPageAdd', total);
                        this.$emit('update:UsersData', data);
                    }
                    loading.close();
                })
                .catch(err => {
                    loading.close();
                });
            },
        },
        created() {
            if (this.showDialogType === 1) {
                // 待添加
            } else {
            }
            this.getOrganizationTreeData();
        },
        watch:      {
            dialogVisible: {
                handler() {
                    this.showDialog = this.dialogVisible;
                },
            },
            screenWidth() {
                // 屏幕尺寸变更 刷新table
                ++this.mainKey;
            },
            isExtendTree() {
                // 恢复树容器宽度 时 延时1秒删除定位css
                if (this.isExtendTree === true) {
                    this.isRemovePosition = true;
                } else {
                    if (this.timer1) {
                        clearTimeout(this.timer1);
                    }
                    this.timer1 = setTimeout(() => {
                        this.isRemovePosition = false;
                    }, 1000);
                }
            },
        },
        beforeDestroy() {
            // 清理vuex状态
            this.clearTimer1Fun();
        },
        mounted() {
            // 监听 页面变更 刷新table
            window.onresize = () => {
                return (() => {
                    this.screenWidth = document.body.clientWidth;
                })();
            };
        },
    };
</script>

