<template>
	<el-row>
		<el-col :span="5">
			<div class="box">
				<el-scrollbar>
					<basic-container>
						<avue-tree :option="treeOption" :data="treeData" @node-click="nodeClick" />
					</basic-container>
				</el-scrollbar>
			</div>
		</el-col>
		<el-col :span="19">
			<basic-container>
				<avue-crud :option="option" :search.sync="search" :table-loading="loading" :data="data" ref="crud"
					v-model="form" :page.sync="page" @search-change="searchChange" @search-reset="searchReset"
					@selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange"
					@refresh-change="refreshChange" @on-load="onLoad">
					<template slot="menuLeft">
						<!-- <el-button type="primary" size="small" icon="el-icon-plus" @click="handleAdd('add')">新 增
						</el-button> -->
						<!-- <el-button type="danger" size="small" plain icon="el-icon-delete" @click="handleDelete">删 除
						</el-button>
						<el-button type="success" size="small" plain icon="el-icon-upload2" @click="handleImport">导入
						</el-button> -->
						<!-- <el-button type="warning" size="small" plain
							icon="el-icon-download" @click="handleExport">导出
						</el-button> -->
					</template>
					<template slot-scope="{row,index}" slot="menu">
						<el-button type="text" size="small" @click="handleAdd('look',row)">查看</el-button>
						<el-button type="text" size="small" @click="handleAdd('edit',row)">编辑</el-button>
						<!-- <el-button v-if="row.modelId" type="text" size="small" @click="addModel(row)">编辑模型</el-button>
						<el-button v-else type="text" size="small" @click="addModel(row)">添加模型</el-button> -->
					</template>
				</avue-crud>

				<el-dialog title="用户数据导入" append-to-body :visible.sync="excelBox" width="555px">
					<avue-form :option="excelOption" v-model="excelForm" :upload-after="uploadAfter">
						<template slot="excelTemplate">
							<el-button type="primary" @click="handleTemplate">
								点击下载<i class="el-icon-download el-icon--right"></i>
							</el-button>
						</template>
					</avue-form>
				</el-dialog>

				<!-- 新增编辑弹框 -->
				<el-dialog @close="resetForm('ruleForm')" :title="equipmentTit" append-to-body
					:visible.sync="equipmentBox" :fullscreen='true'>
					<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm">
						<el-form-item label="设备类型">
							<el-cascader :disabled="iDisabled || eqiupType == 'edit'" :options="options" ref="cascaderClassroom"
								v-model="ruleForm.classCode" :props="props">
							</el-cascader>
						</el-form-item>
						<div v-if="ruleForm.classCode">
							<!-- <div class="floor">
								<p class="title">更新设置</p>
								<div class="flex-center">
									<el-form-item label="取数频率">
										<el-input style="width: 180px;" type="number" v-model="ruleForm.qspl">
										</el-input>（s）
									</el-form-item>
								</div>
							</div> -->
							<!-- <div class="floor">
								<p class="title">通知设置</p>
								<div class="flex-center">
									<el-form-item label="报警级别" prop="warnVO.warnLevel">
										<el-select v-model="ruleForm.warnVO.warnLevel" placeholder="请选择报警级别">
											<el-option label="区域一" :value="1"></el-option>
											<el-option label="区域二" :value="2"></el-option>
										</el-select>
									</el-form-item>
									<el-form-item label="通知人" prop="warnVO.notifier">
										<el-select v-model="ruleForm.warnVO.notifier" placeholder="请选择通知人">
											<el-option label="区域一" :value="1"></el-option>
											<el-option label="区域二" :value="2"></el-option>
										</el-select>
									</el-form-item>
								</div>
							</div> -->
							<div class="floor"
								v-if="this.equipmentType=='01' || this.equipmentType=='04' || this.equipmentType=='05' || this.equipmentType=='06' || this.equipmentType=='10' || this.equipmentType=='11'">
								<p class="title">通讯设置</p>
								<div class="flex-center" style="flex-wrap: wrap;">
									<el-form-item label="IP地址" prop="electricConfig.ip" v-if="this.equipmentType=='01'">
										<el-input :disabled="iDisabled || eqiupType == 'edit'" v-model="ruleForm.electricConfig.ip"></el-input>
									</el-form-item>
									<el-form-item label="端口号" prop="electricConfig.port"
										v-if="this.equipmentType=='01'">
										<el-input :disabled="iDisabled || eqiupType == 'edit'" v-model="ruleForm.electricConfig.port">
										</el-input>
									</el-form-item>
									<el-form-item label="数据偏移量" prop="electricConfig.offset"
										v-if="this.equipmentType=='01'">
										<el-input :disabled="iDisabled || eqiupType == 'edit'" v-model="ruleForm.electricConfig.offset">
										</el-input>
									</el-form-item>
									<!-- <el-form-item label="状态偏移量" prop="electricConfig.offsetStatus"
										v-if="this.equipmentType=='01'">
										<el-input :disabled="iDisabled || eqiupType == 'edit'" v-model="ruleForm.electricConfig.offsetStatus">
										</el-input>
									</el-form-item> -->
									<!-- <el-form-item label="MQTT端口号" prop="mqttdkh" v-if="this.equipmentType=='02' || this.equipmentType=='03' || this.equipmentType=='07' || this.equipmentType=='08'">
										<el-input v-model="ruleForm.mqttdkh"></el-input>
									</el-form-item>
									<el-form-item label="订阅主题" prop="dyzt" v-if="this.equipmentType=='02' || this.equipmentType=='03' || this.equipmentType=='07' || this.equipmentType=='08'">
										<el-input v-model="ruleForm.dyzt"></el-input>
									</el-form-item>
									<el-form-item label="发布主题" prop="fbzt" v-if="this.equipmentType=='02' || this.equipmentType=='03' || this.equipmentType=='07' || this.equipmentType=='08'">
										<el-input v-model="ruleForm.fbzt"></el-input>
									</el-form-item> -->
									<!-- <el-form-item label="APPKEY" prop="appkey" v-if="this.equipmentType=='04'">
										<el-input v-model="ruleForm.appkey"></el-input>
									</el-form-item>
									<el-form-item label="SECRET" prop="secret" v-if="this.equipmentType=='04'">
										<el-input v-model="ruleForm.secret"></el-input>
									</el-form-item> -->
									<!-- <el-form-item label="第三方ID" prop="thirdId"
										v-if="this.equipmentType=='04' || this.equipmentType=='05' || this.equipmentType=='06' || this.equipmentType=='10' || this.equipmentType=='11'">
										<el-input :disabled="iDisabled || eqiupType == 'edit'" v-model="ruleForm.thirdId"></el-input>
									</el-form-item>
									<el-form-item label="设备号" prop="lightConfigPowerVO.mac"
										v-if="this.equipmentType=='05'">
										<el-input :disabled="iDisabled || eqiupType == 'edit'" v-model="ruleForm.lightConfigPowerVO.mac">
										</el-input>
									</el-form-item>
									<el-form-item label="线路地址" prop="lightConfigPowerVO.addr"
										v-if="this.equipmentType=='05'">
										<el-input :disabled="iDisabled || eqiupType == 'edit'" v-model="ruleForm.lightConfigPowerVO.addr">
										</el-input>
									</el-form-item> -->
									<!-- <el-form-item label="业务区IP地址" prop="ywqipdz" v-if="this.equipmentType=='11'">
										<el-input v-model="ruleForm.ywqipdz"></el-input>
									</el-form-item>
									<el-form-item label="塔台IP地址" prop="ttipdz" v-if="this.equipmentType=='11'">
										<el-input v-model="ruleForm.ttipdz"></el-input>
									</el-form-item>
									<el-form-item label="HTTP端口号" prop="httpdkh" v-if="this.equipmentType=='11'">
										<el-input v-model="ruleForm.httpdkh"></el-input>
									</el-form-item>
									<el-form-item label="WebSocket端口号" prop="websocketdkh" v-if="this.equipmentType=='11'">
										<el-input v-model="ruleForm.websocketdkh"></el-input>
									</el-form-item> -->
								</div>
							</div>
							<div class="floor">
								<p class="title">设备编码</p>
								<div class="flex-center" style="flex-wrap: wrap;">
									<el-form-item label="模型" prop="area">
										<el-select :disabled="iDisabled || eqiupType == 'edit' ? true : false" @change="mxChange" v-model="ruleForm.area"
											placeholder="请选择模型">
											<el-option label="业务区" value="1"></el-option>
											<el-option label="塔台" value="2"></el-option>
										</el-select>
									</el-form-item>
									<!-- <el-form-item label="设备" prop="sb">
										<el-select v-model="ruleForm.sb" placeholder="请选择设备">
											<el-option label="区域一" value="shanghai"></el-option>
											<el-option label="区域二" value="beijing"></el-option>
										</el-select>
									</el-form-item> -->
									<!-- <el-form-item v-if="ruleForm.sb !=null" label="" prop="sb2">
										<el-select style="margin-left: -90px;" v-model="ruleForm.sb2"
											placeholder="请选择设备">
											<el-option label="区域一" value="shanghai"></el-option>
											<el-option label="区域二" value="beijing"></el-option>
										</el-select>
									</el-form-item> -->
									<el-form-item v-if="ruleForm.area" label="楼栋" prop="build">
										<el-select :disabled="iDisabled || eqiupType == 'edit'" v-model="ruleForm.build" placeholder="请选择楼栋" @change="chooseFloor">
											<el-option v-for="(item,index) in build" :label="item.name"
												:value="item.code" ></el-option>
										</el-select>
									</el-form-item>
									<el-form-item v-if="ruleForm.area" label="楼层" prop="floored">
										<el-select :disabled="iDisabled || eqiupType == 'edit'" v-model="ruleForm.floored" placeholder="请选择楼层">
											<el-option v-for="(item,index) in floored" :label="item.name"
												:value="item.code"></el-option>
										</el-select>
									</el-form-item>
								</div>
							</div>
							<div class="floor">
								<p class="title">基础配置</p>
								<div class="flex-center" style="flex-wrap: wrap;">
									<el-form-item label="编码" prop="code">
										<el-input :disabled="iDisabled || eqiupType == 'edit'" v-model="ruleForm.code"></el-input>
									</el-form-item>
									<el-form-item label="名称" prop="name">
										<el-input :disabled="eqiupType == 'edit' ? false : iDisabled" v-model="ruleForm.name"></el-input>
									</el-form-item>
									<el-form-item label="简称" prop="shortName">
										<el-input :disabled="eqiupType == 'edit' ? false : iDisabled" v-model="ruleForm.shortName"></el-input>
									</el-form-item>
									<el-form-item label="厂家" prop="brand">
										<el-input :disabled="eqiupType == 'edit' ? false : iDisabled" v-model="ruleForm.brand"></el-input>
									</el-form-item>
									<el-form-item label="使用时间" prop="useStartTime">
										<el-date-picker :disabled="eqiupType == 'edit' ? false : iDisabled" format="yyyy-MM-dd"
											value-format="yyyy-MM-dd" type="date" placeholder="选择日期"
											v-model="ruleForm.useStartTime">
										</el-date-picker>
									</el-form-item>
									<el-form-item label="具体位置" prop="location">
										<el-input :disabled="eqiupType == 'edit' ? false : iDisabled" v-model="ruleForm.location"></el-input>
									</el-form-item>
									<el-form-item label="维保人" prop="tendingUser">
										<el-input :disabled="eqiupType == 'edit' ? false : iDisabled" v-model="ruleForm.tendingUser"></el-input>
									</el-form-item>
									<el-form-item label="维保电话" prop="tendingPhone">
										<el-input :disabled="eqiupType == 'edit' ? false : iDisabled" v-model="ruleForm.tendingPhone"></el-input>
									</el-form-item>
									<el-form-item label="维保时间" prop="tendingTime">
										<!-- <el-input :disabled="iDisabled" v-model="ruleForm.location"></el-input> -->
										<el-date-picker :disabled="eqiupType == 'edit' ? false : iDisabled" v-model="ruleForm.tendingTime" type="datetime" placeholder="选择维保时间">
										    </el-date-picker>
									</el-form-item>
								</div>
							</div>
						</div>
						<div class="btn flex-center-center">
							<el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
							<el-button @click="resetForm('ruleForm')">取消</el-button>
						</div>
					</el-form>
				</el-dialog>
			</basic-container>
		</el-col>
	</el-row>
