// 原图信息
const $ori_info_1 = `<div class="other-item"><div class="item-title">原图片大小{ori_file_size}KB，像素尺寸{ori_width_px}×{ori_height_px}px</div></div>`;
const $ori_info_2 = `<div class="other-item"><div class="item-title">压缩前大小{ori_file_size}KB，像素尺寸{ori_width_px}×{ori_height_px}px</div></div>`;

// 背景色
const $bg_color_1 = `
	<div class="other-item">
		<div class="item-title">
			背景颜色<span style="color: red;">*</span>
		</div>
		<div class="item-value">
			<select class="color-select required-input" id="colorSelect" onchange="updateColorPreview(this.value)">
				<option value="">请选底色</option>
				<option value="#0085FF">蓝色</option>
				<option value="#FFFFFF">白色</option>
				<option value="#FF0000">红色</option>
				<option value="#64C5FF">浅蓝色</option>
				<option value="grad_blue_white">蓝白渐变色</option>
				<option value="#790303">暗红色</option>
			</select>
		  <div class="color-preview" id="colorPreview"></div>
		</div>
	</div>
`;
const $bg_color_2 = `
	<div class="other-item">
		<div class="item-title">
			背景颜色<span style="color: red;">*</span>
		</div>
		<div class="item-value">
			<select class="color-select-diy required-input" id="colorSelectDiy" onchange="updateColorPreview(this.value)">
				<option value="">请选底色</option>
			</select>
			<div class="color-preview" id="colorPreview"></div>
		</div>
	</div>
`;
const $bg_color_3 = `<div class="other-item"><div class="item-title">背景颜色</div><div class="item-value">{color_name}</div></div>`;

// dpi
const $dpi_1 = `<div class="other-item"><div class="item-title">分辨率(DPI)</div><div class="item-value" id="dpiValue">{dpi}</div></div>`;
const $dpi_2 = `
	<div class="other-item">
		<div class="item-title"">分辨率(DPI)<span style="color: red;">*</span></div>
		<div class="item-value">
			<input class="dpi-input required-input" id="dpiInput" type="number" value="{dpi}" oninput="updateDpi(this.value)" style="max-width:45px;">
		</div>
	</div>
`;

// 像素尺寸
const $pixel_1 = `<div class="other-item"><div class="item-title">像素尺寸(宽×高)</div><div class="item-value"><div>{width_px}×{height_px}px</div></div></div>`;
const $pixel_2 = `
	<div class="other-item">
		<div class="item-title">像素尺寸(宽×高)<span style="color: red;">*</span></div>
		<div class="item-value">
			<input  class="pixel-width-input required-input" placeholder="宽度" type="number" oninput="updatePixelWidth(this.value)" style="max-width: 45px;">
			<span>×</span>
			<input  class="pixel-height-input required-input" placeholder="高度" type="number" oninput="updatePixelHeight(this.value)" style="max-width: 45px;">
			<span>&nbsp;像素(px)</span>
		</div>
	</div>
`;
const $pixel_3 = `
	<div class="other-item">
		<div class="item-title">像素尺寸(宽×高)<span style="color: red;">*</span></div>
		<div class="item-value">
			<input  class="pixel-width-input required-input" id="widthPxInit1" placeholder="宽度" value='{ori_width_px}' type="number" oninput="updatePixelWidth(this.value)" style="max-width: 45px;">
			<span>×</span>
			<input  class="pixel-height-input required-input" id="heightPxInit1" placeholder="高度" value='{ori_height_px}' type="number" oninput="updatePixelHeight(this.value)" style="max-width: 45px;">
			<span>&nbsp;像素(px)</span>
		</div>
	</div>
`;
const $pixel_4 = `
	<div class="other-item">
		<div class="item-title">
			像素尺寸(宽×高)<span style="color: red;">*</span>
		</div>
		<div class="item-value">
			<select class="pixel-select-v1 required-input" id="pixelSelectV1" onchange="updatePixelV1(this.value)">
				<option value="">选择像素尺寸</option>
			</select>
			px
		</div>
	</div>
`;
const $pixel_5 = `
	<div class="other-item">
		<div class="item-title">压缩后像素尺寸</div>
		<div class="item-value">
			<input  class="pixel-scale" type="range" id="pixelScale" style="max-width: 80px;" step="0.05" value="1" min="0.2" max="1" oninput="updatePixelScale(this.value)">
			<div class="pixel-scale-display" id="pixelScaleDisplay">{ori_width_px}×{ori_height_px}px</div>
		</div>
	</div>
`;
const $pixel_6 = `
	<div class="other-item">
		<div class="item-title">
			照片尺寸<span style="color: red;">*</span>
		</div>
		<div class="item-value">
			<select class="pixel-select-v1 required-input" id="pixelSelectV1" onchange="updatePixelV1(this.value)">
				<option value="">选择照片尺寸</option>
			</select>
		</div>
	</div>
`;


