<template>
    <view class="interest-report-wrap">
        <view class="content">
			 <contrastBox  @updateValue="handleChildValueChange" :testType="testType" :userId="userId"  :recordId="recordId" @compareParameters="opCompareParameters"></contrastBox>
            <view class="section-block">
					<testHead :reportTitle="'通用(职业)能力测评报告'" :testTime="testDate" :isIntroduce="false" :isVideo="false" :videoUrl="videoUrl" :introduceUrl="introduceUrl" ></testHead>
                <view class="s-line"></view>
                <view class="title">
                    <view class="name">非常优秀</view>
                </view>
                <view class="code-value">
                    <text class="scort" v-text="hightStr==''?'无':hightStr"></text>
                </view>
                <view class="title">
                    <view class="name">具有优势</view>
                </view>
                <view class="code-value">
                    <text class="scort" v-text="goodStr==''?'无':goodStr"></text>
                </view>
                <view class="title">
                    <view class="name">中等</view>
                </view>
                <view class="code-value">
                    <text class="scort" v-text="midStr==''?'无':midStr"></text>
                </view>
                <view class="title">
                    <view class="name">需要加强</view>
                </view>
                <view class="code-value">
                    <text class="scort" v-text="needStr==''?'无':needStr"></text>
                </view>
                <view class="title">
                    <view class="name">亟需加强</view>
                </view>
                <view class="code-value">
                    <text class="scort" v-text="lowStr==''?'无':lowStr"></text>
                </view>
                <view  class="chat-wrap">
                   <view class="row-item"><l-echart ref="chartRef" class="charts-box"></l-echart>
                    </view>
                </view>
            </view>
            <view class="section-block"  style="margin-top: -116rpx;">
                <view class="title">
                    <view class="name">测评建议</view>
                </view>
                <view class="desc-item-wrap">
                    <view class="desc-item" v-for="(item,index) in list" :key="index">
                        <view class="name-block" :class="'level-' + item.Level">
                            <view class="name">{{item.Name}}
                                <view class="label">{{item.LevelStr}}</view>
                            </view>
                            <view class="desc">{{item.Desc}}</view>
                        </view>
                        <view class="list" :class="item.showMore?'more':''">
                            <view class="row">
                                <text class="strong">提升途径：</text>
                                <text class="txt">{{item.Suggest}}</text>
                            </view>
                            <view class="more-btn" @click="changeMore(index)"></view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
	import testHead from "@/packageCa/testReport/components/testHead.vue"
	import contrastBox from "@/packageCa/testReport/components/contrastBox.vue"
    import api from "@/packageCa/apiCa/testManage.js";
    import theme from '@/packageCa/uni_modules/lime-echart/static/walden.json';
	const echarts = require('../utilCa/echarts.min.js');
    import * as echarts1 from '../utilCa/echarts.min';
    // // 注册主题
    // echarts.registerTheme('theme', theme);
    export default {
		components: {
			contrastBox,
			testHead
		},
        data() {
            return {
                videoUrl: "",
				introduceUrl: "",
                id: "",
                testDate: "",
                hightStr: "",
                goodStr: "",
                midStr: "",
                needStr: "",
                lowStr: "",
                list: [],
                result: [],
                // 柱状图
                barOption: {
                    title: {
                        text: ''
                    },
                    legend: {
                        show: true,
                    },
                    label: {
                        show: true,
                        position: 'right'
                    },
                    tooltip: {
						className: 'echarts-tooltip',
                        show: false,
                        formatter: function(params) {
                            let result = params.seriesName + '<br>' + params.name + '： ' + params.data +
                                '分' // 获取横轴对应的数据作为提示信息的标题
                            return result
                        }
                    },

                    xAxis: {
                        type: 'value',
                        max: 5,
                    },
                    yAxis: {
                        
                        type: 'category',
                        data: ['信息应用', '责任纪律', '创新发展', '问题解决', '团队合作', '人际互动', '持续学习', '沟通表达']
                    },
                    grid: {
                        left: '0%', // 根据实际情况调整
                        // right: '4%',
                        // bottom: '3%',
                        containLabel: true
                    },
                    series: [
                        // {
                        //     name: '2012',
                        //     data: [120, 200, 150, 80, 70, 110, 130,50],
                        //     type: 'bar'
                        // },
                        // {
                        //     name: '2011',
                        //     data: [120, 200, 150, 80, 70, 110, 130,50],
                        //     type: 'bar'
                        // }
                    ]
                },
                testType: "-28",
                userId: 0,
                currentYear: 0,
                currentTerm: 0,
                recordId: 0,
                labelName1: "",//表值1
                labelName2: "",//表值2
            }
        },
        onLoad(e) {
            this.id = e.id;
           if (e.year != null) {
               this.currentYear = e.year;
           }
           if (e.term != null) {
               this.currentTerm = e.term;
           }
           if (e.recordId != null) {
               this.recordId = e.recordId;
           }
           this.getTestRecord(this.currentYear, this.currentTerm,this.recordId);
        },
        methods: {
            changeMore(INDEX) {
                this.list[INDEX].showMore = !this.list[INDEX].showMore
				this.$forceUpdate();
            },
			//对比参数
			opCompareParameters(value){
				this.labelName1 = value.name1;
				this.labelName2 = value.name2;
				this.params = value;
				this.getValue()
			},
            //获取报告结果
            getTestRecord(currentYear, currentTerm,recordId) {
                uni.showLoading({
                    title: "加载中"
                })
                api.queryCustomTestResult(this.testType, currentYear, currentTerm,recordId).then(res => {
                    uni.hideLoading();
                    if (res.Result === 1) {
                        this.testDate = res.Data.TestDate;
                        let list = res.Data.DimList;
                        this.result = list;
                        this.currentYear = res.Data.Year;
                        this.currentTerm = res.Data.Term;
						this.recordId = res.Data.RecordId;
						// this.userId = data.UserId;
						this.labelName1 = res.Data.TestDate;
                        let hightStr = "",
                            goodStr = "",
                            midStr = "",
                            needStr = "",
                            lowStr = "";
                           
                        list.find(item => {
                            item.showMore = false;
                            if (item.Level == 1) {
                                hightStr += item.Name + '、'
                            } else if (item.Level == 2) {
                                goodStr += item.Name + '、'
                            } else if (item.Level == 3) {
                                midStr += item.Name + '、'
                            } else if (item.Level == 4) {
                                needStr += item.Name + '、'
                            } else {
                                lowStr += item.Name + '、'
                            }
                        });
                        this.hightStr = hightStr == '' ? '' : hightStr.substring(0, hightStr.length - 1);
                        this.goodStr = goodStr == '' ? '' : goodStr.substring(0, goodStr.length - 1);
                        this.midStr = midStr == '' ? '' : midStr.substring(0, midStr.length - 1);
                        this.needStr = needStr == '' ? '' : needStr.substring(0, needStr.length - 1);
                        this.lowStr = lowStr == '' ? '' : lowStr.substring(0, lowStr.length - 1);
                        this.list = list;
                        this.initChart();

                    } else {
                        uni.showToast({
                            title: res.Message,
                            icon: "none"
                        })
                    }
                })
            },
            async initChart() {
                let arr = [];
                this.result.forEach(item => {
                    arr.push(item.Score)
                })
                this.barOption.series = {
                    name: this.labelName1,
                    data: arr,
                    type: "bar"
                }
                // chart 图表实例不能存在data里
                const chart = await this.$refs.chartRef.init(echarts, "theme");
                chart.clear();
                chart.setOption(this.barOption)
            },
            //更改对比图
            getValue() {
				api.getBeCurrentJobGroupResult(this.params.year, this.params.term,this.params.schoolId, this.params.gradeid, this.params.classid, this.params.sex, this.params.departId,this.userId,this.params.recordId).then(res => {
				    if (res.Result >= 1) {
				        this.doChart(res.Data.data);
				    }
				})
            },
            //时间维度/群体维度对比
            async doChart(DATA) {
                let name1 = this.labelName1;
                let name2 = this.labelName2;
                let arr = [];
                this.result.forEach(item => {
                    arr.push(item.Score)
                })
                let arr2 = [];
                DATA.forEach(item => {
                    arr2.push(item.Score)
                })
                this.barOption.series = [{
                        name: name1,
                        data: arr,
                        type: 'bar'
                    },
                    {
                        name: name2,
                        data: arr2,
                        type: 'bar'
                    },
                ];
                const chart = await this.$refs.chartRef.init(echarts, "theme");
                chart.clear();
                chart.setOption(this.barOption)
            },

            goback() {
                uni.navigateBack(-1);
            }
        }
    }
