<template>
	<div class="all-box">
		<div class="all">
			<div class="flex-box">
				<div class="terr-left" v-loading="item_loading">
					<div style="text-align: center; padding: 10px 0;"><el-button type="primary" @click="Group(1)">添加分类</el-button></div>
					<el-menu v-if="groups_list.length > 0" :default-active="defaultActive" class="el-menu-vertical-demo elMenuCustomRule_Z">
						<el-menu-item v-for="(item, index) in groups_list" :key="index" :index="index.toString()" @click="getGroupsInfo(item, index)">
							<i class="el-icon-s-help" v-if="index == 0"></i>
							<span slot="title">{{ item.name }}</span>
						</el-menu-item>
					</el-menu>
					<div v-else style="text-align: center;margin-top: 10%;" class="fontColorC">
						<img src="@/assets/image/nodata.png" style="width: 180px;height: 120px;margin: 30px auto;" />
						<div>还没有自定义分类</div>
					</div>
				</div>
				<div class="terr-right border-right flex-1" v-loading="table_loading" v-if="groups_list.length > 0">
					<div class="flex-box flex-v-ce margin-bottom" style="height: 40px;">
						<div class="groupsName" style="font-size: 20px;">{{ params.name }}</div>
						<el-button @click="Group(2)" size="medium" style="margin-left:15px;" v-show="params.name != '全部分类'">编辑</el-button>
						<div class="flex-1"></div>
					</div>
					<FormBox style="width: 800px;">
						<div class="form-item">
							<div class="form-label">上架状态</div>
							<div class="form-search">
								<el-select v-model="params.status" size="medium">
									<el-option v-for="item in statusArr" :key="item.id" :label="item.name" :value="item.id"></el-option>
								</el-select>
							</div>
						</div>
						<div class="form-item">
							<div class="form-label">奖品搜索</div>
							<div class="form-search">
								<el-input size="medium" v-model="params.keyword" clearable placeholder="请输入"  maxlength="20"></el-input>
							</div>
						</div>
					</FormBox>
					
					<div style="margin: 10px 0;">
						<el-button type="primary" @click="isPrizeShow = true" size="medium">新增奖品</el-button>
						<el-button type="success" plain @click="putaway(1)" size="medium">批量上架</el-button>
						<el-button type="danger" plain @click="putaway(2)" size="medium">批量下架</el-button>
						<el-button type="primary" plain @click="exportExcel" size="medium">导 出</el-button>
					</div>

					<el-table :data="table_list" @selection-change="selectionChange">
						<el-table-column type="selection"></el-table-column>
						<el-table-column width="20px">
							<template slot-scope="scope">
								<el-tooltip v-if="scope.row.top == 1" class="item" effect="dark" content="已置顶" placement="top">
									<i class="el-icon-discount blue" style="position:relative;left:-10px;font-size: 20px;"></i>
								</el-tooltip>
							</template>
						</el-table-column>
						<el-table-column label="名称" align="center" prop="name" min-width="150"></el-table-column>
						<el-table-column label="展示图" align="center" prop="image">
							<template slot-scope="scope">
								<el-image style="width: 40px; height: 40px" :src="scope.row.image" :preview-src-list="[scope.row.image]"></el-image>
							</template>
						</el-table-column>
						<el-table-column label="价格(功勋点)" align="center" prop="price" min-width="100"></el-table-column>
						<el-table-column label="库存" align="center" prop="stock" min-width="100">
							<template slot-scope="scope">
								<span v-if="scope.row.stock_type == 1">不限</span>
								<span v-else>
									<span v-if="scope.row.stock<=3" class="red">{{ scope.row.stock }}</span>
									<span v-else >{{ scope.row.stock }}</span>
								</span>
							</template>
						</el-table-column>
						<el-table-column label="兑换次数" align="center" prop="exchange_count" min-width="100"></el-table-column>
						<el-table-column label="兑换人数" align="center" prop="employee_count" min-width="100"></el-table-column>
						<el-table-column label="状态" align="center" prop="status" min-width="100">
							<template slot-scope="scope">
								<span v-if="scope.row.status == 1" class="green">已上架</span>
								<span v-else class="fontColorD">未上架</span>
							</template>
						</el-table-column>
						<el-table-column label="操作" min-width="200">
							<template slot-scope="scope">
								<el-link type="warning" @click="deleteItem(scope.row.id)" :underline="false" style="padding-right: 10px;">删除</el-link>
								<el-link type="primary" @click="compile(scope.row)" :underline="false" style="padding-right: 10px;">编辑</el-link>
								<el-link type="primary" v-if="scope.row.status == 0" @click="putaway2(scope.row.id, 1)" :underline="false" style="padding-right: 10px;">
									上架
								</el-link>
								<el-link type="primary" v-else @click="putaway2(scope.row.id, 2)" :underline="false" style="padding-right: 10px;">下架</el-link>
								<el-link type="primary" v-if="scope.row.top == 0" @click="topSave(scope.row.id, 1)" :underline="false" style="padding-right: 10px;">置顶</el-link>
								<el-link type="primary" v-else @click="topSave(scope.row.id, 2)" :underline="false" style="padding-right: 10px;">取消置顶</el-link>
							</template>
						</el-table-column>
						<template slot="empty">
							<noData></noData>
						</template>
					</el-table>
					<center style="padding: 20px 0;">
						<el-pagination
							background
							@size-change="handleSizeChange"
							@current-change="handleCurrentChange"
							:page-sizes="[10, 20, 50, 100]"
							layout="total, sizes, prev, pager, next"
							:page-size="params.page_size"
							:current-page="params.page"
							:total="total"
						></el-pagination>
					</center>
				</div>
				<div class="flex-1" v-else><noData></noData></div>
			</div>
		</div>

		<!-- 新增分类 -->
		<el-dialog :title="popupType == 1 ? '新增分类' : '编辑分类'" width="460px" :visible.sync="groupShow" :close-on-click-modal="false">
			<el-form ref="addTypeName" :model="addTypeName" label-width="85px" @submit.native.prevent>
				<el-form-item
					label="分类名称"
					:rules="[{ required: true, message: '分类名称不能为空' }, { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }]"
					prop="name"
				>
					<el-input v-model="addTypeName.name" placeholder="请输入分类名称" maxlength="10" show-word-limit></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer flex-v-ce flex-box">
				<el-button type="danger" v-if="popupType == 2" :loading="delLoad" @click="delItem">删除</el-button>
				<div class="flex-1"></div>
				<el-button @click="groupShow = false">取 消</el-button>
				<el-button type="primary" @click="addTypeSave('addTypeName')">确 定</el-button>
			</div>
		</el-dialog>

		<!-- 新增分类 -->
		<el-dialog :title="newForm.id ? '编辑奖品' : '新增奖品'" width="650px" top="5vh" :visible.sync="isPrizeShow" :close-on-click-modal="false">
			<el-form ref="newForm" :rules="rules" :model="newForm" label-width="110px">
				<el-form-item label="所属分类" prop="category_id">
					<el-select v-model="newForm.category_id" placeholder="请输入分类" clearable>
						<el-option v-for="item in retrun_groups_list()" :key="item.id" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="名称" prop="name">
					<el-input v-model="newForm.name" placeholder="请输入名称" auto-complete="off" maxlength="20" show-word-limit></el-input>
				</el-form-item>
				<el-form-item label="展示图片" prop="image">
					<div class="flex-box">
						<div>
							<upload
								:headers="Xtoken"
								:limit="100"
								:action="'https://integralsys.oss-cn-shenzhen.aliyuncs.com'"
								:on-success="handleFilesSuccess"
								:before-upload="beforeUpload"
							>
								<img v-if="newForm.image" :src="newForm.image" class="avatar" />
								<i v-else class="el-icon-plus avatar-uploader-icon" style="border: 1px solid #f1f1f1;border-radius: 5px;"></i>
							</upload>
							<div class="orange" style="font-size: 12px;">建议图片尺寸200*200</div>
						</div>
						<el-button style="margin-left: 20px;height: 30px;" size="small" @click="deleteImg" type="danger" plain v-if="newForm.image">删除</el-button>
					</div>
				</el-form-item>
				<el-form-item label="价格(功勋点)" prop="price">
					<el-input v-model="newForm.price" placeholder="请输入价格" auto-complete="off" @input="[(newForm.price = newForm.price.replace(/[^\d]/g, ''))]"></el-input>
				</el-form-item>
				<el-form-item label="库存" prop="stock">
					<el-input v-model="newForm.stock" placeholder="不填默认为无限" auto-complete="off" @input="[(newForm.stock = newForm.stock.replace(/[^\d]/g, ''))]"></el-input>
				</el-form-item>
				<el-form-item label="奖品描述" prop="desc">
					<el-input v-model="newForm.desc" placeholder="请输入奖品描述" type="textarea" rows="4" maxlength="200" show-word-limit></el-input>
				</el-form-item>
				<el-form-item label="是否上架" prop="status">
					<el-radio-group v-model="newForm.status">
						<el-radio :label="1">上架</el-radio>
						<el-radio :label="0">下架</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer flex-v-ce flex-box">
				<div class="flex-1"></div>
				<el-button @click="isPrizeShow = false">取 消</el-button>
				<el-button type="primary" :loading="saveLoad" @click="subGroupForm('newForm')">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
