<template>
	<view class="maincontent contentBg">
		<uni-nav-bar :border="false" @clickLeft="prevPage" fixed="true" statusBar="true" background-color="#121212"
			color="#FFFFFF" :title="Status.navbar.title">
			<template v-slot:left>
				<view>
					<uni-icons type="left" size="24" color="#FFFFFF"></uni-icons>
				</view>
			</template>
			<block slot="right">
				<view class="navbarRight center">
					<image @click.stop="handleRightClick(index,item)" v-for="item,index in Status.navbar.icons"
						class="img" :src="item.src" mode="aspectFit"></image>
				</view>

			</block>
		</uni-nav-bar>


		<view class="listContent">
			<mescroll-uni class="device-list" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption"
				:down="downOption" :fixed="false">

				<uni-swipe-action>
					<uni-swipe-action-item v-for="item,index in deviceList" @click="onClick"
						@change="swipeChange($event, 0)" :autoClose="false">
						<view class="listItem" @click.stop="gotoDetail(item,index)">
							<view class="itemMain">


								<view class="title">{{item.name?item.name:'预警设防'+index}}</view>
								<view class="splitLine"></view>
								<view class="row">
									<view class="lbl">布防联机:{{item.total}}</view>
									<view class="lbl">接收设备:{{item.notify}}</view>
								</view>
								<view class="row">
									<view class="lbl">布防联机:{{item.sub}}</view>
									<view class="lbl">预警主机:{{item.warn}}</view>
								</view>
							</view>
						</view>
						<template v-slot:right>
							<view class="swipBtn" @click.stop="onClick(btn,i,item,index)"
								v-for="btn,i in Status.SwipOptions"
								:style="{'backgroundColor':btn.style.backgroundColor,'width':btn.style.width}">

								<image :src="btn.style.icon" mode="aspectFit" class="icon"
									:style="{'filter':btn.style.filter}"></image>
								<text class="txt">{{btn.text}}</text>

							</view>
						</template>
					</uni-swipe-action-item>

				</uni-swipe-action>


			</mescroll-uni>
		</view>

		<global-loading ref="loading" />

		<MsgBox ref="msgPop" />

		<MsgBox ref="rename">
			<view class="renamePop center">
				<view class="lbl">设备名称</view>
				<input class="txt" v-model="cEdit.name" type="text" placeholder="输入名称" maxlength="20"
					placeholder-class="txtplace" />
			</view>
		</MsgBox>

	</view>
</template>

