<template>
	<page-meta>
		<navigation-bar :title="title" title-align="center" background-color="#007AFF" />
	</page-meta>
	<view class="modbus-status-wrap">
		<u-sticky bgColor="#FFF" customStyle="border-bottom:1px solid #eee;">
			<u-tabs class="tabs-wrap" :list="tabsList" :scrollable="false" lineWidth="80" lineHeight="2" :duration="100"
				@click="handleTabsClick"></u-tabs>
		</u-sticky>
		<view class="attribute-report-wrap" v-if="tabsIndex === 0">
			<view class="cell-wrap">
				<u-cell v-for="(item,index) in runningstatusDatas" :key="index">
					<view slot="title" class="cell-title">
						<text class="cell-name">{{ item.name }}({{item.id}})</text>
						<text class="cell-value">
							<text class="cell-value-num">{{ !item.value || item.value === ' ' ? 0 : item.value }}</text>
							{{item.datatype.unit || item.datatype.unitName || ''}}
						</text>
						<text class="cell-time">{{$tt('modbus.time')}}：{{ item.ts || $tt('modbus.unknown')}}</text>
					</view>
				</u-cell>
			</view>
			<u-empty v-if="runningstatusDatas.length === 0" mode="list" marginTop="20"
				icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
		</view>
		<view class="service-issue-wrap" v-if="tabsIndex === 1">
			<view class="cell-wrap">
				<u-cell v-for="(item,index) in functionStatusData" :key="index">
					<view slot="title" class="cell-title">
						<text class="cell-name">{{ item.name }}</text>
						<view class="cell-value">
							<u--input
								v-if="item.datatype.type == 'integer'|| item.datatype.type == 'decimal' || item.datatype.type == 'string'"
								customStyle="display: inline-block; width: 56px;padding: 0px; margin-right: 10px;"
								color="#0f73ee" border="bottom" v-model="item.value"></u--input>
							<uni-data-select v-if="item.datatype.type == 'enum'"
								style="width: 360rpx; margin-left: -2rpx;" v-model="item.value"
								:localdata="item.datatype.enumList"></uni-data-select>
							<u-switch v-if="item.datatype.type === 'bool'" v-model="item.value" inactiveValue="0"
								activeValue="1" activeColor="#486FF2" inactiveColor="#c4c6c9" size="20">
							</u-switch>
							<text
								v-if="(item.datatype.type == 'integer' || item.datatype.type == 'decimal') && item.datatype.type.unit && item.datatype.type.unit != 'un' && item.datatype.type.unit != '/'">（{{ item.unit }}）</text>
							{{ item.datatype.unit || item.datatype.unitName || ''}}
						</view>
						<view class="cell-value-unit"
							v-if="item.datatype.type == 'integer' || item.datatype.type == 'decimal'">
							{{$tt('modbus.range')}}：{{ item.datatype.max === null ? item.datatype.type === 'bool' ? 0 : "" : item.datatype.min }}
							~
							{{ item.datatype.max === null ? item.datatype.type === 'bool' ? 1 : "" : item.datatype.max }}
						</view>
						<text class="cell-time">{{$tt('modbus.time')}}：{{ item.ts || ''}}</text>
					</view>
					<view class="cell-val" slot="value">
						<u-button type="primary" size="mini" :text="$tt('status.send')" @click="handelSendClick(item)"></u-button>
					</view>
				</u-cell>
			</view>
			<u-empty v-if="functionStatusData.length === 0" mode="list" marginTop="20"
				icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
		</view>
	</view>
</template>