</template>

<script>
	import {
		getList,
		getDeptLazyTree,
		getDeptLazyTree2,
		remove,
		add,
		getDetails,
		getQy,
		getLc,
		getQy1,
		getLc1
	} from "@/api/equipment/index";
	import {
		mapGetters
	} from "vuex";
	import website from '@/config/website';
	import {
		getToken
	} from '@/util/auth';

	export default {
		data() {
			return {
				options: [],
				iDisabled: true,
				equipType:"",//操作状态
				build: [], //区域选项
				floored: [], //楼层选项
				props: {
					value: "key",
					label: "title",
					emitPath: false,
					// lazy: true,
					// lazyLoad(node, resolve) {
					// 	console.log(node)
					// 	const parentId = (node.level === 0) ? 0 : node.data.id;
					// 	getDeptLazyTree(parentId).then(res => {
					// 		console.log(res)
					// 		resolve(res.data.data.map(item => {
					// 			return {
					// 				...item,
					// 				leaf: !item.hasChildren
					// 			}
					// 		}))
					// 	});
					// }
				},
				ruleForm: {
					classCode: null, //设备类型
					// 通知设置
					warnVO: {
						warnLevel: null, //报警级别
						notifier: null, //通知人
					},
					// 通讯设置
					electricConfig: {
						ip: null, //ip地址
						port: null, //端口号
						offsetData: null, //数据偏移量
						offsetStatus: null, //状态偏移量
					},
					lightConfigPowerVO: {
						mac: null, //设备号
						addr: null, //线路地址
					},
					thirdId: null, //第三方id
					area: null, //模型
					build: null, //区域
					floored: null, //楼层
					// 基础配置
					code: null, //编码
					name: null, //名称
					shortName: null, //简称
					brand: null, //厂家
					useStartTime: null, //使用时间
					location: null, //具体位置
					tendingUser:null,
					tendingPhone:null,
					tendingTime:null,
				},
				rules: {
					warnVO: {
						warnLevel: [{
							required: true,
							message: '请选择报警级别',
							trigger: 'change'
						}],
						notifier: [{
							required: true,
							message: '请选择通知人',
							trigger: 'change'
						}],
					},
					electricConfig: {
						ip: [{
							required: true,
							message: '请输入内容',
							trigger: 'blur'
						}],
						port: [{
							required: true,
							message: '请输入内容',
							trigger: 'blur'
						}],
						offsetData: [{
							required: true,
							message: '请输入内容',
							trigger: 'blur'
						}],
						offsetStatus: [{
							required: true,
							message: '请输入内容',
							trigger: 'blur'
						}],
					},

					// mqttdkh: [{
					// 	required: true,
					// 	message: '请输入内容',
					// 	trigger: 'blur'
					// }],
					// dyzt: [{
					// 	required: true,
					// 	message: '请输入内容',
					// 	trigger: 'blur'
					// }],
					// fbzt: [{
					// 	required: true,
					// 	message: '请输入内容',
					// 	trigger: 'blur'
					// }],
					// appkey: [{
					// 	required: true,
					// 	message: '请输入内容',
					// 	trigger: 'blur'
					// }],
					// secret: [{
					// 	required: true,
					// 	message: '请输入内容',
					// 	trigger: 'blur'
					// }],
					thirdId: [{
						required: true,
						message: '请输入内容',
						trigger: 'blur'
					}],
					lightConfigPowerVO: {
						mac: [{
							required: true,
							message: '请输入内容',
							trigger: 'blur'
						}],
						addr: [{
							required: true,
							message: '请输入内容',
							trigger: 'blur'
						}],
					},
					// ywqipdz: [{
					// 	required: true,
					// 	message: '请输入内容',
					// 	trigger: 'blur'
					// }],
					// ttipdz: [{
					// 	required: true,
					// 	message: '请输入内容',
					// 	trigger: 'blur'
					// }],
					// httpdkh: [{
					// 	required: true,
					// 	message: '请输入内容',
					// 	trigger: 'blur'
					// }],
					// websocketdkh: [{
					// 	required: true,
					// 	message: '请输入内容',
					// 	trigger: 'blur'
					// }],
					area: [{
						required: true,
						message: '请选择模型',
						trigger: 'change'
					}],
					// sb: [{
					// 	required: true,
					// 	message: '请选择设备',
					// 	trigger: 'change'
					// }],
					// sb2: [{
					// 	required: true,
					// 	message: '请选择设备',
					// 	trigger: 'change'
					// }],
					build: [{
						required: true,
						message: '请选择区域',
						trigger: 'change'
					}],
					floored: [{
						required: true,
						message: '请选择楼层',
						trigger: 'change'
					}],
					code: [{
						required: true,
						message: '请输入内容',
						trigger: 'blur'
					}],
					name: [{
						required: true,
						message: '请输入内容',
						trigger: 'blur'
					}],
					shortName: [{
						required: true,
						message: '请输入内容',
						trigger: 'blur'
					}],
					brand: [{
						required: true,
						message: '请输入内容',
						trigger: 'blur'
					}],
					useStartTime: [{
						type: 'string',
						required: true,
						message: '请选择日期',
						trigger: 'change'
					}],
					location: [{
						required: true,
						message: '请输入内容',
						trigger: 'blur'
					}],
					tendingUser: [{
						required: true,
						message: '请输入内容',
						trigger: 'blur'
					}],
					tendingPhone: [{
						required: true,
						message: '请输入内容',
						trigger: 'blur'
					}],
					tendingTime: [{
						required: true,
						message: '请输入内容',
						trigger: 'change'
					}],
				},
				equipmentBox: false,
				equipmentTit: "新增设备",
				form: {},
				search: {},
				excelBox: false,
				selectionList: [],
				query: {},
				loading: true,
				page: {
					pageSize: 10,
					currentPage: 1,
					total: 0
				},
				treeDeptId: '',
				treeData: [],
				treeOption: {
					nodeKey: 'id',
					lazy: true,
					treeLoad: function(node, resolve) {
						const parentId = (node.level === 0) ? 0 : node.data.id;
						getDeptLazyTree(parentId).then(res => {
							resolve(res.data.data.map(item => {
								return {
									...item,
									leaf: !item.hasChildren
								}
							}))
						});
					},
					addBtn: false,
					menu: false,
					size: 'small',
					props: {
						labelText: '标题',
						label: 'title',
						value: 'value',
						children: 'children'
					}
				},
				option: {
					addBtn: false,
					editBtn: false,
					delBtn: false,
					// height: 'auto',
					// calcHeight: 80,
					tip: false,
					searchShow: true,
					searchMenuSpan: 6,
					border: true,
					index: true,
					selection: true,
					viewBtn: false,
					//dialogType: 'drawer',
					dialogClickModal: false,
					column: [{
							label: "设备种类",
							prop: "className",
						},
						{
							label: "设备名称",
							prop: "name",
							search: true,
						},
						{
							label: "设备编号",
							prop: "code",
						},
						{
							label: "生产厂家",
							prop: "brand",
						},
						{
							label: "设备位置",
							prop: "location",
							search: true,
						},
						{
							label: "状态",
							prop: "status",
						},
						{
							label: "投入使用时间",
							prop: "useStartTime",
						},
						{
							label: "更新时间",
							prop: "updateTime",
						},
					],
				},
				data: [],
				excelForm: {},
				excelOption: {
					submitBtn: false,
					emptyBtn: false,
					column: [{
							label: '模板上传',
							prop: 'excelFile',
							type: 'upload',
							drag: true,
							loadText: '模板上传中，请稍等',
							span: 24,
							propsHttp: {
								res: 'data'
							},
							tip: '请上传 .xls,.xlsx 标准格式文件',
							action: "/api/blade-user/import-user"
						},
						{
							label: "数据覆盖",
							prop: "isCovered",
							type: "switch",
							align: "center",
							width: 80,
							dicData: [{
									label: "否",
									value: 0
								},
								{
									label: "是",
									value: 1
								}
							],
							value: 0,
							slot: true,
							rules: [{
								required: true,
								message: "请选择是否覆盖",
								trigger: "blur"
							}]
						},
						{
							label: '模板下载',
							prop: 'excelTemplate',
							formslot: true,
							span: 24,
						}
					]
				}
			};
		},
		watch: {},
		computed: {
			// 勾选值处理
			ids() {
				let ids = [];
				this.selectionList.forEach(ele => {
					ids.push(ele.id);
				});
				return ids.join(",");
			},
			equipmentType() {
				if (this.ruleForm.classCode) {
					return this.ruleForm.classCode.slice(0, 2)
				}
				return null;
			}
		},
		mounted() {
			console.log('kkkk')
			getDeptLazyTree2().then(res => {
				let data = res.data.data;
				for(let i=0;i<data.length;i++){
					data[i].key = data[i].key.length < 4 ? '0' + data[i].key : data[i].key;
					if(data[i].hasChildren){
						for(let a=0;a<data[i].children.length;a++){
							data[i].children[a].key = data[i].children[a].key.length < 4 ? '0' + data[i].children[a].key : data[i].children[a].key;
						}
					}
				}
				this.options = data;
			});
		},
		methods: {
			// 左侧属性结构点击
			nodeClick(data) {
				this.treeDeptId = data.key;
				this.page.currentPage = 1;
				this.onLoad(this.page);
			},
			// 清空搜索
			searchReset() {
				this.query = {};
				this.treeDeptId = '';
				this.onLoad(this.page);
			},
			// 点击搜索
			searchChange(params, done) {
				this.query = params;
				this.page.currentPage = 1;
				this.onLoad(this.page, params);
				done();
			},
			// 勾选时触发 获得勾选项
			selectionChange(list) {
				this.selectionList = list;
			},
			// 清除勾选项 初始化
			selectionClear() {
				this.selectionList = [];
				this.$refs.crud.toggleSelection();
			},
			// 点击删除
			handleDelete() {
				if (this.selectionList.length === 0) {
					this.$message.warning("请选择至少一条数据");
					return;
				}
				this.$confirm("确定将选择数据删除?", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					})
					.then(() => {
						return remove(this.ids);
					})
					.then(() => {
						this.onLoad(this.page);
						this.$message({
							type: "success",
							message: "操作成功!"
						});
						this.$refs.crud.toggleSelection();
					});
			},
			// 点击导入
			handleImport() {
				this.excelBox = true;
			},
			// 图片上传后的回调,function(res,done)，done用于结束操作，loading用于中断操作
			uploadAfter(res, done, loading, column) {
				window.console.log(column);
				this.excelBox = false;
				this.refreshChange();
				done();
			},
			// 导出数据
			// handleExport() {
			// 	this.$confirm("是否导出用户数据?", "提示", {
			// 		confirmButtonText: "确定",
			// 		cancelButtonText: "取消",
			// 		type: "warning"
			// 	}).then(() => {
			// 		window.open(
			// 			`/api/blade-user/export-user?${this.website.tokenHeader}=${getToken()}&account=${this.search.account}&realName=${this.search.realName}`
			// 			);
			// 	});
			// },
			// 点击下载模板
			handleTemplate() {
				window.open(`/api/blade-user/export-template?${this.website.tokenHeader}=${getToken()}`);
			},
			// 分页页码改变时会触发
			currentChange(currentPage) {
				this.page.currentPage = currentPage;
			},
			// pageSize改变时会触发
			sizeChange(pageSize) {
				this.page.pageSize = pageSize;
			},
			// 点击刷新按钮触发该事件
			refreshChange() {
				this.onLoad(this.page, this.query);
			},
			// 首次加载数据、查询、翻页方法
			onLoad(page, params = {}) {
				this.loading = true;
				getList(page.currentPage, page.pageSize, Object.assign(params, this.query), this.treeDeptId).then(res => {
					const data = res.data.data;
					this.page.total = data.total;
					this.data = data.records;
					this.loading = false;
					this.selectionClear();
				});
			},
			// 新增编辑设备
			handleAdd(type, row) {
				this.equipmentBox = true;
				this.iDisabled = false;
				this.eqiupType = type;
				if (type == "add") {
					// 新增
					this.equipmentTit = "新增设备";
				} else if (type == "edit") {
					// 编辑
					this.equipmentTit = "编辑设备";
					getDetails(row.id).then((res) => {
						this.ruleForm = res.data.data;
						console.log('设备编辑',this.ruleForm);
						getQy1(this.ruleForm.area).then(res => {
							this.build = res.data.data;
						});
						// getLc(this.ruleForm.area).then(res => {
						// 	this.floored = res.data.data;
						// });
					})
				} else {
					this.iDisabled = true;
					// 查看
					this.equipmentTit = "查看设备";
					getDetails(row.id).then((res) => {
						this.ruleForm = res.data.data;
						getQy1(this.ruleForm.area).then(res => {
							this.build = res.data.data;
						});
						// getLc(this.ruleForm.area).then(res => {
						// 	this.floored = res.data.data;
						// });
					})
				}
			},
			chooseFloor(e){
				getLc1(Number(e)).then(res => {
					this.ruleForm.floored = null;
					this.floored = res.data.data;
				});
			},
			// 确定
			submitForm(formName) {
				if (!this.ruleForm.classCode) {
					this.$message({
						message: '请选择设备类型',
						type: 'warning'
					});
					return
				}
				if (!this.iDisabled) {
					this.$refs[formName].validate((valid) => {
						if (valid) {
							add(this.ruleForm).then(res => {
								this.resetForm('ruleForm');
								this.page.currentPage = 1;
								this.onLoad(this.page);
							});
						} else {
							return false;
						}
					});
				} else {
					this.resetForm('ruleForm');
				}
			},
			// 取消
			resetForm(formName) {
				this.ruleForm = {
					classCode: null, //设备类型
					// 通知设置
					warnVO: {
						warnLevel: null, //报警级别
						notifier: null, //通知人
					},
					// 通讯设置
					electricConfig: {
						ip: null, //ip地址
						port: null, //端口号
						offsetData: null, //数据偏移量
						offsetStatus: null, //状态偏移量
					},
					lightConfigPowerVO: {
						mac: null, //设备号
						addr: null, //线路地址
					},
					thirdId: null, //第三方id
					area: null, //模型
					build: null, //区域
					floored: null, //楼层
					// 基础配置
					code: null, //编码
					name: null, //名称
					shortName: null, //简称
					brand: null, //厂家
					useStartTime: null, //使用时间
					location: null, //具体位置
				};
				this.equipmentBox = false;
				this.equipmentTit = "新增设备";
				this.$refs[formName].resetFields();
				this.$refs.cascaderClassroom.$refs.panel.clearCheckedNodes();
				this.$refs.cascaderClassroom.$refs.panel.activePath = [];
				this.equipmentType = null;
			},
			// 添加模型
			addModel(val) {
				// console.log(row)
				this.$router.replace({
					path: '/equipment/model',
					query: {
						row: val
					}
				}) // 只能用 name
			},
			// 选择模型
			mxChange(val) {
				this.ruleForm.build = null;
				this.ruleForm.floored = null;
				getQy1(this.ruleForm.area).then(res => {
					// console.log(res)
					this.build = res.data.data;
				});
				// getLc(this.ruleForm.area).then(res => {
				// 	console.log(res)
				// 	this.floored = res.data.data;
				// });
			},
		}
	};
</script>

<style lang="scss" scoped>
	.box {
		height: 800px;
	}

	.el-scrollbar {
		height: 100%;
	}

	.box .el-scrollbar__wrap {
		overflow: scroll;
	}

	.floor {
		.title {
			font-size: 18px;
			color: #303133;
			padding-bottom: 5px;
			border-bottom: 2px solid #E5E5E5;
			margin: 0 0 20px 0;
		}
	}

	.btn {
		margin-top: 50px;
	}
</style>
