<template>

	<view class="full-width  full-height" style="overflow: hidden;">
		<view class="form full-width">

			<view style="width: 100%;  display: flex;align-items: center; justify-content: center;"
				:style="{height: titleHeight +'px'}">
				<view @click="backUpperPage" style="position: absolute; left: 20upx;  ">
					<image src="../../static/recommend/icon_back.png" mode="aspectFit"
						style="width: 28upx; height: 42upx; margin-top: calc((32px - 42upx)/2);margin-left: auto; margin-right: auto;">
					</image>
				</view>
				<view style="display: flex;
				 font-size: 27upx;width: 380upx;
				 height: 80upx; background: #282932; 
				 border-radius: 50upx; 
				 color: #FFFFFF; 
				 margin-top: 10upx;">
					<view :class="{'previewAxtiveLeft':!preview}" @click="onclickTitle(false)"
						style="line-height: 80upx; text-align: center; width: 220upx;font-size: 24upx;">
						自定义
					</view>
					<view :class="{'previewAxtiveRight':preview}" @click="onclickTitle(true)"
						style="line-height: 80upx; text-align: center; width: 220upx;font-size: 24upx;">
						模板
					</view>
				</view>
			</view>

			<view v-if="!preview" class="full-width" scroll-y style="overflow: scroll">
				<view style="
				height: 710upx; 
				overflow: scroll; 
				overflow: hidden;
				margin:11upx auto 47upx;
				display: flex;
				justify-content: center;
				align-items: center; "
					:style="{width: (pixel_Width * pixel_scale) +'px', borderRadius: (defalutFillet * (pixel_Width * pixel_scale / inputWidth) ) + 'px'}">
					<view
						:style="{width: (pixel_Width*pixel_scale) +'px',height: (pixel_Height*pixel_scale) +'px', borderRadius: (defalutFillet * (pixel_Width * pixel_scale / inputWidth) ) + 'px'}"
						style="background: #FFFFFF; margin:auto; box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.5);">
					</view>
				</view>
				<view style="position: relative;">
					<view style="display: flex; align-items: center; justify-content: center; margin-top: 10upx;">
						<view style="font-size: 30upx; font-weight: 400; color: #FFFFFF; width: 180upx;">物料宽度：</view>
						<view style="width: 282upx; height: 66upx; background: #282932; border-radius: 30upx; 
						display: flex; align-items: center;">
							<input type="digit" placeholder="请输入宽度" @input="moneyChangeWidth" :value="inputWidth"
								style="color: #FFFFFF; font-size: 28upx; padding-left: 35upx;width: 200upx;" />
							<view style="color: #898989; font-size: 26upx; width: 82upx;">{{companyValue}}</view>
						</view>
					</view>
					<view
						style="display: flex; align-items: center; justify-content: center; margin-top: 20upx; position: relative;">
						<view style="font-size: 30upx; font-weight: 400; color: #FFFFFF; width: 180upx;">物料高度：</view>
						<view style="width: 282upx; height: 66upx; background: #282932; border-radius: 30upx; 
						display: flex; align-items: center;">
							<input type="digit" :value="inputHeight" placeholder="请输入高度" @input="moneyChangeHeight"
								style="color: #FFFFFF; font-size: 28upx; padding-left: 35upx;width: 200upx;" />
							<view style="color: #898989; font-size: 26upx; width: 82upx;">{{companyValue}}</view>
						</view>
					</view>
					<view style="display: flex; align-items: center;justify-content: center;  margin-top: 15upx;">
						<view style="font-size: 30upx; font-weight: 400; color: #FFFFFF; width: 180upx;">圆角半径：</view>
						<view style="width: 282upx; height: 66upx; 
							display: flex; align-items: center; margin-top: 5upx;">
							<NumSlider ref="NumSlider" :min="0" :max="100" :width="sliderdefaultWith" :disabled="false"
								:range="false" @highChange="highChange" :leftX="sliderdefaultWith"
								:defalutFillet="defalutFillet" />
						</view>
					</view>
				</view>
			</view>

			<!-- 预置 -->
			<view style="width: 100%;height: calc(100% - 140upx);overflow:scroll;margin-top: 30upx;">
				<view style="width: calc(100% - 40upx) ;
			  height: calc(100% - 120upx);
			  margin-left: 20upx;
			  margin-right: 20upx;">
					<view v-if="preview" class="full-width" style="width: 100%; 
					 display: inline-grid; 
					 grid-template-columns: 33.33% 33.33% 33.33%;
					 margin-bottom: 100upx;">
						<view v-for="(item, index) in LoupanList" :key="index" @click.preven="hasManyInGoood(2,item)"
							style="width: 100%; display: inline-block;text-align:center;margin-top: 15upx;">
							<image :src="item.thumbnail" style="width: 80%;" mode="widthFix"> </image>
							<view style="margin-top: 10upx;">{{item.name}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<mpvue-picker ref="mpvuePicker" :themeColor="'#53B2B0'" :mode="mode" :pickerValueDefault="pickerValueDefault"
			@onChange="onChange" @onConfirm="onConfirm" @onCancel="onCancel" :pickerValueArray="pickerValueArray">
		</mpvue-picker>
		<view class="footer" v-if="!preview">
			<view class="footer_but" hover-class="hover-class-bg" @click="hasManyInGoood(1,null)">确认定制</view>
		</view>
		<!-- 显示商品弹框 -->
		<uni-popup ref="showManyGood" type="center">
			<view v-if="manyGoodSelectData != null &&  manyGoodSelectData != '' && manyGoodSelectData.length > 1" style="width: 100%;
			  height: 480upx;
			 background: #FFFFFF; 
			 border-radius: 10upx;
			 align-items: center;
			 display: flex;
			 flex-direction: column; 
			 justify-content: center;
			 font-size: 24upx;">
				<view v-if="manyGoodSelectData.length  == 2" style="width:550upx;
				    background: #FFFFFF; 
				    align-items:
					center;display: flex;
					flex-direction: row; 
					justify-content: center;
					font-size: 24upx;">
					<view style="width: 160upx; 
				     height: 220upx;
					  display: flex;
					  flex-direction: column; 
					  text-align: center; 
					  font-size: 20upx;">
						<image style="width: 160upx; 
					height: 160upx;
					background: #999999; 
					border-radius: 10upx;
				    margin-bottom: 15upx;" @click="saveToMake(1)" :src="manyGoodSelectData[0].goods_pic">
						</image>
						{{manyGoodSelectData[0].name}}
					</view>
					<view style="width: 160upx; 
				    height: 220upx; display: flex;flex-direction: column; margin-left: 30upx;text-align: center;font-size: 20upx;">
						<image style="width: 160upx; 
						height: 160upx;background: #999999; 
						border-radius: 10upx;
						margin-bottom: 15upx;" :src="manyGoodSelectData[1].goods_pic " @click="saveToMake(2)">
						</image>
						{{manyGoodSelectData[1].name}}
					</view>
				</view>
				<view v-if="manyGoodSelectData.length  == 3" style="width:600upx;
				    background: #FFFFFF; 
				    align-items:
					center;display: flex;
					flex-direction: row; 
					justify-content: center;
					font-size: 24upx;">
					<view style="width: 190upx; 
				     height: 220upx;
					  display: flex;
					  flex-direction: column; 
					  text-align: center; 
					  font-size: 20upx;
					  justify-content: center;
					   align-items: center;">
						<image style="width: 150upx; 
					height: 150upx;
					background: #999999; 
					border-radius: 10upx;
				    margin-bottom: 15upx;" @click="saveToMake(1)" :src="manyGoodSelectData[0].goods_pic">
						</image>
						{{manyGoodSelectData[0].name}}
					</view>
					<view style="width: 190upx; 
				    height: 220upx; display: flex;flex-direction: column;text-align: center;font-size: 20upx;justify-content: center;align-items: center;">
						<image style="width: 150upx; 
						height: 150upx;background: #999999; 
						border-radius: 10upx;
						margin-bottom: 15upx;" :src="manyGoodSelectData[1].goods_pic " @click="saveToMake(2)">
						</image>
						{{manyGoodSelectData[1].name}}
					</view>
					<view style="width: 190upx;
					height: 220upx; display: flex;flex-direction: column;text-align: center;font-size: 20upx;justify-content: center;
					align-items: center;">
						<image style="width: 150upx; 
						height: 150upx;background: #999999; 
						border-radius: 10upx;
						margin-bottom: 15upx;" :src="manyGoodSelectData[2].goods_pic " @click="saveToMake(3)">
						</image>
						{{manyGoodSelectData[2].name}}
					</view>
				</view>
				<view style="color:#333333;
				font-size:26upx;
				margin-top: 60upx;
				height: 50upx;" @click="toGoodDetail()">什么是白墨 + 彩墨 + 光油?</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import Enums from '@/util/Enums';
	import mpvuePicker from '../../components/mpvue-picker/mpvuePicker.vue';
	import userService from '@/service/UserService';
	import homeservice from '@/service/homeservice.js';
	import uniPopup from '../index/common/uni-popup/uni-popup.vue';
	import NumSlider from '../index/components/NumSlider.vue';
	import myhead from './head/head.vue'; // 页眉

	export default {
		components: {
			mpvuePicker,
			uniPopup,
			NumSlider,
			myhead
		},
		computed: {

		},
		data() {
			return {
				mode: 'selector',
				pickerValueArray: [{
						label: '毫米',
						value: 0
					},
					{
						label: '厘米',
						value: 1
					}
				],
				pickerValueDefault: [0],
				companyValue: '毫米',
				equalRatioState: false, //固定宽高比率
				directionState: false, //横屏竖屏
				wValue: 0, //固定宽高比率计算
				hValue: 0, //固定宽高比率计算
				previewWidth: 0, //基础
				previewHeight: 0, //基础
				inputWidth: 0, //文本框显示数据
				inputHeight: 0, //文本框显示数据
				pixel_Width: 0, //实际像素
				pixel_Height: 0, //实际像素
				pixel_scale: 1, //自动缩放屏幕比率，防止超出屏幕
				convert_rate: 10, //毫米和像素的转换比率
				OldConvert_rate: 10, //最大值是 210mm*297mm 毫米-像素的转换比率(接口获取数据记录保存下来)
				render_cove_width: 0, //最大宽度
				render_cove_height: 0, //最大高度
				data: {
					windowWidth: null, //屏幕宽度
					windowHeight: null, //屏幕高度
					pixelRate: null // 屏幕宽度比率
				},
				preview: false, //自定义预览
				//上拉状态
				dataLoadState: {
					pullDownRefresh: false,
					reachBottom: false
				},
				queryPage: {
					s: 'CanvasSize.newList',
					machine_id: null,
				},
				LoupanList: [],
				Specifications: false, //预置分类
				//判断是否为长按
				nav: true,
				Loop: null,
				good: null,
				parameter: {
					machine_id: null,
					goods_id: null,
					key: null
				},
				manyGoodSelectData: [], //查询更多商品
				type: 1, //类型 1 自定义 2 选择列表
				selectItemData: null, //选中对象
				sliderdefaultWith: 120,
				defalutFillet: 0, //默认圆角大小
				initialMax: 0,
				heiPixelRate: null, //屏幕宽度比率
				pixelScale: 0.62,
				pixel_scale: 1,
				titleHeight: 0, //标题高度
			}
		},

		methods: {

			//返回上一级页面
			backUpperPage() {
				uni.navigateBack();
			},

			onclickTitle(preview) {
				this.preview = preview
				if (this.preview) {
					this.defalutFillet = 0
					this.OnclickSpecifications();
				}
			},

			//调转明细界面
			toGoodDetail() {
				uni.navigateTo({
					url: '../index/goodDetail?machine_id=' + this.parameter.machine_id + "&goodTypeData= 2"
				});
			},

			//开关控制圆角
			switchChange(e) {
				if (e.detail.value == true) {
					this.switchIsFillet = true;
				} else {
					this.switchIsFillet = false;
				}
			},

			highChange(val) {
				this.defalutFillet = val;
			},

			//点击确认
			saveToMake(typeData) {
				this.closeManyGoodPop();
				if (this.type == 1) {
					let unit = null
					let real_width = null
					let real_height = null
					if (this.companyValue == '毫米') {
						unit = 'mm'
						real_width = this.inputWidth
						real_height = this.inputHeight
					} else if (this.companyValue == '厘米') {
						unit = 'cm'
						real_width = this.inputWidth
						real_height = this.inputHeight
					}
					let nameStr = real_width + ' x ' + real_height + '（' + this.companyValue + '）';
					if (this.defalutFillet > 0) {
						nameStr = real_width + ' x ' + real_height + ' - ' + this.defalutFillet + '（' + this.companyValue +'）';
					}
					let WidthIndex = real_width * this.OldConvert_rate
					let HeightIndex = real_height * this.OldConvert_rate
					let minWidthAanHeight = 0;
					let defalutFilletData = this.defalutFillet;
					if (this.inputHeight > this.inputWidth) {
						minWidthAanHeight = this.inputWidth
					} else {
						minWidthAanHeight = this.inputHeight
					}
					if (this.defalutFillet > minWidthAanHeight / 2) {
						defalutFilletData = Math.floor(minWidthAanHeight / 2)
					}
					uni.navigateTo({
						url: '../index/index_diy?machine_id=' + this.parameter.machine_id +
							'&WidthIndex=' + WidthIndex + '&HeightIndex=' + HeightIndex +
							'&OldConvert_rate=' + this.OldConvert_rate + '&unit=' + unit +
							'&name=' + nameStr +
							'&pixel_scale=' + this.pixel_scale +
							'&real_width=' + real_width +
							'&real_height=' + real_height +
							"&type=" + typeData +
							"&defalutFillet=" + defalutFilletData +
							"&maxWidth=" + this.render_cove_width / this.OldConvert_rate +
							"&maxHeight=" + this.render_cove_height / this.OldConvert_rate
					})
				} else if (this.type == 2) {
					let item = this.selectItemData;
					let real_radius = Number(item.real_radius);
					let real_height = Number(item.real_height);
					let real_width = Number(item.real_width);
					let minWidthAanHeight = 0;
					if (real_height > real_width) {
						minWidthAanHeight = real_width
					} else {
						minWidthAanHeight = real_height
					}
					if (real_radius > minWidthAanHeight / 2) {
						real_radius = Math.floor(minWidthAanHeight / 2)
					}
					let nameStr = item.real_width + " x " + item.real_height + " (毫米)";
					if (this.nav) {
						uni.navigateTo({
							url: '../index/index_diy?machine_id=' + this.parameter.machine_id +
								'&WidthIndex=' + item.width + '&HeightIndex=' + item.height +
								'&OldConvert_rate=' + this.OldConvert_rate + '&unit=' + item.unit +
								'&name=' + nameStr + '&pixel_scale=' + this.pixel_scale +
								'&real_width=' + item.real_width +
								'&real_height=' + item.real_height +
								"&type=" + typeData +
								"&defalutFillet=" + real_radius +
								"&maxWidth=" + this.render_cove_width / this.OldConvert_rate +
								"&maxHeight=" + this.render_cove_height / this.OldConvert_rate +
								"&itemData=" + JSON.stringify(item)
						})
					}
				} else if (this.type == 3) {
					let item = this.selectItemData;
					let real_radius = Number(item.real_radius);
					let real_height = Number(item.real_height);
					let real_width = Number(item.real_width);
					//判断是否超过对应宽高比
					let minWidthAanHeight = 0;
					if (real_height > real_width) {
						minWidthAanHeight = real_width
					} else {
						minWidthAanHeight = real_height
					}
					if (real_radius > minWidthAanHeight / 2) {
						real_radius = Math.floor(minWidthAanHeight / 2)
					}
					let nameStr = item.real_width + " x " + item.real_height + " (毫米)";
					if (this.nav) {
						uni.navigateTo({
							url: '../index/index_diy?machine_id=' + this.parameter.machine_id +
								'&WidthIndex=' + item.width + '&HeightIndex=' + item.height +
								'&OldConvert_rate=' + this.OldConvert_rate + '&unit=' + item.unit +
								'&name=' + nameStr + '&pixel_scale=' + this.pixel_scale +
								'&real_width=' + item.real_width +
								'&real_height=' + item.real_height +
								"&type=" + typeData +
								"&defalutFillet=" + real_radius +
								"&maxWidth=" + this.render_cove_width / this.OldConvert_rate +
								"&maxHeight=" + this.render_cove_height / this.OldConvert_rate +
								"&itemData=" + JSON.stringify(item)
						})
					}
				}
			},

			//点击商品
			hasManyInGoood(typeData, item) {
				//获取自定义产品信息
				//getCustomSizeInfo() {
					// 	var data = {
					// 		s: 'Product.getCustomize',
					// 		machine_id: this.queryPage.machine_id
					// 	};
					// 	homeservice.queryList(data).then(res => {
					// 		let width = this.render_cove_width / this.OldConvert_rate
					// 		let height = this.render_cove_height / this.OldConvert_rate
					// 		//this.render_cove_width = this.machineDetail.size.width * this.OldConvert_rate //最大宽度
					// 		//this.render_cove_height = this.machineDetail.size.height * this.OldConvert_rate //最大高度
					// 		this.good_id = res.id
					// 		this.good = res
					// 		this.wValue = width * this.OldConvert_rate //固定宽高比率计算(像素)
					// 		this.hValue = height * this.OldConvert_rate //固定宽高比率计算(像素)
					// 		this.previewWidth = width * this.OldConvert_rate //基础(像素)
					// 		this.previewHeight = height * this.OldConvert_rate //基础(像素)
					// 		this.inputWidth = width //文本(毫米)
					// 		this.inputHeight = height //文本(毫米)
					// 		this.pixel_Width = width * this.OldConvert_rate //实际(像素)
					// 		this.pixel_Height = height * this.OldConvert_rate //实际(像素)
					// 		//this.getWindowScale();

					// 		//if (this.pixel_Width > (this.data.windowWidth * 0.5)) {
					// 		// 	this.pixel_scale = (this.data.windowWidth * 0.5) / this.pixel_Width
					// 		// } else {
					// 		// 	if (this.pixel_Width < (this.data.windowWidth * 0.5) &&
					// 		// 		this.pixel_Height < (this.data.windowHeight * 0.5)) {
					// 		// 		this.pixel_scale = 1
					// 		// 	 }
					// 		// }
					// 		// if (this.pixel_Height > (this.data.windowHeight * 0.5)) {
					// 		// 	if ((this.data.windowHeight * 0.5) / this.pixel_Height < 1) {
					// 		// 		this.pixel_scale = (this.data.windowHeight * 0.5) / this.pixel_Height
					// 		//  }
					// 		// } else {
					// 		// 	if (this.pixel_Width < (this.data.windowWidth * 0.5) && this.pixel_Height < (this.data
					// 		// 			.windowHeight * this.pixelScale)) {
					// 		// 		this.pixel_scale = 1
					// 		// 	 }
					// 		// }
					// 		let real_width = Number(this.inputWidth);
					// 		let real_height = Number(this.inputHeight);
					// 		if (real_width > real_height) {
					// 			this.filletScale = real_width / 100;
					// 		} else {
					// 			this.filletScale = real_height / 100;
					// 		}
					// 		this.$refs['NumSlider'].initFilletRadius(that.newDefalutFilletData, that.filletScale);

					// 	}).catch(err => {

					// 	});
					// },


					// homeservice.queryList({
					// 	s: 'Product.getCommonGoodsList',
					// 	machine_id: this.parameter.machine_id || null,
					// }).then(result => {
					// 	if (result == undefined || result.length <= 0) {
					// 		uni.showToast({
					// 			title: "产品数据不能为空",
					// 			icon: 'none'
					// 		});
					// 		return
					// 	}
					// 	this.manyGoodSelectData = result;
						if (typeData == 1) {
							this.onSave();
						} else {
							this.refundNumorder(item)
						}
					// }).catch(err => {

					// });
			},

			//显示商品弹框
			showManyGoodPop() {
				this.$refs['showManyGood'].open();
			},

			//显示商品弹框
			closeManyGoodPop() {
				this.$refs["showManyGood"].close();
			},

			refundNumorder(item) {
				// if (this.manyGoodSelectData != null && this.manyGoodSelectData != '' && this.manyGoodSelectData.length >
				// 	1) {
				// 	this.selectItemData = item
				// 	this.type = 2
				// 	this.showManyGoodPop();
				// 	return
				// }
				// if (this.nav) {
					let real_radius = Number(item.real_radius);
					let real_height = Number(item.real_height);
					let real_width = Number(item.real_width);
					//判断是否超过对应宽高比
					let minWidthAanHeight = 0;
					if (real_height > real_width) {
						minWidthAanHeight = real_width
					} else {
						minWidthAanHeight = real_height
					}
					if (real_radius > minWidthAanHeight / 2) {
						real_radius = Math.floor(minWidthAanHeight / 2)
					}
					let nameStr = item.real_width + " x " + item.real_height + "  (毫米)";
					uni.navigateTo({
						url: '../index/index_diy?machine_id=' + this.parameter.machine_id +
							'&WidthIndex=' + item.width + '&HeightIndex=' + item.height +
							'&OldConvert_rate=' + this.OldConvert_rate + '&unit=' + item.unit +
							'&name=' + nameStr + '&pixel_scale=' + this
							.pixel_scale +
							'&real_width=' + item.real_width +
							'&real_height=' + item.real_height +
							"&type = 1" +
							"&defalutFillet=" + real_radius +
							"&maxWidth=" + this.render_cove_width / this.OldConvert_rate +
							"&maxHeight=" + this.render_cove_height / this.OldConvert_rate +
							"&itemData=" + JSON.stringify(item)
					})
				// }
			},

			//1像素 = 10毫米
			onSave() {
				if (this.inputWidth == "") {
					uni.showToast({
						title: "宽度不能为空",
						icon: 'none'
					});
					return;
				}
				if (this.inputHeight == "") {
					uni.showToast({
						title: "高度不能为空",
						icon: 'none'
					});
					return;
				}
				//if (this.manyGoodSelectData != null && this.manyGoodSelectData != '' && this.manyGoodSelectData.length > 1) {
				// 	this.type = 1;
				// 	this.showManyGoodPop();
				// 	return
				//}
				//创建或者更新画布信息
				let unit = null
				let real_width = null
				let real_height = null
				if (this.companyValue == '毫米') {
					unit = 'mm'
					real_width = this.inputWidth
					real_height = this.inputHeight
				} else if (this.companyValue == '厘米') {
					unit = 'cm'
					real_width = this.inputWidth
					real_height = this.inputHeight
				}
				//210 X 297 - 8 （毫米
				let nameStr = real_width + ' x ' + real_height + '（' + this.companyValue + '）';
				if (this.defalutFillet > 0) {
					nameStr = real_width + ' x ' + real_height + ' - ' + this.defalutFillet + '（' + this.companyValue + '）';
				}
				let WidthIndex = real_width * this.OldConvert_rate
				let HeightIndex = real_height * this.OldConvert_rate
				//判断是否超过对应宽高比
				let minWidthAanHeight = 0;
				let defalutFilletData = this.defalutFillet;
				if (this.inputHeight > this.inputWidth) {
					minWidthAanHeight = this.inputWidth
				} else {
					minWidthAanHeight = this.inputHeight
				}
				if (this.defalutFillet > minWidthAanHeight / 2) {
					defalutFilletData = Math.floor(minWidthAanHeight / 2)
				}
				uni.navigateTo({
					url: '../index/index_diy?machine_id=' + this.parameter.machine_id +
						'&WidthIndex=' + WidthIndex + '&HeightIndex=' + HeightIndex +
						'&OldConvert_rate=' + this.OldConvert_rate + '&unit=' + unit +
						'&name=' + nameStr +
						'&pixel_scale=' + this.pixel_scale +
						'&real_width=' + real_width +
						'&real_height=' + real_height +
						"&type = 1" +
						"&defalutFillet=" + defalutFilletData +
						"&maxWidth=" + this.render_cove_width / this.OldConvert_rate +
						"&maxHeight=" + this.render_cove_height / this.OldConvert_rate
				})
			},

			OnclickSpecifications() {
				this.Specifications = true
				this.queryPage.s = 'CanvasSize.newList'
				this.loadGoodsList(Enums.DATA_DIRECTION.UP);
			},

			direction() { //横屏竖屏
				this.directionState = !this.directionState
				let w = this.pixel_Width
				let h = this.pixel_Height
				this.pixel_Width = h
				this.pixel_Height = w
				this.inputWidth = h / this.convert_rate
				this.inputHeight = w / this.convert_rate
				//固定比率
				this.wValue = h
				this.hValue = w
			},

			equalRatio() {
				//固定比率
				this.equalRatioState = !this.equalRatioState
				//固定比率
				this.wValue = this.pixel_Width
				this.hValue = this.pixel_Height
			},

			//确定 e.value[0]
			onConfirm(e) {
				if (this.companyValue == e.label) {
					return
				}
				this.companyValue = e.label
				if (e.value[0] == 0) { //毫米
					this.convert_rate = this.OldConvert_rate
				} else if (e.value[0] == 1) { //厘米
					this.convert_rate = this.OldConvert_rate * 10
				}
				// 赋值
				this.inputHeight = this.previewHeight / this.convert_rate
				this.inputWidth = this.previewWidth / this.convert_rate
				this.setData({
					inputWidth: this.previewWidth / this.convert_rate
				})
				this.setData({
					inputHeight: this.previewHeight / this.convert_rate
				})
			},

			moneyChangeWidth(event) {
				let Width = this.moneyone(event.detail.value);
				let Height = null
				//赋值
				this.setData({
					inputWidth: Width
				}); //文本
				if (this.equalRatioState) { //固定宽高比率
					this.setData({
						inputHeight: (Width / (this.wValue / this.hValue)).toFixed(2)
					}); //文本
					Height = (Width / (this.wValue / this.hValue)).toFixed(2)
				} else { //随便输入
					this.setData({
						inputHeight: this.inputHeight
					}) //文本
				}
				if (Number(Width) > (Number(this.render_cove_width) / this.convert_rate)) {
					Width = (Number(this.render_cove_width) / this.convert_rate) //最大值
					this.setData({
						inputWidth: Width
					}); //赋值文本
					uni.showToast({
						icon: "success",
						title: '宽度最大值' + Width,
						duration: 2000
					});
				}
				if (Number(Height) > (Number(this.render_cove_height) / this.convert_rate)) {
					Height = (Number(this.render_cove_height) / this.convert_rate)
					this.setData({
						inputHeight: Height
					}); //文本
				}
				this.previewWidth = this.inputWidth * this.convert_rate
				this.previewHeight = this.inputHeight * this.convert_rate
				this.pixel_Width = this.previewWidth
				this.pixel_Height = this.previewHeight
				this.getPixelScale();
				return Width
			},

			moneyChangeHeight(event) {
				let Width = null;
				let Height = this.moneyone(event.detail.value);
				this.setData({
					inputHeight: Height
				}) //文本
				if (this.equalRatioState) { //固定宽高比率
					this.setData({
						inputWidth: (Height / (this.hValue / this.wValue)).toFixed(2)
					});
					Width = (Height / (this.hValue / this.wValue)).toFixed(2)
				} else { //随便输入
					this.setData({
						inputWidth: this.inputWidth
					}); //文本
				}
				if (Number(Width) > (Number(this.render_cove_width) / this.convert_rate)) {
					Width = (Number(this.render_cove_width) / this.convert_rate) //最大值
					this.setData({
						inputWidth: Width
					}); //赋值文本
				}
				if (Number(Height) > (Number(this.render_cove_height) / this.convert_rate)) {
					Height = (Number(this.render_cove_height) / this.convert_rate)
					this.setData({
						inputHeight: Height
					}); //文本
					uni.showToast({
						icon: "success",
						title: '高度最大值' + Height,
						duration: 2000
					});
				}
				this.previewWidth = this.inputWidth * this.convert_rate
				this.previewHeight = this.inputHeight * this.convert_rate
				this.pixel_Width = this.previewWidth
				this.pixel_Height = this.previewHeight
				this.getPixelScale();
				return Height
			},

			setData(obj) {
				let that = this;
				let keys = [];
				let val, data;
				Object.keys(obj).forEach(function(key) {
					keys = key.split('.');
					val = obj[key];
					data = that.$data;
					keys.forEach(function(key2, index) {
						if (index + 1 == keys.length) {
							that.$set(data, key2, val);
						} else {
							if (!data[key2]) {
								that.$set(data, key2, {});
							}
						}
						data = data[key2];
					})
				});
			},

			//保留两位小数点
			keepTwoNumber(num) {
				try {
					num = Number(num.toString().match(/^\d+(?:\.\d{0,2})?/))
				} catch (e) {
					//TODO handle the exception
				}
				return num
			},

			//验证输入金额
			moneyone(val) {
				let num = val.toString(); //先转换成字符串类型
				if (num.indexOf('.') == 0) { //第一位就是 .
					num = '1' + num
				} else if (num.indexOf('0') == 0) {
					num = ''
				}
				num = num.replace(/[^\d.]/g, ""); //清除“数字”和“.”以外的字符
				num = num.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
				num = num.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
				num = num.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //只能输入两个小数
				if (num.indexOf(".") < 0 && num != "") {
					num = parseFloat(num);
				}
				return num
			},

			//选择单位
			companyOn() {
				this.$refs.mpvuePicker.show();
			},

			onChange(e) {

			},

			onCancel(e) {

			},

			//获取最终比例
			getPixelScale() {
				let WidthIndex = this.inputWidth * this.OldConvert_rate;
				let HeightIndex = this.inputHeight * this.OldConvert_rate;
				if (WidthIndex > (this.data.windowWidth * this.pixelScale)) {
					this.pixel_scale = (this.data.windowWidth * this.pixelScale) / WidthIndex
				} else {
					if (WidthIndex < (this.data.windowWidth * this.pixelScale) && HeightIndex < (this.data.windowHeight *
							this.pixelScale)) {
						this.pixel_scale = 1
					}
				}
				if (HeightIndex > (this.data.windowHeight * this.pixelScale)) {
					if ((this.data.windowHeight * this.pixelScale) / HeightIndex < this.pixel_scale) {
						this.pixel_scale = (this.data.windowHeight * this.pixelScale) / HeightIndex
					}
				} else {
					if (WidthIndex < (this.data.windowWidth * this.pixelScale) && HeightIndex < (this.data.windowHeight *
							this.pixelScale)) {
						this.pixel_scale = 1
					}
				}
				this.pixel_scale = this.keepTwoNumber(this.pixel_scale);
				let getReserveWid = this.pixel_Width * this.pixel_scale;
				var widthAndHeightScan = getReserveWid / this.inputWidth;
				var editorHeightAndWidNum = Math.floor(50 / widthAndHeightScan);
				var newScan = 1; //重新分配比例
				let scaleWidth = 1;
				newScan = Math.round(editorHeightAndWidNum / 10);
				scaleWidth = (newScan * 10) / editorHeightAndWidNum;
				this.pixel_scale = this.pixel_scale / scaleWidth
				var widthAndHeightScan = (this.pixel_Width * this.pixel_scale) / this.inputWidth;
				var editorHeightAndWidNum = Math.floor(50 / widthAndHeightScan);
				let surplusNumber = editorHeightAndWidNum % 10;
				if (surplusNumber > 0) {
					this.pixel_scale = this.pixel_scale * 1.1;
				}
			},

			loadGoodsList(direction) {
				this.LoupanList = [];
				uni.showLoading({
					title: '正在加载中...',
					mask: true
				})
				homeservice.queryList(this.queryPage).then(result => {
					let newList = this.LoupanList.concat(result.data)
					this.LoupanList = newList
					uni.hideLoading();
				}).catch(err => {
					uni.hideLoading();
				});
			},

			//做滚动加载使用
			loadMore() {
				this.loadGoodsList(Enums.DATA_DIRECTION.DOWN);
			},

		},

		//下拉加载
		onPullDownRefresh() {
			this.LoupanList = []
			this.loadGoodsList(Enums.DATA_DIRECTION.UP);
		},

		//上拉加载
		onReachBottom() {

		},

		onLoad(options) {
			//设备信息
			let app = uni.getSystemInfoSync();
			//胶囊信息
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			this.titleHeight = app.statusBarHeight + menuButtonInfo.height + (menuButtonInfo.top - app.statusBarHeight) * 2
			//获取屏幕宽高
			this.sliderdefaultWith = uni.upx2px(280) + 22;
			let that = this;
			uni.getSystemInfo({
				success: function(res) {
					let pixelRate = res.windowWidth / 750;
					that.data.windowWidth = res.windowWidth // 屏幕宽度
					that.data.windowHeight = res.windowHeight // 屏幕高度
					let heiPixelRate = res.windowHeight / 1452;
					that.heiPixelRate = heiPixelRate
					that.data.pixelRate = pixelRate // 屏幕宽度比率
					if (options) {
						//判断是从设备进来 
						that.queryPage.machine_id = options.machine_id // 设备id
						that.parameter.machine_id = options.machine_id // 设备id
						//画布接口/查询布置画布列表
						that.LoupanList = []
						that.loadGoodsList(Enums.DATA_DIRECTION.UP);
						homeservice.WorksList({
							machine_id: that.parameter.machine_id,
							s: 'machine.detail'
						}).then(res => {
							console.log(res);
							res.convert_rate = 10;
							that.OldConvert_rate = res.convert_rate
							//console.log(res.convert_rate);
							that.render_cove_width = res.size.width * that.OldConvert_rate //最大宽度
							that.render_cove_height = res.size.height * that.OldConvert_rate //最大高度
							//获取通用商品详情
							homeservice.queryList({
								s: 'Product.getCustomize',
								machine_id: that.parameter.machine_id
							}).then(result => {
								that.good = result
								that.wValue = res.size.width * that.OldConvert_rate //固定宽高比率计算(像素)
								that.hValue = res.size.height * that.OldConvert_rate //固定宽高比率计算(像素)
								that.previewWidth = res.size.width * that.OldConvert_rate //基础(像素)
								that.previewHeight = res.size.height * that.OldConvert_rate //基础(像素)
								that.inputWidth = 100 //文本(毫米)
								that.inputHeight = 100 //文本(毫米)
								that.pixel_Width = 100 * that.OldConvert_rate //实际(像素)
								that.pixel_Height = 100 * that.OldConvert_rate //实际(像素)
								that.getPixelScale();
								uni.stopPullDownRefresh();
							}).catch(err => {
								uni.stopPullDownRefresh();
								uni.showToast({
									title: err.msg,
									icon: 'none'
								});
							});
						}).catch(err => {

						});
					}
				}
			});
		},

		onShow() {
			this.preview = false;
			this.type = 1;
		}

	}
</script>

<style lang="scss">
	page {
		background: #101014;
	}

	.equalRatioAxtive {
		color: #2a82e4 !important;
		border-color: #2a82e4 !important;
	}

	.directionAxtive {
		border-color: #2a82e4 !important;
	}

	.classificationLeft {
		background: #E7BE16 !important;
	}

	.classificationRight {
		background: #E7BE16 !important;
	}

	.previewAxtiveLeft {
		background: linear-gradient(92deg, #F29F3D, #F29F3D);
		box-shadow: 0px 19upx 48upx 1upx rgba(20, 31, 62, 0.35);
		border-radius: 50upx 50upx 0px 50upx;
	}

	.previewAxtiveRight {
		background: linear-gradient(92deg, #F29F3D, #F29F3D);
		box-shadow: 0px 19upx 48upx 1upx rgba(20, 31, 62, 0.35);
		border-radius: 50upx 50upx 50upx 0px;
	}

	.eq_list {
		width: calc(100% - 60upx);
		margin: 20upx auto;
		border-radius: 10upx;
		overflow: hidden;
		color: #FFFFFF;

		.eq_list_div {
			padding: 40upx 20upx;
			display: flex;
			align-items: center;
			border-bottom: 1px solid #282932;
		}
	}

	//返回顶部
	.to-top {
		position: fixed;
		bottom: 150upx;
		right: 30upx;
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
		text-align: center;
		line-height: 80upx;
		transform: rotate(-90deg);
		background: #000;
		opacity: 0.5;
		z-index: 999;
	}

	.to-top-icon {
		color: #FFFFFF;
	}

	.form {
		margin-top: 15px;
		height: calc(100% - 90upx);
		color: #FFFFFF;

		.item {
			height: 100upx;
			display: flex;
			align-items: center;
			font-size: 28upx;
			padding: 0 30upx;
			width: calc(100% - 60upx);

			.text {
				width: 200upx;
			}

			.value {
				width: 300upx;
				margin-left: auto;
				background: #212027;
				text-align: center;
				border-radius: 10upx;
				padding: 15upx 0;
				color: #FFFFFF;
				display: flex;
				align-items: center;
			}
		}
	}

	.footer {
		position: fixed;
		bottom: 20upx;
		width: 100%;

		.footer_but {
			margin: auto;
			color: #fff;
			text-align: center;
			line-height: 88upx;
			width: 300upx;
			height: 88upx;
			background: linear-gradient(92deg, #F29F3D, #F29F3D);
			box-shadow: 0px 19upx 48upx 1upx rgba(20, 31, 62, 0.35);
			border-radius: 50upx;
		}
	}
</style>