<template>
	<view class="sub-base-container">
		<view class="tree-info">
			<image class="image" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></image>
			<view class="info-cont">
				<view class="tree-name">果树档案</view>
				<view class="text-wrap">
					<view class="row-text">
						<text class="label">树木名称</text>
						<text>茜茜荔</text>
					</view>
					<view class="row-text">
						<text class="label">树木编号</text>
						<text>LCJGHN-GZCH-LBY0011</text>
					</view>
					<view class="row-text">
						<text class="label">来自农场</text>
						<text>从化荔枝博览园</text>
					</view>
					<view class="row-text">
						<text class="label">品种树龄</text>
						<text>井岗红糯-18年</text>
					</view>
				</view>
			</view>
		</view>
		<view class="tree-diary">
			<view class="diary-head">
				<view class="date" @click="handleDate">
					<image class="img" :src="`${config.BASIC_IMG}img/subTreePage/date-icon.png`"></image>
					<text>{{formatDate(dateVal)}}</text>
				</view>
				<view class="arrow-group">
					<view class="arrow-icon" @click="changeDay(-1)">
						<up-icon name="arrow-left" size="17" bold color="#fff"></up-icon>
					</view>
					<view class="arrow-icon" @click="changeDay(+1)">
						<up-icon name="arrow-right" size="17" bold color="#fff"></up-icon>
					</view>
				</view>
			</view>
			<view class="diary-cont">
				<template v-if="active === 0">
					<view class="text">今天是我开花的日子今天是我开花的日子今天是我开花的日子今天是我开花的日子</view>
					<view class="photo">
						<image class="img" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></image>
					</view>
				</template>
				<view class="template-1" v-else-if="active === 1">
					<view class="photo-group">
						<image class="img" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></image>
						<image class="img float" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></image>
					</view>
					<view class="text">今天是我开花的日子今天是我开花的日子今天是我开花的日子今天是我开花的日子</view>
				</view>
				<view class="template-2" v-else="active === 2">
					<view class="photo-group">
						<image class="img" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></image>
						<image class="img float" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></image>
					</view>
					<view class="text">今天是我开花的日子今天是我开花的日子今天是我开花的日子今天是我开花的日子</view>
				</view>
			</view>
		</view>
	</view>
	<up-datetime-picker
		:show="showDatetim"
		v-model="dateVal"
		mode="date"
		:maxDate="Date.now()"
		:formatter="formatter"
		@cancel="cancel"
		@confirm="confirm"
	></up-datetime-picker>
</template>

<script setup>
	import config from "@/api/config.js"
	import {ref} from "vue"
	
	function formatDate(timestamp,type) {
	  const date = new Date(timestamp);
	  const year = date.getFullYear();
	  const month = String(date.getMonth() + 1)
	  const day = String(date.getDate()).padStart(2, '0');         // 日期补零
	  return `${year}${type || '年'}${month}${type || '月'}${day}${type?'':'日'}`;
	}
	
	const currentDate = ref(new Date())
	function changeDay(type) {
		currentDate.value = new Date(currentDate.value);
		currentDate.value.setDate(currentDate.value.getDate() + type);
		if(currentDate.value > new Date()){
			currentDate.value.setDate(currentDate.value.getDate() - 1);
			return
		}
		dateVal.value = Date.parse(currentDate.value);
		//获取 0-2 的随机整数
		const randomInt = Math.floor(Math.random() * 3);
		active.value = randomInt
	}
	
	const showDatetim = ref(false)
	const dateVal = ref(Date.now())
	
	const handleDate = () =>{
		showDatetim.value = true
	}
	const cancel = () =>{
		showDatetim.value = false
	}
	const confirm = ()=>{
		const aaa = formatDate(date.value,'-')
		console.log(date.value,aaa)
		cancel()
	}
	
	const active = ref(2)
	const formatter = (type, value) => {
	  if (type === 'year') {
	    return `${value}年`;
	  }
	  if (type === 'month') {
	    return `${value}月`;
	  }
	  if (type === 'day') {
	    return `${value}日`;
	  }
	  return value;
	};
</script>

