<template>
	<div v-loading.fullscreen.lock="fullscreenLoading">
		<el-card class="cardbg">
			<div class="steps">
				<div class="step" :class="stepindex > index ? 'stepcolor' : ''" v-for="(item, index) in steplist"
					:key="index" @click="selectstep(index)">
					<img src="../assets/img/gou.png" class="l1" alt="" v-if="stepindex > index" />
					<img src="../assets/img/1.png" class="l1" alt="" v-else-if="index == 0" />
					<img src="../assets/img/2.png" class="l1" alt="" v-else-if="index == 1" />
					<span>{{ item.title }}</span>
					<img src="../assets/img/rightwhite.png" class="r2" alt="" v-if="index != steplist.length - 1" />
				</div>
				<div class="selectoptionClass" v-if="userInfo.type==0">
					<selectoption></selectoption>
				</div>
			</div>
			<el-carousel trigger="click" height="690px" :autoplay="false" indicator-position="none" arrow="never"
				ref="cardShow" :initial-index="0">
				<el-carousel-item>
					<el-row :gutter="20" class="rowcli">
						<el-col :span="6">
							<el-card shadow="always" class="h700 cardbg">
								<el-tree :data="roomlist" node-key="id" ref="tree" @node-click="onClick"
									:props="defaultProps">
								</el-tree>
							</el-card>
						</el-col>
						<el-col :span="18">
							<div class="container">
								<div class="handle-box">
									<el-tabs v-model="activeName" @tab-click="handleClick">
										<el-tab-pane label="全部房间" name="first"></el-tab-pane>
										<el-tab-pane label="正常房间" name="second"></el-tab-pane>
										<el-tab-pane label="空置房间" name="third"></el-tab-pane>
									</el-tabs>
									<div class="nextstep">
										<el-badge :value="selectTotal" class="item"><el-button type="primary" size="mini" class="nextstep1" @click="selectAllMethods">全选</el-button></el-badge>
										<el-button type="primary" size="mini" class="nextstep1" @click="cancelSelection">取消</el-button>
										<el-button type="primary" size="mini" class="" @click="stepnext">下一步</el-button>
									</div>
								</div>
								<div class="room-list" v-if="activeName == 'first'">
									<div class="room-li" v-for="(item, index) in tableData" :key="index"  @click="item.check?checkfun(index, false):checkfun(index, true)">
										<checkInRoom :data="item" :index="index"></checkInRoom>
										<img src="../assets/img/check1.png" class="check-img" alt="" v-if="item.check" />
										<img src="../assets/img/check.png" class="check-img" alt="" v-else />
									</div>
                  <div class="totalPosition">
                    <el-pagination layout="total" :total="tableData.length"></el-pagination>
                  </div>
								</div>
								<div class="room-list" v-if="activeName == 'second'">
									<div class="room-li" v-for="(item, index) in tableData1" :key="index"  @click="item.check?checkfun1(index, false):checkfun1(index, true)">
										<checkInRoom :data="item" :index="index"></checkInRoom>
										<img src="../assets/img/check1.png" class="check-img" alt="" v-if="item.check" />
										<img src="../assets/img/check.png" class="check-img" alt="" v-else />
									</div>
                  <div class="totalPosition">
                    <el-pagination layout="total" :total="tableData1.length"></el-pagination>
                  </div>
								</div>
								<div class="room-list" v-if="activeName == 'third'">
									<div class="room-li" v-for="(item, index) in tableData2" :key="index" @click="item.check?checkfun2(index, false):checkfun2(index, true)">
										<checkInRoom :data="item" :index="index"></checkInRoom>
										<img src="../assets/img/check1.png" class="check-img" alt="" v-if="item.check" />
										<img src="../assets/img/check.png" class="check-img" alt="" v-else />
									</div>
                  <div class="totalPosition">
                    <el-pagination layout="total" :total="tableData2.length"></el-pagination>
                  </div>
								</div>
							</div>
						</el-col>
					</el-row>
				</el-carousel-item>
				<el-carousel-item>
					<div class="bottomcontent">
						<el-card shadow="always">
							<div class="pagehead">
								<div class="fjry">已入住人员信息</div>
								<div class="rzaddress" v-if="deviceList[0]" :title="deviceList[0].roomName">
									<i
										class="el-icon-location-information"></i><span>{{ deviceList[0].roomName }}</span>
								</div>
								<div class="fjrynext">
									<div class="nextstep">
										<el-button type="primary" size="mini" class="nextstep1" @click="renewal">续租</el-button>
									</div>
								</div>
							</div>
							<div class="bottomtable">
								<el-table :data="uselist" border class="table" ref="multipleTable"
									header-cell-class-name="table-header" highlight-current-row
									@selection-change="handleCurrentChange1" height="600">
									<el-table-column type="selection" width="55">
									</el-table-column>
									<el-table-column prop="name" label="姓名"></el-table-column>
									<el-table-column prop="roomName" label="房间名称"></el-table-column>
									<el-table-column prop="phone" label="系统编号"></el-table-column>
									<el-table-column prop="number" label="身份证号"></el-table-column>
									<el-table-column prop="startTimeText" label="开始日期"></el-table-column>
									<el-table-column prop="endTimeText" label="结束日期"></el-table-column>
								</el-table>
							</div>
						</el-card>
					</div>
				</el-carousel-item>
			</el-carousel>
		</el-card>
		<!-- 编辑弹出框 -->
		<el-dialog title="编辑" :visible.sync="editVisible" width="20%">
			<el-form ref="form" :model="form" label-width="70px">
				<el-form-item label="开始时间">
					<el-date-picker v-model="form.startTime" :picker-options="pickerOptions1" type="datetime"
						placeholder="选择日期时间">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="结束时间">
					<el-date-picker v-model="form.endTime" :picker-options="pickerOptions1" type="datetime"
						placeholder="选择日期时间">
					</el-date-picker>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="editVisible = false">取 消</el-button>
					<el-button type="primary" @click="saveEdit">确 定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script>
	import zTree from "../components/zTree1.vue";
	import {
		httpGet,
		httpPost
	} from "../api";
	import checkInRoom from "../components/checkInRoom.vue";
	import {
		ztreeToElementTree,
		uniqueArray
	} from "../utils/index";
	import utils from "../utils/util.js";
	import ICINLocker from "../utils/equipment.js"
	import moment from 'moment'
	export default {
		inject: ['reload'],
		name: "campus",
		data() {
			return {
        selectTotal:0,
				selectoption: [],
				selectoptionValue: '',
				pickerOptions1: {
					disabledDate(time) {
						return time.getTime() < Date.now() - 8.64e7;
					},
				},
				roomlist: [],
				SelectedList: [],
				defaultProps: {
					children: "children",
					label: "name",
				},
				steplist: [{
						src: "../assets/img/1.png",
						title: "房源选择"
					},
					{
						src: "../assets/img/2.png",
						title: "人员续租"
					},
				],
				stepindex: 0,
				stepindex1: 0,
				query: {
					address: "",
					name: "",
					pageIndex: 1,
					pageSize: 10,
					activeName: "first",
				},
				activeName: "first",
				tableData: [],
				tableData1: [],
				tableData2: [],
				multipleSelection: [],
				delList: [],
				editVisible: false,
				pageTotal: 0,
				personInfo: {
					name: "",
					phone: "",
					number: "",
					sex: "",
					education: "",
					email: "",
					leaseTerm: "",
					rent: "",
					birth: "",
					nation: "",
					address: "",
					remarks: "",
				},
				rules: {
					name: [{
							required: true,
							message: "请输入姓名",
							trigger: "blur"
						},
						{
							min: 1,
							max: 8,
							message: "长度在 1 到 8 个字符",
							trigger: "blur"
						},
					],
					phone: [{
							required: true,
							message: "请输入系统编号",
							trigger: "blur"
						},
						{
							min: 1,
							max: 11,
							message: "请输入正确的系统编号",
							trigger: "blur"
						},
					],
					number: [{
							required: true,
							message: "请输入身份证号",
							trigger: "blur"
						},
						{
							min: 1,
							max: 18,
							message: "请输入正确的身份证号",
							trigger: "blur"
						},
					],
					sex: [{
						required: true,
						message: "请选择性别",
						trigger: "change"
					}],
					education: [{
						required: true,
						message: "请选择学历",
						trigger: "change"
					}, ],
					email: [{
							required: true,
							message: "请输入邮箱",
							trigger: "blur"
						},
						{
							min: 1,
							max: 64,
							message: "请输入正确的邮箱",
							trigger: "blur"
						},
					],
					leaseTerm: [{
						required: true,
						message: "请选择租期时间",
						trigger: "change"
					}, ],
					rent: [{
						required: true,
						message: "请输入租金",
						trigger: "blur"
					}],
					birth: [{
						required: true,
						message: "请输入租金",
						trigger: "blur"
					}],
					nation: [{
						required: true,
						message: "请选择学历",
						trigger: "change"
					}],
					address: [{
						required: true,
						message: "请输入地址",
						trigger: "change"
					}],
				},
				form: {},
				idx: -1,
				id: -1,
				showIndex: 0,
				ztreeObj: null,
				uselist: [],
				zNodes: [],
				setting: {
					edit: {
						enable: true,
						drag: {
							isMove: true,
						},
						showRemoveBtn: false,
						showRenameBtn: false,
					},
					check: {
						enable: false,
					},
					data: {
						simpleData: {
							enable: true,
							pIdKey: "pid",
						},
					},
					view: {
						showIcon: true,
						addHoverDom: this.addHoverDom,
						removeHoverDom: this.removeHoverDom,
					},
				},
				currentRow: [],
				currentRow1: [],
				options: [],
				state: "",
				loading: false,
				timeout: null,
				deviceList: [],
				userInfo: {
					type: ''
				},
				treeList: [],
				AllLock: [],
				AllPerson: [],
				fullscreenLoading: false
			};
		},
		components: {
			zTree,
			checkInRoom
		},
		beforeCreate() {
			// var tenantId = JSON.parse(localStorage.getItem('tenantId'))
			// if (tenantId == 400) {
			//   this.$store.commit('defaultsettenantid')
			// }
		},
		created() {
			this.userInfo = JSON.parse(localStorage.getItem('info'))
			this.selectoption = JSON.parse(localStorage.getItem('selectoption'))
			this.selectoptionValue = localStorage.getItem('tenantId')
			this.addRoom();
			this.getAllLock()
			// this.getAllPerson()
		},
		methods: {
			// 获取所有锁
			getAllLock() {
				var t = {
					lockType: 1
				};
				var data1 = {
					q: JSON.stringify(t),
					pageSize: 0,
					pageNum: 0
				};
				httpPost(data1, this.$api.getDeviceItems).then((res) => {
					if (res.success) {
						this.AllLock = res.data.list
					}
				})
			},
			getAllPerson(id) {
				var data1 = {
					// ids:[]
					q: JSON.stringify({
						ancestor: id
					})
				};
				httpGet(data1, this.$api.getSiteTenant).then((res) => {
					if (res.success) {
						this.AllPerson = res.data.list
					}
				})
			},
			cancelSelection() {
				this.tableData.map((li) => {
					li.check = false;
				});
				this.tableData1.map((li) => {
					li.check = false;
				});
				this.tableData2.map((li) => {
					li.check = false;
				});
        this.selectTotal=0
			},
			// 获取所有人员
			selectAllMethods() {
        if(this.activeName=="first"){
          var total=0
          this.tableData.map((li) => {
            li.check = true;
              total++
          });
          this.selectTotal=total
        }else if(this.activeName=="second"){
          var total=0
          this.tableData1.map((li) => {
            li.check = true;
              total++
          });
          this.selectTotal=total
        }else if(this.activeName=="third"){
          var total=0
          this.tableData2.map((li) => {
            li.check = true;
              total++
          });
          this.selectTotal=total
        }
			},
			selectTenantId(e) {
				localStorage.setItem('tenantId', e)
				this.reload()
			},
			// 续租
			renewal() {
				this.editVisible = true
			},
			//添加房源
			addRoom() {
				var data = {};
				httpGet(data, this.$api.getTree).then((res) => {
          var list=res.data.sort((pre, cur)=>pre.id - cur.id)
					this.treeList = list
					var array = uniqueArray(list, "id");
					this.roomlist = ztreeToElementTree(array, {});
				});
			},
			checkfun(index, status) {
				this.tableData[index].check = !this.tableData[index].check;
				this.currentRow = this.tableData[index];
        var total=0
        this.tableData.map(li=>{
          if(li.check){
            total++
          }
        })
        this.selectTotal=total
			},
			checkfun1(index, status) {
				this.tableData1.map((li) => {
					li.check = false;
				});
				this.tableData1[index].check = status;
				this.currentRow = this.tableData1[index];
        var total=0
        this.tableData1.map(li=>{
          if(li.check){
            total++
          }
        })
        this.selectTotal=total
			},
			checkfun2(index, status) {
				this.tableData2.map((li) => {
					li.check = false;
				});
				this.tableData2[index].check = status;
				this.currentRow = this.tableData2[index];
        var total=0
        this.tableData2.map(li=>{
          if(li.check){
            total++
          }
        })
        this.selectTotal=total
			},
			// 获取人员
			querySearchAsync(queryString, cb) {
				var q = {
					name: queryString,
				};
				var data = {
					q: JSON.stringify(q),
				};
				var personInfo = [];
				this.loading = true;
				httpPost(data, this.$api.getlistNum).then((res) => {
					personInfo = res.data.list;
					var restaurants = res.data.list;
					var results = queryString ?
						restaurants.filter(this.createFilter(queryString)) :
						restaurants;
					console.log(results);
					cb(results);
				});
			},
			createFilter(queryString) {
				return (restaurant) => {
					return restaurant.name.indexOf(queryString) === 0;
				};
			},
			handleSelect(item) {
				this.personInfo = item;
				this.uselist.push(item);
			},
			// 返回
			selectstep(i) {
				if (i < this.stepindex) {
					this.$refs.cardShow.setActiveItem(i);
				}
			},
			getuserlist() {
				var q = {
					id: this.currentRow.id,
				};
				var data = {
					q: JSON.stringify(q),
				};
				httpGet(data, this.$api.getSiteTenant).then(res => {
					//根据房间查询绑定人员
					// res.data.list.map(li=>{
					//   li.startTime = li.startTime.split('T')[0]
					//   li.endTime = li.endTime.split('T')[0]
					// })
					var list = res.data.list
					list.map(li => {
						if (li.startTime != null) {
							li.startTime = moment(li.startTime).format('YYYY年MM月DD日 HH:mm:ss');
						}
						if (li.endTime != null) {
							li.endTime = moment(li.endTime).format('YYYY年MM月DD日 HH:mm:ss');
						}
						li['roomName'] = this.currentRow.name
					})
					this.uselist = list;
				});
			},
			// 下一步
			stepnext() {
				let filterDemiseInformation = []
				this.fullscreenLoading = true
				const promise3 = new Promise((resolve, reject) => {
					var conditionRoomAndPersonnel = this.AllPerson
					this.tableData.map(li => {
						if (li.check) {
							const promise1 = new Promise((resolve, reject) => {
								var filterDeviceLi = this.AllLock.filter(item =>
									item.roomId == li.id)[0]
								resolve(filterDeviceLi)
							})
							const promise2 = new Promise((resolve, reject) => {
								var filterPersonLi = conditionRoomAndPersonnel.filter(item => item
									.siteId == li.id)
								resolve(filterPersonLi)
							})
							Promise.all([promise1, promise2]).then((values) => {
								if (values[0]) {
									var obj = values[0]
									obj['list'] = values[1]
									filterDemiseInformation.push(obj)
								}
							});
						}
					})
					setTimeout(() => {
						resolve(filterDemiseInformation)
					}, 500)
				})
				Promise.all([promise3]).then((values) => {
					let personlist = []
					values[0].map((li, index) => {
						li.list.map((lt, index) => {
							lt.roomName = li.roomName
							lt.deviceNum = li.deviceNum
							lt.imei = li.imei
							lt.manufactureId = li.manufactureId
							lt['startTimeText'] = moment(lt.startTime).format(
								'YYYY年MM月DD日 HH:mm:ss')
							lt['endTimeText'] = moment(lt.endTime).format('YYYY年MM月DD日 HH:mm:ss')
							personlist.push(lt)
						})
					})
					setTimeout(() => {
						this.uselist = personlist
						this.$refs.cardShow.next();
						this.stepindex += 1;
						this.stepindex1 = this.stepindex;
						this.fullscreenLoading = false
					}, 500)
				})
			},
			onClick: function(treeNode) {
				// 点击事件
				if (treeNode.children) {
					var str = treeNode.children[0].acreage || "";
					if (str == "" || str == null) {
						console.log(treeNode)
						this.fatherMethod(treeNode.pid);
					} else {
						this.fatherMethod(treeNode.id);
					}
				} else {
					this.fatherMethod(treeNode.id);
				}
				this.getAllPerson(treeNode.pid)
			},
			fatherMethod(id) {
				var q = {
					ancestor: id,
          isRoom:1
				};
				var data = {
					q: JSON.stringify(q),
				};
				httpGet(data, this.$api.getSiteList).then((res) => {
					var tableData = [],
						tableData1 = [],
						tableData2 = [];
					var array = uniqueArray(res.data.list, "id");
					array.map((li, index) => {
            var name = utils.findIndexArray(this.roomlist, li.id, [])
            var path = ''
            if (name) {
            	path = name.join('/')
            }
            li['path'] = path
						if (li.acreage) {
							li.check = false;
							tableData.push(li);
							if (li.id == id) {
								this.tableData.splice(index, 1);
							} else if (li.count == 0) {
								tableData2.push(li);
							} else if (li.count > 0) {
								tableData1.push(li);
							}
						}
					});
					this.tableData = tableData;
					this.pageTotal = tableData.length;
					this.tableData1 = tableData1;
					this.tableData2 = tableData2;
				});
			},
			handleClick(tab, event) {
				if (tab.name == "second") {
					this.pageTotal = this.tableData1.length;
				} else if (tab.name == "third") {
					this.pageTotal = this.tableData2.length;
				}
			},
			handleChange(value) {
				console.log(value);
			},
			// 触发搜索按钮
			handleSearch() {
				this.$set(this.query, "pageIndex", 1);
				this.getData();
			},
			// 删除操作
			handleDelete(index) {
				// 二次确认删除
				this.$confirm("确定要删除吗？", "提示", {
						type: "warning",
					})
					.then(() => {
						this.$message.success("删除成功");
						this.tableData.splice(index, 1);
					})
					.catch(() => {});
			},
			// 多选操作
			handleCurrentChange(val) {
				this.currentRow = val;
			},
			handleCurrentChange1(val) {
				console.log(val);
				this.currentRow1 = val;
			},
			delAllSelection() {
				const length = this.multipleSelection.length;
				let str = "";
				this.delList = this.delList.concat(this.multipleSelection);
				for (let i = 0; i < length; i++) {
					str += this.multipleSelection[i].name + " ";
				}
				this.$message.error(`删除了${str}`);
				this.multipleSelection = [];
			},
			// 编辑操作
			handleEdit(index, row) {
				this.idx = index;
				this.form = row;
				this.editVisible = true;
			},
			// 添加人员绑定
			handleEditperson(index, row) {
				var data = [{
					cardId: row.id,
					endTime: this.personInfo.leaseTerm[0],
					remark: this.personInfo.remarks,
					siteId: this.currentRow.id,
					startTime: this.personInfo.leaseTerm[1],
				}, ];
				httpPost(data, this.$api.bindCard).then((res) => {});
			},
			// 删除人员
			handleDeleteperson(index) {
				// 二次确认删除
				this.$confirm("确定要删除吗？", "提示", {
						type: "warning",
					})
					.then(() => {
						this.$message.success("删除成功");
						this.uselist.splice(index, 1);
					})
					.catch(() => {});
			},
			// 保存编辑
			saveEdit() {
				this.editVisible = false;
				if (this.form.endTime == '' || this.form.startTime == '') {
					this.$message.error("请选择时间范围")
					return
				}
				this.currentRow1.map(li => {
					if (li.manufactureId == 101) {
						var userTelephone = JSON.parse(li.info).userTelephone;
						var userPassword = JSON.parse(li.info).userPassword;
						var endTime = new Date(this.form.endTime).getTime()
						var startTime = new Date(this.form.startTime).getTime()
						var passwordEndTime = moment(endTime).format("YYYYMMDDHHmmss");
						var passwordStartTime = moment(startTime).format("YYYYMMDDHHmmss");
						var data = {
							deviceNum: li.deviceNum,
							imei: li.imei,
							userTelephone: userTelephone,
							userPassword: userPassword,
							password: userPassword,
							operateMode: 2,
							order: 6202,
							passwordStartTime: passwordStartTime,
							passwordEndTime: passwordEndTime,
							cardName: li.name,
							roomName: li.roomName
						}
						ICINLocker.LDAddUser(data.deviceNum, data.imei, data.userTelephone, data.userPassword, data
							.password,
							passwordStartTime, passwordEndTime, data.operateMode, data.order, data.cardName,
							data
							.roomName, false, (callback) => {
								if (callback.success) {
									var data = {
										pageNum: 0,
										pageSize: 0,
										orderBy: "create_at desc",
										q: {
											cardId: li.cardId,
											deviceNum: li.deviceNum,
											types: "0,1,2,3,4",
											inStatus:"1"
										},
									};
                  var unbind = {
                    id:li.id,
                    startTime: this.form.startTime,
                    endTime: this.form.endTime
                  };
                  httpPost(unbind, this.$api.setTenant).then((res) => {

                  })
									httpGet(data, this.$api.getCertificates).then((res) => {
                    let dataOne=utils.zlib_unzip(res.data)
										dataOne.map(lt => {
											utils.modifyPutCarfid(li, lt, startTime,endTime)
										})
									})
								} else {
									this.$message.error("修改失败")
								}
							})
					} else if (li.manufactureId == 201||li.manufactureId == 221) {
						var endTime = new Date(this.form.endTime).getTime()
						var startTime = new Date(this.form.startTime).getTime()
            var unbind = {
                id:li.id,
								startTime: startTime,
								endTime: endTime
            };
            httpPost(unbind, this.$api.setTenant).then((res) => {

						})
						var data = {
							pageNum: 0,
							pageSize: 0,
							orderBy: "create_at desc",
							q: {
								cardId: li.cardId,
								deviceNum: li.deviceNum,
								types: "0,1,2,3,4",
								inStatus:"0,1"
							},
						};
						httpGet(data, this.$api.getCertificates).then((res) => {
              let dataOne=utils.zlib_unzip(res.data)
              console.log(dataOne)
							dataOne.map(lt => {
								utils.modifyPutCarfidzg(li, lt, startTime, endTime)
							})
						})
					}
				})
			},
			// 分页导航
			handlePageChange(val) {
				this.$set(this.query, "pageIndex", val);
				this.getData();
			},
		},
	};
