<template>
	<view class="card" @touchend="moreBtnBlur">
		<view class="left">
			<image class="user-avatar" src="~@/static/images/avatar.png" mode="aspectFit"></image>
		</view>
		<view class="right">
			<view class="user-name">
				<text>陈静雯</text>
			</view>
			<view class="text">
				<read-text :text="content"></read-text>
			</view>
			<view v-if="img.length > 0">
				<view class="card-img1" v-if="img.length == 1">
					<image mode="aspectFit" v-for="(item, index) in img" :key="index" :src="item"
						@click="previewImage(0)"></image>
				</view>
				<view class="card-img" v-else="img.length >= 2">
					<image mode="aspectFill" v-for="(item, index) in img" :key="index" :src="item"
						@click="previewImage(index)"></image>
				</view>
			</view>
			<view class="card-bottom">
				<text>昨天</text>
				<view class="comment">
					<view class="comment-btn" :style="commentStyle" @click="showInputBox">
						<u-icon size="18" color="#ddd" name="edit-pen"></u-icon>评论
					</view>
					<image mode="aspectFit" src="~@/static/images/icon_more.png" @click="moreBtnClick()"></image>
				</view>
			</view>
			<view class="card-appraise">
				<comment reviewer="王悦" content="是呀，今天天气特别好" />
				<comment reply="陈静雯" reviewer="王悦" content="一起出来玩呀一起出来玩呀一起出来玩呀一起出来玩呀一起出来玩呀一起出来玩呀一起出来玩呀一起出来玩呀一起出来玩呀一起出来玩呀一起出来玩呀一起出来玩呀" />
				<comment reply="王悦" reviewer="陈静雯" content="好呀好呀" />
			</view>
		</view>
		<view class="comment-input" v-if="isShowInput">
			<u-search @blur="hodeInputBox" :focus="true" actionText="发送" placeholder="想对老师说些什么"
				searchIcon="chat" :showAction="false" :clearabled="false" :inputStyle="{padding: '5rpx 0'}" v-model="comment"></u-search>
		</view>
	</view>
</template>

<script>
	import readText from "@/components/read-text/read-text"
	import comment from "@/components/comment/comment"
	export default {
		props: {
			img: {
				type: Array,
				default () {
					return []
				}
			},
		},
		data() {
			return {
				content: `山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？`,
				commentStyle: '',
				comment: '',
				isShowInput: false,
			}
		},
		components: {
			readText,
			comment
		},
		mounted() {},
		methods: {
			previewImage(index) {
				uni.previewImage({
					current: index,
					urls: this.img,
					indicator: "default",
				})
			},
			moreBtnClick() {
				this.commentStyle = 'opacity: 1; transform: scale(1) translateX(0)'
			},
			moreBtnBlur() {
				this.commentStyle = ''
			},
			showInputBox(index = 0) {
				this.isShowInput = true
			},
			hodeInputBox() {
				this.isShowInput = false
			},
		}
	}
</script>

<style>
	@import url("./card.css");
</style>
