<template>
	<view class="cotainer">
		<view class="navBarBox">
			<image class="navBarBox-top" :src="require('@/static/home-top.png')" mode=""></image>
			<!-- 状态栏占位 -->
			<view class="statusBar" :style="{paddingTop: navBarTop+'px'}"></view>
			<image class="navBarBox-title" :style="{marginTop: navBarTop+'rpx'}"
				:src="require('@/static/index-title.png')" mode=""></image>
			<!-- 真正的导航栏内容 -->
			<view class="navBar">

			</view>
		</view>
		<view class="line">
			<block v-if="listLine.length>0">
				<view class="line-item" v-for="(item,index) in listLine"
					:style="{'background-color':item.color,'border-radius':listLine.length===1?'50rpx':'50rpx 50rpx 0 0'}">
					<view class="line-item-top">
						<image class="line-item-top-icon2" :src="require('@/static/line-icon2.png')" mode=""></image>
						<view class="line-item-top-line">
							<image :src="item.image.url" mode=""></image>
							<view>
								<view class="line-item-top-line-title">{{item.name}}</view>
								<view class="line-item-top-line-dec">{{item.content}}</view>
							</view>
						</view>
						<view class="line-item-top-border"></view>
						<view class="line-item-top-rleft" :style="{'background-color': item.color}"></view>
						<view class="line-item-top-rright" :style="{'background-color': item.color}"></view>
					</view>
					<view class="line-item-pointer">
						<view class="line-item-pointer-rleft" :style="{'background-color': item.color}"></view>
						<view class="line-item-pointer-rright" :style="{'background-color': item.color}"></view>
						<view class="line-item-pointer-right">
							<view class="line-item-pointer-wrap" v-for="pointer in item.pointer"
								@click="toDetail(pointer.id)">
								<view class="line-item-pointer-wrap-dot">
									<view></view>
								</view>
								<view class="line-item-pointer-item">
									<image class="line-item-pointer-item-img" :src="pointer.image.url" mode="">
									</image>
									<view class="">
										<view class="line-item-pointer-item-title">{{pointer.name}}</view>
										<view class="line-item-pointer-item-detail">点位详情</view>
									</view>
									<image class="line-item-pointer-item-icon" :src="require('@/static/line-icon.png')"
										mode=""></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>



		<tabbar :currentPage="1"></tabbar>
	</view>
</template>

<script>
	import tabbar from '@/components/tabbar/tabbar.vue'
	import {
		shareInfo
	} from '@/common/util.js'
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				navBarTop: 0,
				listLine: [],
				colorList: ['#dbd0ba','#666d95','#82818e','#6d7c4c'],
			}

		},
		onShareAppMessage() {
			return shareInfo
		},
		onShareTimeline(){
			return shareInfo
		},
		onReady() {

		},
		onLoad() {
			const MenuButton = uni.getMenuButtonBoundingClientRect()
			this.navBarTop = MenuButton.top //左侧文字与右侧胶囊对齐
			// this.getUserLocation()
			this.getLines()
		},
		methods: {
			async getLines() {
				const res = await this.$u.api.baseFormIndex({
					table_name: "circuits",
					page: 1,
					page_size: 999,
					// with_relations:['image']
				})
				res.data.map((item,index)=>{
					item.color = this.colorList[index%this.colorList.length]
				})
				this.listLine = res.data
			},
			toDetail(e) {
				uni.navigateTo({
					url: '/packages/detail/detail?id=' + e,
				});
			},
		}
	}
</script>

