<template>
	<!-- 遗产路径 -->
	<view class="heritagePath">
		<navbar title="遗产路径" leftClick @leftClick="$utils.navigateBack" />
		<view class="heritagePath-img">
			<!-- <image src="../static/situation/four.png" mode="aspectFill"> -->
			<uv-swiper
			:list="banner.path" 
			indicator
			height="420rpx"
			keyName="imageContent"></uv-swiper>
		</view>
		<view class="heritagePath-button">
			<view @click="setPath(1)" :class="{ fontColor: queryParams.isPay == 1}">路径定制</view>
			<view @click="setPath(0)" :class="{ fontColor: queryParams.isPay == 0}">推荐路径</view>
		</view>
		<view class="heritagePath-card" v-for="(item,index) in list" 
		@click="$utils.navigateTo('/pages_order/service/StudyAndPathDetail?type=0&id=' + item.id)"
		:key="index">
			<view class="heritagePath-card-box">
				<view class="heritagePath-card-pic">
					<view class="heritagePath-card-img">
						<image :src="item.amusementImage[0]" mode="aspectFill" />
					</view>
					<view class="heritagePath-card-imgs"v-if="item.amusementImage[1]">
						<view>
							<image :src="item.amusementImage[1]" mode="aspectFill" />
						</view>
						<view v-if="item.amusementImage[2]">
							<image :src="item.amusementImage[2]" mode="aspectFill" />
						</view>
					</view>
				</view>
				<view class="heritagePath-card-font">
					<view class="heritagePath-card-font-one">
						<view style="font-size: 28rpx; font-weight: 600;">{{ item.amusementTitle }}</view>
						<view style="font-size: 20rpx; color: #999999;" v-if="item.isPay == '1'">￥{{ item.amusementPrice }}起</view>
					</view>
					<view class="heritagePath-card-font-button" 
					@click="toPayUrl(item)"
					v-if="item.isPay == '1'">线上预订</view>
				</view>
				<view style="height: 40rpx;" />
			</view>
		</view>
		<tabber/>
	</view>
</template>

<script>
	import mixinsList from '@/mixins/list.js'
	import { mapState } from 'vuex'
	export default {
		mixins : [mixinsList],
		data() {
			return {
				isShow: 0,
				mixinsListApi : 'queryAmusementList',
			}
		},
		computed : {
			...mapState(['banner']),
		},
		onLoad() {
			this.queryParams.isPay = 1
			this.queryParams.amusementType = 0
		},
		onShow() {
			this.getData()
		},
		methods: {
			setPath(i){
				this.queryParams.isPay = i
				this.getData()
			},
			// 请求接收到之后，处理数据
			getDataThen(list){
				
				list.forEach(n => n.amusementImage = 
				n.amusementImage ? 
				n.amusementImage.split(',') : [])
			},
			// 在发出请求前，返回结果会作为参数，将替换调queryParams
			beforeGetData(){
				
			},
			toPayUrl(item){
				uni.navigateTo({
					url: `/pages_order/order/orderSubscribe?payType=0&id=${item.id}`
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.heritagePath {
		.heritagePath-img {
		}

		.heritagePath-button {
			display: flex;
			padding: 30rpx 0;
			font-size: 28rpx;
			background-color: #fff;

			view {
				padding: 10rpx 40rpx;
				background-color: #F8E2E2;
				border-radius: 28rpx;
				margin-left: 40rpx;
				color: #C83741;
			}

			.fontColor {
				background-color: #C83741;
				color: #fff;
			}
		}

		.heritagePath-card {
			width: 96%;
			margin-left: 2%;
			margin-top: 20rpx;
			background-color: #fff;
			border-radius: 16rpx;

			.heritagePath-card-box {
				padding-top: 20rpx;
				width: 94%;
				margin-left: 3%;

				.heritagePath-card-pic {
					display: flex;
					justify-content: space-between;


					.heritagePath-card-img {
						height: 320rpx;
						width: 400rpx;
						flex-shrink: 0;
						flex: 1;
					}

					.heritagePath-card-imgs {
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						view {
							height: 156rpx;
							width: 260rpx;
							flex-shrink: 0;
							flex: 1;
						}
					}

					image {
						height: 100%;
						width: 100%;
						border-radius: 20rpx;
					}
				}

				.heritagePath-card-font {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 20rpx;

					.heritagePath-card-font-button {
						padding: 8rpx 40rpx;
						font-size: 28rpx;
						color: #FFFFFF;
						background-color: #C83741;
						border-radius: 40rpx;

					}
				}
			}

		}

	}
</style>