<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="role" node-key="id" :data="role.list" :default-checked-keys="role.checked" :props="role.props" check-strictly default-expand-all show-checkbox></el-tree>
			</div>
		</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 {
	data(){
		return {
			visible: false,
			isSaveing: false,
			role: {
				list: [],
				checked: [],
				props: {
					label: (data)=>{
						return data.title
					}
				}
			},
			form: {
				uid: '',
				role: []
			}
		}
	},
	mounted(){
		this.getRole();
	},
	methods:{
		open(){
			this.visible = true;
			return this;
		},
		async submit(){
			this.isSaveing = true;
			let role = this.$refs.role.getCheckedNodes();
			this.form.role = [];
			role.map(item => {
				this.form.role.push(item.id);
			})
			this.isSaveing = true;
			var res = await this.$API.user.uprole.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 getRole(){
			let res = await this.$API.user.role.list.get();
			this.role.list = res.data;
		},
		setData(data){
			data.map(item => {
				this.role.checked = item.role_id;
				this.form.uid = item.uid;
			})
		}
	}
}
</script>

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