<template>
    <div class="member-select-pack">
        <el-dialog
            title="选择人员"
            :visible.sync="memberSelectDialogToggle"
            :show-close="false"
            :close-on-press-escape="false"
            :close-on-click-modal="false"
            width="760px">
            <div class="member-dialog">
                <div class="title-pack clear-float pl-15">
                    <span class="page-title-text">人员列表</span>
                </div>
                <div class="float-right clear-float mt-15 mb-15 mr-15">
                    <div class="float-right clear-float">
                        <div class="float-left clear-float mr-10">
                            <el-input
                                v-model="memberSearchKey"
                                size="mini"
                                placeholder="请输入搜索关键字"
                                :maxlength="20"
                            ></el-input>
                        </div>
                        <div class="float-left">
                            <el-button @click="doSearchClick" size="mini" icon="el-icon-search">搜索</el-button>
                            <el-button @click="doResetClick" size="mini">重置</el-button>
                        </div>
                    </div>
                </div>
                <div class="pl-15 pr-15 mt-15 mb-15">
                    <Table
                        :tableConfig="tableConfig"
                        @onPageSizeChange="onPageSizeChange"
                        @onCurrentPageChange="onCurrentPageChange"
                        @doTableRowClick="doTableRowClick">
                    </Table>
                </div>
            </div>
            <span slot="footer" class="dialog-footer text-center">
                <el-button size="small" type="primary" icon="el-icon-check" @click="doConfirmClick">确认</el-button>
                <el-button size="small" icon="el-icon-close" @click="doCancelClick">取消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import Table from '@/components/Table'
import { setTimeout } from 'timers';

export default {
    components: {
        Table
    },
    data () {
        return {
            // 选择人员弹框开关表示
            memberSelectDialogToggle: false,
            // 人员搜索关键字
            memberSearchKey: '',
            // 表格组件选中节点数据
            selectTableNodeValue: {},
            // 表格配置项
            tableConfig: {
                height: 430,
                data: [],
                highLightCurrentToggle: true,
                fieldList: [
                    { label: '姓名', value: 'name', sortable: false },
                    { label: '工号', value: 'no', sortable: false },
                    { label: '用户名', value: 'username', sortable: false },
                    { label: '职位', value: 'post', sortable: false }
                ],
                paginationToggle: true,
                paginationConfig: {
                    total: 0,
                    currentPage: 1,
                    pageSize: 20
                }
            }
        }
    },
    watch: {
        memberSelectDialogToggle (newVal, oldVal) {
            // 获取用户列表
            this.getMemberList()
        }
    },
    methods: {
        // 点击搜索按钮
        doSearchClick () {
            // 获取用户列表
            this.getMemberList()
        },
        // 点击重制按钮
        doResetClick () {
            this.memberSearchKey = ''
            this.tableConfig.paginationConfig.currentPage = 1
            this.tableConfig.paginationConfig.pageSize = 20
            // 获取用户列表
            this.getMemberList()
        },
        // 触发表格组件分页数量改变事件
        onPageSizeChange (pageSize) {
            this.tableConfig.paginationConfig.pageSize = pageSize
            this.tableConfig.paginationConfig.currentPage = 1
            // 获取用户列表
            this.getMemberList()
        },
        // 触发表格组件分页页数改变事件
        onCurrentPageChange (currentPage) {
            this.tableConfig.paginationConfig.currentPage = currentPage
            // 获取用户列表
            this.getMemberList()
        },
        // 触发表格组件列表点击事件
        doTableRowClick (tableNodeValue) {
            this.selectTableNodeValue = tableNodeValue
        },
        // 点击对话框确认按钮
        doConfirmClick () {
            if (Object.keys(this.selectTableNodeValue).length === 0) {
                this.$message.warning('未选中任何责任人')
                return false
            } else {
                this.memberSelectDialogToggle = false
                this.$emit('doMemberSelectConfirmClick', this.selectTableNodeValue)
                this.selectTableNodeValue = {}
                this.memberSearchKey = ''
                this.tableConfig = {
                    height: 430,
                    data: [],
                    highLightCurrentToggle: true,
                    fieldList: [
                        { label: '姓名', value: 'name' },
                        { label: '工号', value: 'no' },
                        { label: '用户名', value: 'username' },
                        { label: '职位', value: 'post' }
                    ],
                    paginationToggle: true,
                    paginationConfig: {
                        total: 0,
                        currentPage: 1,
                        pageSize: 20
                    }
                }
            }
        },
        // 点击对话框取消按钮
        doCancelClick () {
            this.memberSelectDialogToggle = false
            this.$emit('doMemberSelectCancelClick')
            this.selectTableNodeValue = {}
            this.memberSearchKey = ''
            this.tableConfig = {
                height: 430,
                data: [],
                highLightCurrentToggle: true,
                fieldList: [
                    { label: '姓名', value: 'name' },
                    { label: '工号', value: 'no' },
                    { label: '用户名', value: 'username' },
                    { label: '职位', value: 'post' }
                ],
                paginationToggle: true,
                paginationConfig: {
                    total: 0,
                    currentPage: 1,
                    pageSize: 20
                }
            }
        },
        // 获取用户列表
        getMemberList () {
            let queryParams = {
                num: this.tableConfig.paginationConfig.currentPage,
                size: this.tableConfig.paginationConfig.pageSize,
                like: this.memberSearchKey
            }
            this.$fetch('user-controller/page-get', queryParams).then((response) => {
                if (response.length === 0 && response.pageNum !== 1) {
                    this.currentPage -= 1
                    // 获取用户列表
                    this.getMemberList()
                } else {
                    this.tableConfig.data = _.cloneDeep(response.list)
                    this.tableConfig.paginationConfig.total = _.cloneDeep(response.total)
                }
            })
        }
    },
    mounted () {
        setTimeout(() => {
            // 获取用户列表
            this.getMemberList()
        }, 0)
    }
}
</script>

<style lang="scss" scoped>
    .member-dialog {
        height: 100%;
        border: 1px solid #d2d3d5;
        background-color: #fff;

        .title-pack {
            height: 38px;
            line-height: 38px;
            border-bottom: 1px solid #d2d3d5;
        }
    }
</style>
