/**
* author: Louie Butch
* date: 2020/6/15
* email: 844089357@qq.com
* desc:  发起个人类流程
*/
<template>
    <el-dialog :title="title" :visible.sync="isVisible" :close-on-click-modal="false" :close-on-press-escape="false"
               center custom-class="to-person-dialog" width="60%">
        <div class="select-person-content">
            <el-tabs style="width: 60%; height: 100%">
                <el-tab-pane label="按账号查找">
                    <div class="tab-content-header">
                        <el-input size="mini" placeholder="请输入姓名/账号搜索" v-model="userSearchText"
                                  @keyup.enter.native="getAllUserList" clearable @clear="userList = []">
                            <el-button slot="append" icon="el-icon-search" @click="getAllUserList"
                                       :disabled="!userSearchText"></el-button>
                        </el-input>
                    </div>
                    <div class="table-box" v-loading="isLoading">
                        <hd-table :tableList="userList" size="mini" :isTree="true" height="100%" @rowDblClick="selectedRow">
                            <el-table-column label="用户名" prop="userName" width="100"
                                             show-overflow-tooltip></el-table-column>
                            <el-table-column label="登录名" prop="userLoginName" width="120"
                                             show-overflow-tooltip></el-table-column>
                            <el-table-column label="所属机构" prop="orgName" show-overflow-tooltip></el-table-column>
<!--                            <el-table-column label="操作" width="60" align="center">-->
<!--                                <template slot-scope="{row}">-->
<!--                                    <el-button slot="reference" size="small" type="text" @click="selectedRow(row)">选择-->
<!--                                    </el-button>-->
<!--                                </template>-->
<!--                            </el-table-column>-->
                        </hd-table>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="按部门查找">
                    <div class="table-box">
                        <div class="org-container">
                            <div class="left-container" style="width: calc(50% - 5px)">
                                <div class="tab-content-header">
                                    <el-input size="mini" placeholder="请输入部门名称搜索" @keyup.enter.native="getAllOrgList"
                                              v-model="orgSearchText" clearable>
                                        <el-button slot="append" icon="el-icon-search" @click="getAllOrgList"></el-button>
                                    </el-input>
                                </div>
                                <div style="width: 100%;height: 300px" v-loading="orgLoading">
                                    <hd-table :tableList="orgList" isTree height="100%" :expandAll="isExpandAll"
                                              rowKey="orgNo" :lazy="isLazy" :lazyLoad="lazyLoad"
                                              @rowClick="orgRowClick">
                                        <el-table-column label="组织机构" show-overflow-tooltip>
                                            <template slot-scope="{row}">
                                                <span>{{row.orgName}}</span>
                                            </template>
                                        </el-table-column>
                                    </hd-table>
                                </div>
                            </div>
                            <div style="width: calc(50% - 5px)">
                                <div class="header" style="margin-left: 10px;height: 30px;line-height: 30px">
                                    <span>人员：</span>
                                    <el-tooltip :content="currentOrgName" :disabled="currentOrgName.length <= 12"
                                                placement="top">
                                        <span>{{currentOrgName.length > 20 ? currentOrgName.substring(0,20) + '…' : currentOrgName}}</span>
                                    </el-tooltip>
                                </div>
                                <div style="width: 100%;height: 300px;" v-loading="orgUserLoading">
                                    <hd-table :tableList="orgUserList" height="100%" :isTree="false" @rowDblClick="selectedRow">
                                        <el-table-column label="用户名" prop="userName"
                                                         show-overflow-tooltip></el-table-column>
                                        <el-table-column label="登录名" prop="userLoginName"
                                                         show-overflow-tooltip></el-table-column>
<!--                                        <el-table-column label="操作" width="80" align="center">-->
<!--                                            <template slot-scope="{row}">-->
<!--                                                <el-button size="small" type="text" @click="selectedRow(row)">选择-->
<!--                                                </el-button>-->
<!--                                            </template>-->
<!--                                        </el-table-column>-->
                                    </hd-table>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="常用联系人" :class="{'no-scrolling': dropItemShow}">
                    <div class="table-box" v-loading="isLoading">
                        <hd-table :tableList="topContactList" size="mini" :isTree="true" height="100%" @rowDblClick="selectedTopContact">
                            <el-table-column label="用户名" prop="userName" show-overflow-tooltip></el-table-column>
                            <el-table-column label="登录名" prop="userLoginName" show-overflow-tooltip></el-table-column>
