<template>
    <ht-sidebar-dialog
        title="关联人员"
        :visible="dialogVisible"
        width="65%"
        :before-close="handleClose"
        :close-on-click-modal="false"
        append-to-body
    >
        <ht-table
            v-if="dialogVisible"
            @load="loadData"
            :data="data"
            :quick-search-props="querySearch"
            :pageResult="pageResult"
            :selection="true"
            ref="personTable"
            :show-custom-column="false"
            :show-export="false"
        >
            <template v-slot:toolbar>
               
                    <el-button
                        size="small"
                        icon="el-icon-plus"
                        @click="showUserDialog"
                        type='primary'
                        >添加</el-button
                    >
                    <ht-delete-button
                        :url="deleteUrl"
                        pk="id"
                        :htTable="$refs.personTable"
                        >删除</ht-delete-button
                    >
                
            </template>
            <template>
                <ht-table-column
                    prop="account"
                    label="人员账号"
                    :sortable="true"
                    :show-overflow-tooltip="true"
                ></ht-table-column>
                <ht-table-column
                    prop="fullname"
                    label="人员名称"
                    :show-overflow-tooltip="true"
                />
            </template>
        </ht-table>
        <eip-user-dialog
            ref="eipUserDialog"
            @onConfirm="userDialogOnConfirm"
            append-to-body
        />
    </ht-sidebar-dialog>
</template>
<script>
import uc from '@/api/uc.js'
import EipUserDialog from '@/components/dialog/EipUserDialog.vue'

export default {
    props: {},
    components: {
        EipUserDialog,
    },
    computed: {
        deleteUrl: function () {
            return `${window.context.uc}/uc/Machine/v1/deletePersonloginlimis`
        },
    },
    data() {
        return {
            querySearch: [
                {
                    label: '人员账号',
                    prop: 'u.account_',
                },
                {
                    label: '人员名称',
                    prop: 'u.fullname_',
                },
            ],
            dialogVisible: false,
            isSubmit: true,
            data: [],
            pageResult: {
                page: 1,
                pageSize: 50,
                total: 0,
            },
            machineId: '',
        }
    },
    watch: {},
    created() {},
    methods: {
        handleClose() {
            this.dialogVisible = false
        },
        showDialog(machineId) {
            this.machineId = machineId
            this.dialogVisible = true
        },
        dialogCancle() {
            this.dialogVisible = false
        },
        loadData(param, cb) {
            let paramsData = {...param, params: {machineId: this.machineId}}
            uc.queryPersonloginlimitPage(paramsData)
                .then((response) => {
                    this.data = response.rows
                    this.pageResult = {
                        page: response.page,
                        pageSize: response.pageSize,
                        total: response.total,
                    }
                })
                .finally(() => cb())
        },
        showUserDialog() {
            this.$refs.eipUserDialog.showDialog()
        },
        userDialogOnConfirm(selection) {
            if (!selection || selection.length == 0) {
                this.$message.error('请至少选择一个用户')
                return
            }
            let userIds = []
            for (let user of selection) {
                userIds.push(user.id)
            }
            let param = {
                machineId: this.machineId,
                userIds: userIds.join(','),
            }
            let params = this.qs.stringify(param)
            uc.insertPersonloginlimit(params).then((data) => {
                if (data.state) {
                    this.$message({
                        message: data.message,
                        type: 'success',
                        showClose: true,
                    })
                    this.$refs.personTable.load()
                    return
                }
                this.$message.error(data.message || '添加人员失败')
            })
        },
    },
}
</script>
<style scoped>
div[aria-invalid='true'] >>> .el-input__inner,
div[aria-invalid='true'] >>> .el-input__inner:focus {
    border-color: #f56c6c;
}
</style>