</script>
<style lang="scss">
	$image-oss-url: "https://51xuanxiao.oss-cn-hangzhou.aliyuncs.com/Resource/xcx_sygh";
	page {
		background: #EEF1F8 url('#{$image-oss-url}/test_bg.png') no-repeat;
		background-size: contain;
		overflow-y: scroll;
	}
</style>
<style lang="scss" scoped>
	$image-oss-url: "https://51xuanxiao.oss-cn-hangzhou.aliyuncs.com/Resource/xcx_sygh";
    .vip-tip-block {
        width: 650rpx;
        height: 400rpx;
        background: #fff url('#{$image-oss-url}/report-vip-tip.png') no-repeat;
        background-size: 100%;
    }

    .tip-layer {
        .title {
            font-size: 36rpx;
            color: #000000;
            text-align: center;
            font-weight: 600;
            margin-bottom: 30rpx;
        }

        .desc {
            font-size: 28rpx;
            color: #666666;
            margin-bottom: 20rpx;

            &:last-child {
                margin-bottom: 0;
            }
        }
    }

    .img-content {
        display: flex;
        justify-content: center;
        height: 1200rpx;
        overflow: auto;

        image {
            width: 690rpx;
        }
    }

    .interest-report-wrap {
        min-height: 100vh;

        .head-bar {
            position: relative;
            text-align: center;
            font-size: 36rpx;
            font-weight: 600;
            height: 60rpx;
            line-height: 60rpx;

            .go-back {
                position: absolute;
                left: 10rpx;
                top: 0;
                width: 60rpx;
                height: 60rpx;
                background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABUklEQVRoQ+3ZOwrCQBCA4UlyCVsrQauQdPYewcNYWXoHK1s9gYeYdIKlracYWYggkgiTnccuaB3D/+1sYEMKyPxXZN4Pf0DMBOu6XpZluQOANRGduq7bc+/nNoE+/gwAq3c0IrJ72H/grtDQ9UPxAPBAxDn3/uaAkfjQvUXES9IA6fiANZuARrwZQCveBKAZrw7QjlcFWMSrAaziVQCW8eIA63hRgEe8GMArXgTgGR8N8I6PAqQQPxmQSvxkQNM0VwDYfJ3dJ53nuef/7+vZx+l+9W8pxE+aQNu2CyK6ZwsI4VlvoQDI/iFOCcF+iD/3fgqTiAKkMIlogDdCBOCJEAN4IUQBHghxgDVCBWCJUANYIVQBFgh1gDbCBKCJMANoIUwBGghzwA/EExFn3HdkF8AYIpvPrO9VDu8TVVUdiKghomNWH7q5W2Xserct9Af0K/AChQ/cMY9OGScAAAAASUVORK5CYII=") center no-repeat;
                background-size: 38rpx 38rpx;
            }
        }

        .video-content {
            padding: 0;
            width: 710rpx;
            background: #000;

            video {
                width: 100%;
            }
        }
		.content {
            padding: 35rpx 20rpx 220rpx;

            .section-block {
                padding: 40rpx 30rpx 20rpx;
                background: #fff;
                border-radius: 12rpx;
                overflow: hidden;

                .s-line {
                    position: relative;
                    width: 630rpx;
                    margin: 15rpx auto 45rpx;
                    height: 2rpx;
                    background: #FAFAFA;

                    &:before {
                        content: "";
                        display: block;
                        position: absolute;
                        left: -56rpx;
                        top: -16rpx;
                        width: 32rpx;
                        height: 32rpx;
                        border-radius: 50%;
                        background: #EEF1F8;
                    }

                    &::after {
                        content: "";
                        display: block;
                        position: absolute;
                        right: -56rpx;
                        top: -16rpx;
                        width: 32rpx;
                        height: 32rpx;
                        border-radius: 50%;
                        background: #EEF1F8;
                    }
                }
                .title {
                    display: flex;
                    align-items: center;
                    margin-bottom: 30rpx;

                    .name {
                        position: relative;
                        font-weight: 600;
                        font-size: 32rpx;
                        color: #000000;
                        z-index: 1;

                        &::after {
                            content: "";
                            display: block;
                            position: absolute;
                            bottom: -3rpx;
                            left: -6rpx;
                            width: calc(100% + 12rpx);
                            height: 12rpx;
                            background: #BBDCFF;
                            border-radius: 12rpx;
                            z-index: -1;
                        }
                    }
                }

                .code-value {
                    position: relative;
                    display: flex;
                    align-items: flex-end;
                    padding-bottom: 40rpx;

                    .scort {
                        font-size: 36rpx;
                        color: #1677ff;
                        font-weight: 600;
                    }
                }

                .job-table {
                    border-left: 2rpx solid #EEF2FD;
                    border-top: 2rpx solid #EEF2FD;
                    border-right: 2rpx solid #EEF2FD;
                    border-radius: 4rpx;
                    width: 630rpx;

                    .tr {
                        display: flex;
                        border-bottom: 2rpx solid #EEF2FD;

                        &:nth-child(2n+1) {
                            background: #F6F9FE;
                        }

                        .th {
                            width: 469rpx;
                            height: 72rpx;
                            font-size: 24rpx;
                            color: #666666;
                            text-align: center;
                            line-height: 72rpx;
                            background: #f6f9fe;

                            &:nth-child(1) {
                                width: 132rpx;
                            }
                        }

                        .td {
                            display: flex;
                            align-items: center;
                            width: 459rpx;
                            padding: 0 20rpx;
                            height: 220rpx;
                            font-size: 28rpx;
                            color: #333333;
                            line-height: 42rpx;

                            &:nth-child(1) {
                                width: 132rpx;
                                padding: 0;
                                color: #666666;
                                justify-content: center;
                            }
                        }
                    }
                }

                .chat-wrap {
                    position: relative;
                    // padding: 15rpx 0;
                    // margin: 30rpx 0 0;
                    z-index: 1;

                    // &:before {
                    //     position: absolute;
                    //     left: 118rpx;
                    //     top: 0;
                    //     content: "";
                    //     display: block;
                    //     width: 2rpx;
                    //     height: 100%;
                    //     background: #c9cdd4;
                    // }

                    .row-item {
                        display: flex;
                        align-items: center;

                        .charts-box {
                            width: 100%;
                            height: 400px;
                        }

                        .name {
                            display: flex;
                            flex-wrap: wrap;
                            align-items: center;
                            width: 100rpx;
                            height: 60rpx;
                            font-size: 24rpx;
                            color: #666666;
                            margin-right: 20rpx;
                        }

                        //     .bar-wrap {
                        //         display: flex;
                        //         align-items: center;
                        //         width: 488rpx;

                        //         .bar {
                        //             position: relative;
                        //             border-radius: 0 8rpx 8rpx 0rpx;
                        //             height: 16rpx;
                        //             background: linear-gradient(to left, #1677ff 0%, rgba(25, 137, 250, 0.5) 100%);

                        //             .score {
                        //                 position: absolute;
                        //                 right: -33rpx;
                        //                 top: -9rpx;
                        //                 font-size: 24rpx;
                        //                 margin-left: 8rpx;
                        //                 color: #2E94FA;
                        //             }

                        //         }

                        //     }
                    }

                    .level-desc {
                        position: absolute;
                        left: 110rpx;
                        bottom: -54rpx;
                        font-size: 24rpx;
                        color: #666666;
                        display: flex;
                        align-items: center;
                        z-index: -1;

                        .item-1 {
                            margin-right: 82rpx;
                        }

                        .item-2,
                        .item-3,
                        .item-4,
                        .item-5 {
                            position: relative;
                            margin-right: 67rpx;
                            width: 30rpx;
                            text-align: center;

                            &::after {
                                position: absolute;
                                left: 50%;
                                top: -408rpx;
                                transform: translateX(-50%);
                                content: "";
                                display: block;
                                width: 0;
                                height: 388rpx;
                                border-left: 2rpx dashed #E5E6EB;
                            }
                        }

                        .item-6 {
                            position: relative;
                            width: 30rpx;
                            text-align: center;

                            &::after {
                                position: absolute;
                                left: 50%;
                                top: -408rpx;
                                transform: translateX(-50%);
                                content: "";
                                display: block;
                                width: 0;
                                height: 388rpx;
                                border-left: 2rpx dashed #E5E6EB;
                            }
                        }
                    }
                }

                .desc-item-wrap {
                    .desc-item {
                        margin-bottom: 40rpx;

                        .name-block {
                            width: 590rpx;
                            padding: 25rpx 20rpx;
                            margin-bottom: 25rpx;
                            background: #F2F9FF;
                            border-radius: 12rpx 12rpx 12rpx 12rpx;
                            border: 2rpx solid #E7F4FD;

                            .name {
                                display: flex;
                                align-items: center;
                                font-size: 32rpx;
                                color: #000000;
                                margin-bottom: 15rpx;

                                .label {
                                    height: 36rpx;
                                    padding: 0 15rpx;
                                    background: #1677ff;
                                    border-radius: 8rpx 8rpx 8rpx 8rpx;
                                    text-align: center;
                                    line-height: 36rpx;
                                    font-size: 20rpx;
                                    margin-left: 10rpx;
                                    color: #FFFFFF;
                                }
                            }

                            .desc {
                                font-size: 28rpx;
                                color: #666666;
                                line-height: 42rpx;
                            }

                            &.level-1 {
                                background: #F2F9FF;

                                .name {
                                    .label {
                                        background: #1677ff;
                                    }
                                }
                            }

                            &.level-2 {
                                background: #F7F7FF;
                                border: 2rpx solid #ECEEFD;

                                .name {
                                    .label {
                                        background: #7C7CFF;
                                    }
                                }
                            }

                            &.level-3 {
                                background: #FFFBF7;
                                border: 2rpx solid #FDF1EC;

                                .name {
                                    .label {
                                        background: #FF9E3D;
                                    }
                                }
                            }

                            &.level-4 {
                                background: #F7FFF9;
                                border: 2rpx solid #C1EDC9;

                                .name {
                                    .label {
                                        background: #20B664;
                                    }
                                }
                            }

                            &.level-5 {
                                background: #FFF9F7;
                                border: 2rpx solid #FFD5D5;

                                .name {
                                    .label {
                                        background: #FC503C;
                                    }
                                }
                            }
                        }

                        .list {
                            position: relative;
                            height: 83rpx;
                            line-height: 44rpx;
                            overflow: hidden;
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 2;

                            .more-btn {
                                position: absolute;
                                right: 30rpx;
                                top: 20rpx;
                                width: 44rpx;
                                height: 44rpx;
                                background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAG+SURBVFiF7ZjPTcMwFId/dlEPPXWEbABMAN2gbNCeLJ8oEzSdIOIUOZd2A2CDMgFs0IwAA+SZSwNJiN20TlKB/J2ivMTvp6dPzh/A4/F4/hXMVIiiaDwcDgPO+bjPQAAgpdyaasbASqkdgKCDPE14F0Jc1xW45abeJ1sgMBUuTAUiuuOc33QS5wBE9HqOvh5PH9i2tQWA+x6zFNkIIVZ1BeMuASDqKEwTQgBHBw4BzNrP0ojHM/X1eDx/HuuDgzF2mWXZSkqZ9hEmSZIrrfWSiF6klJu6a2zvw5HWesY53ymllt1E/EEptdBavwGYcs7XputsD45nANP9cZgkSdDFtKMoGo9Go3WhV967FqMSALCfbFg4lRLRpK3QewWeUP7CCE3vEYBdCQghVkQ0AZAHDNpSpKBAHjYlooktLHBgwjlxHAeDwWCttb79vpGxzSmK1CnAGNtmWTZvslajwDmuipyiQBWrElVcFDlVgSpHTTjnGEVcFWglcM4hRdpQoIpTYACI4/h2v9GXQgH4RPmrJSWiue03VBOcAwP1ipSaOCjway3XBYrUKAI4KlCl1cBASZEPInpwVcDj8XiO4wvpvvJkdM3Z9AAAAABJRU5ErkJggg==") no-repeat;
                                background-size: 100%;
                                transition: transform .8s;

                            }

                            .row {
                                position: relative;
                                width: 536rpx;

                                .strong {
                                    font-size: 28rpx;
                                    color: #333;
                                }

                                .txt {
                                    font-size: 28rpx;
                                    color: #666666;
                                }
                            }

                            &.more {
                                overflow: inherit;
                                display: block;
                                height: 100%;

                                .more-btn {
                                    transform: rotate(180deg);
                                }
                            }
                        }
                    }
                }
            }
        }
    }
.lime-echart {
  z-index: 10 !important;
}	
</style>