<template>
	<view>
		<view style="" v-if="list.length>0">
			<fui-collapse-item v-for="(item,index) in list" :key="index" :disabled="shouldDisableItem(item)" :arrow="shouldDisableItems(item)">
				<view class="fui-item__box">
					<view style="display: flex;width: 100%;position: relative;">
						<view class="content_img" v-if="item.headimg != 0">
							<image style="width: 50rpx;height:50rpx;border-radius: 50%;" :src="item.headimg"></image>
						</view>
						<view class="content_img" v-else>
							<image style="width: 50rpx;height: 50rpx;border-radius: 50%;" src="/static/images/home/tixing.png"></image>
						</view>
						<view style="padding: 5rpx 20rpx;">
							{{item.content}}
						</view>
						<view style="position: absolute;right: 7%;top: 1%;" @click="comments(item.comment_id)">
							评论
						</view>
					</view>

					<view class="middles_con" v-if="item.imagesarr!=0" style="">
						<view style="width: 32%;height: 200rpx;margin:2rpx;" v-for="(item2, index2) in item.imagesarr"
							:key="index2" @click="tankuang(item2,item.imagesarr)">
							<image :src="item2" style="width: 100%;height: 100%;"></image>
						</view>
					</view>
				</view>
				<template v-slot:content>
					<view class="fui-descr" v-if="item.comments_list.length>0">
						<view class="flex" style="position: relative;" v-for="(item1,index1) in item.comments_list" :key="index1">
							
							
							<view style="display: flex;width: 100%;position: relative;">
								<view class="content_img" v-if="item1.headimg != 0">
									<image style="width: 50rpx;height:50rpx;border-radius: 50%;" :src="item1.headimg"></image>
								</view>
								<view class="content_img" v-else>
									<image style="width: 50rpx;height: 50rpx;border-radius: 50%;" src="/static/images/home/tixing.png"></image>
								</view>
								<view style="padding: 5rpx 20rpx;">
									{{item1.content}}
								</view>
							</view>
							<view class="middles_con" v-if="item1.imagesarr!=0" style="">
								<view style="width: 32%;height: 200rpx;margin:2rpx;" v-for="(item2, index2) in item1.imagesarr"
									:key="index2" @click="tankuang(item2,item1.imagesarr)">
									<image :src="item2" style="width: 100%;height: 100%;"></image>
								</view>
							</view>
						</view>
					</view>
					<view class="fui-descr" v-else style="text-align: center;">
						暂无子评论
					</view>
				</template>
			</fui-collapse-item>
		</view>
		<view style="font-size: 40rpx;font-weight: bold;text-align: center;padding-top: 50rpx;" v-else>
			来当第一个评论的人吧!
		</view>

		<view style="margin-top: 30rpx;width: 100%;background-color: #fff;">
			<view style="width: 95%;height: 200rpx;margin: auto;">
				<textarea v-model="textAreaValue" placeholder="输入内容"
					:style="{ width: '100%',padding:'30rpx'}"></textarea>
			</view>
			<view class="fui-section__title" style="width: 95%;margin: auto;z-index: 9999;">
				<fui-upload :max="3" immediate :url="url" ref="upload" @complete="complete" @success="success"
					:isDel="false">
					<fui-icon name="plus"></fui-icon>
				</fui-upload>
			</view>

			<fui-button background="#00be8c" width="95%" :margin="['35rpx','0','0','35rpx']" @click="submit()">发
				布</fui-button>
		</view>
		<view style="height: 30rpx;width: 100%;"></view>
	</view>
</template>

<script>
// import user from '@/api/user.js';
import fuiCollapse from "@/components/firstui/fui-collapse/fui-collapse.vue"
import fuiCollapseItem from "@/components/firstui/fui-collapse-item/fui-collapse-item.vue"
import fuiUpload from "@/components/firstui/fui-upload/fui-upload.vue"
import fuiIcon from "@/components/firstui/fui-icon/fui-icon.vue"
import fuiButton from "@/components/firstui/fui-button/fui-button.vue"

export default {
  name: 'CommentList',
  props: {
    list: Array, // 将您的列表数据作为属性传递
    actid: {
        type: String,
        default: '' // 在这里设置默认值
      }, // 将您的列表数据作为属性传递
    um_id:  {
        type: String,
        default: '' // 在这里设置默认值
      }, // 将您的列表数据作为属性传递
  },
  components: {
    fuiCollapse,
    fuiCollapseItem,
    fuiUpload,
    fuiIcon,
    fuiButton
  },
  data() {
    return {
      url: 'http://medication.zeyan.wang/dnseyeapi/Base/upload1',
      urls: [],
      status: '',
      textAreaValue: '',
      lists: [],
      listlength: ''
    }
  },
 onLoad() {
 		this.actid = uni.getStorageSync('actid');
 		this.um_id = uni.getStorageSync('um_id');
 		this.fetchData(this.actid)
 	},
 	methods: {
 		fetchData(actid) {
 			user.comment_list({
 				act_id: actid
 			}).then(res => {
 				console.log(res)
 				if (res.status == 200) {
 					this.list = res.data
 				} else {
 					uni.showToast({
 						title: res.msg,
 						icon: 'none'
 					})
 				}
 			});
 		},
 		onPullDownRefresh(){
 			this.fetchData(this.actid)
 		},
 		complete(e) {
 			console.log(e)
 			this.status = e.status
 			// this.urls = e.urls
 			if (this.status === 'success' && e.action === 'upload') {
 				this.fui.toast('上传完成！')
 				//已上传完成的图片列表 this.urls
 				// console.log(this.urls)
 			}
 		},
 		success(e) {
 			var responseString = e.res.data;
 			var cleanedString = responseString.replace('{"status":"200","msg":"文件上传成功","data":"', '').replace('"}',
 				'');
 			console.log(cleanedString)
 			this.urls += cleanedString + ','
 		},
 		submit() {
 			user.comment({
 				act_id: this.actid,
 				um_id: this.um_id,
 				content: this.textAreaValue,
 				image: this.urls,
 			}).then(res => {
 				console.log(res)
 				if (res.status == 200) {
 					this.fetchData(this.actid)
 					this.textAreaValue = ''
 				} else {
 					uni.showToast({
 						title: res.msg,
 						icon: 'none'
 					})
 				}
 			});
 		},
 		tankuang(url,arr){
 			uni.previewImage({
 				current: url,
 				urls: arr,
 				loop: true,
 			});
 		},
 		comments(id){
 			uni.setStorageSync('comment_id',id);
 			uni.redirectTo({
 				url: '/pages/index/comments'
 			});
 		},
 		shouldDisableItem(item){
 			return item.comments_list.length == 0;
 		},
 		shouldDisableItems(item){
 			return !item.comments_list.length == 0;
 		}
 	}
 }
</script>

<style scoped>
  .middles_con {
  	width: 100%;
  	display: flex;
  	margin: 20rpx 0;
  	font-size: 30rpx;
  	
  }
  
  .flex {
  	padding: 20rpx 45rpx;
  }
  
  .fui-item__box {
  	width: 100%;
  	padding: 26rpx 32rpx;
  	box-sizing: border-box;
  	display: flex;
  	align-items: center;
  	flex-wrap: wrap;
  }
  
  .fui-logo {
  	width: 48rpx;
  	height: 48rpx;
  	margin-right: 24rpx;
  	display: block;
  }
  
  .fui-descr {
  	width: 100%;
  	padding: 32rpx;
  	font-size: 28rpx;
  	line-height: 52rpx;
  	color: #7F7F7F;
  	word-break: break-all;
  	box-sizing: border-box;
  }
</style>