<template>
	<div class="wrap">
		<div class="map">
			<image class="map-title" :src="require('@/static/map-title.png')"></image>
			<movable-area style="width:100vw;height:calc(100vh - 198rpx)" class="bg" scale-area>
				<movable-view :x="-area.w/2" :style="{ 'height': 'calc(100vh - 198rpx)', 'width': area.w +40+'px' }" :scale="true"
					out-of-bounds direction="all">
					<view class="map-wrap img100"  :style="{ 'height': 'calc(100vh - 198rpx)', 'width': area.w+'px','margin':'0 auto' }">
						<img class="img100" style="height:calc(100vh - 198rpx);display:block;margin:0 auto" mode="heightFix" ref="image"
							:src="require('@/static/map-map.png')" alt="" @load="load">
						<view v-for="item in pointers">
							<view class="map-item" @click="toDetail(item)" :style="{'top':item.y+'%','left':item.x+'%'}" >
								<image class="map-item-flag" v-if="item.has_answer > 0" :src="require('@/static/map-flag.png')"></image>
								<image class="map-item-points" :src="require('@/static/map-point.png')"></image>
								<view class="map-item-title">
									<view v-if="item.nameArr" style="display: flex;flex-wrap:wrap;width:330rpx">
										<view v-for="i in item.nameArr" style="margin-right:6rpx">
											<span class="map-item-title-text" :class="{'map-item-title-text-active':item.has_answer > 0}">{{i}}</span>
											<block v-if="item.lat==='1'">
												<image v-if="i==='通安镇党群服务中心'" class="map-item-title-logo"
													:src="require('@/static/map-logo.png')"></image>
												<image v-if="i==='通安镇新时代文明实践所'" class="map-item-title-logo1"
													:src="require('@/static/map-logo1.png')"></image>
											</block>
											<block v-else>
												<image class="map-item-title-logo"
													:src="require('@/static/map-logo.png')"></image>
												<image class="map-item-title-logo1"
													:src="require('@/static/map-logo1.png')"></image>
											</block>
											
										</view>
									</view>
									<view v-else>
										<span class="map-item-title-text" :class="{'map-item-title-text-active':item.has_answer > 0}">{{item.name}}</span>
										<image v-if="item.lat==='0'" class="map-item-title-logo"
											:src="require('@/static/map-logo.png')"></image>
										<image v-if="item.lat==='0'" class="map-item-title-logo1"
											:src="require('@/static/map-logo1.png')"></image>
									</view>
								</view>
							</view>
						</view>

					</view>
				</movable-view>
			</movable-area>
		</div>

		<transition name="progress-box" enter-active-class="fade-in" leave-to-class="fade-out">
			<div class="progress" v-show="isShowProgress">
				<div class="close">
					<u-icon name="close-circle" :size="40" color="#555" @click="isShowProgress = false"></u-icon>
				</div>
				<div class="box" @click="$u.throttle(toCertificate)">
					<div class="box__line-progress">
						<u-line-progress :height="11" active-color="#b93736" :striped="true"
							:percent="(done/5)*100" :striped-active="true">
							<template #default>
								<div></div>
							</template>
						</u-line-progress>
					</div>
					<div class="box__text">
						<span>已完成</span>
						<span style="font-style: italic;padding-right: 4rpx;" class="box__text--red">{{done}}</span>
						<span>家打卡</span>
						<template v-if="done <5">
							<!-- <br><span>完成<span style="font-style: italic;padding-right: 4rpx;"
									class="box__text--red">{{pointers.length}}</span>家即可获得</span>
							<span class="box__text--red">荣誉证书</span> -->
							<br><span>完成<span style="font-style: italic;padding-right: 4rpx;"
									class="box__text--red">5</span>家即可解锁</span>
							<span class="box__text--red">打卡记录</span>分享页
						</template>
						<template v-else>
							<br><span>生成我的</span>
							<span class="box__text--red" @click="$u.throttle(toCertificate)">打卡记录</span>分享页
						</template>
					</div>
				</div>
			</div>
		</transition>
		<transition name="expand-progress-box" enter-active-class="fade-in" leave-to-class="fade-out">
			<div class="progress expand-progress" v-show="!isShowProgress" @click="isShowProgress = true">
				<u-icon name="arrow-left-double" color="#C52A34"></u-icon>
				打卡进度
			</div>
		</transition>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				signInfo: '',
				isBkgLoad: false,
				done: 0,
				isShowProgress: true,
				area: {
					w: 2212,
					h: 1583,
					x: -2212 / 4.8
				},
				pointers: []
			};
		},
		methods: {
			load(){
				this.area.w = this.$refs['image'].getBoundingClientRect().width
				this.area.h = this.$refs['image'].getBoundingClientRect().height
				
			},
			async getPoints() {
				this.pointers = []
				const res = await this.$u.api.getPoints()
				this.done = res.point_answer_total>5?5:res.point_answer_total
				res.points.map(item => {
					if (item.name.indexOf("@") > -1) {
						item.nameArr = item.name.split("@")
					}
				})
				this.pointers = res.points
			},

			toCertificate() {
				if(this.done < 5){
					return
				}else{
					uni.navigateTo({
						url: '/pages/certificate/certificate'
					})
				}
			},
			toDetail(item) {
				this.$u.vuex('vuex_point_id', item.id)
				uni.navigateTo({
					url: `/pages/detail/detail?id=${item.id}`
				})
			},

		},

		mounted() {

		},
		onLoad() {
			this.getPoints()


		},
		onShow() {
			
		}
	}
