<template>
	<view class="mian">

		<u-navbar back-text="返回" :is-back="false">
			<view class="slot-wrap">
				<!-- 如果使用u-search组件，必须要给v-model绑定一个变量 :show-action="showAction" -->
				<u-search v-model="search" bg-color="#f5f7fa" :show-action="false" @click.native="toSearch" height="72"
					:action-style="{color: '#fff'}">
				</u-search>
			</view>
		</u-navbar>
		<!-- 	<view class="title">
			<u-icon name="search" size="30" class="icon" color="#737373"></u-icon>
		
		</view>
		 -->

		<!-- 轮播图 -->
		<view class="swiper">
			<u-swiper :list="adPosList" name="apImgPath" height="360 " border-radius="12"></u-swiper>
		</view>

		<!-- 公告 -->
		<view class="notice">
			<u-notice-bar mode="horizontal" :list="gg_list" bg-color="#f7f9fc"></u-notice-bar>
		</view>

		<!-- 购买管理 -->
		<view class="mannage">
			<view class="item " @click="toBeforehand">
				<view class="left">
					<u-image mode="widthFix" width="80rpx" height="80rpx" border-radius="50%" :src="mannage.buy.imgUrl">
					</u-image>
				</view>
				<view class="right">
					<view class="title2">
						{{mannage.buy.title}}
					</view>
					<view class="info">
						{{mannage.buy.info}}
					</view>
				</view>
			</view>
			<view class="item lease" @click="toSell">
				<view class="left">
					<u-image mode="widthFix" width="80rpx" height="80rpx" border-radius="50%"
						:src="mannage.lease.imgUrl"></u-image>
				</view>
				<view class="right">
					<view class="title2">
						{{mannage.lease.title}}
					</view>
					<view class="info">
						{{mannage.lease.info}}
					</view>
				</view>
			</view>
		</view>

		<!-- 祭扫 -->
		<view class="saoji" :style="{background: 'url('+ saoji.bgUrl + ')'}">
			<view class="left">
				<view class="icon">

				</view>
				云祭扫
			</view>
			<view class="right">
				<view class="btn">
					立即查看
				</view>
			</view>
		</view>

		<!-- 购买投资 -->
		<view class="invest">
			<u-cell-group :border="false">
				<u-cell-item :arrow="false" :title-style="{'font-size': '32rpx','font-weight': '600' , 'color': '#000'}"
					:border-bottom="false" title="购买投资">
					<view sloat="right-icon" @click="toInvestList">
						更多<u-icon name="arrow-right" style="margin-left: 10rpx;"></u-icon>
					</view>
				</u-cell-item>
			</u-cell-group>
			<view class="top">
				<scroll-view class="list" scroll-x="true" scroll-left="0">
					<Cart @toLink="toLink" :info="item" @click.native="toInfo(item,'reselling')" width="328rpx" height="246rpx"
						class="item" v-for="(item, index) in reselling" :key="index" />
				</scroll-view>
			</view>
		</view>

		<!-- 归属租赁 -->
		<view class="affiliation ">
			<u-cell-group :border="false">
				<u-cell-item :arrow="false" :title-style="{'font-size': '32rpx','font-weight': '600' , 'color': '#000'}"
					:border-bottom="false" title="归属租赁">
					<view sloat="right-icon" @click="toAffiliationList">
						更多<u-icon name="arrow-right" style="margin-left: 10rpx;"></u-icon>
					</view>
				</u-cell-item>
			</u-cell-group>
			<view class="top">
				<scroll-view class="list" scroll-x="true" scroll-left="0">
					<Cart :info="item" @toLink="toLink" @click.native="toInfo(item,'renting')" width="328rpx" height="246rpx"
						class="item" v-for="(item, index) in rentingList" :key="index" />
				</scroll-view>
			</view>
		</view>


		<u-tabbar v-model="vuex_current" :inactive-color="vuex_inactiveColor" :activeColor="vuex_activeColor"
			:list="vuex_tabBar"></u-tabbar>
	</view>
</template>

