<template>
	<cl-crud @load="onLoad">
		<template #table-column-icon="{scope}">
			<icon-svg :name="scope.row.icon" size="20px"></icon-svg>
		</template>

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

		<template #table-column-router="{scope}">
			<el-link type="primary" :href="scope.row.router" v-if="scope.row.type == 1">
				{{ scope.row.router }}
			</el-link>
			<span v-else>{{ scope.row.router }}</span>
		</template>

		<template #table-column-keepAlive="{scope}">
			<template v-if="scope.row.type == 1">
				<i class="el-icon-check" v-if="scope.row.keepAlive"></i>
				<i class="el-icon-close" v-else></i>
			</template>
		</template>

		<template #slot-column-op="{scope}">
			<el-button
				type="text"
				size="mini"
				@click="upsertAppend(scope.row)"
				v-if="scope.row.type != 2"
				>新增</el-button
			>
		</template>
	</cl-crud>
</template>

<script>
import { deepTree } from '@/utils/index';

export default {
	data() {
		return {
			crud: null
		};
	},

	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;

			ctx.service(this.$service.system.menu)
				.set('dict', { api: { page: 'list' } })
				.set('table', {
					columns: [
						{
							prop: 'name',
							label: '名称',
							width: 200
						},
						{
							prop: 'icon',
							label: '图标',
							align: 'center',
							width: 80
						},
						{
							prop: 'type',
							label: '类型',
							align: 'center',
							width: 100,
							dict: [
								{
									label: '目录',
									value: 0
								},
								{
									label: '菜单',
									value: 1
								},
								{
									label: '按钮',
									value: 2
								}
							]
						},
						{
							prop: 'router',
							label: '节点路由',
							align: 'center',
							'min-width': 160
						},
						{
							prop: 'keepAlive',
							label: '路由缓存',
							align: 'center',
							width: 100
						},
						{
							prop: 'viewPath',
							label: '文件路径',
							align: 'center',
							'min-width': 200,
							'show-overflow-tooltip': true
						},
						{
							prop: 'perms',
							label: '权限',
							'header-align': 'center',
							'min-width': 300
						},
						{
							prop: 'orderNum',
							label: '排序号',
							align: 'center',
							width: 100
						},
						{
							prop: 'updateTime',
							label: '更新时间',
							align: 'center',
							sortable: true,
							width: 180
						}
					],
					props: {
						'row-key': 'id'
					},
					on: {
						'row-click': (row, column) => {
							if (column.property && row.children) {
								app.refs('table').toggleRowExpansion(row);
							}
						}
					},
					op: {
						props: {
							width: '200'
						},

						layout: ['slot-column-op', 'edit', 'delete']
					}
				})
				.set('upsert', {
					props: {
						width: '600px'
					},
					items: [
						{
							prop: 'type',
							value: 0,
							label: '节点类型',
							span: 24,
							component: {
								name: 'el-radio-group',
								options: [
									{
										label: '目录',
										value: 0
									},
									{
										label: '菜单',
										value: 1
									},
									{
										label: '按钮',
										value: 2
									}
								],
								on: {
									change: index => {
										this.changeType(index);
									}
								}
							}
						},
						{
							prop: 'name',
							label: '节点名称',
							span: 24,
							component: {
								name: 'el-input'
							},
							rules: {
								required: true,
								message: '名称不能为空'
							}
						},
						{
							prop: 'parentId',
							label: '上级节点',
							span: 24,
							component: {
								name: 'cl-menu-tree'
							}
						},
						{
							prop: 'router',
							label: '节点路由',
							span: 24,
							hidden: true,
							component: {
								name: 'el-input',
								props: {
									placeholder: '请填写'
								}
							}
						},
						{
							prop: 'keepAlive',
							value: true,
							label: '路由缓存',
							span: 24,
							component: {
								name: 'el-radio-group',
								options: [
									{
										label: '开启',
										value: true
									},
									{
										label: '关闭',
										value: false
									}
								]
							}
						},
						{
							prop: 'viewPath',
							label: '文件路径',
							span: 24,
							hidden: true,
							component: {
								name: 'el-input',
								props: {
									placeholder: '请填写'
								}
							}
						},
						{
							prop: 'icon',
							label: '节点图标',
							span: 24,
							component: {
								name: 'cl-menu-icons'
							}
						},
						{
							prop: 'orderNum',
							label: '排序号',
							span: 24,
							component: {
								name: 'el-input-number',
								props: {
									placeholder: '请填写排序号',
									min: 0,
									max: 99,
									'controls-position': 'right'
								}
							}
						},
						{
							prop: 'perms',
							label: '权限',
							span: 24,
							hidden: true,
							component: {
								name: 'cl-menu-perms'
							}
						}
					]
				})
				.set('layout', [['refresh-btn', 'add-btn'], ['data-table']])
				.on('refresh', (params, { render }) => {
					this.$service.system.menu.list().then(list => {
						list.map(e => {
							e.permList = e.perms ? e.perms.split(',') : [];
						});

						render(deepTree(list));
					});
				})
				.on('submit', async (isEdit, data, { next }) => {
					await next(data);

					this.$store.dispatch('permMenu');
				})
				.on('delete', async (selection, { next }) => {
					await next({
						ids: selection.map(e => e.id).join(',')
					});

					this.$store.dispatch('permMenu');
				})
				.on('open', (status, data) => {
					this.changeType(data ? data.type : 0);
				})
				.done();

			app.refresh();
		},

		changeType(index) {
			this.crud.setData('upsert.items[prop:router].hidden', index == 2);
			this.crud.setData('upsert.items[prop:icon].hidden', index == 2);
			this.crud.setData('upsert.items[prop:viewPath].hidden', index != 1);
			this.crud.setData('upsert.items[prop:keepAlive].hidden', index != 1);
			this.crud.setData('upsert.items[prop:perms].hidden', index != 2);
		},

		upsertAppend({ type, id }) {
			this.crud.append({
				parentId: id,
				type: type + 1
			});
		},

		toUrl(url) {
			this.$router.push(url);
		}
	}
};
</script>