import EmployeeSelector from '@/components/EmployeeSelector.vue';
import moment from 'moment';
import { _debounce } from '@/api/auth';
import Season from '@/components/season';
import upload from '@/components/upload';
export default {
	data() {
		return {
			isEmployeeShow: false,
			employeeOrdept: !this.$authoritys('employee') && !this.$authoritys('dept_manager'),
			tableLoadingRule: false, //规则细则加载
			keyword: '',
			loading: false,

			item_loading: false,
			table_loading: false,
			groups_list: [], //左边分类
			table_list: [],
			total: null,
			params: {
				page: 1,
				page_size: 10,
				category_id: '',
				status: -1,
				keyword: '',
				name: ''
			},
			groupShow: false,
			saveLoad: false,
			delLoad: false,
			employee_not_select: [],
			employees_selected: { employee: [], dept: [] },
			employees: '',

			selectType: {}, //选择的分类
			addTypeName: {
				id: '',
				name: ''
			},
			popupType: 1, //添加1 编辑2
			defaultActive: '0',
			selectionID: [],

			// 添加编辑奖品
			isAddShwo: false,
			isPrizeShow: false,
			Xtoken: { 'X-Token': this.$getToken() },
			rules: {
				name: [{ required: true, message: '请输入奖品名称', trigger: 'blur' }, { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }],
				image: [{ required: true, message: '请上传奖品展示图', trigger: 'blur' }],
				desc: [{ required: true, message: '请输入奖品描述', trigger: 'blur' }],
				price: [{ required: true, message: '请输入奖品价格（功勋点）', trigger: 'blur' }],
				category_id: [{ required: true, message: '请选择分类', trigger: 'change' }],
				status: [{ required: true, message: '请选择上架状态', trigger: 'change' }]
			},
			imageUrl: '',
			title: '奖品添加',
			newForm: {
				id: '',
				name: '',
				image: '',
				desc: '',
				price: '',
				stock_type: '',
				stock: '',
				category_id: '',
				status: 1
			},
			statusArr:[
				{name:'全部',id:-1},
				{name:'已上架',id:1},
				{name:'未上架',id:0}
			]
		};
	},
	watch: {
		isPrizeShow(val) {
			if (!val) {
				this.$refs['newForm'].resetFields();
				this.newForm = {
					id: '',
					name: '',
					image: '',
					desc: '',
					price: '',
					stock_type: '',
					stock: '',
					category_id: '',
					status: 1
				};
			} else {
				if (this.params.category_id) {
					this.newForm.category_id = this.params.category_id;
				}
			}
		},
		groupShow(val) {
			if (!val) {
				this.$refs['addTypeName'].resetFields();
				this.popupType = 1;
			}
		},
		'params.status'(){
			this.params.page = 1;
			this.open_right();
		},
		'params.keyword': {
			deep: true,
			handler: _debounce(function(val) {
				this.params.page = 1;
				this.open_right();
			}, 1000)
		}
	},
	components: { EmployeeSelector, upload },
	methods: {
		retrun_groups_list() {
			let arr = JSON.parse(JSON.stringify(this.groups_list));
			arr.shift();
			return arr;
		},
		topSave(id, index) {
			this.$axios('post', '/api/shop/goods/top', { top: index == 1 ? 1 : 0, id: id }).then(res => {
				this.$message.success(res.data.msg);
				this.open_right();
			});
		},
		putaway2(id, index) {
			let str = `确定要${index == '1' ? '上架' : '下架'}所勾选的奖品吗?`;
			this.$confirm(str, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$axios('post', '/api/shop/goods/update', { status: index == 1 ? 1 : 0, ids: JSON.stringify([id]) }).then(res => {
					this.$message.success(res.data.msg);
					this.open_right();
				});
			});
		},
		// 批量上/下架
		putaway(index) {
			if (this.selectionID.length == 0) {
				this.$message.error('请选择奖品');
				return false;
			}
			let str = `确定要${index == '1' ? '上架' : '下架'}所勾选的奖品吗?`;
			this.$confirm(str, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$axios('post', '/api/shop/goods/update', { status: index == 1 ? 1 : 0, ids: JSON.stringify(this.selectionID) }).then(res => {
					this.$message.success(res.data.msg);
					this.open_right();
				});
			});
		},
		selectionChange(selection) {
			let listId = [];
			selection.forEach(item => {
				listId.push(item.id);
			});
			this.selectionID = listId;
		},
		// 选择分类
		getGroupsInfo(item, index) {
			this.params.category_id = item.id;
			this.params.name = item.name;
			this.params.page = 1;
			this.defaultActive = index.toString();
			this.open_right();
		},
		addTypeSave(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					let data = {
						name: this.addTypeName.name
					};
					if (this.addTypeName.id) {
						data.id = this.addTypeName.id;
					}
					this.$axios('POST', 'api/shop/goods/category', data)
						.then(res => {
							this.$message.success('提交成功');
							this.getGroupsList(false);
						})
						.finally(() => {
							this.groupShow = false;
						});
				}
			});
		},

		beforeUpload(file) {
			const isJPG = /^image\/(jpeg|png|jpg)$/.test(file.type);
			const isLt2M = file.size / 1024 / 1024 < 5;
			if (!isJPG) {
				this.$message.error('上传图片只能是 JPEG,PNG,JPG 格式!');
			}
			if (!isLt2M) {
				this.$message.error('上传图片大小不能超过 5MB!');
			}
			return isJPG && isLt2M;
		},
		handleFilesSuccess(response, file, fileList) {
			this.newForm.image = response.url;
		},
		exportExcel() {
			let url = `${process.env.VUE_APP_BASE_API}api/download/shop/goods?category_id=${this.params.category_id}&status=-1&page=1&page_size=3000&download_employee_id=${this.$getUserData().id}&keyword=${
				this.params.keyword
			}`;
			window.open(url, '_blank');
		},
		//添加||编辑;
		Group(index) {
			this.groupShow = true;
			this.popupType = index;
			if (index == 2) {
				//编辑
				this.addTypeName = {
					id: this.params.category_id,
					name: this.params.name
				};
			} else {
				if (this.$refs['addTypeName']) {
					this.$refs['addTypeName'].resetFields();
				}
				this.addTypeName = {
					id: '',
					name: ''
				};
			}
		},
		// 选人组件提交
		move_employee_confirm(data) {
			this.newForm.employees = [];
			this.employees = '';
			this.employees_selected = data;
			if (data.employee !== null && data.employee.length != 0) {
				data.employee.forEach(element => {
					this.newForm.employees.push(element.id);
					this.employees += element.name + ',';
				});
			}
			this.isEmployeeShow = false;
		},
		//删除奖品
		deleteItem(id) {
			this.$confirm('确定要删除该奖品吗?', '删除奖品', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$axios('DELETE', 'api/shop/goods', { id: id }).then(res => {
					this.$message.success(res.data.msg);
					this.open_right();
				});
			});
		},
		// 删除分类
		delItem() {
			this.$confirm('确定要删除当前分类吗?', '删除分类', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.delLoad = true;
				this.$axios('DELETE', '/api/shop/goods/category', { id: this.params.category_id })
					.then(res => {
						this.$message.success(res.data.msg);
						this.getGroupsList(true);
					})
					.finally(() => {
						this.delLoad = false;
						this.groupShow = false;
					});
			});
		},
		// 提交表单
		subGroupForm(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					this.saveFun();
				}
			});
		},
		deleteImg() {
			this.newForm.image = '';
		},
		//编辑奖品
		compile(item) {
			this.newForm = {
				id: item.id,
				name: item.name,
				image: item.image,
				desc: item.desc,
				price: item.price,
				stock: item.stock_type === 0 ? Number(item.stock) : '',
				category_id: item.category_id,
				status: item.status
			};
			this.isPrizeShow = true;
		},
		saveFun() {
			if (this.newForm.price === 0) {
				this.$message.error('价格不能为0');
				return false;
			}
			if (this.newForm.stock === 0 || this.newForm.stock === '0') {
				this.$message.error('库存数量不能为0');
				return false;
			}
			if (this.newForm.price > 10000000) {
				this.$message.error('价格不能大于10000000');
				return;
			}
			if (this.newForm.stock > 10000000) {
				this.$message.error('库存数量不能大于10000000');
				return;
			}
			let data = {
				name: this.newForm.name,
				image: this.newForm.image,
				desc: this.newForm.desc,
				price: this.newForm.price,
				stock_type: this.newForm.stock ? 0 : 1,
				stock: this.newForm.stock,
				category_id: this.newForm.category_id,
				status: this.newForm.status
			};
			if (this.newForm.id) {
				data.id = this.newForm.id;
			}
			this.saveLoad = true;
			this.$axios('post', 'api/shop/goods', data)
				.then(res => {
					this.$message.success('提交成功');
					this.open_right();
				})
				.finally(() => {
					this.isPrizeShow = false;
					setTimeout(() => {
						this.saveLoad = false;
					}, 500);
				});
		},
		// 重置表单
		resetForm(formName) {
			this.$refs[formName].resetFields();
			this.newForm.employees = [];
			this.employees = '';
			this.employee_not_select = [];
			this.employees_selected = { employee: [], dept: [] };
			this.groupShow = false;
		},
		// 页码变更
		handleCurrentChange(val) {
			this.params.page = val;
			this.open_right();
		},
		handleSizeChange(val) {
			this.params.page_size = val;
			this.open_right();
		},
		open_right() {
			let data = {
				page: this.params.page,
				page_size: this.params.page_size,
				// category_id:this.params.category_id,
				status: this.params.status,
				keyword: this.params.keyword,
				export: 0
			};
			if (this.params.category_id) {
				data.category_id = this.params.category_id;
			}
			this.$axios('get', '/api/shop/goods', data)
				.then(res => {
					this.table_list = res.data.data.list;
					this.total = res.data.data.count;
				})
				.finally(() => {
					this.table_loading = false;
				});
		},

		// 获取分类列表
		//  is是否刷新奖品列表
		getGroupsList(is) {
			this.item_loading = true;
			this.$axios('get', '/api/shop/goods/category/list')
				.then(res => {
					this.groups_list = res.data.data.list;
					if (this.groups_list.length > 0) {
						this.groups_list.unshift({ id: 0, name: '全部分类' });
					}
					if (is) {
						this.params.category_id = '';
						this.params.name = '';
						if (this.groups_list[0]) {
							this.params.category_id = this.groups_list[0].id;
							this.params.name = this.groups_list[0].name;
							this.open_right();
						}
						setTimeout(() => {
							this.$nextTick(() => {
								this.defaultActive = '0';
							});
						}, 300);
					} else {
						this.groups_list.some(item => {
							if (item.id == this.params.category_id) {
								this.params.name = item.name;
								return true;
							}
						});
					}
				})
				.finally(() => {
					this.item_loading = false;
				});
		}
	},
	mounted() {
		this.getGroupsList(true); //避免首次进入调用两次open_right（）方法，加上true判断
	}
};
</script>
<style scoped lang="scss">
.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}
.avatar-uploader .el-upload:hover {
	border-color: #409eff;
}
.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	line-height: 178px;
	text-align: center;
}
.avatar {
	width: 178px;
	height: 178px;
	display: block;
}

