<template>
	<view class="wrap">
		<!-- 弹窗 -->
		<uni-popup ref="popup" type="center">
			<!-- 给一个左边弹窗的样式 -->
			<view class="popUpWrap" :class="{'popUpWrap1': whichTap == 0}">
				<!-- 关闭弹窗按钮 -->
				<view class="closeBtn" @click="this.$refs.popup.close()"></view>
				<!-- 左 -->
				<image class="glassInfo" src="../../static/img/myOpticsData/glassInfo.png" v-if="whichTap == 0" mode="aspectFit"></image>
				<!-- 右 -->
				<image class="dataInfo" src="../../static/img/myOpticsData/dataInfo.png" v-else mode="aspectFit"></image>
			</view>
		</uni-popup>
		<!-- 点击弹窗部分 -->
		<view class="header">
			<view class="headerLeft" @click=changeTap(0)>
				<text>如何查看验光单？</text>
				<image src="../../static/dataLook.png" mode="aspectFit"></image>
			</view>
			<view class="headerRight" @click=changeTap(1)>
				<text>如何查看眼镜框架？</text>
				<image src="../../static/glassLook.png" mode="aspectFit"></image>
			</view>
		</view>
		<!-- 数据展示部分 -->
		<view class="dataMenu">
			<uni-collapse accordion="true">
				<view class="item" v-for="(loveItem,index) in loveList" :key="index">
					<uni-collapse-item :title='loveItem.name' :time='getRightTime(loveItem.in_time)' :iconText='getFirstName(loveItem.name)' showAnimation='true'>
					    <view class="loveDataInfo">
							<view class="dataInfoItem">
								<text>度数（SPH）：</text><text>左：{{loveItem.leftSph}}</text><text>右：{{loveItem.rightSph}}</text>
							</view>
							<view class="dataInfoItem">
								<text>散光（CYL）：</text><text>左：{{loveItem.leftCyl}}</text><text>右：{{loveItem.rightCyl}}</text>
							</view>
							<view class="dataInfoItem">
								<text>轴位（AXI）：</text><text>左：{{loveItem.leftAxi}}</text><text>右：{{loveItem.rightAxi}}</text>
							</view>
							<view class="dataInfoItem">
								<text>瞳距（PD）：</text><text>{{loveItem.pd}}</text>
							</view>
					    </view>
					</uni-collapse-item>
				</view>
			</uni-collapse>
		</view>
		<view class="footer">
			<button class="btn" type="default" @click="toNewData">新建验光单</button>
		</view>
	</view>
</template>

<script>
	import UniCollapse from '@/components/UniCollapse/UniCollapse.vue'
	import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue'
	import UniPopup from '@/components/UniPopup/uni-popup.vue'
	import store from '@/store';
	export default {
		components: {UniCollapse,UniCollapseItem,UniPopup},
		data() {
			return {
				whichTap:0
			};
		},
		onLoad: function(option) {
			//获取关心的人列表
			store.dispatch('myLoveList/getLoveList', {
				uid: "1",
			}); 
		},
		computed:{
			loveList() {
				console.log(this.$store.state.myLoveList.loveList)
				return this.$store.state.myLoveList.loveList || []
			},
		},
		methods:{
			changeTap(item){
				this.whichTap = item
				this.$refs.popup.open()
			},
			//给时间搞一个nice的格式
			getRightTime(time){
				//如果小于10 则返回'0'+m
				// function add(m){return m<10?'0'+m:m}
				//传给我的带有时分秒，想去除一下，但是完事IOS显示NaN，暂时不用吧
				// const oldTime = (new Date(time)).getTime()
				// const year = new Date(oldTime).getFullYear()
				// const month = new Date(oldTime).getMonth()+1
				// const day = new Date(oldTime).getDate()
				// const newTime = add(year)+'-'+add(month)+'-'+add(day)
				
				// console.log(newTime)
				// return newTime.replace(/-/g, '/')
				return time
			},
			getFirstName(name){
				return name.substring(0,1)
			},
			toNewData(){
				uni.navigateTo({
					url:'../newOpticsData/newOpticsData'
				})
			}
		}
	}
</script>

<style lang="scss">
	.wrap{
		min-height: 100vh;
		width: 100%;
		background-color: #F2F2F2;
		.header{
			height: 304rpx;
			width: 100%;
			background-color: #FFFFFF;
			display: flex;
			justify-content: space-around;	
			align-items: center;
			view{
				height: 210rpx;
				width: 304rpx;
				background: #FDF7F5;
				border-radius: 4px;
				border-radius: 4px;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				text{
					font-size: 12px;
					color: #333333;
				}
				image{
					height: 144rpx;
					width: 144rpx;
				}
			}
		}
		.dataMenu{
			margin-top: 20rpx;
			box-shadow: 0 0 4px 0 rgba(133,107,107,0.10);
			width: 100%;
			background-color: #FFFFFF;
			.item{
				padding: 0 40rpx;
				.loveDataInfo{
					padding: 0 44rpx 0 70rpx;
					display: flex;
					justify-content: space-around;
					flex-direction: column;
					align-items: flex-start;
					.dataInfoItem{
						font-size: 12px;
						color: #333333;
						margin-bottom: 34rpx;
						text{
							font-size: 12px;
							color: #2A2A2A;
							margin-right: 20rpx;
						}
					}
				}
			}
		}
		.footer{
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			.btn{
				width: 100%;
				height: 112rpx;
				line-height: 112rpx;
				background: #FF6B4A;
				font-size: 16px;
				color: #FFFFFF;
			}
		}
	}
	.popUpWrap{
		height: 850rpx;
		width: 542rpx;
		background-color: #FFFFFF;
		border-radius: 4px;
		border: 1px solid #979797;
		.closeBtn{
			height: 28rpx;
			width: 28rpx;
			// border: 1px solid red;
			position: absolute;
			top: 20rpx;
			right: 20rpx;
		}
		.glassInfo{
			height: 474rpx;
			width: 528rpx;
		}
		.dataInfo{
			height: 850rpx;
			width: 542rpx;
		}
	}
	.popUpWrap1{
		height: 474rpx;
		width: 528rpx;
		border-radius: 4px;
		border: 1px solid #979797;
	}
	
</style>