<template>
	<view class="shebeishishi-container">
		<u-navbar bgColor="#ffffff" :placeholder="true" titleStyle="font-weight:600" title="设备管理" :autoBack="true">
		
		</u-navbar>
		<view class="top-box">
			<view class="top-box-search">
				<u-search height="80rpx" bgColor="#F5F6FA" placeholder="请输入您要查找的设备名称" :showAction="false"
					v-model="searchkeyword" :clearabled="true" @search="goSearch"></u-search>
			</view>

			<view class="top-box-type">
				<view class="top-box-type-left" @click="changeType(0)">
					<view :style="{ color: isActive == 0 ? '#1890ff' : '' }">综合</view>
					<view v-if="isActive == 0"></view>
				</view>
				<!-- <view class="top-box-type-right" @click="changeType(1)">
					<view>
						<view :style="{ color: isActive == 1 ? '#1890ff' : '' }">筛选</view>
						<image style="width: 38rpx; height: 24rpx" src="../../../static/images/implement/shaixuan.png" mode="scaleToFill" />
					</view>

					<view v-if="isActive == 1"></view>
				</view> -->
			</view>
		</view>

		<scroll-view v-if="facilitiesLists.length > 0" scroll-y="true" class="scroll-Y" refresher-enabled="true"
			:refresher-triggered="triggered" @refresherrefresh="onRefresh" @refresherrestore="onRestore"
			@scrolltolower="scrolltolower" refresher-background="#f6f7fb">
			<view v-for="(item, index) in facilitiesLists" class="scroll-item">
				<view class="item-top" @click="goToPage(item.id)">
					<view class="item-top-left">
						<view class="item-top-bianhao">编号</view>
						<text class="item-top-number">{{ item.facilitiesCode }}</text>
					</view>
					<image @click.stop="goToBaoXiu(item.id)" class="item-top-right"
						src="../../../static/images/implement/shebiebaoxiu.png" mode="scaleToFill" />
				</view>
				<view class="item-bottom">
					<u-album singleSize="60" multipleSize="60" rowCount="1" class="item-bottom-left"
						:urls="item.showUrls" maxCount="1"></u-album>
					<view class="item-bottom-right" @click="goToPage(item.id)">
						<view class="right-title">{{ item.facilitiesName }}</view>
						<view class="right-area">
							<image src="../../../static/images/implement/area.png" mode="scaleToFill" />
							<view>{{ item.facilitiesAddress }}</view>
						</view>
						<view class="right-area">
							<image src="../../../static/images/implement/time.png" mode="scaleToFill" />
							<view>
								<text>投入使用时间:</text>
								<text style="margin-left: 10rpx">{{ item.toUseDate.split(' ')[0] }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view style="height: 50rpx; width: 100%"><u-loadmore :status="loadmoreStatus" lineColor="#1CD29B"
					@loadmore="getLoadmore" /></view>
		</scroll-view>
		<u-empty v-else class="scroll-Y" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
		<!-- <u-popup :round="10" :show="popupShow" mode="bottom" @close="popupShow = false" @open="popupShow = true">
			<view class="popup-container">
				<view class="popup-title">全部筛选</view>
				<u-collapse :border="false">
					<u-collapse-item title="单位">
						<u-radio-group v-model="popupValue1" placement="row" class="popup-radio">
							<u-radio label="采气一厂" name="0"></u-radio>
							<u-radio label="采气二厂" name="1"></u-radio>
						</u-radio-group>
					</u-collapse-item>
					<u-collapse-item title="分类">
						<u-radio-group v-model="popupValue2" placement="row" class="popup-radio">
							<u-radio label="分类一" name="0"></u-radio>
							<u-radio label="分类二" name="1"></u-radio>
							<u-radio label="分类三" name="2"></u-radio>
						</u-radio-group>
					</u-collapse-item>
				</u-collapse>
				<view class="popup-btn">
					<u-button class="btn-one" shape="circle" :plain="true" text="重置" color="#4996FF"></u-button>
					<u-button class="btn-one" shape="circle" type="primary" text="查看"></u-button>
				</view>
			</view>
		</u-popup> -->
	</view>
</template>

<script>
	import {
		facilitiesList
	} from '@/api/indexpage/implement/index.js';

	export default {
		data() {
			return {
				searchkeyword: '',
				triggered: false,
				facilitiesLists: [],
				loadmoreStatus: 'loadmore',
				isActive: 0,
				popupShow: false,
				popupValue1: '1',
				popupValue2: '1'
			};
		},
		onShow() {
			this.isActive = 0;
			this.getFacilitiesList();
		},

		methods: {
			changeType(type) {
				this.isActive = type;
				switch (type) {
					case 0:
						this.getFacilitiesList();
						break;
					case 1:
						this.popupShow = true;
						break;
				}
			},
			goToBaoXiu(ssId) {
				//携带设备id
				this.$tab.navigateTo(`/pages/indexpage/sheBeiSheShi/myBaoXiu/myBaoXiu?ssId=${ssId}`);
			},
			goToPage(ssId) {
				//携带设备id
				this.$tab.navigateTo(`/pages/indexpage/sheBeiSheShi/sheBeiSheShiDetail/sheBeiSheShiDetail?ssId=${ssId}`);
			},
			async getFacilitiesList() {
				this.loadmoreStatus = 'loading';
				let params = {
					facilitiesName: this.searchkeyword
				};
				let result = await facilitiesList(params);
				this.triggered = false;
				if (result.code == 200) {
					this.facilitiesLists = result.rows;
					if (this.facilitiesLists.length < result.total) {
						this.loadmoreStatus = 'loadmore';
					} else {
						this.loadmoreStatus = 'nomore';
					}
				}
			},
			onRefresh() {
				//   console.log("自定义下拉刷新被触发");
				if (this.triggered) return;
				this.triggered = true;
				this.facilitiesLists = [];
				this.getFacilitiesList();
			},
			onRestore() {
				this.triggered = false; // 需要重置
			},
			scrolltolower() {
				if (this.triggered) return;
				//   console.log("滚动到底部");
				this.triggered = true;
				this.getFacilitiesList();
			},
			goSearch() {
				this.facilitiesLists = [];
				this.getFacilitiesList();
			},
			getLoadmore() {
				this.getFacilitiesList();
			}
		}
	};
</script>

<style lang="scss" scoped>
	.shebeishishi-container {
		overflow: hidden;
		font-family: Noto Sans S Chinese;

		.top-box {
			height: 180rpx;
			background-color: #fff;

			.top-box-search {
				box-sizing: border-box;
				padding: 10rpx 30rpx 10rpx 30rpx;
				height: 90rpx;
			}

			.top-box-type {
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				padding: 0 46rpx 0 72rpx;
				height: 90rpx;

				.top-box-type-left {
					height: 100%;
					width: 100rpx;

					position: relative;
					font-size: 14px;
					color: #333333;

					& view:nth-child(1) {
						margin: 0 auto;
						text-align: center;
						line-height: 90rpx;
					}

					& view:nth-child(2) {
						position: absolute;
						width: 34rpx;
						height: 10rpx;
						background-color: #1890ff;
						border-radius: 20rpx;
						left: 33rpx;
						bottom: 0;
					}
				}

				.top-box-type-right {
					height: 100%;
					width: 100rpx;
					display: flex;
					align-items: center;
					position: relative;
					font-size: 14px;
					color: #333333;

					& view:nth-child(1) {
						display: flex;
						align-items: center;
						justify-content: end;
						position: relative;
						width: 100rpx;

						view {
							margin-right: 10rpx;
						}
					}

					& view:nth-child(2) {
						position: absolute;
						width: 34rpx;
						height: 10rpx;
						color: red;
						background-color: #1890ff;
						border-radius: 20rpx;
						left: 33rpx;
						bottom: 0;
					}
				}
			}
		}

		.scroll-Y {
			overflow: hidden;

			width: 100%;
			box-sizing: border-box;
			padding: 36rpx 30rpx 0 30rpx;
			// #ifndef APP-PLUS
			height: calc(100vh - 180rpx - 44px);
			// #endif
			// #ifdef APP-PLUS
			height: calc(100vh - 180rpx);

			// #endif
			.scroll-item {
				box-sizing: border-box;
				padding: 26rpx 20rpx 34rpx 22rpx;
				background-color: #fff;
				width: 100%;
				height: 240rpx;
				margin-bottom: 30rpx;
				border-radius: 10rpx;
				box-shadow: 0px 3px 4px 0px rgba(190, 207, 228, 0.4);

				.item-top {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 40rpx;

					.item-top-left {
						display: flex;
						align-items: center;

						.item-top-bianhao {
							text-align: center;
							line-height: 34rpx;
							font-weight: 500;
							font-size: 12px;
							color: #ffffff;
							width: 82rpx;
							height: 34rpx;
							background: #16c4af;
							border-radius: 9px;
							margin-right: 14rpx;
						}

						.item-top-number {
							font-weight: bold;
							font-size: 15px;
							color: #333333;
						}
					}

					.item-top-right {
						width: 154rpx;
						height: 38rpx;
					}
				}

				.item-bottom {
					margin-top: 22rpx;
					height: 124rpx;
					width: 100%;
					display: flex;
					align-items: center;

					.item-bottom-left {
						height: 124rpx;
						width: 130rpx;
						margin-right: 16rpx;
					}

					.item-bottom-right {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						height: 100%;
						width: calc(100% - 130rpx);

						.right-title {
							width: 100%;
							font-weight: 500;
							font-size: 15px;
							color: #333333;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}

						.right-area {
							display: flex;
							align-items: center;

							image {
								width: 20rpx;
								height: 24rpx;
								margin-right: 16rpx;
							}

							view {
								width: calc(100% - 20rpx);
								font-weight: normal;
								font-size: 13px;
								color: #7d858e;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
							}
						}
					}
				}
			}
		}

		.popup-container {
			width: 100%;
			box-sizing: border-box;
			padding: 60rpx 24rpx 40rpx 24rpx;

			.popup-title {
				width: 100%;
				height: 30rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-weight: 500;
				font-size: 16px;
				color: #333333;
			}

			.popup-radio {
				display: flex;
				align-items: center;

				.u-radio {
					margin-right: 20rpx;
				}
			}

			.popup-btn {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 80rpx;
				margin-top: 70rpx;

				.btn-one {
					width: 280rpx;
				}
			}
		}
	}
</style>