<template>
	<view class="basic-page">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view class="u-flex" style="flex-direction: row;justify-content: space-between;align-items: center;height: 150rpx;background-color: #fff;border-radius: 20px;">
			<view style="margin-left: 28rpx;"><text style="color:#333333;font-size: 15px;">网关设备1</text></view>
			<view style="margin-left: -295rpx;"><text style="color:#377DFF;font-size: 14px;">在线</text></view>
			<view style="height: 80rpx;margin-top: 39rpx;margin-right: 30rpx;">
				<u-button @click="showIssueModel" size="mini" type="primary" shape="circle" text="下发命令"></u-button>
			</view>
		</view>
		<view style="margin-top: 74rpx;height: 577rpx;background-color: #fff;border-radius: 20px;">
			<u-list @scrolltolower="scrolltolower">
				<u-list-item v-for="(item, index) in indexList" :key="index"><u-cell :value="item.value1" :title="item.name1"></u-cell></u-list-item>
			</u-list>
		</view>
		<!-- 下发指令 -->
		<u-modal :showConfirmButton="false" :show="showModel" :title="title">
			<view style="width: 750rpx;">
				<view style="height: 276rpx;border:0.1rpx solid #F0F0F0">
					<u-form labelPosition="left" :model="formModel" :rules="rules" ref="form1">
						<u-form-item label="." prop="intro" ref="item3">
							<u--textarea border="none" placeholder="请输入命令内容" v-model="formModel.intro" count></u--textarea>
						</u-form-item>
					</u-form>
				</view>
				<view class="u-flex" style="justify-content: space-between;margin-top: -20rpx;">
					<view style="width: 220rpx;"><u-button shape="circle" type="info" text="取消" customStyle="margin-top: 50px" @click="cancel"></u-button></view>
					<view style="width: 220rpx;"><u-button shape="circle" type="primary" text="确定" customStyle="margin-top: 50px" @click="submit"></u-button></view>
				</view>
			</view>
		</u-modal>
		<f-tabbar></f-tabbar>
	</view>
</template>

<script>
import fTabbar from '@/components/module/f-tabbar/f-tabbar';
export default {
	components: {
		fTabbar
	},
	data() {
		return {
			formModel: {
				intro: ''
			},
			showModel: false,
			title: '命令下发',
			indexList: [
				{
					id: 1,
					name1: '设备编号',
					value1: 'SN98652320AOL5'
				},
				{
					name1: '设备类型',
					value1: '网关子设备'
				},
				{
					name1: '所属组织',
					value1: '1-59-25栏位'
				},
				{
					name1: '最后连接时间',
					value1: '2022-01-25 12:53:22'
				},
				{
					name1: '是否告警',
					value1: '否'
				},
				{
					name1: '设备描述',
					value1: '设备无任何问题，运行稳定'
				}
			]
		};
	},
	onLoad(e) {
		// 隐藏原生的tabbar
		uni.hideTabBar();
	},
	methods: {
		showIssueModel() {
			this.showModel = true;
		},
		cancel() {
			this.showModel = false;
		},
		submit() {}
	}
};
</script>

<style lang="scss" scoped>
.basic-page {
	padding: 15rpx;
}

/deep/ .u-form-item {
	margin-left: -89rpx;
}
</style>