<template>
	<cl-crud @load="onLoad">
		<template #table-column-headImg="{scope}">
			<cl-avatar
				shape="square"
				:size="40"
				:src="scope.row.headImg | default_avatar"
				:style="{ margin: 'auto' }"
			>
			</cl-avatar>
		</template>

		<template #table-column-status="{scope}">
			<el-tag v-if="scope.row.status == 1" size="medium" type="success">启用</el-tag>
			<el-tag v-else size="medium" type="danger">禁用</el-tag>
		</template>

		<template #table-column-roleName="{scope}">
			<el-tag
				size="medium"
				disable-transitions
				v-for="(item, index) in scope.row.roleNameList"
				:key="index"
				style="margin: 2px"
				>{{ item }}</el-tag
			>
		</template>
	</cl-crud>
</template>

<script>
export default {
	methods: {
		onLoad({ ctx, app }) {
			ctx.service(this.$service.system.user)
				.set('table', {
					columns: [
						{
							type: 'selection',
							align: 'center',
							width: '60'
						},
						{
							prop: 'headImg',
							label: '头像',
							align: 'center',
							slot: true
						},
						{
							prop: 'name',
							label: '姓名',
							align: 'center'
						},
						{
							prop: 'username',
							label: '用户名',
							align: 'center'
						},
						{
							prop: 'nickName',
							label: '昵称',
							align: 'center'
						},
						{
							prop: 'roleName',
							label: '角色',
							align: 'center',
							emptyText: '无',
							'min-width': 150
						},
						{
							prop: 'phone',
							label: '手机号码',
							align: 'center'
						},
						{
							prop: 'remark',
							label: '备注',
							align: 'center'
						},
						{
							prop: 'status',
							label: '状态',
							align: 'center'
						},
						{
							prop: 'createTime',
							label: '创建时间',
							align: 'center',
							sortable: true,
							width: 150
						}
					],

					props: {
						'default-sort': {
							prop: 'createTime',
							order: 'descending'
						}
					}
				})
				.set('upsert', {
					props: {
						with: '800px'
					},

					items: [
						{
							prop: 'headImg',
							label: '头像',
							span: 24,
							component: {
								name: 'cl-upload'
							}
						},
						{
							prop: 'name',
							label: '姓名',
							span: 12,
							component: {
								name: 'el-input',
								props: {
									placeholder: '请填写姓名'
								}
							},
							rules: {
								required: true,
								message: '姓名不能为空'
							}
						},
						{
							prop: 'nickName',
							label: '昵称',
							span: 12,
							component: {
								name: 'el-input',
								props: {
									placeholder: '请填写昵称'
								}
							},
							rules: {
								required: true,
								message: '昵称不能为空'
							}
						},
						{
							prop: 'username',
							label: '用户名',
							span: 12,
							component: {
								name: 'el-input',
								props: {
									placeholder: '请填写用户名'
								}
							},
							rules: [
								{
									required: true,
									message: '用户名不能为空'
								}
							]
						},
						{
							prop: 'password',
							label: '密码',
							span: 12,
							hidden: true,
							component: {
								name: 'el-input',
								props: {
									placeholder: '请填写密码',
									type: 'password'
								}
							},
							rules: [
								{
									min: 6,
									max: 16,
									message: '密码长度在 6 到 16 个字符'
								}
							]
						},
						{
							prop: 'roleIdList',
							label: '角色',
							span: 24,
							value: [],
							component: {
								name: 'cl-role-select',
								props: {
									'multiple-limit': 3
								}
							},
							rules: {
								required: true,
								message: '角色不能为空'
							}
						},
						{
							prop: 'phone',
							label: '手机号码',
							span: 12,
							component: {
								name: 'el-input',
								props: {
									placeholder: '请填写手机号码'
								}
							}
						},
						{
							prop: 'email',
							label: '邮箱',
							span: 12,
							component: {
								name: 'el-input',
								props: {
									placeholder: '请填写邮箱'
								}
							}
						},
						{
							prop: 'remark',
							label: '备注',
							span: 24,
							component: {
								name: 'el-input',
								props: {
									type: 'textarea',
									rows: 4
								}
							}
						},
						{
							prop: 'status',
							label: '状态',
							value: 1,
							component: {
								name: 'el-radio-group',
								options: [
									{
										label: '开启',
										value: 1
									},
									{
										label: '关闭',
										value: 0
									}
								]
							}
						},
						{
							prop: 'tips',
							hidden: true,
							component: (
								<div>
									<i class="el-icon-warning"></i>
									<span style="margin-left: 6px">新增用户默认密码为：123456</span>
								</div>
							)
						}
					]
				})
				// .set('layout', [['refresh-btn', 'add-btn', 'multi-delete-btn'], ['data-table'], ['data-table']])
				.on('open', f => {
					app.setData('upsert.items[prop:password].hidden', !f);
					app.setData('upsert.items[prop:tips].hidden', f);
				})
				.on('refresh', async (data, { next }) => {
					let { list } = await next(data);
					list.map(e => {
						if (e.roleName) {
							this.$set(e, 'roleNameList', e.roleName.split(','));
						}
					});
				})
				.done();

			app.refresh();
		}
	}
};
</script>
