<template>
	<div class="padding-sm">
		<el-form label-position="right" label-width="120px">
			<el-form-item label="设备信息：">
				<div>
					<div>设备名称：{{deviceInfos.name}} <el-Icon @click="showOpen(1)" class="text-df text-bold pointer" style="color: #409eff;"><Edit/></el-Icon></div>
					<div>设备型号：{{deviceInfos.model}}</div>
					<div>固件版本：V{{deviceInfos.ver}}</div>
					<div>开启状态：<el-switch
							v-model="deviceInfos.status"
							active-value="run"
							inactive-value="stop"
							disabled
							active-color="#13ce66"
							inactive-color="#ff4949"/></div>
					<div>更新时间：{{deviceInfos.boxTime}}</div>
					<div>开机自动识别：<el-switch
							v-model="deviceInfos.autostart"
							active-value="enable"
							inactive-value="disable"
							disabled
							active-color="#13ce66"
							inactive-color="#ff4949"/></div>
					
					<div>任务数量：{{deviceInfos.taskNumber}} 个</div>
					<div>服务器地址：{{deviceInfos.dataServer}} <el-Icon @click="showOpen(2)" class="text-df text-bold pointer" style="color: #409eff;"><Edit/></el-Icon></div>
				</div>
			</el-form-item>
			<el-form-item label="设备开启/关闭：">
				<el-button type="success" @click="handleDevice('restart')">开启</el-button>
				<el-button type="danger" @click="handleDevice('close')">关闭</el-button>
			</el-form-item>
			<el-form-item label="信息导出：">
				<el-button type="primary" @click="downLog()">日志下载</el-button>
				<el-button type="primary" @click="downHisLog()">历史日志下载</el-button>
			</el-form-item>
			<el-form-item label="设备升级：">
				<el-input style="width: 340px;" disabled v-model="uploadUrl.name"></el-input>
				<el-upload
				  class="upload-demo"
				  action
				  :on-change="handleChange"
				  :on-success="handleSuccess"
				  :on-error="handleError"
				  :show-file-list="false"
				  :auto-upload="false">
				  <el-button type="primary" class="margin-left" plain>浏览</el-button>
				</el-upload>
				<el-button style="margin-left: 10px;" plain type="success" @click="submitUpload">升级</el-button>
			</el-form-item>
		</el-form>
		
		<!-- 添加或修改摄像机列对话框 -->
		<el-dialog :title="'修改'+openTitle" v-model="openDialog" width="500px">
			<el-form ref="cameraRef" label-width="100px">
				<el-form-item :label="openTitle">
					<el-input v-model="openForm" :placeholder="'请输入'+openTitle" />
				</el-form-item>
				<el-form-item>
					<el-button type="warning" plain @click="calne">取消</el-button>
					<el-button type="primary" @click="confirmOpen">确定</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script setup>
	import { deviceInfo, deviceRestart, deviceClose, deviceLog, deviceHisLog, updateBack, setDeviceInfo } from "@/api/settConfiguration"
	const { proxy } = getCurrentInstance();
	const baseUrl = location.protocol+"//"+window.location.host+"/";
	// const baseUrl = import.meta.env.VITE_APP_BASE_API;
	const uploadUrl = ref("");
	const deviceInfos = ref({});
	const openForm = ref("");
	const openShow = ref("");
	const openDialog = ref(false);
	const openTitle = ref("");
	const submitUpload = function(){
		let formData = new FormData();
		formData.append("files", uploadUrl.value.raw);
	};
	const handleChange = function(file, fileList){
		uploadUrl.value = file;
	};
	const handleSuccess = function(response, file, fileList){
		uploadUrl.value = "";
		proxy.$modal.msgError("设备升级成功！");
	};
	const handleError = function(err, file, fileList){
		proxy.$modal.msgError("设备升级失败！");
	};
	const handleDevice = function(type){
		proxy.$modal.confirm('确认是否'+(type == 'restart'?'开启':'关闭')+'当前设备？')
		.then(function () {
			if(type == 'restart'){
				deviceRestart().then((response) => {
					proxy.$modal.msgSuccess("操作成功！");
				})
			}else{
				deviceClose().then((response) => {
					proxy.$modal.msgSuccess("操作成功！");
				})
			}
		}).catch(() => { 
			
		});
	};
	const downLog = function(_src){
		proxy.$modal.confirm('确认是否下载当前设备的日志文件？')
		.then(function () {
			deviceLog().then((response) => {
				if(response.code == 200){
					window.open(baseUrl + response.data[1].path);
					proxy.$modal.msgSuccess("操作成功！");
				}
			})
		}).catch(() => { 
			
		});
	};
	const downHisLog = function(_src){
		proxy.$modal.confirm('确认是否下载当前设备的历史日志文件？')
		.then(function () {
			deviceHisLog().then((response) => {
				if(response.code == 200){
					window.open(baseUrl + response.data[1].path);
					proxy.$modal.msgSuccess("操作成功！");
				}
			})
		}).catch(() => { 
			
		});
	};
	const calne = function(){
		openForm.value = "";
		openTitle.value = "";
		openShow.value = "";
		openDialog.value = false;
	}
	const showOpen = function(key){
		if(key == 1){
			openForm.value = deviceInfos.value.name;
			openTitle.value = "设备名称";
			openShow.value = "name";
		}else{
			openForm.value = deviceInfos.value.dataServer;
			openTitle.value = "服务器地址";
			openShow.value = "dataServer";
		}
		openDialog.value = true;
	}
	const confirmOpen = function(){
		if(openForm.value == ""){
			 proxy.$modal.msgSuccess("请先填写"+openTitle.value);
			 return;
		}
		let _ibj = {};
		if(openShow.value == "name"){
			_ibj = {
				name: openForm.value
			};
		}else{
			_ibj = {
				dataServer: openForm.value
			};
		}
		setDeviceInfo(_ibj).then((response) => {
			if(response.code == 200){
				proxy.$modal.msgSuccess("操作成功！");
				calne();
				getsbInfo()
			}
		})
	}
	// deviceInfos.value = {
	// 	autostart: "disable",
	// 	boxTime: "2023-02-01 16:51:21",
	// 	dataServer: "https://www.enstation.vip:9443-2023/zhaf_alarms?sn=yzkj_czp&url=alarm_folder/display_image/",
	// 	id: "10",
	// 	model: "ai-2",
	// 	name: "广州货船897-1",
	// 	status:"run",
	// 	taskNumber: "26",
	// 	ver: "1.0.0.1"
	// };
	const getsbInfo = function(){
		deviceInfo().then((response) => {
			deviceInfos.value = response.data[1];
		})
	}
	getsbInfo()
</script>

<style>  
	.el-icon{
		font-size: 16px;
	}
</style>