<template>
	<view class="content">
		<view v-for="item in orderList" class="order-content">
			<view class="item-userInfo item1" @click="itemChange(item)">
				<view class="userInfo">
					<u-image :src="item.img" width="72" height="72" shape="circle"></u-image>
					<view class="userInfo-nameOrPhone">
						<view class="name">{{item.name}}</view>
						<view class="phone"><u-icon name="phone"></u-icon><text>{{item.phone}}</text></view>
					</view>
				</view>
				<view>
					<!-- <u-icon :name="nameType" color='#999' @click="isShow"></u-icon> -->
					<u-icon v-show="item.isUp" name="arrow-up" color="#999" size="28"></u-icon>
					<u-icon v-show="!item.isUp" name="arrow-down" color="#999" size="28"></u-icon>
					<!-- <u-icon name="arrow-up" color='#999' @click="isShow"></u-icon> -->
				</view>
			</view>
			<view v-show="item.isUp">
				<u-line color="#e5e5e5" />
				<view class="item-userInfo-detail">
					<view class="detail-title">用户信息</view>
					<view class="detail-title coucntinfo"><text class="coucntname">{{item.coucntname}}</text><text>{{item.coucntphone}}</text></view>
					<view class="detail-title address">{{item.address}}</view>
				</view>
				<u-line color="#e5e5e5"/>
				<view class="item-userInfo-detail detail-title">订单信息</view>
				<u-line color="#e5e5e5"/>
				<view class="item-userInfo item-userInfo-detail"><text class="address">订单编号</text><text class="detail-title">{{item.orderNo}}</text></view>
				<u-line color="#e5e5e5"/>
				<view class="item-userInfo item-userInfo-detail"><text class="address">预约时间</text><text class="detail-title">{{item.yuyueTime}}</text></view>
				<u-line color="#e5e5e5"/>
				<view class="item-userInfo item-userInfo-detail"><text class="address">下单时间</text><text class="detail-title">{{item.orderTime}}</text></view>
				<u-line color="#e5e5e5"/>
				<view class="item-userInfo item-userInfo-detail"><text class="address">预约品类</text><text class="detail-title">{{item.type}}</text></view>
				<view class="item-userInfo-detail-image">
					<u-image :src="img" v-for=" img in item.imgList" width="120" height="120" class="detail-image"></u-image>
				</view>
				<u-line color="#e5e5e5"/>
				<view class="userInfo cancelBtn"><u-button :custom-style="cancelBtn" :hair-line="false">取消订单</u-button></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				cancelBtn:{
					width: '106px',
					height: '38px',
					background: '#E5E5E5',
					borderRadius:' 6px'
				},
				orderList:[
					{img:'/static/edit.png',name:'骑手1',phone:'18292887584',coucntname:'用户1',coucntphone:'15991205189',address:'陕西省西安未央区北二环华帝金座A西安车领主网络科技有限公司',orderNo:'20122536987',yuyueTime:'今天中午',orderTime:'2021-12-25 13:15:36',type:'纸质类，塑料类',isUp:true,imgList:[{img:'/static/logo.jpg'},{img:'/static/logo.jpg'},{img:'/static/logo.jpg'}]},
					{img:'/static/edit.png',name:'骑手2',phone:'18292887584',coucntname:'用户2',coucntphone:'15991205189',address:'陕西省西安未央区北二环华帝金座A西安车领主网络科技有限公司',orderNo:'20122536987',yuyueTime:'今天中午',orderTime:'2021-12-25 13:15:36',type:'纸质类，塑料类',isUp:false,imgList:[{img:'/static/logo.jpg'},{img:'/static/logo.jpg'},{img:'/static/logo.jpg'}]}
					]
			}
		},
		methods:{
			// 数据展开收起
			itemChange(item) {
				// item.isUp = !item.isUp
				this.$nextTick(function(){
					item.isUp = !item.isUp
				})
			},
		}
		}
</script>

<style lang="less">
	.content{
		width: 100%;
		height: 100vh;
		padding: 20upx 30upx;
		background-color: #f5f5f5;
		.order-content{
			padding: 30upx;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			border-radius: 12px;
			font-family: PingFang SC;
			margin-bottom: 20upx;
			.item-userInfo{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.userInfo{
					display: flex;
					.userInfo-nameOrPhone{
						margin-left: 20upx;
						font-size: 28upx;
						.name{
							font-weight: bold;
							color: #222;
						}
						.phone{
							font-weight: 400;
							color: #999;
						}
					}
				}
			}
			.item1{
				padding-bottom: 20upx;
			}
			.item-userInfo-detail{
				padding: 30upx 0;
				view:not(last-child){
					padding-bottom: 10upx;
				}
				.detail-title{
					font-size: 32upx;
					font-weight: 400;
					color:#222
				}
				.coucntinfo{
					font-size: 28upx;
					.coucntname{
						display: inline-block;
						margin-right: 20upx;
					}
				}
				.address{
					font-size: 28upx;
					color: #999;
				}
				
			}
			.item-userInfo-detail-image{
				display: flex;
				padding-bottom: 30upx;
				.detail-image{
					margin-right: 20upx;
				}
			}
			.cancelBtn{
				display: flex;
				justify-content: flex-end;
				padding-top: 30upx;
			}
		}
	}
</style>
