<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 label="用户名称：">
								<el-input v-model="formInline.username" placeholder="请输入用户名称" size="small"
									:clearable="true">
								</el-input>
							</el-form-item>
							<el-form-item label="手机号：">
								<el-input v-model="formInline.phone" placeholder="请输入用户手机号" size="small"
									:clearable="true">
								</el-input>
							</el-form-item>
							<el-form-item label="角色：">
								<el-input v-model="formInline.rolo" placeholder="请选择角色" size="small" :clearable="true">
								</el-input>
							</el-form-item>
							<el-form-item label="所属单位：">
								<el-select v-model="formInline.enterpriseId" size="small" class="w200" 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-button type="default" size="small" @click="reset">重置</el-button>
								<el-button type="primary" size="small" @click="searchFun">查询</el-button>
							</el-form-item>
						</el-form>
						<!-- <div class="advancedQuery textBlue" @click="advancedQueryFun">{{advancedQueryText}} <i
                class="iconfont icon-xiangxia2" v-if="advancedQueryStatus"></i><i class="iconfont icon-xiangshang"
                v-else></i> </div> -->
					</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="tableData" :border="true" tooltip-effect="dark"
							style="width: 100%" :header-cell-style="rowClass" :cell-style="{fontSize:'12px'}"
							@selection-change="handleSelectionChange" stripe height="590">
							<el-table-column type="index" width="50" label="序号">
							</el-table-column>
							<el-table-column prop="username" label="用户姓名" width="120">
							</el-table-column>
							<el-table-column prop="enterpriseName" label="所属单位" width="120">
							</el-table-column>
							<el-table-column prop="phone" label="手机号" show-overflow-tooltip>
							</el-table-column>
							<!-- <el-table-column prop="address" label="角色" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="address" label="用户状态" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="address" label="用户模式" show-overflow-tooltip>
                        </el-table-column> -->
							<!-- <el-table-column prop="enterpriseName" label="部门" show-overflow-tooltip>
                        </el-table-column> -->
							<el-table-column label="操作" width="300">
								<template slot-scope="scope">
									<!-- <el-button type="default" size="mini" :disabled="info.enterpriseId==scope.row.id?true:false">状态</el-button> -->
									<el-button type="default" size="mini"
										:disabled="info.enterpriseId==scope.row.id?true:false"
										@click="modifyPassword(scope.$index, scope.row)">密码</el-button>
									<!-- <el-button type="primary" size="mini"
                                    :disabled="info.enterpriseId==scope.row.id?true:false" >编辑</el-button> -->
									<el-button type="danger" size="mini"
										:disabled="info.enterpriseId==scope.row.id?true:false"
										@click="handleDelete(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="pageSize"
							layout="total, sizes, prev, pager, next, jumper" :total="pageTotal">
						</el-pagination>
					</div>
				</el-row>
			</el-card>
			<el-dialog title="添加人员" :visible.sync="dialogVisible" width="30%" :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-cascader class="w200"
                  :options="zNodes"
                  :props="{ checkStrictly: true }"
                  clearable></el-cascader> -->
					</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" :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" 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="titleText" :visible.sync="dialogVisible1" width="30%" class="dialogcontent"
				:before-close="handleClose1">
				<el-form ref="modifyfrom" :model="modifyfrom" label-width="120px" :rules="rules1">
					<el-form-item label="旧密码" prop="oldPassword">
						<el-input v-model="modifyfrom.oldPassword" :clearable="true" show-password></el-input>
					</el-form-item>
					<el-form-item label="新密码密码" prop="newPassword">
						<el-input v-model="modifyfrom.newPassword" :clearable="true" show-password></el-input>
					</el-form-item>
					<el-form-item label="确认新密码" prop="confirmPassword">
						<el-input v-model="modifyfrom.confirmPassword" :clearable="true" show-password></el-input>
					</el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible1 = false">取 消</el-button>
					<el-button type="primary" @click="saveEdit">修 改</el-button>
				</span>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	import {
		httpGet,
		httpPost
	} from "../../api/index";
	import {
		ztreeToElementTree,
		recursion
	} from "../../utils/index"
	export default {
		name: "alarmRecord",
		data() {
			return {
				rules: {
					region: [{
						required: true,
						message: '请选择所属单位',
						trigger: 'blur'
					}],
					personname: [{
						required: true,
						message: '请输入姓名',
						trigger: 'blur'
					}],
					phone: [{
						required: true,
						message: '请输入手机号',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}],
				},
				rules1: {
					oldPassword: [{
						required: true,
						message: '请输入旧密码',
						trigger: 'blur'
					}],
					newPassword: [{
						required: true,
						message: '请输入新密码',
						trigger: 'blur'
					}],
					confirmPassword: [{
						required: true,
						message: '请输入新密码',
						trigger: 'blur'
					}]
				},
				modifyfrom: {
					oldPassword: '',
					newPassword: '',
					confirmPassword: ''
				},
				titleText: '',
				textarea: '', //批量处理备注
				dialogVisible: false,
				dialogVisible1: false,
				form: {
					personname: '',
					password: '',
					name: '',
					region: '',
					phone: ''
				},
				input: '',
				content: '切换单个/多个查询模式',
				selected: true,
				advancedQueryStatus: false,
				advancedQueryText: '高级查询',
				formInline: {
					enterpriseId: '',
					username: '',
					rolo: '',
					phone: ''
				},
				tableData: [],
				pageTotal: 0,
				rowStyle: {
					background: '#f8f9fa',
					fontSize: '12px'
				},
				multipleSelection: [],
				currentPage: 1,
        pageSize:10,
				batch: true,
				enterpriselist: [{
					name: '全部',
					id: ''
				}],
				zNodes: [],
				info: '',
				userRow: '',
        tenantId:''
			}
		},
		computed: {

		},
    beforeCreate() {      
        this.$store.commit('updateTenantId',400)
    },
		created() {
			this.info = JSON.parse(localStorage.getItem('info'))
			this.tenantId = JSON.parse(localStorage.getItem('tenantId'))
			this.getEnterprise()
		},
		mounted() {},
		methods: {
			// 保存修改密码
			saveEdit() {
				if (this.modifyfrom.confirmPassword == '' || this.modifyfrom.newPassword == '' || this.modifyfrom
					.oldPassword == '') {
					this.$message.error("请填写好信息");
				} else if (this.modifyfrom.confirmPassword != this.modifyfrom.newPassword) {
					this.$message.error("确认密码输入错误！");
				} else {
					var data = {
						userId: this.userRow.id,
						new: this.modifyfrom.newPassword,
						old: this.modifyfrom.oldPassword,
					};
					httpPost(data, this.$api.editPassword).then((res) => {
						if (res.success) {
							this.$message.success("修改成功！");
							this.dialogVisible1 = false;
						} else {
							this.$message.error("请输入正确的旧密码！");
						}
					});
				}
			},
			// 修改密码
			modifyPassword(index, row) {
				this.titleText = row.username
				this.dialogVisible1 = true
				this.userRow = row
				this.modifyfrom = {
					oldPassword: '',
					newPassword: '',
					confirmPassword: ''
				}
			},
			// 判断字段是否有效
			paramsValidate(obj) {
				var array = {}
				for (let key in obj) {
					if (obj[key]) {
						array[key] = obj[key]
					}
				}
				return array
			},
			// 搜索
			searchFun() {
				var formInline = this.formInline
				var q = this.paramsValidate(formInline)
				var data = {
					pageNum: this.currentPage,
					pageSize: this.pageSize,
					q: JSON.stringify(q),
				};
				httpGet(data, this.$api.getUserList).then((res) => {
					if (res.success) {
						res.data.list.map((li) => {
							var obj = this.enterpriselist.find(function(x) {
								return x.id == li.enterpriseId;
							});
							if (obj) {
								li.enterpriseName = obj.name;
							} else {
								li.enterpriseName = ''
							}
						});
						this.tableData = res.data.list;
						this.pageTotal = res.data.total;
					} else {
						this.$message.error("获取失败")
					}
				});
			},
			// 重置搜索
			reset() {
				this.formInline = {
					enterpriseId: '',
					username: '',
					rolo: '',
					phone: ''
				}
			},
			// 删除用户操作
			handleDelete(index, row) {
				// 二次确认删除
				this.$confirm("确定要删除吗？", "提示", {
						type: "warning",
					})
					.then(() => {
						var data = [row.id];
						httpPost(data, this.$api.deleteUser).then((res) => {
							if (res.success) {
								this.$message.success("删除成功");
								this.getUserList();
							} else {
								this.$message.error("删除失败");
							}
						});
					})
					.catch(() => {});
			},
			// 人员
			addEnterprise() {
				var form = this.form
				if (form.region == "") {
					this.$message.error("请选择所属单位");
				} else if (form.phone == "" || form.password == "" || form.personname == "") {
					this.$message.error("请填写完整信息");
				} else {
          var enterpriseName=''
          this.enterpriselist.map(li=>{
            if(li.id==form.region){
              enterpriseName=li.name
            }
          })
					var addform = {
						username: form.personname,
						phone: form.phone,
						password: form.password,
						enterpriseName:enterpriseName,
						userType: 1,
            tenantId:this.tenantId,
						enterpriseId: form.region,
					}
					httpPost(addform, this.$api.addUser).then((res1) => {
						if (res1.success) {
							this.$message.success("创建成功");
							this.dialogVisible = false
							this.getUserList()
						} else {
							this.$message.error("添加失败");
							this.dialogVisible = false
						}
					});
				}
			},
			// 获取单位
			getEnterprise() {
				var data = {
					q: JSON.stringify({
						name: this.formInline.name
					})
				}
				httpGet(data, this.$api.getEnterprise).then((res) => {
					if (res.success) {
						this.enterpriselist = res.data.list
						this.zNodes = []
						this.zNodes = ztreeToElementTree(res.data.list, {});
						this.getUserList()
					} else {
						this.$message.error("获取失败")
					}
				});
			},
			// 获取用户列表
			getUserList() {
				var data = {
					pageNum: this.currentPage,
					pageSize: this.pageSize,
					q: JSON.stringify({
						enterpriseId: this.enterpriseId,
					}),
				};
				httpGet(data, this.$api.getUserList).then((res) => {
					if (res.success) {
						res.data.list.map((li) => {
							var obj = this.enterpriselist.find(function(x) {
								return x.id == li.enterpriseId;
							});
							if (obj) {
								li.enterpriseName = obj.name;
							} else {
								li.enterpriseName = ''
							}
						});
						this.tableData = res.data.list;
						this.pageTotal = res.data.total;
					} else {
						this.$message.error("获取失败")
					}
				});
			},
			// 未处理记录打开
			recordFun() {
				this.dialogVisible1 = true
			},
			// 未处理记录处理关闭
			handleClose1(done) {
				done();
			},
			// 批量处理关闭
			handleClose(done) {
				done();
			},
			// 批量处理
			batchProcessing() {
				this.dialogVisible = true
			},
			// 分页
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
        this.pageSize=val
        this.searchFun()
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
        this.currentPage=val
        this.searchFun()
			},
			// 表头样式
			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
				}
			},
			// 批量处理备注监控
			textareaFun(e) {
				this.textarea = e
			},
			// 输入监控
			InputFun(e) {
				console.log(e)
			},
			// 单个/多个查询切换
			switchFun() {
				this.selected = !this.selected
			}
		},

	}
</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;
	}
</style>
