<!-- 应用 列表 -->
<template>
    <el-scrollbar class="vue-box">
        <div class="c-card">
            <el-alert
                style="margin-bottom: 5px; padding: 10px 10px; cursor: pointer;"
                title="您已允许以下 URL 开放 SSO 授权（点击展开）："
                type="success"
                @click.native="state.allowUrlShow = !state.allowUrlShow">
                <div class="allow-url-box" :class="{'allow-url-box-show': state.allowUrlShow}" @click.stop="">
                    <ul v-if="state.allowUrlShow">
                        <li v-for="url in state.allowUrlArray" :key="url">{{ url }}</li>
                    </ul>
                </div>
            </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="应用名称：" v-model="state.p.name"></in-input>
                <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.status" :jv="{1: '启用', 2: '禁用'}" jtype="3" def="不限"></in-enum>
                <in-enum name="是否公开：" v-model="state.p.isPublic" :jv="{1: '公开', 2: '私有'}" jtype="3" def="不限"></in-enum>
                <br />
                <in-item name="综合排序：">
                    <el-radio-group v-model="state.p.sortType" class="s-radio-text">
                        <el-radio :label="0">默认</el-radio>
                        <el-radio :label="1">最新添加</el-radio>
                        <el-radio :label="11">最早添加</el-radio>
                        <el-radio :label="4">应用状态</el-radio>
                        <el-radio :label="3">是否公开</el-radio>
                    </el-radio-group>
                </in-item>
            </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="应用名称" prop="name,logo" type="user-avatar" min-width="220px"></td-info>
                <td-info name="应用介绍" prop="intro" type="textarea" min-width="200px"></td-info>
                <td-list name="允许授权的url" prop="allowUrl" type="text-list" min-width="300px"></td-list>
                <td-enum 
                    name="应用状态" prop="status" type="switch" :jv="{1: '启用', 2: '禁用'}" min-width="110px"
                    @before-change="s => updateStatus(s.row, s.resolve)"></td-enum>
                <td-enum name="是否公开" prop="isPublic" type="enum" :jv="{1: '公开应用[blue]', 2: '私有应用[#777]'}" min-width="120"></td-enum>
                <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-list">
import TdInfo from '../../sa-frame/com/td/td-info';
import {getCurrentInstance, onMounted, reactive, ref} from "vue";
const { proxy } = getCurrentInstance();

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

// ------------------ 数据 ------------------
const state = reactive({
    p: {
        id: '',		// id号 
        name: '',		// 应用名称 
        intro: '',		// 应用介绍 
        allowUrl: '',		// 允许授权的url (多个用逗号隔开) 
        isPublic: '',		// 是否公开 (1=公开应用, 2=私有应用)
        status: '',		// 应用状态(1=启用, 2=禁用) 
        pageNo: 1,		// 当前页 
        pageSize: 10,	// 页大小 
        sortType: 0		// 排序方式 
    },
    dataCount: 0,   // 数据总数
    dataList: [],   // 数据表格
    allowUrlArray: [],  // sso授权url集合
    allowUrlShow: false,    // 是否展开显示 
})

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

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

// 刷新 allowUrls 
const f5AllowUrls = function() {
    sa.ajax('/SysClient/getAllowUrls', function(res) {
        state.allowUrlArray = res.data.split(",");
    }, {msg: null});
};

// 增加 
const add = function () {
    sa.showModel('+ 添加一个应用', import('./sys-client-add'));
}
// 修改
const update = function (data) {
    sa.showModel('修改应用信息', import('./sys-client-add'), { id: data.id });
};
// 修改
const get = function (data) {
    sa.showModel('应用详情', import('./sys-client-info'), { id: data.id });
};
// 删除
const del = function (data) {
    sa.confirm('是否删除，此操作不可撤销', function() {
        sa.ajax('/SysClient/delete?id=' + data.id, function(res) {
            sa.arrayDelete(state.dataList, data);
            sa.ok('删除成功');
            f5AllowUrls();
        })
    });
};
// 批量删除
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('/SysClient/deleteByIds', { ids: ids.join(',') }, function(res) {
            sa.arrayDelete(state.dataList, selection);
            sa.ok('删除成功');
        })
    });
};

// 改 - 应用状态(1=启用, 2=禁用)
const updateStatus = function(data, resolve) {
    const status = 3 - data.status;
    sa.ajax('/SysClient/updateStatus', {id: data.id, value: status}, function () {
        sa.msg('修改成功');
        resolve(true);
    });
};

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

</script>

<style scoped lang="scss">
:deep(.s-text-list-p){
    color: green;
}
.allow-url-box{max-height: 0px; overflow: hidden; transition: all 1s; padding-left: 20px; cursor: text; padding-right: 14px;}
.allow-url-box-show {max-height: 200px;}
</style>
