<template>
	<div class="app-list-content">
		<cl-crud class="liu-crud-wrap" @load="onLoad">
			<template #table-column-addTime="{scope}">
				<div>{{ scope.row.addTime | formatTime }}</div>
			</template>

			<!-- 权限设置 -->
			<template #slot-auth="{scope}">
				<el-button type="text" @click="authBtnFn(scope.row)">权限设置</el-button>
			</template>
			<!-- 编辑 -->
			<template #slot-modify="{scope}">
				<el-button type="text" @click="modifyBtnFn(scope.row)">编辑</el-button>
			</template>
			<!-- 删除 -->
			<template #slot-del="{scope}">
				<el-button type="text" @click="delBtnFn(scope.row)">删除</el-button>
			</template>

			<!-- 添加 -->
			<template #slot-add-ad-btn="{scope}">
				<el-button type="primary" size="mini" @click="addBtnFn">添加</el-button>
			</template>
		</cl-crud>
		<!-- 新增弹窗 -->
		<el-dialog
			:title="`${addOrModify == 1 ? '添加' : '修改'}角色`"
			:visible.sync="addDialog"
			:close-on-click-modal="false"
			width="600px"
		>
			<div class="ad-modal-content">
				<el-form
					:model="form"
					:rules="ruleForm"
					ref="form"
					label-width="100px"
					class="demo-form"
				>
					<el-form-item label="角色名称" prop="roleName">
						<el-input
							v-model="form.roleName"
							placeholder="请输入名称"
							size="small"
						></el-input>
					</el-form-item>
				</el-form>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button size="small" @click="resetForm">取 消</el-button>
				<el-button type="primary" size="small" @click="submitForm('form')">确认</el-button>
			</div>
		</el-dialog>
		<!-- 权限设置 -->
		<role-set :show.sync="roleShow" :info="modifyData" />
	</div>
</template>

<script>
import roleSet from '@/components/role-set';
export default {
	name: 'list-ad',
	components: {
		roleSet
	},
	data() {
		return {
			app: null,
			// 修改弹窗
			modifyData: {},
			// 新增或者修改弹窗
			addOrModify: 1,
			addDialog: false,
			form: {
				roleName: ''
			},
			ruleForm: {
				roleName: [{ required: true, message: '请输入名称', trigger: 'blur' }]
			},
			// 权限设置
			roleShow: false
		};
	},
	methods: {
		// api
		delBtnFn(item) {
			this.$confirm('是否删除该角色?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.$service.role.delete({ id: item.id }).then(res => {
						this.$message.success('删除成功!');
						this.app.refresh({ type: this.tabIndex });
					});
				})
				.catch();
		},
		// operate
		authBtnFn(item) {
			this.modifyData = item;
			this.roleShow = true;
		},
		modifyBtnFn(item) {
			this.addOrModify = 2;
			this.modifyData = item;
			this.addDialog = true;
			let data = JSON.parse(JSON.stringify(item));
			data.addTime = this.$util.$formatDate(data.addTime);
			this.form.roleName = item.roleName;
		},
		addBtnFn() {
			this.addOrModify = 1;
			this.addDialog = true;
		},
		resetForm() {
			this.$refs['form'].resetFields();
			this.addDialog = false;
		},

		addFn() {
			let host = null;
			if (this.addOrModify == 1) {
				host = () => {
					return this.$service.role.add(this.form);
				};
			} else {
				host = () => {
					return this.$service.role.update({
						id: this.modifyData.id,
						...this.form
					});
				};
			}
			host(this.form).then(res => {
				this.$message.success('操作成功!');
				this.resetForm();
				this.app.refresh({ type: this.tabIndex });
			});
		},
		submitForm(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					this.addFn();
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		// cl-crud 组件ad
		onLoad({ ctx, app }) {
			this.app = app;
			ctx.service(this.$service.role)
				.set('table', {
					columns: [
						{
							prop: 'roleName',
							label: '角色名称',
							align: 'center'
						},
						{
							prop: 'num',
							label: '成员数量',
							align: 'center'
						},
						{
							prop: 'addTime',
							label: '添加时间',
							align: 'center'
						}
					],
					// 操作列
					op: {
						visible: true, // 是否显示
						// 同 element-ui Table-column Attributes
						props: {
							width: 160,
							align: 'center',
							fixed: 'right',
							label: '操作'
						},
						// 布局，请移步 `layout`
						layout: ['slot-auth', 'slot-modify', 'slot-del']
					}
				})
				.set('layout', [
					['slot-tabs'],
					['flex1', 'refresh-btn', 'slot-add-ad-btn'],
					['data-table'],
					['flex1', 'pagination']
				])
				// .on('refresh', async (params, { next, render }) => {
				// 	// 继续执行刷新
				// 	let { list } = await next(params);
				// 	list.map((e, index) => {
				// 		e.index = index;
				// 		e.imgUrl = e.smallImgList[0];
				// 	});
				// 	this.list = list;
				// 	render(list);
				// })
				.done();
			app.refresh({ type: this.tabIndex });
		}
	}
};
</script>

<style lang="scss" scoped>
// module
.ad-modal-content {
	.member-wrap {
		line-height: 1.4;
		margin-bottom: 10px;
		.member-det {
			font-size: 12px;
			margin-left: 10px;
		}
	}
}
</style>
