<template>
	
	<view class="full-width full-height " style="overflow: hidden; margin:auto " :style="{width:isShowPc?$base.isPcWidth +'px':'100%'}">
	
		<view class="form full-width full-height">
			<view @click="backUpperPage" style=" height: 100upx;  ">
				<image src="../../static/recommend/icon_back.png" mode="aspectFit"
					style="width: 28upx; height: 42upx; margin-top: calc((32px - 42upx)/2);margin:20upx;  padding: 10upx;">
				</image>
			</view>
			<view style="width: 100%; height: 80upx; display: flex;align-items: center; justify-content: center; margin-top: -90upx;">
				<view style="display: flex;
				 font-size: 27upx;width: 500upx;
				 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;">
						{{$i18n.messages[$i18n.locale]['自定义尺寸']}}
					</view>
					<view :class="{'previewAxtiveRight':preview}" @click="onclickTitle(true)"
						style="line-height: 80upx; text-align: center; width: 220upx;font-size: 24upx;">
						{{$i18n.messages[$i18n.locale]['预置尺寸']}}
					</view>
				</view>
			</view>

			<!-- 自定义 -->
			<view v-if="!preview" class="full-width" scroll-y style="height: calc(100% - 500upx); ">
				<view style="  height:100% ;
				 overflow: hidden;
				 margin:0upx auto 40upx;display: flex; margin-top: 15upx;
				justify-content: center; align-items: center; width: 100%;"
				
				:style="{ borderRadius: defalutFillet + 'px' }">
				<view :style="{width: (pixel_Width * pixel_scale) +'px',height: (pixel_Height * pixel_scale) +'px',
				borderRadius: defalutFillet + 'px'}"
					style="background: #fff; ">
				</view>
				

				</view>
				<view style="position: fixed; bottom: 25upx; left: 0; right: 0;">
					<!-- 自定义高度 -->
					<view style="display: flex; align-items: center; justify-content: center; margin-top: 30upx;">
						<view style="font-size: 27upx; font-weight: 400; color: #FFFFFF; width: 220upx;">
							{{$i18n.messages[$i18n.locale]['物料宽度']}}：
						</view>
						<view style="width: 282upx; height: 66upx; background: #282932; border-radius: 30upx; 
						display: flex; align-items: center;">
							<input type="digit"
								:placeholder="$i18n.messages[this.$i18n.locale]['请输入'] + ' ' + $i18n.messages[this.$i18n.locale]['宽度']"
								@input="moneyChangeWidth" v-model="inputWidth"
								style="color: #FFFFFF; font-size: 27upx; 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: 27upx; font-weight: 400; color: #FFFFFF;  width: 220upx;">
							{{$i18n.messages[$i18n.locale]['物料高度']}}：
						</view>
						<view style="width: 282upx; height: 66upx; background: #282932; border-radius: 30upx; 
						display: flex; align-items: center;">
							<input type="digit" v-model="inputHeight"
								:placeholder="$i18n.messages[this.$i18n.locale]['请输入'] + ' ' + $i18n.messages[this.$i18n.locale]['高度']"
								@input="moneyChangeHeight"
								style="color: #FFFFFF; font-size: 27upx; 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: 25upx;">
						<view style="font-size: 27upx; font-weight: 400; color: #FFFFFF; width: 260upx;">
							{{$i18n.messages[this.$i18n.locale]['圆角半径']}}：
						</view>
						<view style="width: 282upx; height: 50upx;   margin-left: 20upx;
				   		display: flex; align-items: center; margin-top: 5upx;">
							<!-- 滑块封装 -->
							<NumSlider ref="NumSlider" :min="0" :max="100" :width="sliderdefaultWith" :disabled="false"
								:range="false" @highChange="highChange" :leftX="leftX" />
						</view>
					</view>
					<view style="margin: auto;
							color: #fff;
							text-align: center;
							line-height: 80upx;
							width: 300upx;
							height: 80upx;
							background: linear-gradient(92deg, #F29F3D, #F29F3D);
							box-shadow: 0px 19upx 48upx 1upx rgba(20, 31, 62, 0.35);
							border-radius: 50upx;  margin-top: 30upx;" @click="hasManyInGoood(1,null)">{{$i18n.messages[$i18n.locale]['确认']}} </view>
					</view>
			</view>
			

			<!-- 预置 -->
			<view style="width: 100%;height: calc(100% - 140upx); overflow:hidden;margin-top: 30upx;">
				<view style="width: 100%;
		      height: calc(100% - 40upx);  background: #101014; overflow-y: auto; ">
					<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.alias_name}}</view>
						</view>
					</view>
				</view>
			</view>
			
			
			
			
			
			
			
		</view>

		<mpvue-picker ref="mpvuePicker" :themeColor="'#53B2B0'" :pickerCancelText=" $i18n.messages[$i18n.locale]['取消'] "
			:pickerConfirmText=" $i18n.messages[$i18n.locale]['确定'] " :mode="mode"
			:pickerValueDefault="pickerValueDefault" @onChange="onChange" @onConfirm="onConfirm" @onCancel="onCancel"
			:pickerValueArray="pickerValueArray"></mpvue-picker>

		<!-- 显示商品弹框 -->
		<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>
						<view style="font-size: 20upx;">{{manyGoodSelectData[0].alias_name}}</view>
						<!-- {{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>
						<view style="font-size: 20upx;">{{manyGoodSelectData[1].alias_name}}</view>
						<!-- {{manyGoodSelectData[1].name}} -->
					</view>
				</view>

				<view v-if="manyGoodSelectData.length  == 3" style="width:680upx;
					    background: #FFFFFF; 
					    align-items:
						center;display: flex;
						flex-direction: row; 
						justify-content: center;">
					<view style="width: 220upx; 
					     height: 220upx;
						  display: flex;
						  flex-direction: column; 
						  text-align: center; 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>
						<view style="font-size: 14upx;">{{manyGoodSelectData[0].alias_name}}</view>
					</view>
					<view
						style="width: 220upx; 
					    height: 220upx; display: flex;flex-direction: column;text-align: center;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>
						<view style="font-size: 14upx;">{{manyGoodSelectData[1].alias_name}}</view>
					</view>
					<view style="width: 220upx;
						height: 220upx; display: flex;flex-direction: column;text-align: center;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>
						<view style="font-size: 14upx;">{{manyGoodSelectData[2].alias_name}}</view>
					</view>
				</view>
				<view style="color:#333333; font-size:23upx; margin-top: 60upx;height: 50upx;" @click="toGoodDetail()">
					What is white ink + color ink</view>
			  </view>
		    </uni-popup>

			<!-- </div> -->
	   </view>

	<!-- </view> -->
</template>

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

	export default {
		components: {
			mpvuePicker,
			myhead,
			uniPopup,
			NumSlider
		},
		computed: {},
		data() {
			return {
				mode: 'selector',
				pickerValueArray: [{
						label: 'mm',
						value: 0
					},
					{
						label: 'cm',
						value: 1
					}
				],
				pickerValueDefault: [0],
				companyValue: 'mm',
				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, //屏幕宽度比率
				leftX: 0,
				filletScale: 1, //比例
				newDefalutFilletData: 0,
				pixelScale: 0.6, //默认像素比例0.6
				titleName: "", //标题
				worksid: 0,
				heightScale: 1, // 高度比例
				widthScale: 1, // 高度比例
				isShowPc:false,
			}
		},

		methods: {

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

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

			highChange(val) {
				this.newDefalutFilletData = val;
				let defalutFilletValue = Math.floor(this.newDefalutFilletData * this.filletScale)
				this.defalutFillet = Math.floor(defalutFilletValue * (this.pixel_Width * this.pixel_scale / this
					.inputWidth));
			},

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

			//点击确认
			saveToMake(typeData) {
				this.closeManyGoodPop();
				if (this.type == 1) {
					// 创建或者更新画布信息
					let unit = null
					let real_width = null
					let real_height = null
					if (this.companyValue == 'mm') {
						unit = 'mm'
						real_width = this.inputWidth
						real_height = this.inputHeight
					} else if (this.companyValue == 'cm') {
						unit = 'cm'
						real_width = this.inputWidth
						real_height = this.inputHeight
					}
					let defalutFilletData = Math.floor(this.newDefalutFilletData * this.filletScale);
					let nameStr = real_width + ' x ' + real_height + '（' + this.companyValue + '）';
					//210 X 297 - 8 （毫米）
					if (defalutFilletData > 0) {
						nameStr = real_width + ' x ' + real_height + ' - ' + defalutFilletData + '（' + this.companyValue + '）';
					}
					let WidthIndex = real_width * this.OldConvert_rate
					let HeightIndex = real_height * this.OldConvert_rate
					//判断是否超过对应宽高比
					let minWidthAanHeight = 0;
					if (this.inputHeight > this.inputWidth) {
						minWidthAanHeight = this.inputWidth
					} else {
						minWidthAanHeight = this.inputHeight
					}
					if (defalutFilletData > 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 || 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)
					}
					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=' + item.name + '&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) {
				homeservice.queryList({
					s: 'Product.getCommonGoodsList',
					machine_id: this.parameter.machine_id || null,
				}).then(result => {
					this.manyGoodSelectData = result;
					console.log(this.manyGoodSelectData);
					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)
					}
					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=' + item.name + '&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: this.$i18n.messages[this.$i18n.locale]['请输入宽度'],
						icon: 'none'
					});
					return;
				}
				if (this.inputHeight == "") {
					uni.showToast({
						title: this.$i18n.messages[this.$i18n.locale]['请输入高度'],
						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 == 'mm') {
					unit = 'mm'
					real_width = this.inputWidth
					real_height = this.inputHeight
				} else if (this.companyValue == 'cm') {
					unit = 'cm'
					real_width = this.inputWidth
					real_height = this.inputHeight
				}
				let defalutFilletData = Math.floor(this.newDefalutFilletData * this.filletScale);
				let nameStr = real_width + ' x ' + real_height + '（' + this.companyValue + '）';
				if (defalutFilletData > 0) {
					nameStr = real_width + ' x ' + real_height + ' - ' + defalutFilletData + '（' + this.companyValue + '）';
				}
				
				let WidthIndex = real_width * this.OldConvert_rate
				let HeightIndex = real_height * this.OldConvert_rate

				let minWidthAanHeight = 0;
				if (this.inputHeight > this.inputWidth) {
					minWidthAanHeight = this.inputWidth
				} else {
					minWidthAanHeight = this.inputHeight
				}
				if (defalutFilletData > 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
				})
			},


			touchstart(item, index) {
				let that = this;
				that.nav = true
				clearInterval(this.Loop); //再次清空定时器，防止重复注册定时器
				this.Loop = setTimeout(function() {
					that.nav = false
					console.log(that.nav)
					uni.showModal({
						title: 'delete',
						content: 'Are you sure you want to delete the current size？',
						confirmText: 'delete',
						confirmColor: '#ff3b32',
						cancelText: 'cancel',
						success: async function(res) {
							if (res.confirm) {
								that.LoupanList.splice(index, 1)
								homeservice.queryList({
									s: 'CanvasSize.del',
									ids: item.id
								}).then(result => {
									uni.showToast({
										icon: "success",
										title: 'Delete succeeded!',
										duration: 2000
									});
								}).catch(err => {
									uni.showToast({
										title: err.msg,
										icon: 'none'
									});
								});
							} else if (res.cancel) {
								// console.log('用户点击取消')
							}
						}
					});
				}.bind(this), 500);
			},

			touchend() {
				clearInterval(this.Loop);
			},

			OnclickSpecifications(e) {
				this.dataLoadState = {
					pullDownRefresh: false,
					reachBottom: false
				}
				this.LoupanList = []
				this.queryPage.page = 1;
				this.queryPage.total = 0;
				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
				// 赋值
				setTimeout(function() {
					this.inputWidth = Width
				}.bind(this), 0)

				if (Number(Width) > (Number(this.render_cove_width) / this.convert_rate)) {
					Width = (Number(this.render_cove_width) / this.convert_rate) //最大值
					setTimeout(function() {
						this.inputWidth = Width
					}.bind(this), 0)

					uni.showToast({
						icon: "success",
						title: this.$i18n.messages[this.$i18n.locale]['最大值'] + Width,
						duration: 2000
					});
				}

				setTimeout(function() {
					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();

					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;
					}
					let defalutFilletValue = Math.floor(this.newDefalutFilletData * this.filletScale)
					this.defalutFillet = Math.floor(defalutFilletValue * (this.pixel_Width * this.pixel_scale /this.inputWidth));
					this.$refs['NumSlider'].initFilletRadius(this.newDefalutFilletData, this.filletScale);
				}.bind(this), 10)

			},

			moneyChangeHeight(event) {
				let Width = null;
				let Height = this.moneyone(event.detail.value);
				//显示功能按钮
				setTimeout(function() {
					this.inputHeight = Height
				}.bind(this), 0)

				if (Number(Height) > (Number(this.render_cove_height) / this.convert_rate)) {
					Height = (Number(this.render_cove_height) / this.convert_rate)
					//显示功能按钮
					setTimeout(function() {
						this.inputHeight = Height
					}.bind(this), 0)

					uni.showToast({
						icon: "success",
						title: this.$i18n.messages[this.$i18n.locale]['最大值'] + Height,
						duration: 2000
					});
				}

				setTimeout(function() {
					//console.log("inputWidth=" + this.inputWidth + "previewHeight=" + this.inputHeight);
					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();
					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;
					}

					let defalutFilletValue = Math.floor(this.newDefalutFilletData * this.filletScale)
					this.defalutFillet = Math.floor(defalutFilletValue * (this.pixel_Width * this.pixel_scale /
						this.inputWidth));
					this.$refs['NumSlider'].initFilletRadius(this.newDefalutFilletData, this.filletScale);

				}.bind(this), 10)
			},


			//获取最终比例
			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;
				// }
				//console.log("计算比例1:"+this.pixel_scale);
				
			},

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

			getNowTime() {
				let timeStamp = new Date();
				let year = new Date(timeStamp).getFullYear();
				let month = new Date(timeStamp).getMonth() + 1 < 10 ? "0" + (new Date(timeStamp).getMonth() + 1) :
					new Date(timeStamp).getMonth() + 1;
				let date = new Date(timeStamp).getDate() < 10 ? "0" + new Date(timeStamp).getDate() : new Date(timeStamp)
					.getDate();
				let hh = new Date(timeStamp).getHours() < 10 ? "0" + new Date(timeStamp).getHours() : new Date(timeStamp)
					.getHours();
				let mm = new Date(timeStamp).getMinutes() < 10 ? "0" + new Date(timeStamp).getMinutes() : new Date(
					timeStamp).getMinutes();
				let ss = new Date(timeStamp).getSeconds() < 10 ? "0" + new Date(timeStamp).getSeconds() : new Date(
					timeStamp).getSeconds();
				let sss = new Date(timeStamp).getMilliseconds() < 10 ? "0" + new Date(timeStamp).getMilliseconds() :
					new Date(timeStamp).getMilliseconds();
				return year + "年" + month + "月" + date + "天" + hh + "小时" + mm + "分钟" + ss + "秒" + sss + "毫秒";
			},

			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];
					})
				});
			},

			//验证输入金额
			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) {
				
			},
			//返回顶部
			totop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				})
			},
			loadGoodsList(direction) {
				if (this.dataLoadState.pullDownRefresh || this.dataLoadState.reachBottom) return;
				uni.showLoading({
					title: 'Loading...',
					mask: true
				})
				this.dataLoadState.pullDownRefresh = direction === Enums.DATA_DIRECTION.UP;
				this.dataLoadState.reachBottom = direction === Enums.DATA_DIRECTION.DOWN;
				if (this.dataLoadState.reachBottom) {
					if (Math.ceil(this.queryPage.total / this.queryPage.per_page) < this.queryPage.page) {
						return setTimeout(() => {
							uni.showToast({
								title: "Ah, there's no more data！",
								icon: 'none'
							});
						}, 500);
					}
				}
				homeservice.queryList(this.queryPage).then(result => {
					// console.log(result)
					let newList = this.LoupanList.concat(result.data)
					this.LoupanList = newList
					// console.log(this.LoupanList)
					// 分页对象处理
					this.queryPage.total = result.total;
					this.queryPage.per_page = result.per_page;
					// 停止当前页面下拉刷新
					if (this.dataLoadState.pullDownRefresh) uni.stopPullDownRefresh();
					// 数据加载状态处理 false
					this.dataLoadState.pullDownRefresh = false;
					this.dataLoadState.reachBottom = false;
					uni.hideLoading();
				}).catch(err => {
					// 停止当前页面下拉刷新
					if (this.dataLoadState.pullDownRefresh) uni.stopPullDownRefresh();
					// 数据加载状态处理 false
					this.dataLoadState.pullDownRefresh = false;
					this.dataLoadState.reachBottom = false;
					uni.hideLoading();
				});
			},

			//做滚动加载使用
			loadMore() {
				if (Math.ceil(this.queryPage.total / this.queryPage.per_page) < this.queryPage.page) {
					return setTimeout(() => {
						uni.showToast({
							title: this.$i18n.messages[this.$i18n.locale]['没有更多数据'],
							icon: 'none'
						});
					}, 500);
				}
				this.queryPage.page = this.queryPage.page + 1;
				this.loadGoodsList(Enums.DATA_DIRECTION.DOWN);
			},

            //控制打开是否pc
			isOpenMode() {
				 this.pixelScale = 0.6;
				 this.isShowPc = this.$tool.isPc();
			 }
		},

		//下拉加载
		onPullDownRefresh() {
			this.dataLoadState.pullDownRefresh = false;
			this.dataLoadState.reachBottom = false;
			this.queryPage.page = 1;
			this.queryPage.total = 0;
			this.LoupanList = []
			this.loadGoodsList(Enums.DATA_DIRECTION.UP);
		},

		//上拉加载
		onReachBottom() {
			if (!this.preview) {
				return;
			}
			if (this.LoupanList.length < 12) {
				return setTimeout(() => {
					uni.showToast({
						title: this.$i18n.messages[this.$i18n.locale]['没有更多数据'],
						icon: 'none'
					});
				}, 500);
			}
			this.queryPage.page = this.queryPage.page + 1;
			this.loadGoodsList(Enums.DATA_DIRECTION.DOWN);
		},

		onLoad(options) {
			this.titleName = this.$i18n.messages[this.$i18n.locale]['尺寸']
			this.sliderdefaultWith = uni.upx2px(270);
			//获取屏幕宽高
			let that = this;
			uni.getSystemInfo({
				success: function(res) {
					that.leftX = res.screenWidth / 2;
					let pixelRate = res.windowWidth / 750;
					if (pixelRate > 1) {
						that.heightScale = 1.6
					}
					that.isShowPc = that.$tool.isPc();
					if(that.isShowPc){
						res.windowWidth  = that.$base.isPcWidth;
					}
					that.data.windowWidth = res.windowWidth - uni.upx2px(26); // 屏幕宽度
					that.data.windowHeight = res.windowHeight // 屏幕高度
					that.data.pixelRate = pixelRate // 屏幕宽度比率
					let heiPixelRate = res.windowHeight / 1452;
					that.heiPixelRate = heiPixelRate
					that.data.pixelRate = pixelRate // 屏幕宽度比率
				}
			});
			if (options) { // 判断是从设备进来
				this.queryPage.machine_id = options.machine_id // 设备id
				this.parameter.machine_id = options.machine_id // 设备id
				homeservice.WorksList({
					machine_id: this.parameter.machine_id,
					s: 'machine.detail'
				}).then(res => {
					this.OldConvert_rate = 10
					this.render_cove_width = res.size.width * this.OldConvert_rate //最大宽度
					this.render_cove_height = res.size.height * this.OldConvert_rate //最大高度
					//获取通用商品详情
					homeservice.queryList({
						s: 'Product.getCustomize',
						machine_id: this.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();
						let real_width = Number(that.inputWidth);
						let real_height = Number(that.inputHeight);
						if (real_width > real_height) {
							that.filletScale = real_width / 100;
						} else {
							that.filletScale = real_height / 100;
						}
						that.$refs['NumSlider'].initFilletRadius(that.newDefalutFilletData, that.filletScale);
						uni.stopPullDownRefresh();
					}).catch(err => {
						uni.stopPullDownRefresh();
						uni.showToast({
							title: err.msg,
							icon: 'none'
						});
					});
				}).catch(err => {
					// console.log(err)
				});
			}
			//画布接口/查询布置画布列表
			this.LoupanList = []
			this.queryPage.page = 1;
			this.queryPage.total = 0;
			this.loadGoodsList(Enums.DATA_DIRECTION.UP);
		},

		onShow() {
			this.isOpenMode();
		},

	}
</script>

<style lang="scss">
	page {
		height: 100%;
		width: 100%;
		background: #fff;
	}

	.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: 10px;
		height: calc(100% - 15px);
		color: #FFFFFF;
		background: #101014;

		.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;
			}
		}
	}
	
	.scroll-box::-webkit-scrollbar {
	    display: none;
	  }

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

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

	// }
</style>