<template>
	<div class="padding-sm">
		<el-form label-position="right" label-width="120px">
			<el-form-item label="图片质量配置：">
				<el-select v-model="pictureInfo.image_out_size" placeholder="请选择">
				    <el-option
						v-for="(item,index) in pictureOptions"
						:key="item.value"
						:label="item.label"
						:value="item.value">
				    </el-option>
				</el-select>
				<el-button class="margin-left" type="primary" @click="conFirm">确定</el-button>
			</el-form-item>
			<div class="text-bold padding-top-xl margin-bottom">
				录像/抓拍配置：
			</div>
			<el-form-item label="录像编码：">
				<el-select v-model="videoImgInfo.nvr_code" placeholder="请选择">
				    <el-option
						v-for="(item,index) in videoCode"
						:key="item.value"
						:label="item.label"
						:value="item.value">
				    </el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="录像分辨率：">
				<el-select v-model="videoImgInfo.nvr_size" placeholder="请选择">
				    <el-option
						v-for="(item,index) in resolutionRatio"
						:key="item.value"
						:label="item.label"
						:value="item.value">
				    </el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="录像时长：">
				<el-time-picker v-model="videoImgInfo.nvr_time" 
					:picker-options="{
						selectableRange: '00:00:00 - 23:59:59'
					}"
					:clearable="false"
				  placeholder="选择时间"></el-time-picker>
			</el-form-item>
			<el-form-item label="录像文件：">
				<el-select v-model="videoImgInfo.nvr_type" placeholder="请选择">
				    <el-option
						v-for="(item,index) in videoType"
						:key="item.value"
						:label="item.label"
						:value="item.value">
				    </el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="图片类型：">
				<el-select v-model="videoImgInfo.img_type" placeholder="请选择">
				    <el-option
						v-for="(item,index) in imageType"
						:key="item.value"
						:label="item.label"
						:value="item.value">
				    </el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="图片大小：">
				<el-select v-model="videoImgInfo.img_size" placeholder="请选择">
				    <el-option
						v-for="(item,index) in resolutionRatio"
						:key="item.value"
						:label="item.label"
						:value="item.value">
				    </el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="">
				<el-button icon="Refresh" @click="getVIInfo">重置</el-button>
				<el-button class="margin-left" type="primary" @click="conVIFirm">确定</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script setup>
	import IpInput from "@/views/components/IpInput/index";
	import { getPictureConfig, setPictureConfig, getVIConfig, setVIConfig } from "@/api/settConfiguration"
	const { proxy } = getCurrentInstance();
	const baseUrl = location.protocol+"//"+window.location.host+"/";
	// const baseUrl = import.meta.env.VITE_APP_BASE_API;
	const videoImgInfo = ref({});
	const pictureInfo = ref({});
	const data = reactive({
		pictureOptions: [{
		    value: '0',
		    label: '默认'
		}, {
		    value: '600',
		    label: '600P（省流量）'
		}, {
		    value: '720',
		    label: '720P（中级）'
		}, {
		    value: '1080',
		    label: '1080P (高级)'
		}],
		videoCode: [{
		    value: 'h264',
		    label: 'h264'
		}, {
		    value: 'h265',
		    label: 'h265'
		}],
		resolutionRatio: [{
		    value: '720:480',
		    label: '720*480'
		}, {
		    value: '1024:600',
		    label: '1024*600'
		}, {
		    value: '1280:720',
		    label: '1280*720'
		}, {
		    value: '1920:1080',
		    label: '1920*1080'
		}, {
		    value: '2560:1440',
		    label: '2560*1440'
		}],
		videoType: [{
		    value: 'mp4',
		    label: 'mp4'
		}, {
		    value: 'mkv',
		    label: 'mkv'
		}],
		imageType: [{
		    value: 'jpeg',
		    label: 'jpeg'
		}, {
		    value: 'webp',
		    label: 'webp'
		}],
	});
	const { pictureOptions, videoCode, resolutionRatio, videoType, imageType } = toRefs(data);
	const conFirm = function(){
		proxy.$modal.confirm('确认是否修改图片质量配置？')
		.then(function () {
			setPictureConfig(pictureInfo.value).then((response) => {
				if(response.code == 200){
					getPictureInfo();
					proxy.$modal.msgSuccess("操作成功！");
				}
			})
		}).catch(() => { 
			
		});
	}
	const conVIFirm = function(){
		proxy.$modal.confirm('确认是否修改录像/抓拍配置？')
		.then(function () {
			videoImgInfo.value.nvr_time = proxy.parseTime(videoImgInfo.value.nvr_time,'{h}:{i}:{s}');
			setVIConfig(videoImgInfo.value).then((response) => {
				if(response.code == 200){
					getVIInfo();
					proxy.$modal.msgSuccess("操作成功！");
				}
			})
		}).catch(() => { 
			
		});
	}
	const getPictureInfo = function(){
		getPictureConfig().then((response) => {
			if(response.code == 200){
				pictureInfo.value = response.data[1];
			}
		})
	}
	const getVIInfo = function(){
		getVIConfig().then((response) => {
			if(response.code == 200){
				let _obj = response.data[1];
				let _long = (_obj.nvr_time + "").split(":");
				_obj.nvr_time = new Date(2016, 9, 10, (_long.length>2?_long[0]:'00'), (_long.length>2?_long[1]:'00'), (_long.length>2?_long[2]:'00'))
				videoImgInfo.value = _obj;
			}
		})
	}
	getPictureInfo();
	getVIInfo();
</script>

<style>  
</style>