<template>
	<div id="container">
		<div class="alarmrecord">
			<el-card class="box-card">
				<el-row class="">
					<div class="search">
						<el-form :inline="true" :model="formInline" class="demo-form-inline">
							<el-form-item>
								<el-select v-model="formInline.region" size="middle" placeholder="单位名称" clearable>
									<el-option :label="item.name" :value="item.id" v-for="item in enterpriselist"
										:key="item.id">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item>
								<el-input v-model="formInline.name" :clearable="true" placeholder="请输入单位名称"
									size="middle">
								</el-input>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" size="middle" @click="getEnterprise">查询</el-button>
							</el-form-item>
						</el-form>
					</div>
				</el-row>
				<el-row class="marginTop">
					<div class="tablecell">
						<el-row class="floatRight">
							<el-button type="primary" size="mini" @click="batchProcessing">新增</el-button>
						</el-row>
						<el-table ref="multipleTable" :data="zNodes" :border="true" tooltip-effect="dark"
							style="width: 100%" :lazy="true" :header-cell-style="rowClass"
							:cell-style="{fontSize:'12px'}" @selection-change="handleSelectionChange" stripe
							height="590" row-key="id" :default-expand-all="true"
							:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
							<el-table-column prop="name" label="单位名称" width="120">
							</el-table-column>
							<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip>
							</el-table-column>
							<el-table-column label="操作" width="380">
								<template slot-scope="scope">
									<el-button type="primary" size="mini"
										:disabled="info.enterpriseId==scope.row.id?true:false"
										@click="modifyEnterprise(scope.$index, scope.row)">管理员
									</el-button>
									<el-button type="primary" size="mini"  @click="modifyEnterprise(scope.$index, scope.row)">编辑
									</el-button>
									<!-- :disabled="info.enterpriseId==scope.row.id?true:false" -->
									<el-button type="danger" size="mini" @click="remove(scope.$index, scope.row)">删除
									</el-button>
								</template>
							</el-table-column>
						</el-table>
					</div>
					<div class="page">
						<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
							:current-page="currentPage" :page-sizes="[10, 20, 100, 400]" :page-size="10"
							layout="total, sizes, prev, pager, next, jumper" :total="pageTotal">
						</el-pagination>
					</div>
				</el-row>
			</el-card>
			<el-dialog title="添加下级单位" :visible.sync="dialogVisible" width="40%" :before-close="handleClose">
				<el-form ref="form" :model="form" label-width="120px" :inline="true" :rules="rules">
					<el-form-item label="上级单位" prop="region">
						<el-select v-model="form.region" class="w200" placeholder="请选择">
							<el-option :label="item.name" :value="item.id" v-for="item in enterpriselist"
								:key="item.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="单位名称" prop="name">
						<el-input v-model="form.name" class="w200" :clearable="true"></el-input>
					</el-form-item>
					<el-form-item label="管理员姓名" prop="personname">
						<el-input v-model="form.personname" class="w200" :clearable="true"></el-input>
					</el-form-item>
					<el-form-item label="管理员手机号" prop="phone">
						<el-input v-model="form.phone" class="w200" type="number" :clearable="true"></el-input>
					</el-form-item>
					<el-form-item label="管理员密码" prop="password">
						<el-input v-model="form.password" :clearable="true"></el-input>
					</el-form-item>
					<el-form-item label="备注">
						<el-input v-model="form.remark" node-key="id" ref="tree" :default-checked-keys="SelectedList"
							class="w200" :clearable="true"></el-input>
					</el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="addEnterprise">添 加</el-button>
				</span>
			</el-dialog>
			<el-dialog title="编辑" :visible.sync="dialogVisible1" width="30%" :before-close="handleClose1">
				<el-form ref="form1" :model="form1" label-width="120px" :inline="true">
					<el-form-item label="上级单位">
						<el-select v-model="form1.region" class="w200" placeholder="请选择">
							<el-option :label="item.name" :value="item.id" v-for="item in enterpriselist"
								:key="item.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="单位名称">
						<el-input v-model="form1.name" class="w200" :clearable="true"></el-input>
					</el-form-item>
					<el-form-item label="管理房间" class="blocklist">
						<el-tree :data="treeNodes" show-checkbox node-key="id" :default-checked-keys="SelectedList" :props="defaultProps" v-if="sele">
						</el-tree>
					</el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible1 = false">取 消</el-button>
					<el-button type="primary" @click="modifyEnterFun">确 定</el-button>
				</span>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	import {
		httpGet,
		httpPost
	} from "../../api/index";
	import {
		ztreeToElementTree,
		uniqueArray,
		recursion
	} from "../../utils/index"
	import moment from "moment";
	export default {
		name: "alarmRecord",
		data() {
			return {
				treeNodes: [],
				defaultProps: {
					children: 'children',
					label: 'label'
				},
				form1: {
					name: '',
					region: ''
				},
				dialogVisible1: false,
				rules: {
					region: [{
						required: true,
						message: '请选择上级单位',
						trigger: 'blur'
					}],
					name: [{
						required: true,
						message: '请输入单位名称',
						trigger: 'blur'
					}],
					personname: [{
						required: true,
						message: '请输入管理员姓名',
						trigger: 'blur'
					}],
					phone: [{
						required: true,
						message: '请输入管理员手机号',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '请输入管理员密码',
						trigger: 'blur'
					}],
				},
				form: {
					personname: '',
					password: '',
					name: '',
					region: '',
					phone: ''
				},
				dialogVisible: false,
				input: '',
				content: '切换单个/多个查询模式',
				selected: true,
				advancedQueryStatus: false,
				advancedQueryText: '高级查询',
				formInline: {
					region: '',
					name: ''
				},
				tableData: [],
				pageTotal: 0,
				rowStyle: {
					background: '#f8f9fa',
					fontSize: '12px'
				},
				multipleSelection: [],
				currentPage: 1,
				batch: true,
				enterpriselist: [{
					name: '全部',
					id: '',
				}],
				zNodes: [],
				info: {},
				modifyFrom: {},
				allNodes: [],
				SelectedList: [],
				sele:true
			}
		},
		computed: {

		},
    beforeCreate() {
        this.$store.commit('updateTenantId',400)
    },
		created() {
			this.info = JSON.parse(localStorage.getItem('info'))
			this.getEnterprise()
			this.getlist()
		},
		methods: {
			// 获取房间
			getlist() {
				var data = {};
				httpGet(data, this.$api.getPlaceList).then((res) => {
					if (res.data.list.length > 0) {
						res.data.list.map(li=>{
							li['disabled']=true
						})
						this.allNodes = res.data.list
						var arrdata = uniqueArray(res.data.list, "id")
						this.treeNodes = ztreeToElementTree(arrdata, {});
					}
				});
			},
			modifyEnterFun() {
				var data = {
					list: [{
						enterpriseId: this.form1.region,
						id: this.form1.id,
						name: this.form1.name,
					}],
				}
				httpPost(data, this.$api.updateEnterprise).then(res => {
					if (res.success) {
						this.getEnterprise()
						this.dialogVisible1 = false
						this.$message.success("修改成功")
					} else {
						this.$message.error("修改失败")
					}
				})
			},
			// 编辑单位
			modifyEnterprise(index, row) {
				this.dialogVisible1 = true
				this.form1.region = row.parentId
				this.form1.name = row.name
				this.form1.id = row.id
				this.modifyFrom = this.form1
				this.getRoomEnterpriseId()
			},
			getRoomEnterpriseId() {
				var SelectedList = []
				this.allNodes.map(li => {
					if (li.enterpriseId == this.form1.id) {
						SelectedList.push(li.id)
					}
				})
				this.sele = false
				this.$nextTick(function() {
					this.SelectedList = SelectedList
					this.sele = true
				})
			},
			// 删除单位
			remove(index, row) {
				var list = [];
				list.push(row);
				var data = recursion(list)
				this.$confirm("确定要删除吗？", "提示", {
					type: "warning",
				}).then(() => {
					httpPost(data, this.$api.deleteEnterprise).then((res) => {
						if (res.success) {
							this.getEnterprise();
							this.$message.success("删除成功");
						} else {
							this.getEnterprise();
							this.$message.error("删除失败");
						}
					});
				});
			},
			// 获取单位
			getEnterprise() {
				var data = {
					q: JSON.stringify({
						name: this.formInline.name,
						enterpriseId: this.formInline.region
					})
				}
				httpGet(data, this.$api.getEnterprise).then((res) => {
					var enterpriselist = []
					if (res.data.list.length > 0) {
						this.enterpriseId = res.data.list[0].id;
					}
					res.data.list.map((li) => {
						li.pid = li.parentId;
						li.createTime = moment(li.createTime).format('YYYY/MM/DD HH:MM:SS')
						if (this.info.enterpriseId == li.id) {
							enterpriselist.push(li)
						}
					});
					this.enterpriselist = enterpriselist
					this.Enterprise = res.data.list
					this.zNodes = []
					this.zNodes = ztreeToElementTree(res.data.list, {}); //res.data.list;
					this.pageTotal = res.data.total;
				});
			},
			// 创建单位
			addEnterprise() {
				var form = this.form
				if (form.region == "") {
					this.$message.error("请选择上级单位");
				} else if (form.name == "" || form.phone == "" || form.password == "" || form.personname == "") {
					this.$message.error("请填写完整信息");
				} else {
					var data = {
						name: form.name,
						parentId: form.region
					};
					httpPost(data, this.$api.addEnterprise).then((res) => {
						if (res.success) {
							var addform = {
								username: form.personname,
								phone: form.phone,
								password: form.password,
								enterpriseName: form.name,
								userType: 1,
								enterpriseId: res.data,
							}
							httpPost(addform, this.$api.addUser).then((res1) => {
								if (res1.success) {
									this.$message.success("创建成功");
									this.dialogVisible = false
								} else {
									this.$message.error("添加失败");
									this.dialogVisible = false
								}
							});
						} else {
							this.$message.error("添加失败");
							this.dialogVisible = false
						}
					});
				}
			},
			// 未处理记录处理关闭
			handleClose1(done) {
				done();
			},
			// 批量处理关闭
			handleClose(done) {
				done();
			},
			// 添加下级单位弹窗显示
			batchProcessing() {
				this.dialogVisible = true
			},
			// 分页
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
			},
			// 表头样式
			rowClass({
				row,
				rowIndex
			}) {
				return "background:#f8f9fa;color:#333;font-blod:none;font-size:12px;"
			},
			// 表格勾选
			handleSelectionChange(val) {
				if (val.length > 0) {
					this.batch = false
				} else {
					this.batch = true
				}
			},
			// 高级查询显示
			advancedQueryFun() {
				if (this.advancedQueryStatus) {
					this.advancedQueryText = "高级查询"
					this.advancedQueryStatus = false
				} else {
					this.advancedQueryText = "同用查询"
					this.advancedQueryStatus = true
				}
			},
			// 输入监控
			InputFun(e) {
				console.log(e)
			},
			// 单个/多个查询切换
			switchFun() {
				this.selected = !this.selected
			}
		},
		mounted() {

		}
	}
