<template>
	<view class="">
		<view class="info">
			<view class="item_box">
				<view class="item">
					<view class="title_box f-row aic jcb">
						<view class="title">
							{{title}}
						</view>
						<view class="f-row aic more" v-if="list.length>6" @click="open=!open">
							<text>{{!open?'展开':'收起'}}</text>
							<uni-icons type="down" color="#999999" v-if="!open"></uni-icons>
							<uni-icons type="up" color="#999999" v-else></uni-icons>
						</view>
					</view>
					<view :class="['data_wrapper',{'close':list.length>6&&open}]">
						<view class="data_box f-row aic ">
							<view class="data f-col aic" v-for="item,i in list">
								<view class="">
									{{item?.dailyVolume}}
								</view>
								<text>{{item.gas}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		watch,
		nextTick
	} from 'vue';
	const props = defineProps({
		title: {
			type: String,
			default: ''
		},
		list: {
			type: Array,
			default: function() {
				return []
			}
		},
	})
	const open = ref(false)
	const moreHeight = ref(null)

	watch(() => props.list, () => {
		nextTick(() => {
			uni.createSelectorQuery().select('.data_box').boundingClientRect(data => {
				moreHeight.value = (data?.height || 0) + 'px'
			}).exec()
		})

	}, {
		immediate: true
	})
</script>

<style>
	page {
		background-color: #F8F8F8;
	}
</style>
<style lang="scss" scoped>

	.data_wrapper {
		height: 288rpx;
		transition: all .3s;
		overflow: hidden;
	}
	.close {
		height: v-bind(moreHeight);
	}

	.info {
		.item_box {

			.item {
				width: 690rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.5);
				border-radius: 16rpx;
				padding: 30rpx 0;
				margin-top: 24rpx;

				.title_box {
					padding: 0 30rpx;
					margin-bottom: -20rpx;
				}

				.title {
					font-size: 28rpx;
					color: #333333;
					background-image: url('../../static/index/line.png');
					background-size: 44rpx 13rpx;
					background-repeat: no-repeat;
					background-position: left bottom;

				}

				.more {
					font-size: 24rpx;
					color: #999999;

					text {
						margin-right: 6rpx;
					}
				}

				.data_box {

					flex-wrap: wrap;
					.data {
						width: 33.33%;
						margin-top: 60rpx;
						height: 80rpx;
						
					view {
						font-size: 32rpx;
						color: #333333;
						margin-bottom: 8rpx;

					}

					text {
						font-size: 24rpx;
						color: #333333;
					}
					}


				}
			}
		}
	}
</style>