<template>
	<div class="roleManage_container">
		<div class="role_cont_top">
			<div>
				<el-button type="primary" @click="addRole" style="marginRight:14px;">添加角色</el-button>
				<el-button type="primary" @click="setAuth">设置权限</el-button>
			</div>
			<el-input
				placeholder="角色搜索"
				v-model="search_txt"
				@input="getTableList"
				style="maxWidth:359px">
				<i slot="prefix" class="el-input__icon el-icon-search"></i>
			</el-input>
		</div>
		<div class="role_bot">
			<!-- 表格 -->
			<el-table
			ref="roleTable"
			:data="tableData"
			v-loading="isShowloadding"
			element-loading-text="数据加载中..."
			border>
				<el-table-column
				prop="no"
				label="序号"
				align="center">
					<template slot-scope="scope"> <span>{{scope.row.no}}</span> </template>
				</el-table-column>
				<el-table-column
				prop="RoleName"
				label="角色"
				align="center">
					<template slot-scope="scope"> <span>{{scope.row.RoleName}}</span> </template>
				</el-table-column>
				<el-table-column
				prop="RoleType"
				label="角色类型"
				align="center">
					<template slot-scope="scope"> <span>{{scope.row.RoleType}}</span> </template>
				</el-table-column>
				<el-table-column label="操作" align="center">
					<template slot-scope="scope">
						<div style="color:#4099ef; font-size:24px;">
							<span class="editsty" @click.stop="getAuthDetail(scope.row)" style="marginRight:20px;">查看权限</span>
							<!-- <span class="editsty" @click.stop="editRole(scope.row)" style="marginRight:20px;">编辑</span> -->
							<span class="deletesty" @click.stop="delRole(scope.row)">删除</span>
						</div>
					</template>
				</el-table-column>
				<div slot="empty" style="lineHeight:25px;margin:20px 0;color:#95A9C5;">
					<img src="../../assets/img/data_m/table_no.png" alt="" style="display:block;width:105px;height:68px;margin: auto;">
					<span>暂无角色</span>
				</div>
			</el-table>
			<el-col :span="24" class="toolbar">
				<el-pagination 
				layout="total,prev,pager,next,jumper"
				background 
				:current-page="page_no"
				@current-change="handleCurrentChange"
				:page-size="pageSize"
				:total="total" 
				style="float:right;">
				</el-pagination>
			</el-col>
		</div>
		<!-- 添加角色 -->
		<el-dialog
		:title="roleForm.title" 
		:visible.sync="isAddRole"
		:close-on-click-modal="false"
		:modal-append-to-body='false'
		@close="cancelHandle()"
		center
		width="30%"
		v-dialogDrag>
			<div slot="title" style="display:flex;alignItems:center;">
				<img :src="roleForm.title=='添加角色'?$icons.add:$icons.edit" style="color:#fff;width:16px;height:16px;marginRight:5px;">
				<span style="fontSize:16px;">{{roleForm.title}}</span>
			</div>
			<el-form :model="roleForm" :rules="roleRule" ref="roleForm" label-width="100px" class="demo-ruleForm" style="marginTop:15px;">
				<el-form-item label="角色" prop="name">
					<el-input v-model="roleForm.name" placeholder="请填写角色名称" style="width: 90%"></el-input>
				</el-form-item>
				<el-form-item label="角色类型" prop="roleType">
					<el-select v-model="roleForm.roleType" placeholder="选择角色类型" style="width:90%">
						<el-option
							v-for="item in roleTypeArr"
							:key="item"
							:label="item"
							:value="item">
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>	
			<div style="display:flex;justify-content:center;margin:75px 0 26px;">
				<el-button type="primary" style="width:80px;marginRight:24px;" @click="saveRole">保存</el-button>
				<el-button  style="width:80px;" @click="cancelHandle()">取消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import {departInterence} from '@/api/api.js';
