<template>
	<view class="">
		<!-- <view class="line">
		</view> -->
		<view class="search">
			<view class="search-title">
				{{$t('dosugar.equipmentClientID')}}
			</view>
			<view class="search-input">
				<input type="text" :placeholder="$t('dosugar.placeholder')" v-model="searchClientId" />
			</view>
			<view class="search-button">
				<button type="primary" class="" @click="search()">
					<p class="">{{$t('dosugar.search')}}</P>
				</button>
			</view>
		</view>
		<view class="td-right">
			<view class="uni-list">
				<view class="uni-list-cell">
					<view class="uni-list-cell-left">
						{{$t('dosugar.chooseEquipment')}}
					</view>
					<view class="uni-list-cell-db" style="overflow: hidden;text-overflow: ellipsis;">
						<picker @change="changeEquipment" :value="index" :range="equipmentNameList">
							<view class="uni-input">{{equipmentNameList[index]}}</view>
						</picker>
					</view>
				</view>
			</view>
		</view>
		<view v-show="show">
			<view class="body">
				<p class="p">自动门开</p>
				<button type="primary" class="button" @click="update('M300','0')">
					<p class="p2">启动</P>
				</button>
				<button type="primary" class="button" @click="update('M300','1')">
					<p class="p2">关闭</P>
				</button>
			</view>
			<view class="line2"></view>
			<!-- //320特有 -->
			<view class="" v-show="equimentType=='MG320'">
				<view class="body">
					<p class="p">取糖门开</p>
					<button type="primary" class="button" @click="update('M301','0')">
						<p class="p2">启动</P>
					</button>
					<button type="primary" class="button" @click="update('M301','1')">
						<p class="p2">关闭</P>
					</button>
				</view>
				<view class="line2"></view>
			</view>
			<view class="body">
				<p class="p">下料白</p>
				<button type="primary" class="button" @click="update('M302','0')">
					<p class="p2">启动</P>
				</button>
				<button type="primary" class="button" @click="update('M302','1')">
					<p class="p2">关闭</P>
				</button>
			</view>
			<view class="line2"></view>
			<view class="body">
				<p class="p">下料红</p>
				<button type="primary" class="button" @click="update('M303','0')">
					<p class="p2">启动</P>
				</button>
				<button type="primary" class="button" @click="update('M303','1')">
					<p class="p2">关闭</P>
				</button>
			</view>
			<view class="line2"></view>
			<view class="body">
				<p class="p">下料黄</p>
				<button type="primary" class="button" @click="update('M304','0')">
					<p class="p2">启动</P>
				</button>
				<button type="primary" class="button" @click="update('M304','1')">
					<p class="p2">关闭</P>
				</button>
			</view>
			<view class="line2"></view>
			<view class="body">
				<p class="p">下料蓝</p>
				<button type="primary" class="button" @click="update('M305','0')">
					<p class="p2">启动</P>
				</button>
				<button type="primary" class="button" @click="update('M305','1')">
					<p class="p2">关闭</P>
				</button>
			</view>
			<view class="line2"></view>
			<view class="body">
				<p class="p">气泵启动</p>
				<button type="primary" class="button" @click="update('M306','0')">
					<p class="p2">启动</P>
				</button>
				<button type="primary" class="button" @click="update('M306','1')">
					<p class="p2">关闭</P>
				</button>
			</view>
			<view class="line2"></view>
			<view class="body">
				<p class="p">清洗</p>
				<button type="primary" class="button" @click="update('M307','0')">
					<p class="p2">启动</P>
				</button>
				<button type="primary" class="button" @click="update('M307','1')">
					<p class="p2">关闭</P>
				</button>
			</view>
			<view class="line2"></view>
			<view class="body">
				<p class="p">出棍模块</p>
				<button type="primary" class="button" @click="update('M308','0')">
					<p class="p2">启动</P>
				</button>
				<button type="primary" class="button" @click="update('M308','1')">
					<p class="p2">关闭</P>
				</button>
			</view>
			<view class="line2"></view>
			<view class="body">
				<p class="p">柜内加湿</p>
				<button type="primary" class="button" @click="update('M38','0')">
					<p class="p2">启动</P>
				</button>
				<button type="primary" class="button" @click="update('M38','1')">
					<p class="p2">关闭</P>
				</button>
			</view>
			<view class="line2"></view>
			<view class="body">
				<p class="p">炉头加热并启动</p>
				<button type="primary" class="button" @click="update('M39','0')">
					<p class="p2">启动</P>
				</button>
				<button type="primary" class="button" @click="update('M39','1')">
					<p class="p2">关闭</P>
				</button>
			</view>
