<template>
<el-dialog title="角色权限设置" v-model="visible" :width="500" destroy-on-close @closed="$emit('closed')">
	<el-tabs tab-position="top">
		<el-tab-pane label="菜单权限">
			<div class="treeMain">
				<el-tree ref="menu" node-key="id" :data="menu.list" :default-checked-keys="menu.checked" :props="menu.props" check-strictly show-checkbox></el-tree>
			</div>
		</el-tab-pane>
		<el-tab-pane label="数据权限">
			<el-form label-width="100px" label-position="left">
				<el-form-item label="数据权限">
					<sc-select v-model="form.data_range" dic="data_auth" style="width: 80%;"></sc-select>
				</el-form-item>
			</el-form>
		</el-tab-pane>
		<el-tab-pane label="控制台">
			<el-form label-width="100px" label-position="left">
				<el-form-item label="控制台视图">
					<el-select v-model="form.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 #footer>
		<el-button @click="visible=false" >取 消</el-button>
		<el-button type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
	</template>
</el-dialog>
</template>

<script>
export default {
	emits: ['success', 'closed'],
	data() {
		return {
			visible: false,
			isSaveing: false,
			menu: {
				list: [],
				checked: [],
				props: {
					label: (data)=>{
						return data.title
					}
				}
			},
			group: {
				list: [],
				checked: [],
				props: {}
			},
			type: {
				list: [],
				checked: [],
				props: {}
			},
			form: {
				role_id: 0,
				auth: [],
				data_range: "",
				dashboard: "work",
			},
			dashboardOptions: [
				{
					value: '0',
					label: '数据统计',
					views: 'stats'
				},
				{
					value: '1',
					label: '工作台',
					views: 'work'
				},
			]
		}
	},
	mounted() {
		this.getMenu();
	},
	methods: {
		open(){
			this.visible = true;
			return this;
		},
		async submit(){
			let authSelect = this.$refs.menu.getCheckedNodes();
			this.form.permissions = [];
			authSelect.map(item => {
				this.form.permissions.push(item.id);
			})
			this.isSaveing = true;
			var res = await this.$API.auth.role.auth.post(this.form);

			this.isSaveing = false;
			if(res.code == 1){
				this.$emit('success', this.form)
				this.visible = false;
				this.$message.success("操作成功")
			}else{
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		async getMenu(){
			var res = await this.$API.auth.menu.list.get({is_tree: 1});
			this.menu.list = res.data;
		},
		//表单注入数据
		setData(data){
			this.form.id = data.id;
			this.form.data_range = data.data_range;
			this.form.dashboard = data.dashboard;
			// this.form.mobile_module = data.mobile_module;
			data.permissions.map(item => {
				this.menu.checked.push(item.id);
			})
		}
	}
}
</script>

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