<!--                            <el-table-column label="操作" width="60" align="center">-->
<!--                                <template slot-scope="{row, $index}">-->
<!--                                    <el-dropdown trigger="click" placement="bottom" @command="handleCommand"-->
<!--                                                 @visible-change="dropdownVisibleChange"-->
<!--                                                 size="small">-->
<!--                                        <el-button size="small" type="text" @click="selectedTopContact(row, $index)">-->
<!--                                            选择-->
<!--                                        </el-button>-->
<!--                                        <el-dropdown-menu slot="dropdown">-->
<!--                                            <el-dropdown-item :command="item.orgNo" v-for="(item, index) in row.orgList"-->
<!--                                                              :key="index">{{item.orgName}}-->
<!--                                            </el-dropdown-item>-->
<!--                                        </el-dropdown-menu>-->
<!--                                    </el-dropdown>-->
<!--                                </template>-->
<!--                            </el-table-column>-->
                        </hd-table>
                    </div>
                </el-tab-pane>
            </el-tabs>
            <div class="selected-container" style="width: calc(40% - 10px);margin-left: 10px">
                <div class="header">
                    <span>已选人员</span>
                    <hd-button type="text" icon="hd-icon-delete" @click="deleteSelected">删除</hd-button>
                </div>
                <div class="body" style="width: 100%">
                    <hd-table :tableList="selectedList" :isTree="false" height="100%"
                              @selectionChange="selectionChange">
                        <el-table-column type="selection" align="center" width="40"></el-table-column>
                        <el-table-column label="用户名" width="100" prop="userName"
                                         show-overflow-tooltip></el-table-column>
                        <el-table-column label="登录名" width="100" prop="userLoginName"
                                         show-overflow-tooltip></el-table-column>
                        <el-table-column label="所属机构" prop="orgName" show-overflow-tooltip></el-table-column>
                    </hd-table>
                </div>
            </div>
        </div>
        <div class="form-box">
            <el-form size="mini" label-position="left" label-width="100px">
                <el-form-item label="发起部门">
                    <el-input v-model="form.applicantOrgName" readonly v-if="applicantDeptFixed"></el-input>
                    <el-select v-else v-model="form.applicantOrgNo" placeholder="请选择发起部门" @change="userOrgChange"
                               style="width: 100%">
                        <el-option :label="item.orgName" :value="item.orgNo" v-for="(item, index) in userOrgList"
                                   :key="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="留言">
                    <el-input v-model="form.comment" placeholder="请输入留言" type="textarea"
                              :autosize="{minRows: 3}"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-checkbox :true-label="1" :false-label="0" v-model="form.isImportant" label="是否重要"></el-checkbox>
                    <el-checkbox :true-label="1" :false-label="0" v-model="form.isSMS" label="短信通知"></el-checkbox>
                    <el-checkbox :true-label="1" :false-label="0" v-model="form.isReturn" label="回执"></el-checkbox>
                    <el-checkbox :true-label="1" :false-label="0" v-model="form.isNotify" label="完成后通知我"></el-checkbox>
                    <el-checkbox :true-label="1" :false-label="0" v-model="form.isNotifyEach"
                                 label="每次完成后通知我"></el-checkbox>
                    <el-checkbox :true-label="1" :false-label="0" v-model="form.sendType"
                                 label="发送方式(选中为顺序，不选为同时)"></el-checkbox>
                </el-form-item>
            </el-form>
        </div>
        <div slot="footer" class="dialog-footer">
            <hd-button size="small" @click="isVisible = false">取 消</hd-button>
            <hd-button size="small" type="primary" @click="commitAppForm">发 送</hd-button>
        </div>

        <el-dialog title="选择单位" :visible.sync="outerVisible" center append-to-body width="400px" top="25vh" :show-close="false" custom-class="mini-dialog">
            <hd-table :showHeader="false" :tableList="currentContactRow ? (currentContactRow.orgList || []) : []" :isTree="false" @rowDblClick="deptSelect">
                <el-table-column prop="orgName" show-overflow-tooltip></el-table-column>
            </hd-table>
        </el-dialog>
    </el-dialog>