<!-- 			<view class="line2"></view>
			<view class="body">
				<p class="p">炉头加热并启动</p>
				<button type="primary" class="button" @click="update('M39','0')">
					<p class="p2">启动</P>
				</button>
				<button type="primary" class="button" @click="update('M39','1')">
					<p class="p2">关闭</P>
				</button>
			</view> -->
			<view class="line2"></view>
			<view class="body">
				<p class="p">炉头转动高速</p>
				<button type="primary" class="button" @click="update('M43','0')">
					<p class="p2">启动</P>
				</button>
				<button type="primary" class="button" @click="update('M43','1')">
					<p class="p2">关闭</P>
				</button>
			</view>
			<view class="line2"></view>
			<view class="body">
				<p class="p">炉头转动中速</p>
				<button type="primary" class="button" @click="update('M42','0')">
					<p class="p2">启动</P>
				</button>
				<button type="primary" class="button" @click="update('M42','1')">
					<p class="p2">关闭</P>
				</button>
			</view>
			<view class="line2"></view>
			<view class="body">
				<p class="p">炉头转动低速</p>
				<button type="primary" class="button" @click="update('M41','0')">
					<p class="p2">启动</P>
				</button>
				<button type="primary" class="button" @click="update('M41','1')">
					<p class="p2">关闭</P>
				</button>
			</view>
			<view class="line2"></view>
			<!-- //301和320都有 -->
			<view class="" v-show="equimentType=='MG301'||equimentType=='MG320'">
				<view class="body">
					<p class="p">搅棍电机</p>
					<button type="primary" class="button" @click="update('M307','0')">
						<p class="p2">启动</P>
					</button>
					<button type="primary" class="button" @click="update('M307','1')">
						<p class="p2">关闭</P>
					</button>
				</view>
				<view class="line2"></view>
				<view class="body">
					<p class="p">柜内加热</p>
					<button type="primary" class="button" @click="update('M37','0')">
						<p class="p2">启动</P>
					</button>
					<button type="primary" class="button" @click="update('M37','1')">
						<p class="p2">关闭</P>
					</button>
				</view>
				<view class="line2"></view>
				<view class="body">
					<p class="p">线圈散热风机</p>
					<button type="primary" class="button" @click="update('M313','0')">
						<p class="p2">启动</P>
					</button>
					<button type="primary" class="button" @click="update('M313','1')">
						<p class="p2">关闭</P>
					</button>
				</view>
				<view class="line2"></view>
				<view class="body">
					<p class="p">排气风机</p>
					<button type="primary" class="button" @click="update('M310','0')">
						<p class="p2">启动</P>
					</button>
					<button type="primary" class="button" @click="update('M310','1')">
						<p class="p2">关闭</P>
					</button>
				</view>
				<view class="line2"></view>
			</view>
			<!-- //320特有 -->
			<view class="" v-show="equimentType=='MG320'">
				<view class="body">
					<p class="p">糖完排湿</p>
					<button type="primary" class="button" @click="update('M314','0')">
						<p class="p2">启动</P>
					</button>
					<button type="primary" class="button" @click="update('M314','1')">
						<p class="p2">关闭</P>
					</button>
				</view>
				<view class="line2"></view>
				<view class="body">
					<p class="p">清尾丝</p>
					<button type="primary" class="button" @click="update('M318','0')">
						<p class="p2">启动</P>
					</button>
					<button type="primary" class="button" @click="update('M318','1')">
						<p class="p2">关闭</P>
					</button>
				</view>
				<view class="line2"></view>
			</view>
		</view>
		<view class="line2"></view>
	</view>