<style lang="scss" scoped>
	@import "@/static/style/mixin.scss";

	.sub-base-container {
		background-image: linear-gradient(0deg, #FFFFFF, rgba(33, 153, 248, 0.6));
		max-height: 484rpx;
		min-height: 484rpx;
		padding-top: 52rpx;

		.tree-info {
			display: flex;
			justify-content: space-between;

			.image {
				width: 220rpx;
				height: 220rpx;
				border: 2rpx solid #fff;
				border-radius: 16rpx;
			}

			.info-cont {
				width: calc(100% - 220rpx - 36rpx);
				border: 2rpx solid #fff;
				border-radius: 16rpx;
				background-image: linear-gradient(180deg, rgba(241, 249, 255, .6), rgba(255, 255, 255, .75));

				.tree-name {
					font-size: 28rpx;
					font-family: 'PangMenZhengDao';
					padding: 8rpx 0;
					border-radius: 16rpx 4rpx 16rpx 4rpx;
					background-image: linear-gradient(120deg, #9FD5FF, #2199F8);
					color: #fff;
					width: 164rpx;
					text-align: center;
				}

				.text-wrap {
					padding: 8rpx 0 0 20rpx;
					line-height: 36rpx;

					.row-text {
						font-size: 24rpx;

						.label {
							font-weight: 500;
							margin-right: 20rpx;
						}
					}
				}
			}
		}

		.tree-diary {
			width: 100%;
			min-height: 960rpx;
			box-sizing: border-box;
			padding: 70rpx 0 56rpx 30rpx;
			@include ossBg("subTreePage/diary-bg.png");
			.diary-head{
				display: flex;
				justify-content: space-between;
				.date{
					font-family: 'PangMenZhengDao';
					font-size: 29rpx;
					color: #2199F8;
					display: flex;
					align-items: center;
					.img{
						width: 26rpx;
						height: 26rpx;
						margin-right: 10rpx;
					}
				}
				.arrow-group{
					display: flex;
					.arrow-icon{
						border-radius: 50%;
						background: rgba(33, 153, 248, 0.2);
						width: 56rpx;
						height: 56rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					.arrow-icon + .arrow-icon{
						margin-left: 20rpx;
					}
				}
			}
			.diary-cont{
				padding: 80rpx 60rpx 0 26rpx;
				.text{
					width: 72%;
					margin: 60rpx auto;
					font-weight: 500;
					position: relative;
					&::before{
						content: '“';
						position: absolute;
						top: -85rpx;
						left: -90rpx;
						font-size: 140rpx;
						color: rgba(33, 153, 248, 0.2);
					}
					&::after{
						content: '”';
						position: absolute;
						bottom: -130rpx;
						right: -110rpx;
						font-size: 140rpx;
						color: rgba(33, 153, 248, 0.2);
					}
				}
				.photo{
					width: 100%;
					height: 420rpx;
					margin-top: 90rpx;
					border: 10rpx solid #d0e6fb;
					box-shadow:  0 4rpx 8rpx 0 rgba(0, 0, 0, 0.1);
					position: relative;
					&::before{
						content: '';
						position: absolute;
						z-index: 2;
						right: -34rpx;
						top: 0;
						background: rgba(33, 153, 248, 0.56);
						transform: rotate(38deg);
						width: 102rpx;
						height: 30rpx;
					}
					.img{
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}
				.template-1{
					.photo-group{
						margin:0 -14rpx 240rpx 10rpx;
						.img{
							width: 354rpx;
							height: 240rpx;
							border: 10rpx solid rgba(255, 255, 255, 0.6);
							box-shadow:  0 4rpx 8rpx 0 rgba(0, 0, 0, 0.1);
						}
						.float{
							width: 400rpx;
							height: 264rpx;
							float: right;
							margin-top: -130rpx;
						}
					}
					.text{
						width: 55%;
						margin: 0 auto;
					}
				}
				.template-2{
					.photo-group{
						margin:0 -10rpx 220rpx 10rpx;
						.img{
							position: relative;
							z-index: 2;
							width: 440rpx;
							height: 300rpx;
							border: 10rpx solid rgba(255, 255, 255, 0.3);
							box-shadow:  0 4rpx 8rpx 0 rgba(0, 0, 0, 0.1);
						}
						.float{
							width: 332rpx;
							height: 222rpx;
							float: right;
							margin-top: -100rpx;
							transform: rotate(10deg);
							position: relative;
							z-index: 1;
						}
					}
					.text{
						width: 66%;
						margin: 0 auto;
					}
				}
			}
		}
	}
</style>