<template>
	<pi-table ref="tableRef" :api="api.system.role.list" @selection-change="selectionChange" stripe>
		<template #do>
			<el-button v-auth="'role:add'" type="primary" icon="el-icon-plus" @click="add"></el-button>
			<el-button v-auth="'role:del'" type="danger" plain icon="el-icon-delete" :disabled="selection.length==0" @click="batch_del"></el-button>
		</template>
		<template #search>
			<el-input v-model="search.role_name" placeholder="角色名称" clearable style="width: 200px;"></el-input>
			<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
		</template>
		<el-table-column type="selection" width="50"></el-table-column>
		<el-table-column label="#" type="index" width="50"></el-table-column>
		<el-table-column label="名称" prop="role_name"></el-table-column>
		<el-table-column label="状态" prop="status">
			<template #default="scope">
				<el-tag v-if="scope.row.status===1" type="success">启用</el-tag>
				<el-tag v-if="scope.row.status===0" type="danger">停用</el-tag>
			</template>
		</el-table-column>
		<el-table-column label="排序" prop="rank"></el-table-column>
		<el-table-column label="创建时间" prop="create_time"></el-table-column>
		<el-table-column label="操作" fixed="right" align="right" width="170">
			<template #default="scope">
				<el-button-group>
					<el-button text type="primary" size="small" @click="table_show(scope.row, scope.$index)">查看</el-button>
					<el-button v-auth="'role:edit'" text type="success" size="small" @click="table_edit(scope.row, scope.$index)">编辑</el-button>
					<el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
						<template #reference>
							<el-button v-auth="'role:del'" text type="danger" size="small">删除</el-button>
						</template>
					</el-popconfirm>
				</el-button-group>
			</template>
		</el-table-column>
	</pi-table>
	<save-dialog v-if="dialogShow" ref="saveRef" @success="tableRef.refresh()" @closed="dialogShow = false"></save-dialog>
</template>

<script setup>
import saveDialog from './save'
import {getCurrentInstance, nextTick, ref} from "vue";
import api from "@/api/index";

defineOptions({
	name: "systemRole"
})

const {proxy} = getCurrentInstance()
const tableRef = ref(null)
const saveRef = ref(null)

let search = ref({
	real_name: ''
})
let selection = ref([])
let dialogShow = ref(false)

//添加
function add() {
	dialogShow.value = true
	nextTick(() => {
		saveRef.value.open()
	})
}
//编辑
function table_edit(row){
	dialogShow.value = true
	nextTick(() => {
		saveRef.value.open('edit')
		saveRef.value.setData(row)
	})
}
//查看
function table_show(row){
	dialogShow.value = true
	nextTick(() => {
		saveRef.value.open('show')
		saveRef.value.setData(row)
	})
}
//删除
async function table_del(row){
	const loading = proxy.$loading();
	var res = await api.system.role.del({ids: [row.role_id]});
	tableRef.value.refresh()
	loading.close();
	proxy.$message.success(res.msg)
}
//批量删除
async function batch_del(){
	proxy.$confirm(`确定删除选中的 ${selection.value.length} 项吗？如果删除项中含有子集将会被一并删除`, '提示', {
		type: 'warning'
	}).then(async () => {
		const loading = proxy.$loading();
		const res = await api.system.role.del({ids: selection.value.map(item => item.role_id)});
		tableRef.value.refresh()
		loading.close();
		proxy.$message.success(res.msg)
	})
}
//表格选择后回调事件
function selectionChange(val){
	selection.value = val;
}
//搜索
function upsearch(){
	tableRef.value.upData(search.value)
}
</script>

<style scoped>

</style>
