<template>
	<view class="EvaluationDetail-page column">
		<scroll-view ref="scrollView" scroll-y="true" 
		class="col"
        style="height: 100%;overflow: auto;"
		@scroll="scroll"
		:scroll-top="scrollTop">
            <view class="EvaluationDetail-box">
                <view 
                :style="{ opacity: 100 - boxOption + '%' }"
                class="row EvaluationDetail-header">
                    <view class="EvaluationDetail-header-left">
                        <view class="EvaluationDetail-h-l-num row">
                            <view>{{ ScoreTotal }}</view>
                            <view>/5</view>
                        </view>
                        <view class="EvaluationDetail-h-l-t">{{ ScoreText }}</view>
                    </view>
                    <view class="col column-reverse">
                        <view class="row" style="position:relative;top:6rpx;">
                            <view class="EvaluationDetail-h-r-box col row items-center">
                                <template v-if="Infor.length>2">
                                    <view class="EvaluationDetail-h-r-text">{{ Infor[2].commentName }}</view>
                                    <view class="EvaluationDetail-line col">
                                        <view class="EvaluationDetail-line-active" 
                                        :style="{'width': Infor[2].proportion+'%'}">
                                        </view>
                                    </view>
                                    <view class="EvaluationDetail-h-r-num">{{ Infor[2].Score?Infor[2].Score.toFixed(1):'0.0' }}</view>
                                </template>
                            </view>
                            <view class="EvaluationDetail-h-r-box col row items-center">
                                <template v-if="Infor.length>3">
                                    <view class="EvaluationDetail-h-r-text">{{ Infor[3].commentName }}</view>
                                    <view class="EvaluationDetail-line col">
                                        <view class="EvaluationDetail-line-active" 
                                        :style="{'width': Infor[3].proportion+'%'}">
                                        </view>
                                    </view>
                                    <view class="EvaluationDetail-h-r-num">{{ Infor[3].Score?Infor[3].Score.toFixed(1):'0.0' }}</view>
                                </template>
                            </view>
                        </view>
                        <view class="row"
                        :class="[Infor.length>2?'EvaluationDetail-h-r-top':'']">
                            <view class="EvaluationDetail-h-r-box col row items-center">
                                <template v-if="Infor.length>0">
                                    <view class="EvaluationDetail-h-r-text">{{ Infor[0].commentName }}</view>
                                    <view class="EvaluationDetail-line col">
                                        <view class="EvaluationDetail-line-active" 
                                        :style="{'width': Infor[0].proportion+'%'}">
                                        </view>
                                    </view>
                                    <view class="EvaluationDetail-h-r-num">{{ Infor[0].Score?Infor[0].Score.toFixed(1):'0.0' }}</view>
                                </template>
                            </view>
                            <view class="EvaluationDetail-h-r-box col row items-center">
                                <template v-if="Infor.length>1">
                                    <view class="EvaluationDetail-h-r-text">{{ Infor[1].commentName }}</view>
                                    <view class="EvaluationDetail-line col">
                                        <view class="EvaluationDetail-line-active" 
                                        :style="{'width': Infor[1].proportion+'%'}">
                                        </view>
                                    </view>
                                    <view class="EvaluationDetail-h-r-num">{{ Infor[1].Score?Infor[1].Score.toFixed(1):'0.0' }}</view>
                                </template>
                            </view>
                        </view>
                    </view>
                </view>
                <view v-if="titleStyle.opacity>0"
                class="EvaluationDetailFixed"
                 :style="[titleStyle]">
                    <view class="EvaluationDetail-types-box">
                        <view style="padding: 0 80rpx;" class="row"
						:class="{
							'justify-start': titles.length==1,
							'justify-evenly': titles.length==2,
							'justify-around': titles.length==3,
							'justify-between': titles.length==4,
						}">
                            <view class="EvaluationDetail-types-text row" v-for="(item,index) in titles" :key="index"
                            :class="[fatherType==item.type?'active':'']"
                            @click="fatherClick(item)">
                                <view class="EvaluationDetail-types-text-l">
                                    <text>{{ item.name }}</text>
                                    <view></view>
                                </view>
                                <view v-if="item.num" class="EvaluationDetail-types-text-r">({{ item.num }})</view>
                            </view>
                        </view>
                    </view>
                    <view style="padding: 37rpx 80rpx 20rpx 80rpx;">
                        <view class="EvaluationDetail-type row">
                            <template v-for="(item,index) in childTitles" >
                                <view :key="index" class="EvaluationDetail-type-text row items-center justify-center" 
                                :class="[childType==item.type?'active':'']"
                                @click="childClick(item)"
                                v-if="(fatherType==0&&item.type!=0)||(fatherType!=0&&item.type!=1)">
                                    <text>{{ item.name }}</text>
                                    <text>{{ item.num?item.num:'' }}</text>
                                </view>
                            </template>
                        </view>
                    </view>
                </view>
                <view>
                    <view class="EvaluationDetail-types-box">
                        <view style="padding: 0 40rpx;" class="row"
						:class="{
							'justify-start': titles.length==1,
							'justify-evenly': titles.length==2,
							'justify-around': titles.length==3,
							'justify-between': titles.length==4,
						}">
                            <view class="EvaluationDetail-types-text row" v-for="(item,index) in titles" :key="index"
                            :class="[fatherType==item.type?'active':'']"
                            @click="fatherClick(item)">
                                <view class="EvaluationDetail-types-text-l">
                                    <text>{{ item.name }}</text>
                                    <view></view>
                                </view>
                                <view v-if="item.num" class="EvaluationDetail-types-text-r">({{ item.num }})</view>
                            </view>
                        </view>
                    </view>
                    <view style="padding: 37rpx 40rpx 20rpx 40rpx;">
                        <view class="EvaluationDetail-type row">
                            <template v-for="(item,index) in childTitles" >
                                <view :key="index" class="EvaluationDetail-type-text row items-center justify-center" 
                                :class="[childType==item.type?'active':'']"
                                @click="childClick(item)"
                                v-if="(fatherType==0&&item.type!=0)||(fatherType!=0&&item.type!=1)||(item.type==2&&item.num>0)">
                                    <text>{{ item.name }}</text>
                                    <text>{{ item.num?item.num:'' }}</text>
                                </view>
                            </template>
                        </view>
                    </view>
                </view>
                <view style="padding: 20rpx 0;">
                    <template v-if="dataList.length>0">
                        <view class="EvaluationDetail-center-box" 
                        v-for="(item,index) in dataList"
                        :key="index">
                            <view class="column" style="padding: 0 40rpx;">
                                <view class="EvaluationDetail-c-box row">
                                    <view class="EvaluationDetail-c-left">
                                    <image mode="scaleToFill"
                                        src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638748795455095258.png"/>
                                    </view>
                                    <view class="col EvaluationDetail-c-right">
                                        <view class="EvaluationDetail-c-r-top row items-center">
                                            <view>{{ item.updateByName }}</view>
                                            <!-- <image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638832775546263571.png"/>-->
                                        </view>
                                        <view class="row items-center justify-between">
                                            <view class="EvaluationDetail-c-r-b-title">{{ item.sourceName }}</view>
                                            <view class="EvaluationDetail-c-r-numbox row items-center justify-center">
                                                <image mode="scaleToFill" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638832776120394053.png" />
                                                <text class="EvaluationDetail-c-r-num">{{ item.score.toFixed(1) }}</text>
                                                <text class="EvaluationDetail-c-r-numtext">分</text>
                                            </view>
                                        </view>
                                    </view>
                                </view>
                                <view class="EvaluationDetail-center-text">
                                    {{ item.info }}
                                </view>
                                <view v-if="item.images.length>0">
                                    <template v-if="item.images.length>1">
                                        <view class="row">
                                            <grid-index v-if="item.images.length>0" :index="index" :childIndex=0 :item="item" :current="item.images[0]"></grid-index>
                                            <grid-index v-if="item.images.length>1" :index="index" :childIndex=1 class="grid-index-box" :item="item" :current="item.images[1]"></grid-index>
                                            <grid-index v-if="item.images.length>2" :index="index" :childIndex=2 class="grid-index-box" :item="item" :current="item.images[2]"></grid-index>
                                        </view>
                                        <view class="row grid-index-py" v-if="item.images.length>3">
                                            <grid-index v-if="item.images.length>3" :index="index" :childIndex=3 class="" :item="item" :current="item.images[3]"></grid-index>
                                            <grid-index v-if="item.images.length>4" :index="index" :childIndex=4 class="grid-index-box" :item="item" :current="item.images[4]"></grid-index>
                                            <grid-index v-if="item.images.length>5" :index="index" :childIndex=5 class="grid-index-box" :item="item" :current="item.images[5]"></grid-index>
                                        </view>
                                        <view class="row" v-if="item.images.length>6">
                                            <grid-index v-if="item.images.length>6" :index="index" :childIndex=6 :item="item" :current="item.images[6]"></grid-index>
                                            <grid-index v-if="item.images.length>7" :index="index" :childIndex=7 class="grid-index-box" :item="item" :current="item.images[7]"></grid-index>
                                            <grid-index v-if="item.images.length>8" :index="index" :childIndex=8 class="grid-index-box" :item="item" :current="item.images[8]"></grid-index>
                                        </view>
                                    </template>
                                    <grid-one v-else :item="item" :index="index" :childIndex=0 :current="item.images[0]"></grid-one>
                                </view>
                                <view class="EvaluationDetail-center-time"
                                :class="[item.images.length==0?'active':'']">{{ item.updateTime }}</view>
                            </view>
                        </view>
                    </template>
                    <u-empty v-if="dataList.length == 0" text="暂无数据" mode="data" padding-top="20"></u-empty>
                </view>
            </view>
        </scroll-view>
	</view>