// 文件大小
const $file_size_1 = `
	<div class="other-item">
		<div class="item-title">文件大小(KB)<span style="color: red;">*</span></div>
		<div class="item-value">
			<input  class="file-size-input required-input" id="fileSizeInit1" type="number" value="" oninput="updateFileSize(this.value)" style="max-width: 45px;">
			<span>KB左右</span>
		</div>
	</div>
`;

// 文件格式
const $format_1 = `
	<div class="other-item">
		<div class="item-title">
			目标格式<span style="color: red;">*</span>
		</div>
		<div class="item-value">
			<select class="format-select required-input" id="formatSelect" onchange="updateFormat(this.value)">
				<option value="">请选择目标格式</option>
				<option value="jpg">jpg</option>
				<option value="png">png</option>
				<option value="jpeg">jpeg</option>
			</select>
		</div>
	</div>
`;
const $format_2 = `<div class="other-item"><div class="item-title">原图片格式</div><div class="item-value">{ori_file_format}</div></div>`;


// 选择模板整体加载
const $load_tpl_1 = `
	<div class="other-item">
		<div class="item-title">
			地区<span style="color: red;">*</span>
		</div>
		<div class="item-value">
			<select class="prov-select required-input" id="provSelect" onchange="updateProv(this.value)">
				<option value="">选择地区</option>
			</select>
		</div>
	</div>
`;


// 相纸尺寸
const $paper_size = `
	<div class="other-item">
		<div class="item-title">
			打印相纸尺寸<span style="color: red;">*</span>
		</div>
		<div class="item-value">
			<select class="paper_size" id="paperSize" onchange="updatePaperSize(this.value)">
				<option value="6">6寸相纸</option>
				<option value="5">5寸相纸</option>
			</select>
		</div>
	</div>
`;

// 其他
const $other_1 = `
	<div class="other-item" id="addTextCtr" style="display: none;">
		<div class="item-title">底部加文字</div>
		<div class="item-value">
			<input  class="add_text" id="addText" type="text" value="" placeholder="默认不加" oninput="updateAddText(this.value)" style="max-width: 100px;">
		</div>
	</div>
`;

const $other_2 = `
	<div class="other-item" id="jpgFileSize" style="display: none;">
		<div class="item-title">文件大小(KB)<span style="color: red;">*</span></div>
		<div class="item-value">
			<input  class="file-size-input" id="fileSizeInit1" type="number" value="" oninput="updateFileSize(this.value)" style="max-width: 45px;">
			<span>KB左右</span>
		</div>
	</div>
	<div class="other-item" id="pngCps" style="display: none;">
		<div class="item-title">压缩文件</div>
		<div class="item-value">
			<select class="png_cps" onchange="updatePngCps(this.value)">
				<option value="">不压缩</option>
				<option value="png_cps">压缩</option>
			</select>
		</div>
	</div>
`;

// 提示信息
const $warn_msg_1 = `<div class="input-error-message" id="input-error-message">请填写所有必填项！</div>`;
const $warn_msg_2 = `<div class="input-error-message" id="input-error-message">请填写目标文件大小！</div>`;
const $warn_msg_3 = `<div class="input-error-message" id="input-error-message">请选择目标文件格式！</div>`;