<template>
	<view class="commentDetails-index-box">
		<navbar class="navbarSticky" bg="#F6F6F6">
			<view class="commentDetails-header-box flex">
				<van-icon class="commentDetails-header-left" name="arrow-left" @click="back" />
				<text class="commentDetails-header-title">评价详情</text>
			</view>
		</navbar>
		<view class="commentDetails-index-content">
			<view class="commentDetails-index-setType flex">
				<view class="commentDetails-setType-text flex">
                    <view>
                        第{{topData.Times}}次评价
                    </view>
                    <view class="flex">
                        <text>{{topData.ShowTypeStr}}</text>
                    </view>
				</view>
				<view class="commentDetails-setType-time flex">
					<view>
                        来源:{{topData.CreateTypeStr}}
                    </view>
                    <view>
                        时间:{{topData.CreateTime}}
                    </view>
				</view>
			</view>
			<commentDetails :qMsg="Msg" @check-status="showActionHandler" :CourseCommentTimesList="courseTimeList" @refreshData="getStuCommentList"></commentDetails>
            <van-action-sheet
              :show="showAction"
              :actions="actions"
              @close="closeAction"
              @select="selectAction"
              description="修改本期评语的可见状态"
            />
        </view>

	</view>
</template>
<script>
	import commentDetails from '@/components/setComments/commentDetails'
	import {
		reactive,
		toRefs,
		onMounted,
		getCurrentInstance,
		inject
	} from "vue";
	import navbar from '../../components/navbar.vue'
	export default {
		props: {

		},
		components: {
			navbar,
			commentDetails
		},
		setup() {
			let {
				proxy
			} = getCurrentInstance();
			let data = reactive({
				value: 1,
				actions: [{name:'可见',type:1},{name:'不可见', color: '#ee0a24',type:3}],
				showAction:false,
				currentAction:null,
				radioList: [{
						name: '使用默认配置',
						id: 1,
						checked: true
					},
					{
						name: '自定义评价',
						id: 2
					}
				],
				checked: '1',
				Msg: {
					CourseId: '',
					CommentTimes:1
				},
				courseTimeList: [], 
				topData:{
					ShowTypeStr:"",
					Times:1,
					CreateTime:"",
					CreateTypeStr:""
				}
			});
			let methods = {
				back() {
					uni.navigateBack({
						delta: 1
					})
				},
				showActionHandler(item){
					data.currentAction=item
					data.showAction=true
				},
				closeAction(){
					data.showAction=false
					data.currentAction=null
				},
				selectAction(e){
					let x=e.detail
					methods.clickoptions(x.type)
				},
				//实在评价可见性
				clickoptions(type) {
					let showTypeMsg = {
						Ids: ''+data.currentAction.Id,
						ShowType: type
					};
					proxy.$request("/Teacher/SetStuCommentShowType", showTypeMsg).then(res => {
						if (res.Code==1) {
							 methods.getStuCommentList()
						}else{
							uni.showToast({
								title:"设置失败，请重试",
								duration:2000
							})
						}
					})
				},
				//获取系统生成学员评价列表
				getStuCommentList(){
					uni.showLoading()
					proxy.$request("/Teacher/GetStuCommentList", data.Msg).then(res => {
						if (res) {
							data.courseTimeList = res.Data;
						}
						uni.hideLoading()
					})
				}
			};

			return {
				...toRefs(data),
				...methods
			};
		},
		onLoad(options) {
			let json=JSON.parse(decodeURIComponent(options.comment))
			this.Msg.CourseId = json.CourseId;
			this.topData.ShowTypeStr = json.ShowTypeStr;
			this.topData.Times = json.Times;
			this.topData.CreateTime = json.CreateTime;
			this.topData.CreateTypeStr = json.CreateTypeStr;
			this.Msg.CommentTimes = json.Times;
			
		},
		onShow() {
			this.getStuCommentList();
		}
	};
</script>
<style scoped>
    .commentDetails-setType-time{
        justify-content: space-between;
        font-size: 24rpx;
        font-weight: 500;
        color: #AFAFAF;
        line-height: 42rpx;
        margin-top: 40rpx;
    }
    .commentDetails-setType-text view:last-child{
        flex-shrink: 0;
        margin-left: 15rpx;
    }
    .commentDetails-setType-text view:last-child text {
		color: #D9868D;
		background: #F5DEE0;
		border-radius: 25rpx;
		width: 150rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		letter-spacing: 1rpx;
        font-size: 24rpx;
	}
	.commentDetails-setType-text view:first-child {
		font-size: 30rpx;
        font-weight: bold;
        color: #282828;
	}
    .commentDetails-setType-text{
        justify-content: space-between;
    }

	.commentDetails-index-setType {
		background: #FCEEEF;
		box-shadow: 0rpx 6rpx 52rpx 0rpx rgba(230, 65, 80, 0.19);
		border-radius: 50rpx;
		margin: 55rpx 50rpx 50rpx 50rpx;
		padding: 33rpx 50rpx;
        flex-direction: column;
	}

	.commentDetails-index-box {
		background: #F6F6F6;
	}

	.commentDetails-index-header-title {
		font-size: 32rpx;
		font-weight: 500;
		color: #282828;
		flex: 1;
		text-align: center;
		padding-right: 40rpx;
	}
    .commentDetails-header-box{
	    padding: 20rpx 42rpx;
		flex-direction: row;
		align-items: center;
	}
	.commentDetails-header-title{
	    font-size: 32rpx;
	    font-weight: 500;
	    color: #282828;
		flex:1;
		    text-align: center;
		    padding-right: 40rpx;
	}
	.commentDetails-header-left{
	    font-size: 40rpx;
	    position: relative;
	    z-index: 3;
	}
	.navbarSticky {
		display: sticky;
		top: 0;
		z-index: 9;
	}
</style>