</template>

<script>
    import gridIndex from "./components/gridImg/index.vue";
    import gridOne from "./components/gridImg/one.vue";
	export default {
        components: {
			gridIndex,
			gridOne,
		},
		data() {
			return {
				titleStyle: {
					opacity: 0,
				},
				boxOption: 0,
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
                ScoreTotal: 0,
                ScoreText: '非常不满意',
                commentList: [],
                texts:[
                    '非常不满意',
                    '不满意',
                    '感觉一般',
                    '满意',
                    '非常满意'
                ],
                Infor: [],
                titles:[],
                childTitles:[
                    {
                        name: '全部',
                        type: 0,
                    },
                    {
                        name: '最新',
                        type: 1,
                    },
                    {
                        name: '有图',
                        type: 2,
                        num: 0,
                    },
                ],
                dataList:[],
                fatherType: 0,
                childType: 1,
			}
		},
		onLoad(options) {
			
		},
		created() {
		
		},
		mounted () {
			uni.getStorage({
                key: "commentData",
                success: (res) => {
                    this.commentList = JSON.parse(res.data.commentList);
                    this.Infor = JSON.parse(res.data.Infor);
                    this.ScoreTotal = res.data.ScoreTotal;
                    if(res.data.commentType>0) this.fatherClick({type: res.data.commentType})
                    else this.uptodate(this.commentList)

                    if(this.ScoreTotal > 0 && this.ScoreTotal <= 1){
                        this.ScoreText = this.texts[0]	
                    }else if(this.ScoreTotal > 1 && this.ScoreTotal <= 2){
                        this.ScoreText = this.texts[1]
                    }else if(this.ScoreTotal > 2 && this.ScoreTotal <= 3){
                        this.ScoreText = this.texts[2]
                    }else if(this.ScoreTotal > 3 && this.ScoreTotal <= 4){
                        this.ScoreText = this.texts[3]
                    }else if(this.ScoreTotal > 4 && this.ScoreTotal <= 5){
                        this.ScoreText = this.texts[4]
                    }

                    for(let x =0; x < this.Infor.length; x++){
                        this.Infor[x].proportionTotal = this.Infor[x].SourceList.length*5
                    	for(let i =0; i < this.Infor[x].SourceList.length; i++){
                            let data = this.Infor[x].SourceList[i]
                            if(data.score>0){
                                this.Infor[x].ScoreTotal+=data.score
                                this.Infor[x].proportion = (this.Infor[x].ScoreTotal/this.Infor[x].proportionTotal)*100
                            }
                        }
                        this.Infor[x].Score = this.Infor[x].ScoreTotal/this.Infor[x].SourceList.length
                        this.Infor[x].ScoreTotal = this.Infor[x].Score.toFixed(1)
                        this.titles.push({
                            name: this.Infor[x].commentName,
                            type: this.Infor[x].commentType,
                            num: 0,
                        })
                    }
                    this.titles.unshift({
                        name: '全部',
                        type: 0,
                        num: this.commentList.length
                    })
                },
            });
		},
		methods: {
            uptodate(list){
                this.dataList = list.sort((a, b) => new Date(b.updateTime).getTime() - new Date(a.updateTime).getTime()); 
                this.childTitles[2].num = 0
                for(let i =0; i < this.dataList.length; i++){
                    let data = this.dataList[i]
                    if(data.images.length>0){
                        this.childTitles[2].num++
                    }
                }
            }, 
            picturesdate(list){
                this.dataList = list.filter((item) => item.images.length > 0) 
            }, 
            fatherClick(item){
                this.fatherType = item.type
                if(item.type==0) {
                    this.childType = 1 
                    this.uptodate(this.commentList)
                }else{
                	this.childType = 0
                    for(let x =0; x < this.Infor.length; x++){
                    	if(this.Infor[x].commentType == item.type){
                            this.uptodate(this.Infor[x].SourceList)
                    	}
                    }
                }
            },
            childClick(item){
                this.childType = item.type
                if(item.type==0){
                    for(let x =0; x < this.Infor.length; x++){
                    	if(this.Infor[x].commentType == this.fatherType){
                            this.uptodate(this.Infor[x].SourceList)
                    	}
                    }
                }else if(item.type==1){
                    this.uptodate(this.commentList)
                }else if(item.type==2){
                    this.picturesdate(this.dataList)
                }
            },
			scroll(e) {
				this.old.scrollTop = e.detail.scrollTop
				this.boxOption = Math.floor((e.detail.scrollTop - 50) / 1.5);
				this.titleStyle.opacity =
					e.detail.scrollTop - 300 < 0 ?
					0 :
					Math.floor(e.detail.scrollTop - 300) / 100 > 1 ?
					1 :
					Math.floor(e.detail.scrollTop - 300) / 100;
				this.$forceUpdate();
			},
		},
	}
