<!-- 权限管理 -->
<template>
	<div class='authorityManage'>
		<div style="text-align: right">
			<el-button type="primary" @click="addAuthority" icon="el-icon-plus">新增</el-button>
		</div>
		<div>
			<el-table
							:data="authorityData"
							style="width: 100%">
				<el-table-column
								prop="name"
								align="center"
								label="权限名称">
				</el-table-column>
				<el-table-column
								prop="description"
								align="center"
								label="权限描述">
				</el-table-column>
				<el-table-column
								label="操作"
								align="center">
					<template slot-scope="scope">
						<el-button @click="editAuthority(scope.row)" size="small">编辑</el-button>
						<el-button @click="deleteAuthority(scope.row)" size="small">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div>
			<el-dialog title="权限" :show-close="false" :append-to-body="true" :close-on-click-modal="false" :close-on-press-escape="false" :lock-scroll="true" :visible.sync="dialogAuthorityVisible">
				<div slot="title" class="header-title">
					<span class="dialogHeader">{{dialogName}}</span>
					<img @click="closeAuthorityDialog('authorityForm')" class="dialogHeaderClose" src="../assets/images/modal-gb.png" />
				</div>
				<div style="margin-top: 100px;text-align: left;">
					<el-form ref="authorityForm" :rules="rules" :model="authorityForm" label-width="100px">
						<el-form-item label="权限名称" prop="authorityName">
							<el-input v-model="authorityForm.name"></el-input>
						</el-form-item>
						<el-form-item label="权限描述" prop="authorityDes">
							<el-input type="textarea" v-model="authorityForm.description"></el-input>
						</el-form-item>
					</el-form>
					<div style="text-align: center;margin-top: 50px;">
						<el-button type="primary" @click="submitAuthorityDialog('authorityForm')">确定</el-button>
						<el-button type="primary" @click="closeAuthorityDialog('authorityForm')">取消</el-button>
					</div>
				</div>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
	//例如：import 《组件名称》 from '《组件路径》';

	export default {
		name: "AuthorityManage",
//import引入的组件需要注入到对象中才能使用
		components: {},
		data () {
//这里存放数据
			return {
				authorityData: [
				],
				dialogName: '新增权限',
				dialogAuthorityVisible:false,
				authorityForm: {
					name: '',
					description: ''
				},
				rules:{
					name: [
						{ required: true, message: '请输入权限名称', trigger: 'blur' },
					],
					description: [
						{ required: true, message: '请输入权限描述', trigger: 'blur' },
					],
				}
			};
		},
//监听属性 类似于data概念
		computed: {},
//监控data中的数据变化
		watch: {},
//方法集合
		methods: {
			getAuthority() {
				this.$axios.putAuthority().then((res) => {
					console.log(res);
					if (res.request.status === 200) {
						this.authorityData = res.data;
					}
				})
			},
			addAuthority() {
				this.dialogName = '新增权限';
				this.dialogAuthorityVisible = true;
				this.authorityForm.name = '';
				this.authorityForm.description = '';
				this.authorityForm.id = null;
			},
			editAuthority(val) {
				this.dialogName = '修改权限';
				this.dialogAuthorityVisible = true;
				console.log(val)
				this.authorityForm = val;
			},
			closeAuthorityDialog() {
				this.authorityForm.name = '';
				this.authorityForm.description = '';
				this.dialogAuthorityVisible = false;
				this.getAuthority();
			},
			submitAuthorityDialog(val) {
				this.$refs[val].validate((valid) => {
					if (valid) {
						if (this.dialogName === '新增权限') {
							this.$axios.postAddAuthority(this.authorityForm).then((res) => {
								console.log(res)
								if (res.request.status === 200) {
									this.$message({
										message: '新增权限成功!',
										type: 'success'
									});
									this.closeAuthorityDialog();
								}
							})
						} else {
							console.log(this.authorityForm)
							this.$axios.postAddAuthority(this.authorityForm).then((res) => {
								console.log(res)
								if (res.request.status === 200) {
									this.$message({
										message: '修改权限成功!',
										type: 'success'
									});
									this.closeAuthorityDialog();
								}
							})
						}
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			deleteAuthority(val) {
				console.log(val)
				this.$axios.deleteAuthority(val.id).then((res) => {
					console.log(res)
					if (res.request.status === 200) {
						this.$message({
							message: '删除权限成功!',
							type: 'success'
						});
						this.closeAuthorityDialog();
					}
				})
			}
		},
//生命周期 - 创建完成（可以访问当前this实例）
		created () {

		},
//生命周期 - 挂载完成（可以访问DOM元素）
		mounted () {
			this.getAuthority()
		},
		beforeCreate () {
		}, //生命周期 - 创建之前
		beforeMount () {
		}, //生命周期 - 挂载之前
		beforeUpdate () {
		}, //生命周期 - 更新之前
		updated () {
		}, //生命周期 - 更新之后
		beforeDestroy () {
		}, //生命周期 - 销毁之前
		destroyed () {
		}, //生命周期 - 销毁完成
		activated () {
		}, //如果页面有keep-alive缓存功能，这个函数会触发
	}
</script>
<style scoped>
</style>