<script>
	import request, {
		baseURL
	} from '@/utils/request.js';
	import {
		showLoading,
		hideLoading,
		updateLoading
	} from '@/utils/loading.js';
	import {
		MsgSuccess,
		MsgError,
		MsgClose,
		MsgWarning,
		showPop,
		MsgInfo,
		MsgClear,
		MsgPrompt
	} from '@/utils/MsgPops.js';
	import Common from '@/utils/Common.js';

	var timeout = null;
	var these = null;

	export default {
		data() {
			return {
				Status: {
					navbar: {
						icons: [{
							src: '/static/images/common/add.png',
							type: 'add'
						}],
						title: '预警布防',
						showBack: true,
						height: 90
					},
					SwipOptions: [{
							type: "rename",
							text: '重命名',
							style: {
								backgroundColor: '#E09319',
								icon: '/static/images/common/rename.png',
								width: '120rpx', // 初始宽度
							},
						},
						{
							type: 'drop',
							text: '删除',
							style: {
								backgroundColor: 'rgb(240, 60, 60)',
								icon: '/static/images/common/dell.png',
								width: '120rpx', // 初始宽度
								filter: 'brightness(0) invert(0.87)'
							},
						},
					],
				},

				mescroll: null,
				downOption: {
					auto: true,
					autoShowLoading: false,
				},
				upOption: {
					auto: false,
					noMoreSize: 0,
					offset: 10,
					isLock: false,
					empty: {
						tip: '暂无数据',
						hideScroll: false,
						icon: '/static/images/common/empty.png'
					},
					textNoMore: '没有更多数据了'
				},
				deviceList: [],
				cEdit: {
					id: null,
					name: null,
					total: null,
					notify: null,
					sub: null,
					warn: null
				}
			}
		},
		created() {
			this.Status.navbar.height = uni.getSystemInfoSync().statusBarHeight + 44;
		},
		onLoad() {
			these = this;
		},
		methods: {
			ReName() {
				if (!this.cEdit.name) {
					MsgError('请输入名称', '', these, null, false);
					return;
				}
				let ok = () => {
					this.deviceList.find((v, i) => {
						if (v.id == this.cEdit.id) {
							this.$set(this.deviceList[i], "name", this.cEdit.name)
							return true;
						}
					});
				}
				let url = '';
				if (url) {
					request({
						url: url,
						data: this.cEdit,
						method: 'update'
					}).then(res => {
						if (res && res.code == 200) {
							ok();
						}
					}).catch(ex => {
						MsgError(ex.msg, '', these);
					});
				} else {
					ok();
				}
			},
			onClick(btn, i, item, index) {
				if (btn.type == 'rename') {
					these.cEdit = Object.assign(these.cEdit, item);
					console.log("执行重命名");
					MsgPrompt(this, btn.type, this.ReName, false, true);
					return;
				}

				if (btn.type == 'drop') {
					console.log("执行删除");
					MsgError('删除后不可恢复,您确认删除"' + item.name + '"吗?', '确定', this, () => {
						this.deviceList.splice(index, 1);
					}, true);
					return;
				}
			},
			change(event) {
				console.log('改变事件', event);
			},
			swipeChange(e, index) {
				console.log('当前状态：' + e + '，下标：' + index)
			},
			gotoDetail(item, index) {
				uni.navigateTo({
					url: '/pages/common/linkDefence/addDefence',
					success(res) {
						res.eventChannel.emit('detailData',{data:item})
					}
				});
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			// 下拉刷新
			downCallback() {


				if (this.mescroll) {
					this.mescroll.resetUpScroll(false);
					this.mescroll.scrollTo(0, 0);
				}
				this.getData();


			},
			// 上拉加载 
			upCallback() {
				this.getData();
			},
			getData() {
				let task = () => {

					let data = {
						pageNum: this.mescroll.num,
						pageSize: 10,
					}

					if (!data.pageNum) {
						this.mescroll.endSuccess(0, false);

						return;
					}


					let result = (res) => {

						// 分页处理
						if (data.pageNum === 1) {
							this.deviceList = res.rows;
						} else {
							this.deviceList = this.deviceList.concat(res.rows);
						}

						let hasNext = true;

						if (res.rows.length < data.pageSize || this.deviceList.length >= res.total) {

							hasNext = false;
						} else {

							hasNext = true;
						}
						this.mescroll.endSuccess(res.rows.length, hasNext);
					}
					let url = ''; //请求地址
					if (url) {
						request({
							url: url,
							data: data,
							method: 'GET'
						}).then((res) => {
							if (res.code == 200) {
								result(res);
							} else {
								this.mescroll.endSuccess(0, false);
							}
						}).catch(ex => {
							MsgError(ex.errMsg, '', this);
							this.mescroll.endSuccess(0, false);
						});
					} else {
						if (data.pageNum === 1) {
							//开发时做假数据模拟成功
							MsgWarning("这是测试数据,非真实场景,真实功能敬请期待", '', this, true, null, false);
						}
						let res = {
							code: 200,
							total: 108,
							rows: []
						};
						let currLen = this.deviceList.length;

						for (let i = 0; i < data.pageSize; i++) {
							if (currLen + i + 1 >= res.total) {
								break;
							}
							let json = {
								id: Common.guid(),
								name: '预警设防 ' + (i + (data.pageNum - 1) * data.pageSize + 1),
								total: (Math.random() * 100).toFixed(0),
								notify: (Math.random() * 100).toFixed(0),
								sub: (Math.random() * 100).toFixed(0),
								warn: (Math.random() * 100).toFixed(0)
							};
							res.rows.push(json);
						}
						result(res);
					}

				}

				clearTimeout(timeout);
				timeout = setTimeout(task, 50);

			},
			prevPage() {
				uni.navigateBack({

				});
			},
			handleRightClick(s, e) {

				if (s === 0) {
					uni.navigateTo({
						url: '/pages/common/linkDefence/addDefence'
					})
				} else if (s === 1) {

				}
			},
		}
	}
</script>

<style>
	.maincontent {
		height: 100vh;
	}

	.listContent {
		height: calc(100% - 90rpx);
		margin-top: 90rpx;
	}

	.listItem {


		background: rgba(26, 26, 26, 1);
		width: 100%;
		min-height: 140rpx;
		height: auto;

		box-sizing: border-box;
		padding: 20rpx 30rpx;
	}

	.listItem .itemMain {
		width: 100%;
		overflow: hidden;
	}

	.listItem .title {
		color: rgba(255, 255, 255, 0.87);

		font-family: "PingFang SC";

		font-size: 32rpx;
		font-weight: 400;

		letter-spacing: 0.14rpx;
		text-align: left;
	}

	.listItem .splitLine {
		border-bottom: 1rpx solid rgba(255, 255, 255, 1);
		width: 10000px;
		height: 0rpx;
		margin-top: 15rpx;
		margin-bottom: 15rpx;
		transform: scale(0.1);
		margin-left: -5000px;
	}

	.listItem .row {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 15rpx;

		color: rgba(255, 255, 255, 1);

		font-family: "PingFang SC";
		font-style: Regular;
		font-size: 24rpx;
		font-weight: 200;

		letter-spacing: 0.07px;

	}

	/* 	.listItem .row .lbl{
		padding: 0rpx 30rpx 0rpx 0rpx;
		text-align: left;
	} */
	.listItem .row:last-of-type {
		margin-bottom: 0rpx;
	}

	.swipBtn {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		align-content: center;
		justify-content: center;
		align-items: center;
	}

	.uni-swipe .icon,
	/deep/ .uni-swipe .icon {
		width: 35rpx;
		height: 35rpx;
	}

	.uni-swipe .txt,
	/deep/ .uni-swipe .txt {
		color: rgba(255, 255, 255, 0.87);

		font-family: "PingFang SC";
		font-style: Regular;
		font-size: 24rpx;
		font-weight: 400;

		letter-spacing: 0.14rpx;

	}

	.uni-swipe,
	/deep/ .uni-swipe {
		margin-bottom: 20rpx;
		border-radius: 16rpx;
		overflow: hidden;
	}

	.renamePop {
		width: 100%;
		height: 80rpx;
		padding: 60rpx 0rpx 30rpx 0rpx;
		display: flex;
	}

	.renamePop .lbl {
		color: rgba(255, 255, 255, 0.87);
		font-family: "PingFang SC";
		font-style: Regular;
		font-size: 26rpx;
		letter-spacing: 0.14rpx;
		width: auto;
		padding: 0rpx 10rpx 0rpx 0rpx;
	}

	.renamePop .txt {
		flex: 1;
		height: 60rpx;
		box-sizing: border-box;
		border: 1rpx solid rgba(255, 255, 255, 0.4);
		border-radius: 8rpx;
		text-align: left;
		text-indent: 10rpx;
		color: rgba(255, 255, 255, 0.87);

		font-family: "PingFang SC";

		font-size: 28rpx;

		letter-spacing: 0.14rpx;

	}

	.txtplace {
		color: rgba(255, 255, 255, 0.43);

		font-family: "PingFang SC";

		font-size: 26rpx;
	}
</style>