::v-deep .itemClass .el-cascader-menu .el-cascader-menu__wrap li.el-cascader-node {
	height: auto;
	max-width: 500px;
	.el-cascader-node__label {
		white-space: initial;
		overflow: initial;
		text-overflow: initial;
	}
}
::v-deep .el-menu-item {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	&.is-active {
		background-color: #ecf5ff;
	}
}

.architecture {
	display: flex;
	text-align: center;
	// margin-top:20px;
	padding-left: 0px;
	background-color: #fff;
	width: 100%;
	overflow: hidden;
	cursor: default;
	min-height: calc(60vh - 160px);
}
.architecture .RuleLine {
	display: table-cell;
	width: 1px;
	min-height: 600px;
	background: hsl(0, 2%, 76%);
}
.architecture .RuleLeft {
	display: block;
	text-align: center;
	padding: 20px 10px;
	border-right: none;
	overflow-y: auto;
	overflow-x: none;
}
/*滚动条的宽度*/

.architecture .RuleLeft::-webkit-scrollbar {
	width: 9px;
	height: 9px;
}
.architecture .RuleRight::-webkit-scrollbar {
	width: 9px;
	height: 9px;
}

/*外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果*/

.architecture .RuleLeft::-webkit-scrollbar-track {
	width: 6px;
	background-color: #fff0;
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
}
.architecture .RuleRight::-webkit-scrollbar-track {
	width: 6px;
	background-color: #fff0;
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
}

