<!-- 应用访问关系表 -->
<template>
    <el-scrollbar class="vue-box">
        <div class="c-card">
            <!-- 提示 -->
            <el-alert class="win-tips" type="info" show-icon>
                <template #title>
                    <template v-if="state.clientModel">
                        <span v-if="state.clientModel.isPublic === 1">
                            您选中的应用 [ {{ state.clientModel.name }} ] 是一个公开应用，默认所有用户均可登录，你可以在此设定禁止哪些用户登录。
                        </span>
                        <span v-if="state.clientModel.isPublic === 2">
                            您选中的应用 [ {{ state.clientModel.name }} ] 是一个私有应用，默认所有用户均无法登录，你可以在此设定允许哪些用户登录。
                        </span>
                    </template>
                    <span v-else>设定：哪些用户可以登录哪些应用</span>
                </template>
            </el-alert>
            <h4 class="c-title">应用访问关系设置</h4>
            <!-- ------------- 查询条件 ------------- -->
            <el-form
                class="select-form" :inline="true" label-width="6.5em" @submit.native.prevent @keyup.enter="state.p.pageNo = 1; f5();">
                <in-input name="数据 id：" v-model="state.p.id"></in-input>
                <in-input name="用户 id：" v-model="state.p.userId"></in-input>
                <in-item name="应用 id：">
                    <el-select v-model="state.p.clientId" filterable allow-create clearable>
                        <el-option label="不限" value=""></el-option>
                        <el-option 
                            v-for="item in state.clientList"
                            :label="item.name"
                            :value="item.id" :key="item.id"></el-option>
                        <!--                            :label="item.name + '&nbsp;&nbsp;' + ['', '[ 公开 ]', '[ 私有 ]'][item.isPublic] " -->
                    </el-select>
                </in-item>
                <in-item class="ok-item">
                    <el-button type="primary" icon="el-icon-Search" @click="state.p.pageNo = 1; f5()">查询</el-button>
                </in-item>
                <br />
                <in-enum name="访问关系：" v-model="state.p.visit" :jv="{1: '允许登录', 2: '禁止登录', 3: '跟随应用配置'}" jtype="3" def="不限"></in-enum>
            </el-form>
            <!-- ------------- 操作按钮 ------------- -->
            <div class="fast-btn">
                <el-button type="primary" icon="el-icon-Plus" @click="add()" v-if="sa.isAuth('sys-client-add')">添加</el-button>
                <el-button type="primary" plain icon="el-icon-Download" @click="sa.exportExcel()">导出</el-button>
                <el-button type="danger" plain icon="el-icon-Delete" @click="deleteByIds">批量删除</el-button>
                <el-button type="default" plain icon="el-icon-Refresh" @click="sa.f5CurrView()">重置</el-button>
            </div>
            <!-- ------------- 数据表格 ------------- -->
            <el-table :data="state.dataList" class="data-table" ref="data-table" row-key="id">
                <td-info type="selection"></td-info>
                <td-info name="数据id" prop="id" min-width="80px"></td-info>
                <td-info name="用户" min-width="180px">
                    <template #default="s">
                        <div v-if="sa.isNull(s.row.sysUserUsername)">未知</div>
                        <template v-else>
                            <img
                                :src="s.row.sysUserAvatar" @click="sa.showImage(s.row.sysUserAvatar, '400px', '400px')"
                                class="td-img" style="vertical-align: middle; margin-right: 8px;" alt="img" />
                            <el-link
                                type="primary"
                                @click="sa.showModel('id = ' + s.row.userId + ' 详细信息', import('../sys-user/sys-user-info.vue'), {id: s.row.userId})">
                                <b style="font-weight: 400;">{{ s.row.sysUserUsername }}</b>
                            </el-link>
                        </template>
                    </template>
                </td-info>
                <td-info name="是否可登录" min-width="240px">
                    <template #default="s">
                        <b v-if="s.row['visit'] === 1" style="color: green;">=> 允许登录 => </b>
                        <b v-if="s.row['visit'] === 2" style="color: red;">=> 禁止登录 => </b>
                        <b v-if="s.row['visit'] === 3" style="color: #999;">=> 跟随应用配置决定是否可以登录 => </b>
                    </template>
                </td-info>
                <td-info name="应用" min-width="180px">
                    <template #default="s">
                        <div v-if="sa.isNull(s.row.sysClientName)">未知</div>
                        <template v-else>
                            <img
                                :src="s.row.sysClientLogo" @click="sa.showImage(s.row.sysClientLogo, '400px', '400px')"
                                class="td-img" style="vertical-align: middle; margin-right: 8px;" alt="img" />
                            <el-link
                                type="primary"
                                @click="sa.showModel('id = ' + s.row.clientId + ' 详细信息', import('../sys-client/sys-client-info.vue'), {id: s.row.clientId})">
                                <b style="font-weight: 400;">{{ s.row.sysClientName }}</b>
                            </el-link>
                        </template>
                    </template>
                </td-info>
                <td-info name="记录创建时间" prop="createTime" type="datetime" min-width="160px"></td-info>
                <el-table-column label="操作" fixed="right" width="220px">
                    <template #default="s">
                        <el-button class="c-btn" type="success" plain icon="el-icon-View" @click="get(s.row)">查看</el-button>
                        <el-button class="c-btn" type="primary" plain icon="el-icon-Edit" @click="update(s.row)">修改</el-button>
                        <el-button class="c-btn" type="danger" plain icon="el-icon-Delete" @click="del(s.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- ------------- 分页按钮 ------------- -->
            <div class="page-box">
                <el-pagination
                    background layout="total, prev, pager, next, sizes, jumper"
                    v-model:current-page="state.p.pageNo" v-model:page-size="state.p.pageSize" :total="state.dataCount"
                    :page-sizes="[1, 10, 20, 30, 40, 50, 100]"
                    @current-change="f5()" @size-change="f5()">
                </el-pagination>
            </div>
        </div>
    </el-scrollbar>
