<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" size="mini" 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 >
			<view class="line2"></view>
			<view class="body">
				<p class="p">{{$t('parameters.cabinetHd')}}：</p>
				<input class="input" type="text" v-model="cabinetHd" />
			</view>
			<!-- 320和330特有 -->
			<view class="" v-show="equimentType=='MG330'||equimentType=='MG320'">
				<view class="line2"></view>
				<view class="body">
					<p class="p">{{$t('parameters.allUpdate')}}：</p>
					<input class="input" type="text" v-model="allUpdate" />
					<button type="primary" class="button" @click="update('allUpdate',allUpdate)">
						<p class="p2">{{$t('parameters.update')}}</P>
					</button>
				</view>
				<view class="line2"></view>
			</view>
			<!-- //320特有 -->
			<view class="" v-show="equimentType=='MG320'">
				<view class="line2"></view>
				<view class="body">
					<p class="p">{{$t('parameters.winter')}}：</p>
					<button type="primary" class="button" @click="update('winter','winter')">
						<p class="p2">{{$t('parameters.update')}}</P>
					</button>
				</view>
				<view class="line2"></view>
				<view class="body">
					<p class="p">{{$t('parameters.summer')}}：</p>
					<button type="primary" class="button" @click="update('summer','summer')">
						<p class="p2">{{$t('parameters.update')}}</P>
					</button>
				</view>
				<view class="line2"></view>
			</view>
			<!-- 301和280特有 -->
			<view class="" v-show="equimentType=='MG301'||equimentType=='MG280'">

			</view>
			<!-- 280特有 -->
			<view class="" v-show="equimentType=='MG280'">
				
			</view>
		</view>
		<view class="line2"></view>
	</view>
</template>
<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				index: null,
				allUpdate:null,
				equipmentName: null,
				equimentType: null,
				equipmentId:null,
				cabinetHd:'',
				equipmentNameList: [],
				globalUser: null,
				show: true,
				searchClientId:null
			}
		},
		onShow() {
			var token = uni.getStorageSync("token");
			this.globalUser = uni.getStorageSync("globalUser");
			uni.setNavigationBarTitle({
				title: this.$t('parameters.cabinet_hd')
			});
			if (token.length > 1) {
				this.getEquipmentListData();
				// this.getParam();
			} else {
				uni.reLaunch({
					url: '../Login/Login',
				});
			}

		},
		methods: {
			...mapActions('chart', ['getParameters', 'humidityParameters', '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");
				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.cabinetHd = list[i].cabinetHd;
						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: this.$t('common.tip'),
						content: this.$t('common.noDevice'),
						success: (res) => {
					
						}
					})
				}
			},
			//改变机器
			changeEquipment: function(e) {
				this.searchClientId = null;
				this.index = e.target.value;
				var list = uni.getStorageSync("listName");
				// this.getProName(list[e.target.value].id);
				this.equipmentId = list[e.target.value].id;
				this.cabinetHd = list[e.target.value].cabinetHd;
				this.equimentType = list[e.target.value].equimentType;
				this.clientId = list[e.target.value].clientId;
				this.show = true;
				if (this.equimentType == 'MG280') {
					this.show = false;
				}
				// console.log("eid==" + this.equipmentId);
				// console.log("equimentType==" + this.equimentType);
				// this.getParam();
			},
			update(name, val) {
				const param = {};
				param['id'] = this.equipmentId;
				param['name'] = name;
				param['val'] = val;
				this.humidityParameters(param).then(res => {
					if (res.data == 'SUCCESS') {
						uni.showToast({
							title: this.$t('common.success'),
							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: 48%;
		height: 25px;
		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: 10px;
		padding-bottom: 5px;
		text-align: center;
		height: 60upx;
		text-align: left;
	}
	.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>