/*滚动条的设置*/

.architecture .RuleLeft::-webkit-scrollbar-thumb {
	background-color: #fff0;
	background-clip: padding-box;
	min-height: 28px;
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
}
.architecture .RuleRight::-webkit-scrollbar-thumb {
	background-color: #fff0;
	background-clip: padding-box;
	min-height: 28px;
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
}
/*滚动条移上去的背景*/

.architecture .RuleLeft:hover::-webkit-scrollbar-thumb {
	overflow-x: none;
	background-color: rgba(144, 147, 153, 0.3);
}
.architecture .RuleRight:hover::-webkit-scrollbar-thumb {
	background-color: rgba(115, 118, 124, 0.3);
}

.architecture .RuleLeft .company_name {
	position: relative;
	display: block;
	font-family: 'Microsoft YaHei';
	text-align: left;
	padding: 15px 28px 17px;
	cursor: pointer;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	border-bottom: 1px #f8f8f8 solid;
}
.architecture .RuleLeft .company_name img {
	position: relative;
	display: inline-block;
	top: 2px;
	width: 18px;
	height: 18px;
	margin-right: 4px;
}
.architecture .RuleLeft ::v-deep .el-button {
	margin-bottom: 16px !important;
}
.architecture .RuleRight {
	position: relative;
	display: table-cell;
	text-align: left;
	padding: 20px;
}
.architecture .RuleRight .title span .sapn {
	display: inline-block;
	vertical-align: middle;
	max-width: 600px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.architecture .RuleRight:after {
	content: ' ';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 1px;
	background: #ebeef5;
}
.architecture .RuleRight .list_box {
	width: 100%;
	background: #fff;
}
.architecture .RuleRight .list_box ::v-deep table {
	font-family: 'Microsoft YaHei';
	width: 100% !important;
	/*max-width:1920px; */
}
.architecture .department_box {
}
.architecture .department_box ::v-deep .el-tree-node {
	display: block;
	text-align: center;
}
.architecture .department_box ::v-deep .el-tree-node__content {
	// padding-left:24px !important;
	height: auto !important;
}

.architecture .department_box ::v-deep .el-tree-node .el-icon-caret-right {
	display: inline-block;
	color: #909399;
	font-size: 16px;
	padding: 6px 8px;
}
.architecture .department_box ::v-deep .el-tree-node .el-icon-caret-right.is-leaf {
	color: transparent;
	cursor: default;
}
.architecture .department_box ::v-deep .el-tree-node .custom-tree-node img {
	margin-top: 0px;
	width: 20px;
}
.architecture .department_box ::v-deep .el-tree-node .custom-tree-node span {
}
.architecture .department_box ::v-deep .el-tree-node__content {
	padding: 12px 0;
	border-bottom: 1px #f8f8f8 solid;
}
.architecture .department_box ::v-deep .el-tree-node__content:hover {
	background: #ecf5ff;
	border-radius: 4px;
}
.architecture .department_box ::v-deep .is-focusable .is-current {
	border-radius: 4px;
}
.architecture .department_box ::v-deep .is-focusable .is-current .name {
	color: #409eff;
	font-weight: normal;
	transition: 0.35s ease-in-out;
}

.elMenuCustomRule_Z {
	overflow-y: auto;
	border: none;
	//   height: 980px;
}
// 滚动条样式
.elMenuCustomRule_Z::-webkit-scrollbar {
	width: 9px;
	height: 9px;
}
.elMenuCustomRule_Z::-webkit-scrollbar-track {
	width: 6px;
	background-color: #fff0;
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
}
/*滚动条的设置*/
.elMenuCustomRule_Z::-webkit-scrollbar-thumb {
	background-color: #fff0;
	background-clip: padding-box;
	min-height: 28px;
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
}
/*滚动条移上去的背景*/
.elMenuCustomRule_Z:hover::-webkit-scrollbar-thumb {
	background-color: rgba(144, 147, 153, 0.3);
}

::v-deep .el-table .cell {
	//让规则不隐藏
	overflow: inherit;
	white-space: normal;
}

.terr-left button {
	margin: 0 auto;
	display: block;
	margin-bottom: 20px;
}
</style>
