<template>
	<el-tabs tab-position="top">
		<el-tab-pane label="菜单权限">
			<div class="treeMain">
				<el-tree ref="menu" node-key="name" :data="menu.list" :default-checked-keys="menu.checked" :props="menu.props" show-checkbox></el-tree>
			</div>
		</el-tab-pane>
		<el-tab-pane label="部门权限">
			<div class="treeMain">
				<el-tree ref="group" node-key="name" :data="group.list" :default-checked-keys="group.checked" :props="group.props" show-checkbox></el-tree>
			</div>
		</el-tab-pane>
		<el-tab-pane label="类型权限">
			<div class="treeMain">
				<el-tree ref="type" node-key="name" :data="type.list" :default-checked-keys="type.checked" :props="type.props" show-checkbox></el-tree>
			</div>
		</el-tab-pane>
		<el-tab-pane label="控制台">
			<el-form label-width="100px" label-position="left">
				<el-form-item label="控制台视图">
					<el-select v-model="dashboard" placeholder="请选择">
						<el-option v-for="item in dashboardOptions" :key="item.value" :label="item.label" :value="item.value">
							<span style="float: left">{{ item.label }}</span>
							<span style="float: right; color: #8492a6; font-size: 12px">{{ item.views }}</span>
						</el-option>
					</el-select>
					<div class="el-form-item-msg">用于控制角色登录后控制台的视图</div>
				</el-form-item>
			</el-form>
		</el-tab-pane>
	</el-tabs>
</template>

<script>
	export default {
		data() {
			return {
				menu: {
					list: [],
					checked: ["test", "system", "user", "role"],
					props: {
						label: (data)=>{
							return data.meta.title
						}
					}
				},
				group: {
					list: [],
					checked: [],
					props: {}
				},
				type: {
					list: [],
					checked: [],
					props: {}
				},
				dashboard: "0",
				dashboardOptions: [
					{
						value: '0',
						label: '数据统计',
						views: 'stats'
						
					},
					{
						value: '1',
						label: '工作台',
						views: 'work'
					},
				]
			}
		},
		mounted() {
			this.getMenu();
			this.getGroup();
			this.getType();
		},
		methods: {
			async getMenu(){
				var res = await this.$API.menu.list.get();
				this.menu.list = res.data;
			},
			getGroup(){
				this.group.list = [
					{label: 'JL00'},
					{label: 'LP01'},
					{label: 'LP07'},
					{label: 'SL01'},
					{label: 'TL06'},
					{label: 'TL09'},
					{label: 'YP07'}
				];
			},
			getType(){
				this.type.list = [
					{label: '原料采购'},
					{label: '厂内互供'},
					{label: '炼销订单'},
					{label: '化工统销订单'},
					{label: '移库单'},
					{label: '自销订单'},
				];
			}
		}
	}
</script>

<style scoped>
	.treeMain {height:280px;overflow: auto;border: 1px solid #dcdfe6;margin-bottom: 10px;}
</style>
