<template>
	<app-layout>
		<view class="page">
			<view class="box" v-for="(item,index) in evaluateList" :key="index">
				<view class="main-between cross-center header">
					<view class="cross-center head">
						<image :src="userInfo.avatar" mode=""></image>
						{{userInfo.nickname}}
					</view>
					<view class="main-between cross-center">
						<view class="date">
							{{item.is_virtual===0?item.virtual_time.split(' ')[0]:item.created_at.split(' ')[0]}}</view>
						<image class="del" src="https://t17.9026.com/web/statics/image/user-center/del.png" mode=""
							@click="delEval(index,item.id)"></image>
					</view>
				</view>
				<view class="center" :style="{'height':item.isSpread?'auto':'140rpx'}">
					<view class="main-between cross-center">
						<view class="title">整体评价</view>
						<view class="isopen cross-center" @click="Spread(index,1)" v-show="!item.isSpread">
							展开
							<image src="https://t17.9026.com/web/statics/image/user-center/arrow-bottom.png" mode="">
							</image>
						</view>
					</view>
					<view class="center-text">{{item.content}}</view>

					<template v-show="item.isSpread">
						<view class="main-between cross-center">
							<view class="title">材料质量</view>
						</view>
						<view class="center-text">{{item.quality_comment}}</view>

						<view class="main-between cross-center">
							<view class="title">商品风格</view>
						</view>
						<view class="center-text">{{item.style_comment}}</view>
						<view class="center-img">
							<image v-for="(item1, index1) in item.pic_url" :key="index1" :src="item1" mode=""></image>
						</view>
						<view class="main-between goods">
							<view class="main-left desc" @click="$jump({open_type:'navigate',url:`/pages/goods/goods?id=${item.goods_id}`})">
								<image class="goods-img" :src="item.cover_img" mode=""></image>
								<view>
									<view class="title t-omit">{{item.goods_name}}</view>
									<view class="price">
										<text class="company">￥</text>
										{{item.order_amount}}
									</view>
								</view>
							</view>
							<view class="isopen cross-center" @click="Spread(index,0)">
								收起
								<image src="https://t17.9026.com/web/statics/image/user-center/arrow-top.png" mode="">
								</image>
							</view>
						</view>
					</template>
				</view>
			</view>
			<appNoData v-if="evaluateList.length==0" :title="'暂无评价'"></appNoData>
			<view class="no-more" v-if="noMore && evaluateList.length>0">没有更多了...</view>
		</view>
	</app-layout>
</template>

<script>
	import {
		mapState
	} from "vuex"
	import appNoData from '@/components/page-component/app-no-goods/app-no-goods.vue';
	export default {
		components:{
			appNoData
		},
		data() {
			return {
				page: 1,
				evaluateList: [],
				noMore:false
			};
		},
		computed: {
			...mapState({
				userInfo: state => state.user.info,
			})
		},
		onLoad() {
			this.getData()
		},
		onReachBottom() {
			if(!this.noMore){
				this.page++
				this.getData()
			}
		},
		methods: {
			getData() {
				this.$showLoading()
				this.$request({
					url: `${this.$api.user.evaluate_list}&page=${this.page}`,
					method: 'post'
				}).then(res => {
					if (res.code === 0) {
						let evaluateList = res.data.list
						for (let i = 0; i < evaluateList.length; i++) {
							evaluateList[i].isSpread = false
							evaluateList[i].pic_url = JSON.parse(evaluateList[i].pic_url)
						}
						if (this.page === 1) {
							this.evaluateList = evaluateList
						} else {
							this.evaluateList = this.evaluateList.concat(evaluateList)
						}
						if(res.data.list.length<20){
							this.noMore=true
						}
					}
					this.$hideLoading()
				}).catch(rej => {
					this.$hideLoading()
				})
			},
			delEval(index,id) {
				uni.showModal({
					title: '提示',
					content: '确定删除这条评价吗',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定');
							this.$request({
								url:this.$api.user.del_evaluate,
								data:{
									id:id
								},
								method:'post'
							}).then(res=>{
								if(res.code===0){
									uni.showToast({
										title:'删除成功',
									})
									this.evaluateList.splice(index, 1)
								}else{
									uni.showToast({
										title:'删除失败',
									})
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			Spread(index, i) {
				i ? this.evaluateList[index].isSpread = true : this.evaluateList[index].isSpread = false
			}
		}
	};
</script>

<style lang="scss" scoped>
	.page {
		padding-top: 22rpx;
		background: #f6f6f6;
	}

	.box {
		width: 678rpx;
		height: auto;
		background: #ffffff;
		border-radius: 6rpx;
		padding: 26rpx 31rpx;
		margin: 0 auto 20rpx;

		.header {
			padding-bottom: 21rpx;
			border-bottom: 1px solid #eaeaea;

			.head {
				max-width: 500rpx;
				height: 48rpx;
				background: #f6f6f6;
				border-radius: 24rpx;
				padding: 0 17rpx;
				overflow: hidden;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 14rpx;
					border-radius: 50%;
				}

				font-size: 24rpx;
				font-weight: 500;
				color: #666666;
			}

			.date {
				font-size: 22rpx;
				font-weight: 500;
				color: #222222;
				margin-right: 30rpx;
			}

			.del {
				width: 36rpx;
				height: 36rpx;
			}
		}

		.center {
			padding: 20rpx 0 10rpx;
			height: 174rpx;
			overflow: hidden;

			.title {
				margin-top: 17rpx;
				font-size: 30rpx;
				font-weight: bold;
				color: #222222;
			}

			.isopen {
				font-size: 24rpx;
				font-weight: bold;
				color: #a18353;

				image {
					width: 19rpx;
					height: 12rpx;
					margin-left: 8rpx;
				}
			}

			.center-text {
				margin-top: 20rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #999999;
				line-height: 34rpx;
			}

			.center-img {
				margin-top: 28rpx;

				image {
					width: 146rpx;
					height: 96rpx;
					border-radius: 12rpx;
					margin-right: 15rpx;
				}
			}

			.goods {
				padding-top: 42rpx;
				border-top: 1rpx solid #EAEAEA;

				.desc {
					width: 511rpx;
					height: 141rpx;
					background: #F8F8F8;
					border-radius: 6rpx;
					padding: 18rpx 24rpx;

					.goods-img {
						width: 101rpx;
						height: 99rpx;
						border-radius: 8rpx;
						margin-right: 21rpx;
					}

					.title {
						width: 335rpx;
						font-size: 26rpx;
						font-weight: 500;
						color: #222222;
						line-height: 46rpx;
					}

					.price {
						font-size: 24rpx;
						font-weight: 500;
						color: #FC3737;
						line-height: 36rpx;

						.company {}
					}
				}

			}
		}
	}

	.no-more {
		font-size: 24rpx;
		font-weight: 500;
		color: #666666;
		margin-top: 37rpx;
		text-align: center;
	}
</style>