</script>

<style scoped>
  .el-dialog .el-input__inner.el-date-editor--datetimerange{
    width: 100%;
  }
	.steps {
		background: rgba(236, 239, 255, 0.8);
		display: flex;
		flex-wrap: wrap;
		height: 44px;
		width: 100%;
		margin-bottom: 40px;
		box-sizing: border-box;
		align-items: center;
		text-align: center;
		justify-content: center;
		position: relative;
	}

	.selectoptionClass {
		position: absolute;
		left: 30px;
	}

	.step {
		cursor: pointer;
		width: 25%;
		position: relative;
		height: 100%;
		line-height: 44px;
	}

	.steps .l1 {
		width: 22px;
		height: 22px;
		margin-right: 9px;
		vertical-align: middle;
	}

	.steps span {
		vertical-align: middle;
		font-size: 16px;
		font-family: Microsoft YaHei;
		font-weight: 700;
		color: #666;
	}

	.steps .r2 {
		width: 28px;
		height: 44px;
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.steps .stepcolor {
		color: #8078ea;
	}

	.handle-box {
		margin-bottom: 10px;
		position: relative;
	}

	.nextstep {
		position: absolute;
		right: 0;
		top: 0;
		color: #fff;
		font-size: 14px;
		cursor: pointer;
		/* width: 2.5rem; */
		text-align: right;
	}

	.nextstep div {
		display: inline-block;
		margin: 6px 15px;
		/* background: #6971ab; */
		border-radius: 6px;
	}

	.handle-select {
		width: 120px;
	}

	.handle-input {
		width: 300px;
		display: inline-block;
	}

	.table {
		width: 100%;
		font-size: 14px;
	}

	.red {
		color: #ff0000;
	}

	.mr10 {
		margin-right: 10px;
	}

	.mright {
		margin-right: 10px;
		display: inline-block;
	}

	.table-td-thumb {
		display: block;
		margin: auto;
		width: 40px;
		height: 40px;
	}

	.elrow {
		margin-bottom: 20px;
	}

	.grid-content {
		position: relative;
		z-index: 99;
		display: flex;
		align-items: center;
		overflow: hidden;
		justify-content: space-around;
		-webkit-box-align: center;
	}

	/* 加的 */
	.colposition {
		display: flex;
		align-items: center;
		position: relative;
		box-sizing: border-box;
		border: 2px solid hsla(0, 0%, 100%, 0.2);
		/* width: 100%; */
	}

	.grid-cont-right {
		flex: 1;
		text-align: left;
		padding-left: 20px;
		box-sizing: border-box;
		font-size: 16px;
		color: #666;
		font-size: 14px;
		line-height: 32px;
	}

	.grid-num {
		font-size: 24px;
	}

	.grid-con-icon {
		font-size: 50px;
		width: 100px;
		height: 100px;
		text-align: center;
		line-height: 100px;
		color: #fff;
	}

	.grid-con-1 {
		position: relative;
	}

	.grid-con-1::before {
		position: absolute;
		content: "";
		top: 50%;
		right: 0;
		width: 1px;
		transform: translateY(-50%);
		height: 70px;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		border-left: 1px dashed #666;
	}

	.grid-con-1 .grid-con-icon {
		background: rgb(45, 140, 240);
	}

	.grid-con-1 .grid-num {
		/* color: rgb(45, 140, 240); */
		color: #333;
	}

	.grid-con-2 .grid-con-icon {
		background: rgb(100, 213, 114);
	}

	.grid-con-2 .grid-num {
		/* color: rgb(45, 140, 240); */
		color: #333;
	}

	.grid-con-3 .grid-con-icon {
		background: rgb(242, 94, 67);
	}

	.grid-con-3 .grid-num {
		color: rgb(242, 94, 67);
	}

	.nulldiv {
		text-align: center;
		color: #999;
		font-size: 16px;
		font-weight: 400;
	}

	.nullimg {
		margin: 30px auto;
		max-width: 300px;
	}

	.el-card__body {
		padding: 0;
	}

	.cardbg {
		/* height: 460px; */
		overflow-y: scroll;
		background: #fff;
		/* margin: 20px; */
		padding: 0;
	}

	.rowcli {
		box-sizing: border-box;
		margin: 0 0 0 10px;
	}

	.pagehead {
		position: relative;
	}

	.pagehead .fjry {
		font-size: 16px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333;
		position: relative;
		margin-bottom: 20px;
	}

	.pagehead .fjry::before {
		content: "";
		width: 3px;
		height: 18px;
		position: absolute;
		left: -30px;
		top: 50%;
		transform: translateY(-50%);
		background: #8078ea;
		border-radius: 1px;
		margin: 0 10px 0 18px;
	}

	.secondcontent {
		border-top: 1px solid#EEE;
		padding-top: 20px;
	}

	.secondcontent .el-form-item {
		width: 32%;
	}

	.secondcontent .w250 {
		width: 250px;
	}

	.bottomcontent {
		margin-top: 30px;
	}

	.room-li {
		display: inline-block;
		vertical-align: top;
		margin-right: 16px;
		margin-bottom: 29px;
		position: relative;
	}

	.room-li .check-img {
		cursor: pointer;
		position: absolute;
		top: 10px;
		right: 10px;
		width: 18px;
		height: 18px;
	}

	.h700 {
		height: 616px;
		overflow: auto;
	}

	.room-list {
		height: 490px;
		overflow: auto;
	}
  .container{
    position: relative;
  }
  .totalPosition{
    position: absolute;
    bottom: 0;
    left: 20px;
  }
	.rzaddress {
		display: inline-block;
		position: absolute;
		top: 6px;
		right: 90px;
		white-space: nowrap;
		width: 280px;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.pagehead .el-icon-location-information {
		vertical-align: middle;
		font-size: 20px;
	}

	.pagehead .rzaddress span {
		vertical-align: middle;
	}

	.selectoptions {
		position: absolute;
		top: 0.4rem;
		right: 1.5rem;
		width: 1.5rem;
		z-index: 99;
	}

	.selectoptions .handle-input {
		width: 1.5rem;
	}
</style>