</template>

<script setup name="sys-client-visit">
import TdInfo from '../../sa-frame/com/td/td-info';
import {getCurrentInstance, onMounted, reactive} from "vue";
const { proxy } = getCurrentInstance();

// 获取插值 
const prop = defineProps({
    param: {type: Object}
})

// ------------------ 数据 ------------------
const state = reactive({
    p: {
        id: '',		// id号 
        clientId: '',		// 应用id 
        userId: '',		// 用户id 
        visit: '',		// 所属关系 (1=允许访问,2=禁止访问, 3=跟随应用) 
    },
    dataCount: 0,   // 数据总数
    dataList: [],   // 数据表格
    clientModel: null, // 选中的 clientModel 
    clientList: []  // 应用列表
})

// 组件加载时触发
onMounted(() => {
    f5();
    f5ClientList();
})

// ------------------ 函数 ------------------
// 查找数据
const f5 = function() {
    sa.ajax('/SysClientVisit/getList', sa.removeNull(state.p), function (res) {
        state.dataList = res.data;
        state.dataCount = res.data.length;
        f5ClientModel();
    })
};

// 刷新 ClientList
const f5ClientList = function() {
    sa.ajax('/SysClient/getList?pageSize=1000', function(res) {
        state.clientList = res.data;
    }, {msg: null});
};

// 刷新选中的 ClientModel 
const f5ClientModel = function() {
    // 如果没有选中，则设定为null
    if(!state.p.clientId) {
        return state.clientModel = null;
    }
    // 先尝试从本地列表里寻找
    for (const item of state.clientList) {
        if(item.id === state.p.clientId) {
            state.clientModel = item;
            return;
        }
    }
    // 提交请求，获取选中的这个 clientId 的信息 
    sa.ajax('/SysClient/getById?id=' + state.p.clientId, function(res) {
        state.clientModel = res.data;
    }, {msg: null});
};

// 增加 
const add = function () {
    sa.showModel('+ 添加一条应用访问关系', import('./sys-client-visit-add'), {clientId: state.p.clientId, userId: state.p.userId});
}
// 修改
const update = function (data) {
    sa.showModel('修改应用访问关系', import('./sys-client-visit-add'), { id: data.id });
};
// 修改
const get = function (data) {
    sa.showModel('数据详情', import('./sys-client-visit-info'), { id: data.id });
};
// 删除
const del = function (data) {
    sa.confirm('是否删除，此操作不可撤销', function() {
        sa.ajax('/SysClientVisit/delete?id=' + data.id, function(res) {
            sa.arrayDelete(state.dataList, data);
            sa.ok('删除成功');
        })
    });
};
// 批量删除
const deleteByIds = function() {
    // 获取选中元素的id列表
    let selection = proxy.$refs['data-table'].getSelectionRows();
    let ids = sa.getArrayField(selection, 'id');
    if(selection.length === 0) {
        return sa.msg('请至少选择一条数据');
    }
    // 提交删除
    sa.confirm(`是否删除选中的 ${selection.length} 条数据？此操作不可撤销`, function() {
        sa.ajax('/SysClientVisit/deleteByIds', { ids: ids.join(',') }, function(res) {
            sa.arrayDelete(state.dataList, selection);
            sa.ok('删除成功');
        })
    });
};

// 对外开放 
defineExpose({f5})

</script>

<style scoped lang="scss">
</style>
