<!-- 展开与收缩 -->
<template>
	<view class="result-box">
		<uni-icons type="smallcircle-filled" size="10" :color="color" style="margin-right:10rpx" v-if="title!== ''" />
		<text v-if="title!== ''">{{title}}：</text>
		<view :class="state?'uni-flex-text':'uni-flex'" style="font-weight: normal;">
			{{content}}
		</view>
		<view @click="expand" class="expand">{{state?'展开':'收缩'}}
			<uni-icons :type="state?'arrowdown':'arrowup'" size="10" color="#ffffff" style="margin:0 10rpx" />
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			title: [String],
			content: [String],
			color:{
				type:String,
				default:'#D49E46'
			}
		},
		data() {
			return {
				state: true,
				cHeight: 0,
			}
		},
		mounted(){
			// this.$nextTick(function(){
			// 	uni.createSelectorQuery().in(this).select('#content').boundingClientRect(data=>{
			// 		this.cHeight = data.height
			// 	}).exec()
			// })
		},
		methods: {
			expand() {
				this.state = !this.state;
				// this.$nextTick(function(){
				// 	uni.createSelectorQuery().in(this).select('#content').boundingClientRect(data=>{
				// 		this.cHeight = data.height
				// 	}).exec()
				// 	var animation = uni.createAnimation({
				// 		duration: 800,
				// 		timingFunction: 'ease',
				// 		delay: 0
				// 	})
					
				// 	this.animation = animation.height(this.cHeight).step()
				// 	this.animationData = animation.export()	
				// })
			}
		}
	}
</script>

<style lang='scss' scoped>
	@import "../../static/general.scss"
</style>