</script>

<style scoped>
	.search {
		display: flex;
		align-items: center;
	}

	.search .inputInline {
		display: inline-block;
	}

	.topBottom {
		margin: 0 10px;
		cursor: pointer;
	}

	.topBottom .iconfont {
		display: block;
		font-size: 12px;
	}

	.topBottom .icon-xiangxia1 {
		margin-top: -3px;
	}

	.topBottom .selected {
		color: #409eff;
	}

	.textBlue {
		color: #409eff;
		font-size: 14px;
		margin-left: 10px;
		cursor: pointer;
	}

	.marginTop {
		margin-top: 20px;
	}

	.tablecell {
		border: 1px solid #eee;
	}

	.floatRight {
		float: right;
		margin: 10px;
	}

	.page {
		margin-top: 20px;
	}

	.page .el-pagination {
		margin-bottom: 0;
		float: none;
	}

	.tablecell>>>.BtnOrange {
		border: 1px solid #ffb6b6;
		color: #ff4949;
		background: #ffeded;
	}

	.tablecell>>>.BtnOrange:hover {
		background: #ff4949;
		border-color: #ff4949;
		color: #fff;
	}

	.tablecell>>>.BtnBlue {
		border: 1px solid #a3d3ff;
		color: #1890ff;
		background: #e8f4ff;
	}

	.tablecell>>>.BtnBlue:hover {
		background: #1890ff;
		border-color: #1890ff;
		color: #fff;
	}

	.dialogcontent {
		padding-bottom: 20px;
	}

	.curpoiner {
		cursor: pointer;
		display: flex;
		align-items: center;
		color: #508dfe;
	}

	.curpoiner .icon-erweima {
		font-size: 24px;
	}

	.curpoiner .operation {
		margin-left: 6px;
	}

	.search .el-form-item {
		margin-bottom: 0;
	}

	.w200 {
		width: 200px;
	}

	.tablecell>>>.el-table__expand-icon {
		display: inline-block;
	}
  .alarmrecord .blocklist{
    display: block;
  }
</style>