<style lang="scss">
	.cotainer {
		background: #f3efea;
		width: 100vw;
		// padding-bottom: 135rpx;
		height: 100vh;

		.navBarBox {
			// height: 299rpx;
			position: relative;
			padding-bottom: 30rpx;
			top: 0;
			left: 0;
			width: 100%;

			&-top {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0
			}

			&-title {
				width: 399rpx;
				height: 102rpx;
				margin: 0 auto;
				position: relative;
				display: block;
			}

			.navBar {
				display: flex;
				position: relative;
				align-items: center;
				justify-content: space-between;
				padding: 30rpx;
			}
		}

		.line {
			position: relative;
			z-index: 99;
			padding-bottom: 135rpx;

			&-item {
				background-color: #dbd0ba;
				border-radius: 50rpx 50rpx 0 0;
				padding: 50rpx 30rpx;
				margin-top: -55rpx;
				padding-bottom: 105rpx;

				&:last-child {
					padding-bottom: 50rpx;
				}

				&-top {

					background-color: #fff;
					border-radius: 20rpx 20rpx 0 0;
					padding: 30rpx;
					position: relative;


					&-icon2 {
						width: 140rpx;
						height: 40rpx;
						position: absolute;
						left: 0;
						bottom: 0;
						z-index: 1;
					}

					&-line {
						display: flex;
						align-items: center;
						position: relative;
						z-index: 2;

						image {
							border: 10rpx solid #ebe0d1;
							width: 177rpx;
							height: 177rpx;
							border-radius: 177rpx;
							margin-right: 30rpx;
							box-sizing: border-box;
						}

						>view {
							width: calc(100% - 200rpx);
						}

						&-title {
							font-size: 32rpx;
							color: #000;
							margin-bottom: 15rpx;
						}

						&-dec {
							line-height: 1.5;
							color: #73685c;
						}
					}

					&-border {
						position: absolute;
						bottom: 0rpx;
						left: 20rpx;
						z-index: 3;
						width: calc(100% - 40rpx);
						height: 0px;
						border-top: 1px dashed #ebe0d1;
						border-bottom: 1px dashed #ebe0d1;
					}

					&-rleft {
						position: absolute;
						width: 20rpx;
						height: 20rpx;
						left: 0rpx;
						bottom: 0;
						background-color: #dbd0ba;
						border-radius: 0 20rpx 0 0;
						overflow: hidden;
						z-index: 2;
					}

					&-rright {
						position: absolute;
						width: 20rpx;
						height: 20rpx;
						right: 0rpx;
						bottom: 0;
						background-color: #dbd0ba;
						border-radius: 20rpx 0 0 0;
						overflow: hidden;
						z-index: 2;
					}

				}

				&-pointer {
					position: relative;
					background-color: #fff;
					border-radius: 0 0 20rpx 20rpx;
					padding: 30rpx;

					&-rleft {
						position: absolute;
						width: 20rpx;
						height: 20rpx;
						left: 0rpx;
						top: 0;
						background-color: #dbd0ba;
						border-radius: 0 0 20rpx 0;
						overflow: hidden;
						z-index: 2;
					}

					&-rright {
						position: absolute;
						width: 20rpx;
						height: 20rpx;
						right: 0rpx;
						top: 0;
						background-color: #dbd0ba;
						border-radius: 0 0 0 20rpx;
						overflow: hidden;
						z-index: 2;
					}

					&-wrap {
						position: relative;
						display: flex;
						align-items: center;

						&-dot {
							text-align: center;
							width: 10%;
							height: 210rpx;
							line-height: 180rpx;
							position: relative;

							&::after {
								content: '';
								position: absolute;
								top: 50%;
								left: 50%;
								transform: translate(-50%, -8rpx);
								width: 1px;
								height: 210rpx;
								border-left: 1px dashed #bebdbc;
							}

							>view {
								width: 16rpx;
								height: 16rpx;
								border-radius: 16rpx;
								background-color: #960909;
								display: inline-block;
							}

						}

						&:last-child {
							.line-item-pointer-wrap-dot {
								&::after {
									content: '';
									position: absolute;
									top: 50%;
									left: 50%;
									transform: translate(-50%, -8rpx);
									width: 1px;
									height: 0;
									border-left: none;
								}
							}


						}
					}


					&-item {
						display: flex;
						align-items: center;
						padding: 20rpx;
						background-color: #fff;
						border-radius: 20rpx;
						box-shadow: -2px -3rpx 12px rgba(0, 0, 0, 0.1);
						margin-bottom: 30rpx;
						width: 90%;
						height: 180rpx;

						&-img {
							width: 165rpx;
							height: 90rpx;
							border-radius: 20rpx;
							margin-right: 30rpx;
						}

						>view {
							width: calc(100% - 200rpx)
						}

						&-title {
							font-size: 32rpx;
							color: #000;
						}

						&-detail {
							color: #bc9766;
						}


						&-icon {
							width: 73rpx;
							height: 73rpx;
							position: absolute;
							right: 30rpx;
							bottom: 60rpx;

						}
					}
				}

			}
		}

	}
</style>