</template>

<script>
    import hdButton from '../../hdButton/src/hdButton';
    import hdTable from '../../hdTable/src/hdTable';

    export default {
        name: 'hd-sending-person-dialog',
        components: {
            hdTable,
            hdButton
        },
        data() {
            return {
                title: '',
                isVisible: false,
                outerVisible: false,
                userSearchText: '',
                userList: [],
                isLoading: false,
                orgSearchText: '',
                orgList: [],
                orgLoading: false,
                isExpandAll: false,
                isLazy: true,
                currentOrgName: '',
                orgUserLoading: false,
                orgUserList: [],
                topContactList: [],
                selectedList: [],
                toDeleteList: [],
                userOrgList: [],
                // 人员部门列表
                usersOrgList: [],
                // 当前选择的常用联系人
                currentContactRow: null,
                form: {
                    // 业务数据名称
                    appDataName: '',
                    // 业务数据阶段 (无阶段 为1)
                    appDataStage: 1,
                    // 业务数据 版本号
                    appDataVersion: '',
                    // 发起人名称
                    applicantName: '',
                    applicantOrgName: '',
                    applicantOrgNo: '',
                    // 发起人账号
                    applicantUser: '',
                    // 业务数据id
                    applicationDataId: '',
                    // 系统编号
                    applicationId: '',
                    // 系统名称
                    applicationName: '',
                    // 业务 审批页面网址
                    approvalUrl: '',
                    isImportant: 0,
                    isSMS: 0,
                    isReturn: 0,
                    isNotify: 1,
                    isNotifyEach: 0,
                    // false 串行 true 并行
                    sendType: 0,
                    comment: '',
                    // 消息分类
                    msgCategory: '消息',
                    // 消息分类ID
                    msgCategoryId: 24,
                    // 消息类型
                    msgType: '普通消息',
                    // 消息类型ID
                    msgTypeId: 0,
                    // 1.项目部 2.子公司 3.公司,4.总承包
                    wfProcedureLevel: 3,
                    wfProcedureName: '',
                    // 任务分类
                    wfTaskCategory: '',
                    wfWorkflowId: '',
                    wfWorkflowProcDefId: '',
                    holderUsers: []
                },
                dropItemShow: false
            };
        },
        props: {
            wfWorkflowId: {
                type: String,
                default: ''
            },
            checkVersionType: {
                type: String,
                required: false
            },
            checkVersionKey: {
                type: String,
                default: ''
            },
            paramData: {
                type: Object,
                default: null
            },
            // 发起人部门是否不提供选择
            applicantDeptFixed: {
                type: Boolean,
                default: true
            },

            orgType: {
                type: Number,
                default: 1
            },

            userInfo: {
                type: Object,
                default: () => {}
            },

            orgInfo: {
                type: Object,
                default: () => {}
            },

            isWriteHandleRecord: {
                type: Boolean,
                default: true
            },

            getUserList: {
                type: Function,
                default: () => {
                    return new Promise((resolve, reject) => {
                        reject({message: '未传入获取用户列表方法！'});
                    });
                }
            },

            getOrgList: {
                type: Function,
                default: () => {
                    return new Promise((resolve, reject) => {
                        reject({message: '未传入获取组织机构列表方法！'});
                    });
                }
            },

            getOrgUserList: {
                type: Function,
                default: () => {
                    return new Promise((resolve, reject) => {
                        reject({message: '未传入获取组织机构成员列表方法！'});
                    });
                }
            },

            getTopContacts: {
                type: Function,
                default: () => {
                    return new Promise((resolve, reject) => {
                        reject({message: '未传入获取常用联系人列表方法！'});
                    });
                }
            },

            checkVersionFn: {
                type: Function,
                default: () => {
                    return new Promise((resolve, reject) => {
                        reject({message: '未传入获取版本方法！'});
                    });
                }
            },

            sendWorkflow: {
                type: Function,
                default: () => {
                    return new Promise((resolve, reject) => {
                        reject({message: '未传入发起工作流方法！'});
                    });
                }
            },

            writeHandleRecord: {
                type: Function,
                default: () => {
                    return new Promise((resolve, reject) => {
                        reject({message: '未传入添加操作记录方法！'});
                    });
                }
            },

            writeBackToContacts: {
                type: Function,
                default: () => {
                    return new Promise((resolve, reject) => {
                        reject({message: '未传入回写常用联系人方法！'});
                    });
                }
            },

            getUserOrgList: {
                type: Function,
                default: () => {
                    return new Promise((resolve, reject) => {
                        reject({message: '未传入获取人员部门列表方法！'});
                    });
                }
            }

        },
        methods: {
            /**
             * 前面参数 为 dropdown 数据， 后边数据为业务数据
             * @param label
             * @param wfTaskCategory
             * @param command
             * @param appData 参数要求 必须为 from 里边关于业务那几个字段
             */
            openDialog({label, wfTaskCategory, command}, appData) {
                this.title = label;
                this.form.wfProcedureName = label;
                this.form.wfTaskCategory = wfTaskCategory;
                this.form.wfWorkflowProcDefId = command;
                this.form.wfWorkflowId = this.wfWorkflowId;
                Object.assign(this.form, appData);
                this.initData();
                this.isVisible = true;
                this.getAllOrgList();
                this.getTopContactList();
            },

            initData() {

                if (this.applicantDeptFixed) {
                    let {orgNo, orgName} = this.orgInfo;

                    this.form.applicantOrgNo = orgNo;
                    this.form.applicantOrgName = orgName;
                } else {
                    this.getUserDeptList();
                }

                this.form.wfProcedureLevel = this.orgType;

                this.form.applicantUser = this.userInfo.userLoginName;
                this.form.applicantName = this.userInfo.userName;

                let initData = {
                    isImportant: 0,
                    isSMS: 0,
                    isReturn: 0,
                    isNotify: 1,
                    isNotifyEach: 0,
                    // false 串行 true 并行
                    sendType: 0,
                    comment: '',
                    holderUsers: []
                };

                // 如果 存在 则更换 如果存在相同属性 则 合并
                Object.assign(this.form, initData);

                this.selectedList = [];
                this.toDeleteList = [];
                this.userList = [];
            },

            getAllUserList() {
                let params = {
                    pageIndex: 1,
                    pageSize: 50000,
                    queryKey: this.userSearchText
                };

                this.isLoading = true;
                this.getUserList(params).then(({data}) => {
                    this.isLoading = false;
                    if (data) {
                        this.userList = data.list;
                    }
                }).catch((err) => {
                    this.isLoading = false;
                    console.log(err.message);
                });
            },
            getAllOrgList() {
                let params = {
                    orgName: this.orgSearchText,
                    orgNo: ''
                };

                this.orgLoading = true;
                if (params.orgName) {
                    this.isLazy = false;
                    this.isExpandAll = true;
                } else {
                    this.isLazy = true;
                    this.isExpandAll = false;
                }

                this.getOrgList(params).then(({data}) => {
                    this.orgList = data;
                    this.orgLoading = false;
                }).catch((err) => {
                    this.orgLoading = false;
                    console.log(err.message);
                });
            },
            getUserOfOrgList(row) {
                let params = {
                    orgNo: row.orgNo,
                    pageIndex: 1,
                    pageSize: 20000
                };

                this.orgUserLoading = true;
                this.getOrgUserList(params).then(({data}) => {
                    if (data) {
                        this.orgUserLoading = false;
                        this.orgUserList = data.list;
                    } else {
                        this.orgUserList = [];
                    }
                }).catch((err) => {
                    this.orgUserLoading = false;
                    console.log(err.message);
                });
            },
            lazyLoad(tree, node, resolve) {
                let params = {
                    orgName: '',
                    orgNo: tree.orgNo
                };

                this.getOrgList(params).then(({data}) => {
                    let children = data || [];

                    resolve(children);
                }).catch((err) => {
                    console.log(err.message);
                });
            },
            getTopContactList() {
                let params = {
                    pageIndex: 1,
                    pageSize: 50000,
                    userLoginName: this.userInfo.userLoginName
                };

                this.getTopContacts(params).then(({data}) => {
                    if (data) {
                        this.topContactList = data.list.map((item) => {
                            let itemData = {
                                userName: item.contactName,
                                userLoginName: item.contactLoginName,
                                orgList: [],
                                orgName: '',
                                orgNo: ''
                            };

                            return itemData;
                        });
                    }
                }).catch((err) => {
                    console.log(err.message);
                });
            },
            selectedRow(row) {
                let index = this.selectedList.findIndex((item) => item.userLoginName === row.userLoginName);

                if (index >= 0) {
                    this.selectedList.splice(index, 1, row);
                } else {
                    this.selectedList.push(row);
                }
            },
            async selectedTopContact(row, index) {
                if (row.orgList.length > 0) {
                    this.currentContactRow = row;
                    this.outerVisible = true;

                    return;
                }

                let params = {
                    userLoginName: row.userLoginName
                };

                let {data} = await this.getUserOrgList(params);

                row.orgList = data;
                this.currentContactRow = row;

                this.$nextTick(() => {
                    this.outerVisible = true;
                });
            },
            handleCommand(command) {
                this.currentContactRow.orgList.some((item) => {
                    if (item.orgNo === command) {
                        this.currentContactRow.orgNo = command;
                        this.currentContactRow.orgName = item.orgName;

                        return true;
                    }
                });

                let row = JSON.parse(JSON.stringify(this.currentContactRow));

                this.selectedRow(row);
            },

            deptSelect(row){
                this.currentContactRow.orgNo = row.orgNo;
                this.currentContactRow.orgName = row.orgName;

                let _row = JSON.parse(JSON.stringify(this.currentContactRow));

                this.selectedRow(_row);

                this.$nextTick(() => {
                    this.outerVisible = false;
                });
            },

            orgRowClick(row) {
                this.currentOrgName = row.orgName;
                this.getUserOfOrgList(row);
            },
            selectionChange(selection) {
                this.toDeleteList = selection;
            },
            deleteSelected() {
                if (this.toDeleteList.length === 0) {
                    this.$message.warning('请选择需要删除的项！');

                    return;
                }

                this.selectedList = this.selectedList.filter((selectedUser) => this.toDeleteList.every((user) => user.userLoginName !== selectedUser.userLoginName));
            },

            commitAppForm() {

                this.form.holderUsers = this.selectedList.map((item) => {
                    let itemData = {
                        holderOrgName: item.orgName,
                        holderOrgNo: item.orgNo,
                        holderRole: '',
                        holderUser: item.userLoginName,
                        holderName: item.userName
                    };

                    return itemData;
                });
                if (this.form.holderUsers.length === 0) {
                    this.$message.warning('请先选择流程接收人！');

                    return;
                }
				//操作记录提交的内容
				let vo={
					"applicationDataId": this.form.applicationDataId,
					"applicationDataVersion": this.form.appDataVersion,
					"levelNo": 1,
					"operationDescription": "",
					"operationId": null,
					"operationName": this.form.wfProcedureName,
					"operationTime": (new Date()).getTime(),
					"operationUserLoginName": this.form.applicantUser,
					"operationUserName": this.form.applicantName,
					"stageNo": this.form.appDataStage
				};
                const loading = this.$loading({
                    lock: true,
                    text: '发送中...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.5)',
                    customClass: 'loading-text-white'
                });

                if (this.type) {
                    let params = {
                        appDataId: this.form.applicationDataId,
                        type: this.type,
                        checkVersionKey: this.checkVersionKey,
                        data: null
                    };

                    if (this.paramData) {
                        params.data = this.paramData;
                    }

                    this.checkVersionFn(params).then((result) => {
                        if (result.code === 0) {
                            let newVersionNo = result.data;//返回的新版本号的值

                            this.form.appDataVersion = newVersionNo;
							vo.applicationDataVersion = newVersionNo;

							this.sendWorkflow(this.form).then(() => {
							    if (this.isWriteHandleRecord) {
                                    this.writeHandleRecord(vo).then(()=>{
                                        this.sendSuccessFn(loading);
                                    }).catch((err)=>{
                                        loading.close();
                                        this.$message.error('写入操作记录失败：'+err.message);
                                    });
                                } else {
                                    this.sendSuccessFn(loading);
                                }

                            }).catch((err) => {
                                loading.close();
                                this.$message.error(err.message);
                            });
                        }
                    }).catch((err) => {
                        loading.close();
                        this.$message.error(err.message);
                    });
                } else {
                    this.sendWorkflow(this.form).then(() => {
                        if (this.isWriteHandleRecord) {
                            this.writeHandleRecord(vo).then(()=>{
                                this.sendSuccessFn(loading);
                            }).catch((err)=>{
                                loading.close();
                                this.$message.error('写入操作记录失败：'+err.message);
                            });
                        } else {
                            this.sendSuccessFn(loading);
                        }
                    }).catch((err) => {
                        loading.close();
                        this.$message.error(err.message);
                    });
                }
            },

            sendSuccessFn(loading){
                this.$message.success('发送成功！');
                this.$emit('submitSuccess');
                this.commitTopContact();
                this.isVisible = false;
                loading.close();
            },

            commitTopContact() {
                let params = {
                    list: [],
                    userLoginName: this.userInfo.userLoginName
                };

                params.list = this.form.holderUsers.map((item) => {
                    let itemData = {
                        contactLoginName: item.holderUser,
                        contactName: item.holderName
                    };

                    return itemData;
                });

                this.writeBackToContacts(params).then(() => {
                }).catch((err) => {
                    console.log(err.message);
                });
            },

            dropdownVisibleChange(isVisible) {
                // 处理下拉选项存在时 滚动条滚动 下拉选项不消失跟随滚动的问题
                this.dropItemShow = isVisible;

            },

            /**
             * 获取发起人的部门列表
             */
            getUserDeptList(){
                let params = {
                    userLoginName: this.userInfo.userLoginName
                };

                this.getUserOrgList(params).then(({data}) => {
                    this.userOrgList = data || [];
                    if (this.userOrgList.length > 0) {
                        this.form.applicantOrgName = this.userOrgList[0].orgName;
                        this.form.applicantOrgNo = this.userOrgList[0].orgNo;
                    }
                }).catch(({message}) => {
                    console.log(message);
                });
            },

            userOrgChange(orgNo){
                let checkedOrg = this.userOrgList.find((org) => org.orgNo === orgNo);

                this.form.applicantOrgName = checkedOrg.orgName;
            }
        }
    };
</script>

<style scoped lang="scss">
    .to-person-dialog {

        /deep/ .el-dialog__body {
            padding: 10px 20px !important;
        }

        .mini-dialog {
            /deep/ .el-dialog__body {

            }
        }

        .select-person-content {
            height: 380px;
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;

            .no-scrolling {
                /deep/ .el-table--scrollable-y .el-table__body-wrapper {
                    overflow-y: hidden;
                }
            }

            /deep/ .el-tabs__header {
                margin: 0 0 10px;
            }

            /deep/ .el-tabs__content {
                height: 330px;
            }

            .tab-content-header {
                padding: 1px 0;
            }

            .table-box {
                height: 300px;
            }

            .org-container {
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
            }

            .selected-container {

                .header {
                    height: 36px;
                    box-sizing: border-box;
                    border-bottom: 2px solid #E4E7ED;
                    margin-bottom: 10px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }

                .body {
                    height: 330px;
                    width: 400px;
                }
            }
        }
    }
</style>