<template>
	<div class="container" style="margin: 20px;">
		<el-form :inline="true" :model="form" class="demo-form-inline">
			<el-form-item label="用户名">
				<el-input v-model="form.username" placeholder="用户名"></el-input>
			</el-form-item>
			<el-form-item label="密码">
				<el-input v-model="form.password" placeholder="密码"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="AddSubmit">添加下级管理</el-button>
			</el-form-item>
		</el-form>
		<el-table :data="tableData" style="width: 100%">
			<el-table-column prop="id" label="ID" >
				<template slot-scope="scope">
					{{scope.row.id}}
				</template>
			</el-table-column>
			<el-table-column prop="username" label="用户名" >
				<template slot-scope="scope">
					{{scope.row.username}}
				</template>
			</el-table-column>
			<el-table-column prop="password" label="密码" >
				<template slot-scope="scope">
					{{scope.row.password}}
				</template>
			</el-table-column>
			<el-table-column prop="password" label="操作" >
				<template slot-scope="scope">
					<el-button type="warning" @click="DelSubAdmin(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination background layout="prev, pager, next" :total="model.TotalCount" @current-change="Pages"
			style="text-align: right;margin-top: 10px;">
		</el-pagination>
	</div>
</template>

<script>
	import {
		AddSubAdmin,
		GetSubAdminList,
		DelAdmin
	} from '../../api/user.js'
	export default {
		data() {
			return {
				tableData: [],
				model: {
					"KeyWord": "",
					"TotalCount": 0,
					"PageIndex": 1,
					"PageSize": 20,
					"Sort": [{
						"Field": "",
						"Type": 0
					}]
				},
				form: {
					"username": "",
					"password": ""
				}
			}
		},
		created() {
			this.ShowSubAdmin()
		},
		methods: {
			// 添加下级管理数据
			AddSubmit(){
				if(this.form.username==''){
					this.$message.error('请输入用户名')
					return
				}
				if(this.form.password==''){
					this.$message.error('请输入密码')
					return
				}
				AddSubAdmin(this.form).then(res=>{
					if(res.data.code==200){
						this.$message.success('添加下级管理成功')
						this.ShowSubAdmin()
					}else{
						this.$message.error('添加下级管理失败')
					}
				})
			},
			Pages(e) {
				this.model.PageIndex = e
				this.ShowSubAdmin()
			},
			ShowSubAdmin() {
				GetSubAdminList(this.model).then(res => {
					this.tableData = res.data.data.rows
					this.model.TotalCount = res.data.data.total
				})
			},
			DelSubAdmin(id) {
				DelAdmin(id).then(res => {
					console.log('数据')
					if (res.data.code == 200) {
						this.$message.success('删除下级管理成功')
						this.ShowSubAdmin()
					} else {
						this.$message.error('删除下级管理失败')
					}
				})
			}
		}
	}
</script>

<style>
</style>
