<template>
	<div class="padding-lr" v-loading="loading">
		<el-tabs v-model="activeName" @tab-click="handleClick">
		    <el-tab-pane label="基本配置" name="first">
				<el-form ref="dialRef" :model="dialForm" :rules="rules" label-width="120px">
					<el-row :gutter="20">
						<el-col :span="8" :xs="24">
							<el-form-item label="摄像头" prop="camera">
								<el-select v-model="dialForm.camera" placeholder="请选择摄像头" 
									class="flex-sub" @change="changeCamera">
									<el-option label="摄像头1" value="1" />
									<el-option label="摄像头2" value="2" />
									<el-option label="摄像头3" value="3" />
								</el-select>
							</el-form-item>
							<el-form-item label="服务器" prop="broker_host">
								<el-input v-model="dialForm.broker_host" placeholder="请输入服务器"/>
							</el-form-item>
							<el-form-item label="客户端ID" prop="client_id">
								<el-input v-model="dialForm.client_id" placeholder="请输入客户端ID"/>
							</el-form-item>
							<el-form-item label="主题" prop="topic_name">
								<el-input v-model="dialForm.topic_name" placeholder="请输入主题"/>
							</el-form-item>
							<el-form-item label="用户名" prop="user_name">
								<el-input v-model="dialForm.user_name" placeholder="请输入用户名"/>
							</el-form-item>
							<el-form-item label="密码" prop="password">
								<el-input v-model="dialForm.password" placeholder="请输入密码"/>
							</el-form-item>
							<el-form-item label="摄像头地址" prop="camera_path">
								<el-input type="textarea" v-model="dialForm.camera_path" placeholder="请输入摄像头地址"/>
							</el-form-item>
							<el-form-item label="仪表数量" prop="num_dials">
								<el-input v-model="dialForm.num_dials" type="number" min="0" placeholder="请输入仪表数量"/>
							</el-form-item>
							<el-form-item label="是否上报" prop="status">
								<el-switch v-model="dialForm.upload"/>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="submitForm">保存配置</el-button>
								<el-button type="danger" @click="reSet">重置</el-button>
							</el-form-item>
						</el-col>
						<el-col :span="16" :xs="24">
							<div class="flex text-center text-sm margin-bottom-sm">
								<span style="width: 6%;">表号</span>
								<span style="width: 19%;margin: 0 10px;">名称</span>
								<span style="width: 10%;">code值</span>
								<span style="width: calc(10% - 10px);margin: 0 10px;">初始值</span>
								<span style="width: 10%;">最小值</span>
								<span style="width: calc(10% - 10px);margin: 0 10px;">最大值</span>
								<span style="width: calc(10% - 20px);">小数位</span>
								<span style="width: calc(10% - 30px);margin: 0 10px;">系数</span>
								<span style="width: calc(10% - 10px);margin-right:10px;">单位</span>
								<el-button link type="primary" icon="CirclePlus" style="font-size: 20px;" @click="addCode"></el-button>
							</div>
							<div v-for="(item,index) in dialForm.info" :key="index" class="margin-bottom-sm">
								<el-input style="width: 6%;" v-model="item.dial"/>
								<el-input style="width: 19%;margin: 0 10px;" v-model="item.codeName" placeholder="名称"/>
								<el-input style="width: 10%;" v-model="item.code" placeholder="code值"/>
								<el-input style="width: calc(10% - 10px);margin: 0 10px;" type="number" v-model="item.start_value" placeholder="初始值"/>
								<el-input style="width: 10%;" type="number" v-model="item.min" placeholder="最小值"/>
								<el-input style="width: calc(10% - 10px);margin: 0 10px;" type="number" v-model="item.max" placeholder="最大值"/>
								<el-input style="width: calc(10% - 20px);" type="number" v-model="item.decimalplace" placeholder="小数位数"/>
								<el-input style="width: calc(10% - 30px);margin: 0 10px;" v-model="item.coefficient" placeholder="系数"/>
								<el-input style="width: calc(10% - 10px);margin-right:10px;" v-model="item.unit" placeholder="单位"/>
								<el-button link type="danger" icon="Delete" style="font-size: 20px;" @click="delCode(item)"></el-button>
							</div>
						</el-col>
					</el-row>
				</el-form>
			</el-tab-pane>
		    <el-tab-pane label="实时数据" name="second">
				<el-row :gutter="20">
					<el-col :span="10" :xs="24">
						<div class="padding-bottom-sm text-bold flex justify-between" style="margin-right: 10%;">
							<span>图1：</span>
							<el-button size="small" type="primary" @click="getImg">刷新</el-button>
						</div>
						<el-image style="width: 90%" :src="baseUrl+imgInfo.result_path" :preview-src-list="srcList"></el-image>
						<div class="padding-tb-sm text-bold">图2：</div>
						<el-image style="width: 90%" :src="baseUrl+imgInfo.start_path" :preview-src-list="srcList"></el-image>
					</el-col>
					<el-col :span="14" :xs="24">
						<el-table :data="tableData" style="width: 100%;height: calc(100vh - 160px);" stripe>
						    <el-table-column prop="dial" label="表号" width="80"></el-table-column>
						    <el-table-column prop="codeName" label="名称"></el-table-column>
						    <el-table-column prop="code" label="code值" width="100"></el-table-column>
							<el-table-column prop="crorrection_value" width="100" label="初始修正值"></el-table-column>
							<el-table-column prop="value" label="表值"></el-table-column>
							<el-table-column prop="dial_time" label="标记时间" width="160"></el-table-column>
							
						</el-table>
					</el-col>
				</el-row>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script setup>
	import { getDialSet, setDial, getDialValue, getDialImg } from "@/api/instrumentConfiguration";
	import { deviceSystem } from "@/api/settConfiguration"
	const baseUrl = location.protocol + "//" + window.location.host + "/";
	// const baseUrl = import.meta.env.VITE_APP_BASE_API;
	const { proxy } = getCurrentInstance();
	const loading = ref(false);
	const activeName = ref('first');
	const imgInfo = ref({});
	const tableData = ref([]);
	const srcList = ref([]);
	
	const data = reactive({
		dialForm: {
			"camera": "1", //摄像头ID
			"upload": true,  // 是上报
			"broker_host": "",      //服务器
			"topic_name": "",   //主题
			"user_name": "",    //用户名
			"password": "",     //密码
			"camer_path":"", // 摄像头地址
			"num_dials": 0,  //仪表数量
			"client_id": "", //客户端id
			"info": []
		},
		rules: {
			broker_host: [{
				required: true,
				message: "请选择上报服务器",
				trigger: "blur",
			}],
			client_id: [{
				required: true,
				message: "请选择客户端id",
				trigger: "blur",
			}],
			topic_name: [{
				required: true,
				message: "请填写主题",
				trigger: "blur",
			}],
			user_name: [{
				required: true,
				message: "请填写用户名",
				trigger: "blur",
			}],
			password: [{
				required: true,
				message: "请填写密码",
				trigger: "blur",
			}],
			camer_path: [{
				required: true,
				message: "请填写摄像头地址",
				trigger: "blur",
			}],
			num_dials: [{
				required: true,
				message: "请填写仪表数量",
				trigger: "blur",
			}]
		}
	})
	const { dialForm, rules } = toRefs(data);
	// 表单重置
	function handleClick() {
		
	}
	function reSet() {
		getDialList();
		proxy.resetForm("dialRef");
	}
	const submitForm = function(){
		proxy.$refs["dialRef"].validate((valid) => {
			if (valid) {
				loading.value = true;
				setDial(dialForm.value).then((response) => {
					proxy.$modal.msgSuccess("新增成功");
					loading.value = false;
					handleDevice();
				});
			}
		})
	}
	const addCode = function(){
		let _obj = dialForm.value.info;
		let max = -1;
		if(_obj.length){
			max = _obj.reduce((prev, current) => (prev.dial > current.dial ? prev : current)).dial;
		}
		dialForm.value.info.push({
			"dial": parseInt(max) + 1,
			"code": "", 
			"unit": "", 
			"decimalplace": 1, 
			"coefficient": 100,
			"codeName": "",
			"max": 100,
			"min": 0,
			"start_value": 0
		});
	}
	const delCode = function(row){
		let _obj = dialForm.value.info;
		dialForm.value.info = _obj.filter((item) => {
		      return item.dial != row.dial
		});
	}
	const handleDevice = function(type){
		proxy.$modal.confirm('配置完成，需要重启系统方能生效！')
		.then(function () {
			deviceSystem('sys_start').then((response) => {
				proxy.$modal.msgSuccess("操作成功！");
				setTimeout(()=>{
					changeCamera();
				},180*1000);//5分钟后重新请求数据
			})
		}).catch(() => { 
			
		});
	};
	function getDialList() {
		loading.value = true;
		getDialSet({ "camera": dialForm.value.camera })
		.then((response) => {
			loading.value = false;
			if(response.data[1].camera){
				dialForm.value = response.data[1];
			}else{
				let _carmes = dialForm.value.camera;
				dialForm.value = {
					camera: _carmes
				}
			}
		})
		.catch((res)=>{
			loading.value = false;
			let _carmes = dialForm.value.camera;
			dialForm.value = {
				camera: _carmes
			}
		});
	}
	function getValue() {
		getDialValue({ "camera": dialForm.value.camera }).then((response) => {
			if(response.data[1].data.length){
				tableData.value = response.data[1].data;
			}else{
				tableData.value = [];
			}
		});
	}
	function getImg() {
		imgInfo.value = {};
		srcList.value = [];
		getDialImg({ "camera": dialForm.value.camera }).then((response) => {
			imgInfo.value = response.data[1];
			imgInfo.value.start_path = imgInfo.value.start_path + "?t=" + (new Date().getTime());
			imgInfo.value.result_path = imgInfo.value.result_path + "?t=" + (new Date().getTime());
			if(response.data[1].start_path){
				srcList.value = [
					baseUrl + imgInfo.value.start_path,
					baseUrl + imgInfo.value.result_path
				];
			}else{
				srcList.value = [];
			}
			
		});
	}
	function changeCamera(){
		getDialList();
		getValue();
		getImg();
	}
	getDialList();
	getValue();
	getImg();
</script>

<style>
</style>