<template>
	<div>
	<el-tabs v-model="activeName" @tab-click="handleClick">
		<div style="float: left;margin-left:1%;margin-bottom: 1%;">
			<el-button style='margin: 10px 0;' :disabled="!isAuth('app:add')" size="mini" type="primary"
				icon="document" @click="addUpgrade">添加部门</el-button>
		</div>
		<el-table v-loading="tableDataLoading" :data="upgradeData1.records">
			<el-table-column fixed prop="departmentId" label="部门编号" width="100">  
			</el-table-column>
			<el-table-column prop="departmentName" label="部门名称">
			</el-table-column>
			<el-table-column prop="sort" label="排序"  width="80">
					</el-table-column>

			<el-table-column prop="isEnable" label="启用">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.isEnable" @change="change(scope.row.departmentId,scope.row.isEnable,scope.row)"
                        :disabled="!isAuth('positionList:update')" :active-value="openValue"
                        :inactive-value="closeValue" active-color="#13ce66" inactive-color="#ff4949">
                    </el-switch>
                </template>
            </el-table-column>
			<el-table-column prop="updateTime" label="更新时间" width="200">
			</el-table-column>
			<el-table-column label="操作" width="200">
				<template slot-scope="scope">
					<el-button size="mini" type="primary" :disabled="!isAuth('app:update')"
						@click="upgradebj(scope.$index, scope.row)">编辑
					</el-button>
					<el-button size="mini" type="danger" :disabled="!isAuth('app:delete')"
						@click="upgradelete(scope.row)">删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>


		<div style="text-align: center;margin-top: 10px;">
			<el-pagination @size-change="handleSizeChange2" @current-change="handleCurrentChange2"
				:page-sizes="[10, 20, 30, 40]" :page-size="limit" :current-page="page"
				layout="total,sizes, prev, pager, next,jumper" :total="upgradeData1.total">
			</el-pagination>
		</div>
		<!-- 添加升级弹框 -->
		<el-dialog title="添加部门" :visible.sync="dialogFormVisible3" center>
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;"><i
						style="color: #f56c6c;margin-right: 2px;">*</i>部门名称：</span>
				<el-input style="width: 50%;" v-model="departmentName" placeholder="请输入部门名称"></el-input>
			</div>
			<div style="margin-bottom: 10px;display:flex;">
				<span style="width: 200px;display: inline-block;text-align: right;">排序：</span>
				<el-input-number size="medium" v-model="sort"></el-input-number>
			</div>
			<div style="margin-bottom: 10px;display:flex;">
				<span style="width: 200px;display: inline-block;text-align: right;">状态：</span>
				<el-radio-group v-model="gameStatus">
					<el-radio :label="1">启用</el-radio>
					<el-radio :label="0">禁用</el-radio>
				</el-radio-group>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible3 = false">取 消</el-button>
				<el-button type="primary" @click="upgradaddTo()">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 修改升级弹框 -->
		<el-dialog title="修改部门" :visible.sync="dialogFormVisible4" center>
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;"><i
						style="color: #f56c6c;margin-right: 2px;">*</i>部门名称：</span>
				<el-input style="width: 50%;" v-model="departmentName" placeholder="请输入部门名称"></el-input>
			</div>
			<div style="margin-bottom: 10px;display:flex;">
				<span style="width: 200px;display: inline-block;text-align: right;">排序：</span>
				<el-input-number size="medium" v-model="sort"></el-input-number>
			</div>
			<div style="margin-bottom: 10px;display:flex;">
				<span style="width: 200px;display: inline-block;text-align: right;">状态：</span>
				<el-radio-group v-model="gameStatus2">
					<el-radio :label="1">启用</el-radio>
					<el-radio :label="0">禁用</el-radio>
				</el-radio-group>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible4 = false">取 消</el-button>
				<el-button type="primary" @click="upgradbjTo()">确 定</el-button>
			</div>
		</el-dialog>

	</el-tabs>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				limit: 10,
				page: 1,
				openValue: 1,
				closeValue: 0,
				departmentName:'',
				sort:1,
				gameStatus: 1,
				gameStatus2: 1,
				title: '',
				type: '',
				id: '',
				formLabelWidth: '200px',
				activeName: 'first',
				tableDataLoading: true,
				dialogFormVisible3: false,
				dialogFormVisible4:false,
				tableData: [],
				upgradeData: [],
				upgradeData1: [],

			}
		},
		methods: {

			handleSizeChange2(val) {
				this.limit = val;
				this.upgradeSelect()
			},
			handleCurrentChange2(val) {
				this.page = val;
				this.upgradeSelect()
			},

			handleClick(tab, event) {
				this.upgradeSelect()
			},
			// 添加升级弹框
			addUpgrade() {
				this.dialogFormVisible3 = true
				this.sort=1;
 				this.gameStatus = 1;
 				this.departmentName='';
				this.departmentId='';
			},
			// 添加升级
			upgradaddTo() {
				if (this.sort === '') {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '请选择排序',
						type: 'warning'
					})
					return
				}
				if (this.departmentName == '') {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '请输入部门名称',
						type: 'warning'
					});
					return
				}

				this.$http({
					url: this.$http.adornUrl('department/updateDepartment'),
					method: 'post',
					params: this.$http.adornParams({
						'departmentId' :this.departmentId,
						'departmentName': this.departmentName,
						'sort': this.sort,
						'isEnable': this.gameStatus,
					})
				}).then(({
					data
				}) => {
					this.dialogFormVisible3 = false
					this.$message({
						message: '操作成功',
						type: 'success',
						duration: 1500,
						onClose: () => {
							this.upgradeSelect()
							this.dialogFormVisible3 = false
						}
					})
				})
			},
			// 启用与否
			change(id, status,row) {
				this.$http({
					url: this.$http.adornUrl('department/updateDepartment'),
					method: 'post',
					params: this.$http.adornParams({
						'departmentId': id,
						'isEnable': status,
						'departmentName':row.departmentName,
						'sort':row.sort,

					})
				}).then(({
					data
				}) => {
					if(data.code==0){
						this.$message({
							message: '操作成功',
							type: 'success',
							duration: 1500,
							onClose: () => {
								this.upgradeSelect()
							}
						})
					}else{
							this.$message({
								message: data.msg,
								type: 'warning',
								duration: 1500,
								onClose: () => {
									this.upgradeSelect()
									this.dialogFormVisible4 = false
								}
							})
						}

				})
			},
			// 修改升级弹框
			upgradebj(index, rows) {
				this.dialogFormVisible4 = true;
				this.departmentId=rows.departmentId;
				this.departmentName=rows.departmentName;
				this.sort=rows.sort;
				this.gameStatus2 = rows.isEnable
			},
			// 修改升级
			upgradbjTo() {
				this.$http({
					url: this.$http.adornUrl('department/updateDepartment'),
					method: 'post',
					params: this.$http.adornParams({
						'departmentId' :this.departmentId,
						'departmentName': this.departmentName,
						'sort': this.sort,
						'isEnable': this.gameStatus2,
					})
				}).then(({
					data
				}) => {
					this.dialogFormVisible4 = false
					this.$message({
						message: '操作成功',
						type: 'success',
						duration: 1500,
						onClose: () => {
							this.upgradeSelect()
						}
					})
				})
			},
			// 删除升级
			upgradelete(row) {
				this.$confirm(`确定删除此条信息?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http({
						url: this.$http.adornUrl('department/deleteDepartment'),
						method: 'get',
						params: this.$http.adornParams({
							'departmentId': row.departmentId,
						})
					}).then(({
						data
					}) => {
						this.$message({
							message: '删除成功',
							type: 'success',
							duration: 1500,
							onClose: () => {
								this.name = '';
								this.upgradeSelect()
							}
						})
					})
				}).catch(() => {})
			},

			// 升级配置数据列表
			upgradeSelect() {
				this.tableDataLoading = true
				this.$http({
					url: this.$http.adornUrl(`department/selectDepartmentList?page=${this.page}&limit=${this.limit}`),
					method: 'get',
					params: this.$http.adornParams({})
				}).then(({
					data
				}) => {
					this.tableDataLoading = false
					let returnData = data.data;
					this.upgradeData1 = returnData
				})
			},

		},
		mounted() {
			console.log('···························')
			this.upgradeSelect()
		}
	};
</script>

<style>
	.customWidth {
		width: 80% !important;
	}

	.adver_main.box {
		display: block;
		max-width: 100%;
		text-align: center;
		border: 1px dotted rgba(67, 79, 103, .4);
	}

	.cards {
		padding: 0 8px;
		margin-bottom: 15px;
	}

	.adver_main.box a {
		display: flex;
		justify-content: center;
		height: 150px;
		line-height: 150px;
		text-decoration: none
	}

	.bannerManin {
		border: 1px solid #e8e8e8;
		font-size: 14px;
		padding: 0 24px;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 113px;
		color: rgba(0, 0, 0, .65);
	}

	.bannerManin span {
		display: inline-block;
		margin-left: 5px;
	}

	.bannerManin img {
		width: 48px;
		height: 48px;
		border-radius: 50%;
	}

	.bannerbtn {
		display: flex;
		border-top: none !important;
		border: 1px solid #e8e8e8;
		padding: 11px;
		font-size: 14px;
		color: #3E8EF7;
	}

	.bannerbtn a {
		flex: 1;
		text-align: center;
		color: #3E8EF7 !important;
		text-decoration: none;
	}
</style>
