<template>
	<view class="commentDetailsList-box">
		<view class="commentDetailsList-add" @click="goAdd">
			<van-icon name="plus" />
			<text>增加评论</text>
		</view>
		<view class="index-student-information">
			<view class="commentDetailsList-content">
				<view class="commentDetailsList-list" v-for="(item,index) in CourseCommentTimesList" :key="index">
					<!-- <view class="commentDetailsList-cross"  @click="deleteRules">
                            <van-icon name="cross" />
                        </view> -->
					<view class="commentDetailsList-img flex">
						<view>{{item.StuName}}</view>
						<view class="flex">
							<view class="commentDetailsList-img-text">
                                <view class="img-text" @click.stop="clickOptionsShow(item)">
                                    <text>{{item.ShowTypeStr}}</text>
                                    <van-icon name="arrow-down" />
                                </view>
                            </view>
							<van-image @click="editRules(item)" class="img" width="31rpx" height="30rpx" fit="cover" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1653980151000_180.png" />
						</view>
						<view class="Wire"></view>
					</view>

					<view class="commentDetailsList-comment">
						{{item.Info}}
					</view>
				</view>
			</view>
			<view class="noData">
				<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1653902791000_806.png" mode="widthFix"></image>
				<view>暂无评论规则数据</view>
			</view>
		</view>
		<template v-show="show">
			<commentDetailsPopu ref="getcommentPopup" @change="changeData"></commentDetailsPopu>
		</template>
	</view>
</template>
<script>
	import commentDetailsPopu from '@/components/setComments/commentDetailsPopu'
	import {
		ref,
		reactive,
		toRefs,
		onMounted,
		getCurrentInstance,
		inject,
		watch
	} from "vue";
	import navbar from '../../components/navbar.vue'
	export default {
		props: ["CourseCommentTimesList", "qMsg"],
		emits: ['refreshData','check-status'],
		components: {
			navbar,
			commentDetailsPopu
		},
		setup(props, context) {
			let {
				refs
			} = getCurrentInstance();
			let {
				proxy
			} = getCurrentInstance();
			let data = reactive({
                optionsShow:false,
                optionsList: [{
						text: '可见',
						value: 1
					},
					{
						text: '不可见',
						value: 3
					},
				],
				dataList: [],
				show: false
			});
			let methods = {
				clickOptionsShow(item){
					context.emit('check-status',item)
				},
				goAdd() {
					let url = '/pages/setComments/addComment?CourseId=' + this.qMsg.CourseId + "&CommentTimes=" + this.qMsg.CommentTimes;
					console.log("url", url);
					uni.navigateTo({
						url: url
					})
				},
				back() {
					uni.navigateBack({
						delta: 1
					})
				},
				addRules() { //添加规则
					data.show = true
					refs.getcommentPopup.$vm.showFun()
				},
				editRules(item) { //编辑规则
					data.show = true
					refs.getcommentPopup.$vm.showFun(item)
				},
				deleteRules() { //删除规则
					uni.showModal({
						title: '提示',
						content: '将删除该评价,是否继续',
						success: function(res) {
							if (res.confirm) {
								console.log('---')
							} else if (res.cancel) {
								uni.showToast({
									title: '已取消',
									icon: 'none',
									duration: 500
								})
							}
						}
					});
				},
				//刷新数据
				changeData() {
					//调用父组件方法
					context.emit('refreshData');
				}
			};
			//监听属性数组
			watch(() => props["CourseCommentTimesList"], (newValue, oldValue) => {

				if (newValue != oldValue && newValue && newValue.length > 0) {
					data.dataList = newValue;
				}
			}, {
				deep: true,
			});
			return {
				...toRefs(data),
				...methods
			};
		},
		onLoad(option) {

		},
	};