export default {
	name:'',
	components: {},
	data () {
		return {
			search_txt:'',//关键字搜索
			isShowloadding:false,
			tableData:[],//表格数据
			page_no:1,
			total:1,
			pageSize:10,
			roleForm:{
				title:'添加角色',
				name:'',
				roleType:'无'
			},
			roleRule:{
				name:[
					{ required: true, message: '请输入角色名称', trigger: 'blur' },
				],
				roleType:[
					{ required: true, message: '请选择角色类型', trigger: 'blur' },
				]
			},
			roleTypeArr:['无','管理员','ficc管理员','ficc销售','权益管理员','权益销售','ficc销售主管','ficc销售组长','权益销售组长','ficc部门经理','权益部门经理','ficc研究员','权益研究员'],
		};
	},
	methods: {
		/* 角色表格数据 */
		getTableList() {
			this.isShowloadding = true
			departInterence.getRoleList({
				PageSize:this.pageSize,
				CurrentIndex:this.page_no,
				KeyWord:this.search_txt
			}).then(res => {
				if(res.Ret === 200) {
					this.isShowloadding = false;
					// this.tableData = res.Data.List;
					let arr = [];
					res.Data.List&&res.Data.List.forEach((item,index) => {
						let obj ={
							no:index+1,
							...item
						}
						arr.push(obj)
					});
					this.tableData = arr;
					this.total = res.Data.Paging.Totals || 1;
				}
			})
		},
		/* 页码改变 */
		handleCurrentChange(page) {
			this.page_no = page;
			this.getTableList();
		},
		/* 查看权限 */
		getAuthDetail(item) {
			this.$router.push({
				path:'/Sysauth',
				query:{
					id:item.RoleId
				}
			})
		},
		/* 设置权限 */
		setAuth() {
			this.$router.push({path:'/Sysauth'})
		},
		/* 添加角色 */
		addRole() {
			this.isAddRole = true;
			this.roleForm = {
				title:'添加角色',
				name:'',
				roleType:'无'
			}
		},
		// 取消
		cancelHandle() {
			this.isAddRole = false;
			this.roleForm = {
				title:'添加角色',
				name:'',
				roleType:'无'
			}
			this.$refs.roleForm.resetFields();
		},
		/* 保存角色 */
		saveRole() {
			this.$refs.roleForm.validate((valid) => {
				if (valid) {
					if(this.roleForm.title == '添加角色') {
						departInterence.addRole({
							RoleName:this.roleForm.name,
							roleType:this.roleForm.roleType
						}).then(res => {
							if(res.Ret === 200) {
								this.$message.success(res.Msg)
								this.getTableList();
								this.isAddRole = false;
							}
						})
					}else {
						departInterence.editRole({
							RoleId:Number(this.roleForm.role_id),
							RoleName:this.roleForm.name
						}).then(res =>{
							if(res.Ret === 200) {
								this.$message.success(res.Msg);
								this.getTableList();
								this.isAddRole = false;
							}
						})
					}
				}
			})			
		},
		/* 编辑角色 */
		editRole(item) {
			this.isAddRole = true;
			this.roleForm = {
				title:'编辑角色',
				name:item.RoleName,
				role_id:item.RoleId,
			}
		},
		/*  删除角色*/
		delRole(item) {
			this.$confirm('是否确认删除该角色?','提示',{
				type:'warning'
			}).then(() => {
				departInterence.delRole({
					RoleId:item.RoleId
				}).then(res => {
					if(res.Ret === 200) {
						this.$message.success('删除成功');
						this.isAddRole = false;
						this.getTableList();
					}
				})
			}).catch(() => {});
		}
	},
	mounted() {
		this.getTableList()
	},
}
</script>
<style lang='scss' >
.roleManage_container {
	/* reset */
	.el-form-item__label {
		font-size: 16px;
		padding-right: 20px !important;
	}
	.el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
		content: '';
	}
	.role_cont_top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border: 1px solid #ECECEC;
		padding: 20px 30px;
		background: #fff;
		border-radius: 4px;
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
	}
	.role_bot {
		min-height: calc(100vh - 260px);
		padding: 20px 30px;
		background: #fff;
		margin-top: 20px;
		position: relative;
		border: 1px solid #ECECEC;
		border-radius: 4px;
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
	}
}
</style>