</script>

<style lang="scss">
    @import url("@/asset/css/flex.css");
	.EvaluationDetail-page{
        height: 100vh;
        width: 100%;
        background: linear-gradient(0deg, #D9E2FF, #E5FDF0);
    }
    .EvaluationDetail-box{
        background: #FFFFFF;
        box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(190,216,225,0.23);
        border-radius: 18rpx;
        margin: 0 30rpx;
        margin-top: 44rpx;
        min-height: 95vh;
    }
    .EvaluationDetail-header{
        padding: 50rpx 30rpx 36rpx 30rpx;
    }
    .EvaluationDetail-header-left{
        background: #080A0A;
        border-radius: 18rpx 18rpx 0rpx 18rpx;
        border: 1px solid #080A0A;
        text-align: center;
        overflow: hidden;
        margin-right: 48rpx;
    }
    .EvaluationDetail-h-l-num{
        font-size: 50rpx;
        color: #EFAD3D;
        padding: 10rpx 17rpx 10rpx 17rpx;
        font-family: PingFang SC;
        font-weight: bold;
    }
    .EvaluationDetail-h-l-num view:last-child{
        /*font-weight: 100;*/
        font-size: 28rpx;
        color: #757776;
        position: relative;
        top: 21rpx;
    }
    .EvaluationDetail-h-l-t{
        font-weight: bold;
        font-size: 26rpx;
        color: #B99846;
        background: #fff;
    }
    .EvaluationDetail-h-r-text{
        font-weight: 500;
        font-size: 28rpx;
        color: #080A0A;
        margin-right: 16rpx;
    }
    .EvaluationDetail-h-r-box:last-child{
        margin-left: 39rpx;
    }
    .EvaluationDetail-line{
        width: 80rpx;
        height: 8rpx;
        background: #DBDBDB;
        border-radius: 4rpx;
        position: relative;
        overflow: hidden;
    }
    .EvaluationDetail-line-active{
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        border-radius: 4rpx;
        background: #B99846;
    }
 
    .EvaluationDetail-h-r-num{
        width: 44rpx;
        flex-shrink: 0;
        font-weight: bold;
        font-size: 28rpx;
        color: #080A0A;
        margin-left: 10rpx;
    }
    .EvaluationDetail-h-r-top{
        margin-bottom: 15rpx;
    }
    .EvaluationDetail-types-box{
        height: 90rpx;
        border-bottom: 1px solid #F3F1EF;
        padding-top: 20rpx;
    }
    
    .EvaluationDetail-types-text-l{
        font-weight: bold;
        font-size: 28rpx;
        position: relative;
    }
    .EvaluationDetail-types-text-l view{
        position: absolute;
        bottom: -18rpx;
        left: 16rpx;
        width: 25rpx;
        height: 8rpx;
        border-radius: 4rpx;
    }
    .EvaluationDetail-types-text.active{
        color: #B99846;
    }
    .EvaluationDetail-types-text.active .EvaluationDetail-types-text-l view{
        background: #B99846;
    }
    .EvaluationDetail-types-text-r{
        font-size: 24rpx;
        color: #BCBCBC;
    }
    .EvaluationDetail-type-text{
        padding: 0 35rpx;
        height: 60rpx;
        background: #F1F4F6;
        border-radius: 30rpx;
        font-weight: 500;
        font-size: 24rpx;
        color: #080A0A;
        margin-left: 24rpx;
    }
    .EvaluationDetail-type-text text:last-child{
        color: #BCBCBC;
        font-size: 20rpx;
        margin-left: 10rpx;
    }
    .EvaluationDetail-type-text:first-child{
        margin-left: 0;
    }
    .EvaluationDetail-type-text.active{
        border: 1px solid #B99846;
        color: #B99846;
    }
    .EvaluationDetail-c-right{
        overflow: hidden;
    }
    .EvaluationDetail-c-left{
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        overflow: hidden;
        background: #eee;
        flex-shrink: 0;
        margin-right: 21rpx;
        image{
            width: 100%;
            height: 100%;	
            border-radius: 50%;
        }
    }
    .EvaluationDetail-c-r-top{
        font-weight: 400;
        font-size: 24rpx;
        color: #080A0A;
        margin-bottom: 8rpx;
        image{
            width: 81rpx;
            height: 26rpx;
            display: block;
            margin-left: 10rpx;
        }
    }
    .EvaluationDetail-c-r-b-title{
        font-weight: 400;
        font-size: 24rpx;
        color: #BCBCBC;
        margin-right: 49rpx;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .EvaluationDetail-c-r-numbox{
        height: 33rpx;
        padding: 0 10rpx 0 25rpx;
        background: #E9E4E0;
        border-radius: 17rpx;
        position: relative;
        image{
            width: 44rpx;
            height: 36rpx;
            position: absolute;
            left: -20rpx;
            top: -5rpx;
        }
    }
    .EvaluationDetail-c-r-num{
        font-weight: bold;
        font-size: 24rpx;
        color: #080A0A;
    }
    .EvaluationDetail-c-r-numtext{
        font-weight: 500;
        font-size: 20rpx;
        color: #757776;
        margin-left: 5rpx;
    }
    .EvaluationDetail-c-box{
        padding: 30rpx 0 15rpx 0;
    }
    .EvaluationDetail-center-box:first-child .EvaluationDetail-c-box{
        padding: 0 0 15rpx 0;
    }
    .EvaluationDetail-center-text{
        font-weight: 400;
        font-size: 28rpx;
        color: #080A0A;
        line-height: 42rpx;
        padding: 15rpx 0;
    }
    .EvaluationDetail-center-time{
        font-weight: 400;
        font-size: 24rpx;
        color: #BCBCBC;
        padding: 30rpx 0;
    }
    .EvaluationDetail-center-time.active{
        padding: 0 0 30rpx 0;
    }
    .EvaluationDetail-center-box{
        border-bottom: 1px solid #F3F1EF;
    }
    .EvaluationDetail-center-box:last-child {
        border: 0;
    }
    .grid-index-box{
        margin-left: 23rpx;
    }
    .grid-index-py{
        margin-top: 23rpx;
        margin-bottom: 23rpx;
    }
    .EvaluationDetailFixed{
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        z-index: 1;
        background: #E5FDF0
    }
</style>
