<template>
	<view class="add_post_box">
		<!-- 头部盒子 -->
		<view class="addpost_top_box">
			<!-- 返回个人中心盒子 -->
			<view class="return_box" @click="toCommunityPage">
				<image class="return_image" src="../../../../static/homepages/community/add_post/pictures/left_arrow.png" mode="widthFix"></image>
			</view>
			<!-- 标题盒子 -->
			<view class="title_box">发布我的帖子</view>
			<button class="publish_btn">发表</button>
		</view>
		<!-- 提示盒子 -->
		<view class="addpost_tip_box">分享自己的健康秘诀</view>
		<!-- 发布盒子 -->
		<view class="addpost_box">
			<view class="post_box">
				<view class="post_top_box">
					<view class="post_avatar_box">
						<image class="post_avatar" :src=user.avatar mode="widthFix"></image>
					</view>
					<view class="post_info">
						<view class="post_name">{{user.name}}</view>
						<view class="post_date">{{user.date}}</view>
					</view>
				</view>
				<textarea class="post_word_box" v-model="user.word" placeholder="请输入你的文案(最多50个字)" cols="16" rows="2" auto-height maxlength="50"></textarea>
				<!-- <view class="post_word_box">{{user.word}}</view> -->
				<view class="post_images_box">
					<view class="myimgDV">
					    <view class='receiveimage flex justify'>
					        <block v-for="(item,ind) in user.imgList" :key="ind">
					            <image class="imgitem doublepic" @tap="chooseTheImg(ind)" :style="{height:imgheight}" :src="item" mode="aspectFill"></image>
					        </block>
					    </view>
					</view>
					<!-- <community_image_box class="post_images" :imgList='user.imgList' :num='user.imgList.length'></community_image_box> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import community_image_box from "../../../../components/community_image_box/community_image_box.vue";

export default{
	data(){
		return{
			user:{
				avatar:'../../../../static/homepages/community/community/pictures/dog_image.png',
				name:'cat',
				date:'2024年9月31日',
				word:'',
				imgList:[
					'../../../../static/homepages/community/add_post/pictures/add_post_image.png',
					'../../../../static/homepages/community/add_post/pictures/add_post_image.png',
					'../../../../static/homepages/community/add_post/pictures/add_post_image.png',
					'../../../../static/homepages/community/add_post/pictures/add_post_image.png',
				],
			},
			imgheight:'',
		}
	},
	methods:{
		getheight() {
			console.log('imgboxtype:',this.imgboxtype)
		    let that = this;
		    const query = uni.createSelectorQuery().in(that)
		    query.select('.imgitem').boundingClientRect()
		    query.exec((res)=>{
		        console.log(res[0].width)
		        that.imgheight = (res[0].width).toFixed(2) + 'px';
		    })
		},
		chooseTheImg(index){
		    uni.chooseImage({  
		        count: 1,  //图片可选择数量
		        sizeType: ['original','compressed'],  //original 原图，compressed 压缩图，默认二者都有
		        sourceType: ['album'],   //album 从相册选图，camera 使用相机，默认二者都有。
		        crop: {  //是否进行裁剪，此配置一般用于头像上传时裁剪成正方形等
					width: 100,
					height: 100
				},
		        success: res => {
					console.log('res', res)
		            let imgFiles = res.tempFilePaths   //图片的本地文件路径列表
		            // this.uploadTheImg(imgFiles)
					console.log('imgFiles', imgFiles)
					this.user.imgList[index] = imgFiles[0]
					console.log(this.user.imgList[index])
		        }
		    })
		},
		toCommunityPage(){
			uni.navigateTo({
				url:'/pages/homepages/community/community/community'
			})
		}
	},
	mounted() {
		this.$nextTick(function() {
		    this.getheight();
		})
	}
}

</script>

<style lang="scss" scoped>
	@import "@/static/homepages/community/add_post/scss/add_post.scss"
</style>