<script>
	import Cart from '../../components/cart.vue'
	export default {
		data() {
			return {
				search: '',
				// 轮播图
				list: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
				// 公告
				gg_list: [
					'寒雨连江夜入吴',
					'平明送客楚山孤',
					'洛阳亲友如相问',
					'一片冰心在玉壶'
				],
				mannage: {
					lease: {
						imgUrl: '../../static/mod_icon.png',
						title: '购买管理',
						info: '精选风水安家地'
					},
					buy: {
						imgUrl: '../../static/mod_icon2.png',
						title: '租赁管理',
						info: '首个无界神度空间'
					}
				},
				saoji: {
					bgUrl: '../../static/saoji.png'
				},
				queryData: {
					pageNum: 1,
					pageSize: 10,
					pagodaStatus: '', // 神塔状态reselling售卖中，renting出租中
				},
				total: 0,
				// 租赁列表
				rentingList: [],
				// 出售列表
				reselling: [],
				// 轮播广告
				adPosList: [],
				adPosQuery:{
					pageNum: 1,
					pageSize: 10,
					type: 'index_banner'
				}
			}
		},
		methods: {
			async getAdPosList() {
				let res = await this.$u.api.getAdPosList(this.adPosQuery)
				this.adPosList.push(...res.data.rows)
				console.log(res, 8800)
			},
			toBeforehand() {
				// 记录当前页面
				this.$u.vuex('vuex_backUrl', 'mian')
				uni.navigateTo({
					url: '../user/beforehand_lease/beforehand_lease'
				})
			},
			toSell() {
				this.$u.vuex('vuex_backUrl', 'mian')
				uni.navigateTo({
					url: '../user/purchase/purchase'
				})
			},
			async getList(type) {
		
				// 出租
				if (type === 'renting') {
					this.queryData.pagodaStatus = type
					let res = await this.$u.api.pagoda.getPagodaList(this.queryData)
					this.rentingList = res.data.rows
					console.log(res, 88899)
				} else {
					// 出售
					this.queryData.pagodaStatus = type
					let res = await this.$u.api.pagoda.getPagodaList(this.queryData)
					this.reselling = res.data.rows
					console.log(res, 888000)
				}

			},
			toInvestList() {
				uni.navigateTo({
					url: './Invest_list/Invest_list?type=1'
				})
			},
			toAffiliationList() {
				uni.navigateTo({
					url: './Invest_list/Invest_list?type=2'
				})
			},
			toSearch() {
				uni.navigateTo({
					url: './search/search'
				})
			},
			toInfo(info, type) {
				uni.navigateTo({
					url: './cemeteryInfo/cemeteryInfo?id=' + info.pagodaId + '&type=' + type
				})
			},
			toLink() {
				uni.navigateTo({
					url: './linkInfo/linkInfo'
				})
			}
		},
		components: {
			Cart,
		},
	
		onLoad() {
			// 获取出售神塔
			this.getList('reselling')
			// 获取出租神塔
			this.getList('renting')
			// 获取广告
			this.getAdPosList()
		}
	}
</script>

<style lang="scss" scoped>
	.mian {

		.swiper,
		.notice,
		.saoji,
			{
			width: 678rpx;
			margin: 0 auto;
			margin-top: 24rpx;

		}

		.slot-wrap {
			display: flex;
			align-items: center;
			flex: 1;
			padding: 0 36rpx;
		}


		// .title {
		// 	position: relative;
		// 	padding: 12rpx 20rpx 12rpx;
		// 	box-shadow: 0 2rpx 20rpx -1px rgba($color: #ccc, $alpha: 0.2);

		// 	.icon {
		// 		position: absolute;
		// 		top: 30rpx;
		// 		left: 40rpx;
		// 		z-index: 2;
		// 	}

		// 	.input {
		// 		text-indent: 60rpx;
		// 		border-radius: 12rpx;
		// 	}
		// }

		.mannage {
			padding: 36rpx 36rpx 0;
			display: flex;

			.item {
				width: 328rpx;
				height: 160rpx;
				box-shadow: 0 2px 12px 0 rgba(116, 116, 116, 0.1);
				display: flex;
				align-items: center;
				padding-left: 20rpx;
				border-radius: 12rpx;

				.right {
					margin-left: 16rpx;

					.title2 {
						font-size: 32rpx;
						font-weight: 600;
					}

					.info {
						margin-top: 5rpx;
						font-size: 24rpx;
						color: #BFC2CC;
					}
				}
			}

			.lease {
				margin-left: 22rpx;
			}
		}

		.saoji {
			height: 160rpx;
			background-size: 100% 100% !important;
			display: flex;
			align-items: center;

			.left {
				margin-left: 36rpx;
				display: flex;
				flex: 1;
				color: #FFFFFF;
				line-height: 30rpx;

				.icon {
					margin-right: 20rpx;
					width: 40rpx;
					height: 30rpx;
					background: url('../../static/cloud.png');
					background-size: 100% 100%;
				}
			}

			.right {
				.btn {
					width: 168rpx;
					height: 64rpx;
					flex: 1;
					margin-right: 36rpx;
					line-height: 64rpx;
					text-align: center;
					background: #2753c1;
					color: #FFFFFF;
					opacity: 1;
					border-radius: 36rpx;
					font-size: 24rpx;
				}
			}
		}

		.invest,
		.affiliation {
			// padding-right: 36rpx;
			margin-top: 36rpx;

			/deep/ .uni-scroll-view-content {
				display: flex;
			}

			/deep/ .item {
				padding-right: 20rpx;

				&:first-child {
					padding-left: 36rpx;
				}

				&:last-child {
					padding-right: 36rpx;
				}
			}
		}

		.affiliation {
			margin-bottom: 60rpx;
		}
	}
</style>