<script>
	import { getDevice, getRunningStatus } from '@/apis/modules/device';
	import { serviceInvoke } from '@/apis/modules/runtime.js';

	export default {
		data () {
			return {
				title: this.$tt('navBar.running'),
				tabsIndex: 0,
				tabsList: [{ name: this.$tt('log.attribute') }, { name: this.$tt('log.service') }],
				deviceId: 0,
				slaveId: 0,
				productId: 0,
				status: 0,
				serialNumber: '',
				subDeviceId: 0,
				runningstatusDatas: [],
				functionStatusData: []
			};
		},
		onLoad: function (option) {
			this.deviceId = Number(option.deviceId);
			this.slaveId = Number(option.slaveId);
			this.subDeviceId = Number(option.subDeviceId);
			this.getDevice();
			this.$bus.$on("updateDeviceStatus", (params) => {
				this.updateDeviceStatus(params);
			});
		},
		methods: {
			getDevice () {
				getDevice(this.subDeviceId).then(res => {
					const { data } = res;
					this.title = data.deviceName;
					const { serialNumber, productId } = data;
					this.productId = productId;
					this.serialNumber = serialNumber;
					this.getDeviceStatus(); // 获取运行状态数据
				}).catch(err => {
					console.log(err);
				});
			},
			// 单击选显卡
			handleTabsClick (item) {
				this.tabsIndex = item.index;
			},
			getDeviceStatus () {
				getRunningStatus(this.deviceId, this.slaveId, this.tabsIndex + 1, this.productId, this.serialNumber).then(
					res => {
						const { data } = res;
						this.status = data.status;
						this.runningstatusDatas = data.thingsModels;
						this.functionStatusData = data.thingsModels.filter(item => item.isReadonly == 0);
					}).catch(err => {
					console.log(err);
				})
			},
			// 更新设备状态数据
			updateDeviceStatus (msg) {
				if (msg.data) {
					msg.data.forEach(item => {
						this.runningstatusDatas.some((old, index) => {
							if (item.slaveId === old.slaveId && item.id == old.id) {
								const template = this.runningstatusDatas[index];
								template.ts = item.ts;
								template.value = item.value;
								if (old.datatype.type == 'enum') {
									old.datatype.enumList.forEach(val => {
										if (val.value == template.value) {
											template.text = val.text;
										}
									})
								} else if (old.datatype.type == 'bool') {
									template.text = template.value === 0 ? old.datatype.falseText : old
										.datatype.trueText;
									template.value = template.value === 0 ? 0 : 1;
								}
								this.$set(this.runningstatusDatas, index, template);
							}
						});
					});
				}
			},
			// 发送指令
			handelSendClick (item) {
				//判断输入是否超过范围
				if (item.datatype.type == 'integer' || item.datatype.type == 'decimal') {
					if (item.datatype.max < item.value || item.datatype.min > item.value) {
						uni.showToast({
							icon: 'error',
							title: this.$tt('status.pleaseEnter')
						})
						return;
					}
				}
				if (item.datatype.type == 'enum') {
					if (!item.value) {
						uni.showToast({
							icon: 'error',
							title: this.$tt('status.pleaseSelect')
						})
						return;
					}
				}
				const funVal = {
					[item.id]: item.value,
				}
				let serialNumber = String(this.serialNumber).split('_')[0];
				const data = {
					serialNumber: serialNumber,
					productId: this.productId,
					remoteCommand: funVal,
					identifier: item.id,
					slaveId: this.slaveId,
					modelName: item.name,
					isShadow: this.status != 3,
					type: item.type,
				}
				serviceInvoke(data).then(response => {
					if (response.code == 200) {
						uni.showToast({
							icon: 'none',
							title: this.$tt('status.service')
						})
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.modbus-status-wrap {
		.tabs-wrap {
			width: 100%;
		}

		.attribute-report-wrap {}

		.service-issue-wrap {}

		.cell-wrap {
			padding: 5px 10px;

			.cell-title {
				.cell-name {
					display: block;
				}

				.cell-value {
					margin-top: 5px;
					display: block;

					.cell-value-num {
						margin-right: 3px;
						color: #0f73ee;
					}
				}

				.cell-value-unit {
					margin-top: 5px;
				}

				.cell-time {
					margin-top: 5px;
					display: block;
				}
			}
		}
	}
</style>