<template>
	<view>
		<scroll-view scroll-y class="page">
			<cu-custom bgColor="bg-cyan" :isBack="true"><block slot="backText">返回</block><block slot="content">异常预警</block></cu-custom>
			<view class="cu-bar bg-white solid-bottom">
				<view class="action">
					<text class="cuIcon-title text-green"></text>
					<text>异常预警</text>
				</view>
			</view>
			<view class="cu-list menu" :class="[menuBorder?'sm-border':'',menuCard?'card-menu margin-top':'']">
				<view class="cu-item" :class="menuArrow?'arrow':''"  @click="onListOne">
					<view class="content">
						<text class="cuIcon-warn text-green"></text>
						<text class="text-grey text-custom">出库超时</text>
					</view>
				</view>
				<view class="cu-list menu-avatar" :class="itemShow?'show':'no-show'">
					<view class="cu-item">
						<view class="cu-avatar round lg" style="background-image:url(https://lekapi.opmonitor.com/static/image/medical.jpg);"></view>
						<view class="content">
							<view class="text-grey">编号</view>
							<view class="text-gray text-sm flex">
								<view class="text-cut">
									1234567890
								</view> 
							</view>
						</view>
						<view class="action">
							<view class="text-grey text-xs">22:20</view>
						</view>
					</view>
				</view>
				<view class="cu-item" :class="menuArrow?'arrow':''" @click="onListTwo">
					<view class="content">
						<text class="cuIcon-warn text-green"></text>
						<text class="text-grey text-custom">重量异常</text>
					</view>
				</view>
				<view class="cu-list menu-avatar" :class="itemShow2?'show':'no-show'">
					<view class="cu-item">
						<view class="cu-avatar round lg" style="background-image:url(/static/medical.jpg);"></view>
						<view class="content">
							<view class="text-grey">编号</view>
							<view class="text-gray text-sm flex">
								<view class="text-cut">
									2413587216
								</view> 
							</view>
						</view>
						<view class="action">
							<view class="text-grey text-xs">22:20</view>
						</view>
					</view>
				</view>
				<view class="cu-item" :class="menuArrow?'arrow':''">
					<view class="content">
						<text class="cuIcon-warn text-green"></text>
						<text class="text-grey text-custom">入库超时</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuBorder: false,
				menuCard: false,
				menuArrow: true,
				menuArrowList: false,
				itemShow: false,
				itemShow2: false
			}
		},
		methods: {
			onListOne() {
				if (this.itemShow === true) {
					this.itemShow = false
				} else {
					this.itemShow = true
				} 
			},
			onListTwo() {
				if (this.itemShow2 === true) {
					this.itemShow2 = false
				} else {
					this.itemShow2 = true
				} 
			}
		}
	}
</script>

<style>
	.page {
		width: 100vw;
		height: 100Vh;
	}
	
	.text-custom {
		font-weight: 600;
		font-size: 30rpx;
	}
	
	.show {
		display: block;
	}
	
	.no-show {
		display: none;
	}
</style>