</script>
<style scoped>
.noData {
		text-align: center;
		flex: 1;
		width: 100%;
	}

	.noData image {
		width: 200rpx;
		margin-bottom: 40rpx;
	}

	.noData view {
		font-size: 24rpx;
		color: #cecece;
		text-align: center;
	}
    .Wire{
        width: 4rpx;
        height: 23rpx;
        background: #282828;
        position: absolute;
        left: 0;
        top: 47rpx;
    }
    .commentDetailsList-comment{
        font-size: 26rpx;
        font-weight: 400;
        color: #5E5E5E;
        line-height: 48rpx;
        letter-spacing: 1rpx;
    }
    .commentDetailsList-img .img{
        margin-top: 8rpx;
        flex-shrink: 0;
    }
    .Detailstype text{
        text-align: center;
        line-height: 44rpx;
    }
    .Detailstype{
        position: absolute;
        top: 40rpx;
        left: 0;
        right: 0;
        background: #FCEEEF;
        border-radius: 0 0 25rpx 25rpx;
        font-size: 24rpx;
        font-weight: 500;
        color: #CE8086; 
        flex-direction: column;
        padding: 10rpx 20rpx 15rpx 20rpx;
    }
    .img-text van-icon{
        font-size: 25rpx;
        margin-left: 10rpx;
        display: inline-block;
    }
    .img-text{
        background: #FCEEEF;
        border-radius: 25rpx;
        padding: 10rpx 10rpx 10rpx 18rpx;
        font-size: 24rpx;
        font-weight: 500;
        color: #CE8086; 
    }
    .commentDetailsList-img-text{
        position: relative;
        flex-grow: 1;
        margin-right: 15rpx;
    }
    .commentDetailsList-img{
        justify-content: space-between;
        align-items: center;
        align-items: center;
        font-size: 26rpx;
        font-weight: 500;
        color: #282828;
        margin-bottom: 34rpx;
        letter-spacing: 1rpx;
    }
    .commentDetailsList-cross{
        position: absolute;
        right: -12rpx;
        top: -12rpx;
        width: 44rpx;
        height: 44rpx;
        background: #FFFFFF;
        box-shadow: 0rpx 0rpx 21rpx 0rpx rgba(165, 165, 165, 0.34);
        border-radius: 10rpx;
        font-size: 26rpx;
        color: #D9868D;
        text-align: center;
        line-height: 44rpx;
    }
    .commentDetailsList-list{
        position: relative;
        background: #FFFFFF;
        padding: 31rpx 40rpx 37rpx 22rpx;
        box-shadow: 0rpx 6rpx 29rpx 0rpx rgba(76, 76, 76, 0.09);
        border-radius: 30rpx;
        margin-bottom: 40rpx;
    }
    .commentDetailsList-title .img{
        flex-shrink: 0;
        display: inline-block;
        margin-top: 5rpx;
    }
    .commentDetailsList-title text{
        font-size: 40rpx;
        font-weight: bold;
        color: #282828;
        margin-left: 29rpx;
        letter-spacing: 1rpx;
    }
    .commentDetailsList-title{
        align-items: center;
        margin-bottom: 35rpx;
    }
    .commentDetailsList-Evaluation view text:first-child{
        border-right: 1px solid #E5E5E5;
        padding: 0 16rpx 0 0;
    }
    .commentDetailsList-Evaluation view text:last-child{
        margin-left: 16rpx;
    }
    .commentDetailsList-Evaluation view text{
        display: inline-block;
        letter-spacing: 1rpx;
    }
    .commentDetailsList-Evaluation view{
        float: right;
        margin-top: 25rpx;
        margin-bottom: 27rpx;
        font-size: 24rpx;
        font-weight: 500;
        color: #CE8086;
    }
    .commentDetailsList-Evaluation{
        height: 85rpx;
        border-top: 1rpx solid #E5E5E5;
    }
    .commentDetailsList-source{
        font-size: 20rpx;
        color: #C2BCBA;
        font-weight: 500;
        justify-content: space-between;
        padding: 26rpx 0 25rpx 0;
    }
    .point{
        width: 8rpx;
        height: 8rpx;
        background: #E64150;
        border-radius: 50%;
    }
    .commentDetailsList-options-title,.commentDetailsList-options-text{
        font-size: 24rpx;
        font-weight: 500;
        color: #CE8086;
        text-align: center;
        font-weight: bold;
    }
    .commentDetailsList-options-text text{
        padding: 5rpx 0;
    }
    .commentDetailsList-options-text{
        flex-direction: column;
        margin-top: 10rpx;
        position: absolute;
        left: 0;
        right: 0;
        top: 35rpx;
        background: #FCEEEF;
        padding: 20rpx 0 20rpx 0;
        border-radius: 0 0 25rpx 25rpx;
    }
    .commentDetailsList-options-title text{
        margin-right: 10rpx;
        margin-left: 10rpx;
    }
    .commentDetailsList-options-title{
        justify-content: center;
        align-items: center;
    }
    .commentDetailsList-options{
        flex-grow: 1;
        border-radius: 25rpx;
        background: #FCEEEF;
        flex-direction: column;
        padding: 14rpx 17rpx 15rpx 17rpx;
        letter-spacing: 1rpx;
        position: relative;
    }
    .commentDetailsList-title-right{
        width: 190rpx;
        flex-shrink: 0;
    }
    .commentDetailsList-title-left{
        letter-spacing: 1rpx;
        flex-grow: 1;
        color: #282828;
        font-size: 26rpx;
        font-weight: bold;
        margin-right: 20rpx;
    }
    .center-line{
        position: absolute;
        left: 0;
        top: 30rpx;
        width: 4rpx;
        height: 23rpx;
        background: #282828;
    }
    .commentDetailsList-content{

    }
    .commentDetailsList-add van-icon{
        font-size: 25rpx;
        margin-right: 20rpx;
    }
    .commentDetailsList-add{
        width: 190rpx;
        margin: auto;
        border-radius: 27rpx;
        border: 1rpx solid #FB6087;
        color: #FB6087;
        font-size: 24rpx;
        letter-spacing: 1rpx;
        padding: 10rpx 0;
        margin-bottom: 47rpx;
        text-align: center;
    }
    .index-student-information{
        min-height: 800rpx;
		background: #FFFFFF;
		border-radius: 50rpx 50rpx 0 0;
		padding: 71rpx 50rpx 30rpx 50rpx;
        flex-direction: column;
    }
</style>