</script>

<style lang="scss">
	.wrap {
		background-color: #e1f1f2;
		height: 100vh;
		width: 100vw;
		.img100{
			height:calc(100vh - 198rpx)
		}
		.map {
			&-title{
				width:661rpx;
				height:158rpx;
				margin:0 auto;
				padding:20rpx 0;
				display:block;
			}
			&-wrap {
				position: relative;
			}

			&-item {
				position: absolute;
				top: 0;
				left: 0;
				display: flex;
				align-items: center;
				&-flag{
					width:111rpx;
					height:76rpx;
					position: absolute;
					top:-70rpx;
					left:50%;
				}
				&-points {
					width: 19rpx;
					height: 18rpx;
					margin-right: 6rpx;
					animation: ripple 1s infinite;
				}
				@keyframes ripple {
				  0% {
					transform: scale(.5);
					opacity: 1;
				  }
				  100% {
					transform: scale(1.2);
					opacity: 0.8;
				  }
				}
				&-title {
					background-color: rgba(220, 246, 124, .5);
					border-radius: 10rpx;
					border: 1px solid rgba(0, 0, 0, .5);
					padding: 4rpx 6rpx;
					display: flex;
					align-items: center;
					font-size: 22rpx;

					&-text {}
					&-text-active{
						color:#c91c1e;
					}
					&-logo {
						width: 30rpx;
						height: 28rpx;
						margin-left: 4rpx;
					}

					&-logo1 {
						width: 30rpx;
						height: 29rpx;
						margin-left: 4rpx;
					}
				}
			}
		}
	}

	.expand-progress {
		color: #D33838;
		background: #67b8be;
		word-break: break-word;
		font-size: 20rpx;
		width: 20rpx;
		border-radius: 10rpx 0 0 10rpx;
		filter: drop-shadow(4rpx 4rpx 4rpx #67b8be) drop-shadow(4rpx 10rpx 8rpx #e1f1f2);

		padding: 10rpx 18rpx;
	}

	.progress {

		z-index: 999;
		position: fixed;
		right: 0;
		bottom: 40rpx;

		& .close {

			transform: translateX(-100%);
			position: absolute;
			top: -2rpx;
			left: 0;
		}

		& .box {
			background: #67b8be;
			border-radius: 30rpx 0 0 30rpx;
			filter: drop-shadow(4rpx 4rpx 4rpx #e1f1f2) drop-shadow(8rpx 10rpx 8rpx #e1f1f2);

			padding: 20rpx 22rpx;
			padding-top: 30rpx;

			::v-deep .u-progress {
				overflow: visible !important;
			}

			::v-deep .u-active {
				border-radius: 20rpx;
				position: relative;
			}

			&__line-progress {
				width: 282rpx;
				height: 30rpx;
				display: flex;
				align-items: center;

				position: relative;

				&--bkg {
					display: flex;

					transform: translateY(calc(-100% - 7rpx));
					position: absolute;
					top: 50%;
					left: 0;
				}

				&--img {
					overflow: auto;

					transform: translateX(50%);
					position: absolute;
					right: 0;
				}
			}

			&__text {
				text-align: center;
				zoom: .95;
				font-size: 16rpx;
				font-weight: 400;
				color: #666666;

				&--red {
					font-size: 30rpx;
					color: #D33838;
					font-weight: 600;
				}
			}
		}
	}

	.fade-in {
		animation: fade-in .8s cubic-bezier(0.39, 0.575, 0.565, 1) both;
	}

	@keyframes fade-in {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	.fade-out {
		animation: fade-out 0.6s ease-out both;
	}

	@keyframes fade-out {
		0% {
			opacity: 1;
		}

		100% {
			opacity: 0;
		}
	}
</style>