<template>

	<u-popup v-model="show" mode="center" safe-area-inset-bottom width="690rpx" :mask-close-able="flase"
		close-icon-color="#FFFFFF" height="86%">
		<!-- 申请列表 -->
		<view class="apply-list-view">
			<view class="content-view">
				<view class="list-content">
					<swiper class="swiper" :indicator-dots="true" style="height: 100%;" :current="currentIndex">
					   <swiper-item v-for="(item, index) in list" :key="index">
							<view class="cell-view">	
								<view class="shadow-view">					
									<AppliedCell @operate="handleOperate" @express="handleClickExpress" @action="handleClickCell" :info="item" :type="vertical" class="applied-cell"></AppliedCell>
								</view>	
							</view>
					   </swiper-item> 
					</swiper>
				</view>
				<view class="bottom-view">
					<view class="bottom-warehouse">
						<view class="bottom-title">
							<text>物料订单</text>
							<view class="order-file-right" @click="$u.throttle(handleClick, 500)">
								<text>点击查看</text>
								<u-icon name="arrow-right"></u-icon>
							</view>
						</view>
						<view class="bottom-content">
							<view v-for="(item, index) in bottomItems" :key="index" class="bottom-content-item"
								@click="handleClick(item.index)">
								<view class="bottom-image">
									<image :src="item.icon" :style="item.imageStyle"></image>
								</view>
								<view>{{item.title}}</view>
							</view>
						</view>
					</view>
					<view class="line-view"></view>
					<view class="apply-button" @click="$u.throttle(handleApply, 500)">
						<text :custom-style="applyStyle" type="primary">继续申请</text>
					</view>
				</view>
			</view>
			<view class="colse-view">
				<image class="image-view" :src="closeImage" @click.throttle="$u.throttle(handleClose, 500)"></image>
			</view>
		</view>
	</u-popup>
</template>

<script>
	import AppliedCell from "@/components/parts/appliedPartsCell.vue"
	export default {
		components: {
			AppliedCell
		},
		props: {
			list: { // 申请材料列表
				type: Array,
				default () {
					return []
				}
			},
			show: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				currentIndex: 0
			}
		},
		computed: {
			closeImage() {
				return process.uniEnv.qn_base_url + 'dianjiquxiao.png'
			},
			bottomItems() {
				// index: 跳转到我的订单页面之后第几个tab,
				return [{
						index: 3,
						title: '待签收',
						icon: process.uniEnv.qn_base_url + 'daiqianshou.png',
						imageStyle: 'width:48rpx;height:48rpx'
					},
					{
						index: 2,
						title: '待发货',
						icon: process.uniEnv.qn_base_url + 'daifahuo.png',
						imageStyle: 'width:48rpx;height:48rpx'
					},
					{
						index: 1,
						title: '待审核',
						icon: process.uniEnv.qn_base_url + 'daishenhe.png',
						imageStyle: 'width:44rpx;height:54rpx'
					},
					{
						index: 4,
						title: '已签收',
						icon: process.uniEnv.qn_base_url + 'qianshou.png',
						imageStyle: 'width:48rpx;height:48rpx'
					},
				]
			}
		},
		methods: {
			handleClose() {
				this.$emit('update:show', false)
			},
			handleOperate(partsId, operateType, willStatus) {
				this.$emit('operate', partsId, operateType, willStatus)
			},
			handleClickCell(info) {
				this.$emit('action', info)
			},
			handleClickExpress() {
				this.$emit('express', info)
			},
			handleApply() {
				this.$emit('apply')
			},
			handleClick(index = 0) {
				uni.navigateTo({
					url: 'pages/mine/warehouse/index?index=' + index
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.apply-list-view {
		height: 100%;
		display: flex;
		flex-direction: column;

		.content-view {
			border-radius: 12rpx;
			background-color: #FFFFFF;
			height: 100%;
			display: flex;
			flex-direction: column;

			.list-content {
				height: 100%;
				
				.swiper {
					.cell-view {
						height: 100%;
						padding-bottom: 100rpx;
						// display: flex;
						// flex-direction: column;
						.shadow-view{
							border-radius: 12rpx;
							margin:30rpx;
							height: 100%;
							box-shadow: 0px 6px 10px rgba(22,72,155,0.15);
						}
					}
				}
			}

			.bottom-view {
				.bottom-warehouse {
					background-color: #FFFFFF;
					border-radius: 12rpx;

					.bottom-title {
						color: #333333;
						font-weight: bold;
						font-size: 32rpx;
						margin: 0rpx 30rpx 40rpx 30rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						.order-file-right {
							font-weight: 400;
							color: #2272FF;
							font-size: 26rpx;
						}
					}

					.bottom-content {
						display: flex;
						justify-content: space-around;
						align-items: center;

						.bottom-content-item {
							color: #333333;
							font-size: 26rpx;
							display: flex;
							justify-content: center;
							flex-direction: column;
							align-items: center;

							.bottom-image {
								width: 60rpx;
								height: 60rpx;
								margin-bottom: 10rpx;
								display: flex;
								justify-content: center;
								align-items: center;
							}
						}

					}
				}

				.line-view {
					background-color: #F4F5F7;
					height: 2rpx;
					width: 100%;
					margin-top: 24rpx;
				}

				.apply-button {
					width: 100%;
					color: #2272FF;
					font-size: 32rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					height: 112rpx;
				}
			}
		}

		.colse-view {
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 30rpx;

			.image-view {
				width: 60rpx;
				height: 60rpx;
			}
		}
	}
</style>