</template>
<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from 'vuex';
	import {
		dateUtils
	} from '@/common/util.js';
	export default {
		data() {
			return {
				index: null,
				equipmentName: null,
				equimentType: null,
				equipmentId:null,
				equipmentNameList: [],
				globalUser: null,
				show: false,
				searchClientId:null
			}
		},
		onShow() {
			var token = uni.getStorageSync("token");
			this.globalUser = uni.getStorageSync("globalUser");
			this.globalUser.todayDate = dateUtils.getCurrentDate();
			if (token.length > 1) {
				this.getEquipmentListData();
				// this.getParam();
			} else {
				uni.reLaunch({
					url: '../Login/Login',
				});
			}

		},
		methods: {
			...mapActions('chart', ['getParameters', 'updateParameters', 'getEquipmentListByUser']),
			getEquipmentListData() {
				this.getEquipmentListByUser(this.globalUser)
					.then(data => {
						// this.merchantList = data;
						var listName = data[0].equipmentList;
						var equipmentNameList = [];
						for (var i = 0; i < listName.length; i++) {
							equipmentNameList.push(this.$t('common.name') + listName[i].name + ' , '+ this.$t('common.ID') + listName[i].clientId.substring(
								listName[i].clientId.length - 6, listName[i].clientId.length));
						}
						this.equipmentNameList = equipmentNameList;
						var listId = data[0].id;
						if (listId != null && listId != '1') {
							uni.setStorageSync("listName", listName);
						}
						uni.stopPullDownRefresh();
					}, _ => void uni.stopPullDownRefresh());
			},
			search(){
				var clientId = this.searchClientId;
				var list = uni.getStorageSync("listName");
				// console.log(clientId);
				var n = 0;
				for (var i = 0; i < list.length; i++) {
					var code = list[i].clientId.substring(list[i].clientId.length - 6, list[i].clientId.length);
					if(code==clientId){
						n++;
						this.index = i;
						var id = list[i].id;
						this.equipmentId =  id;
						this.equimentType = list[i].equimentType;
						this.clientId = list[i].clientId;
						this.show = true;
						// if (this.equimentType == 'MG280') {
						// 	this.show = false;
						// }
						// this.getParam();
						break;
					}
				}
				if(n==0){
					uni.showModal({
						title: "提示",
						content: "找不到该机器",
						success: (res) => {
					
						}
					})
				}
			},
			//改变机器
			changeEquipment: function(e) {
				this.searchClientId = null;
				this.index = e.target.value;
				var list = uni.getStorageSync("listName");
				this.equipmentId = list[e.target.value].id;
				this.equimentType = list[e.target.value].equimentType;
				this.clientId = list[e.target.value].clientId;
				this.show = true;
				// if (this.equimentType == 'MG280') {
				// 	this.show = false;
				// }
			},

			update(name, val) {
				const param = {};
				param['id'] = this.equipmentId;
				param['name'] = name;
				param['val'] = val;
				this.updateParameters(param).then(res => {
					if (res.data == 'SUCCESS') {
						uni.showToast({
							title: '发送成功',
							duration: 1000
						});
					}
				}, _ => void uni.stopPullDownRefresh());
			},
		},
	}
</script>

<style>
	.search{
		width: 100%;
		padding-top: 10upx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}
	.search-title{
		width: 28%;
		text-align: center;
		font-size: 26upx;
		font-family: "PingFang-SC-Bold";
	}
	.search-input{
		width: 45%;
		text-align: center;
		font-size: 26upx;
		font-family: "PingFang-SC-Bold";
		box-shadow: 0upx 0upx 20upx #D3D3D3;
		border-radius: 5upx;
	}
	.search-button{
		width: 20%;
		padding-left: 7upx;
		text-align: center;
	}
	.line {
		height: 50upx;
	}

	.line2 {
		height: 10upx;
	}

	.body {
		background-color: #FFFFFF;
		width: 700upx;
		padding: 10upx 10upx 10upx 10upx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		font-size: 32upx;
	}

	.p {
		width: 350upx;
		text-align: right;
	}

	.input {
		width: 200upx;
		box-shadow: 0upx 0upx 20upx #D3D3D3;
		border-radius: 5upx;
		text-align: center;
	}

	.button {
		width: 120upx;
		height: 60upx;
		text-align: left;
		border-radius: 10upx;

	}

	.p2 {
		font-size: 30upx;
		/* #ifndef H5 */
		padding-top: 3upx;
		/* #endif */
		position: absolute;
		/* 水平居中 */
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}
</style>
