<template>
    <view class="interest-report-wrap">
        <view class="head-bar" :style="{'margin-top': barHeight + 5 + 'px'}">
            <view class="go-back" @click="goback"></view>
            <text>我的报告</text>
        </view>
        <view class="content">
			<contrastBox  :testType="testType" :userId="userId"  :recordId="recordId" @compareParameters="opCompareParameters"></contrastBox>
			<view class="section-block">
				<testHead  :reportTitle="'工作价值观测评报告'" :testTime="testDate" :isIntroduce="false" :isVideo="true" :videoUrl="videoUrl" :introduceUrl="introduceUrl" ></testHead>
                <view class="s-line"></view>
                <view class="title">
                    <view class="name">工作价值类型得分</view>
                </view>
               <view  class="chat-wrap">
                    <view class="row-item">
						<l-echart ref="chartRef" class="charts-box"></l-echart>
                     </view>
				</view>
                <view class="title">
                    <view class="name">高分价值观及说明</view>
                </view>
                <view class="desc-item-wrap" v-if="tableData.length > 0">
                    <view class="desc-item" v-show="item.Desc != undefined && item.Desc != ''"  v-for="(item,index) in tableData"  :key="index">
                        <view class="name-block">
                            <view class="name">{{item.Name}}
                                <view class="label">高分</view>
                            </view>
                            <view class="desc">{{item.Desc}}</view>
                        </view>
                    </view>
                </view>
				<view class="desc-item-wrap" v-else>
					暂无高分价值观
				</view>
            </view>
        </view>
    </view>
</template>

<script>
	import testHead from "@/packageB/pages/testReport/components/testHead.vue"
	import contrastBox from "@/packageB/pages/testReport/components/contrastBox.vue"
    import api from "@/apiB/testManage.js";
    import theme from '@/uni_modules/lime-echart/static/walden.json';
	const echarts = require('../../../uni_modules/lime-echart/static/echarts.min.js');
    // import * as echarts from '@/uni_modules/lime-echart/static/echarts.min';
    // // 注册主题
    // echarts.registerTheme('theme', theme);
    export default {
		components: {
			contrastBox,
			testHead
		},
        data() {
            return {
                barHeight: wx.getWindowInfo().statusBarHeight,
				showVideo: false,
				showIntroduce: false, // 测评介绍
                videoUrl: "http://2-video.oss-cn-shenzhen.aliyuncs.com/2023%E5%B9%B4%E8%A7%86%E9%A2%91/%E5%88%9D%E4%B8%AD%E8%AF%BE%E7%A8%8B%E8%B5%84%E6%BA%90/%E5%B7%A5%E4%BD%9C%E4%BB%B7%E5%80%BC%E8%A7%82%E8%A7%A3%E8%AF%BB1.16%E4%BF%AE%E6%94%B92.mp4",
                introduceUrl: "https://51xuanxiao.oss-cn-hangzhou.aliyuncs.com/Resource/xcx_sygh/report/workValuesTestReport.png",
                testDate: "",
                workValuesNameList: [
                    '利他主义',
                    '美的追求',
                    '创造发明',
                    '智力激发',
                    '成就感',
                    '独立自主',
                    '声望地位',
                    '管理权力',
                    '经济报酬',
                    '安全稳定',
                    '工作环境',
                    '上司关系',
                    '同事关系',
                    '生活方式的选择',
                    '多样变化'
                ], //
                tableData: [],
				// 柱状图
				barOption: {
				    title: {
				        text: ''
				    },
				    legend: {
				        show: true,
				    },
				    label: {
				        show: true,
				        position: 'right'
				    },
				    tooltip: {
				        formatter: function(params) {
				            let result = params.seriesName + '<br>' + params.name + '： ' + params.data +
				                '分' // 获取横轴对应的数据作为提示信息的标题
				            return result
				        }
				    },
				    xAxis: {
				        type: 'value',
				        max: 12,
				    },
				    yAxis: {
				        inverse: true,
				        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'
				        // }
				    ]
				},
				result: [],
				
				testType: "17",
				userId: 0,
                currentYear: 0,
                currentTerm: 0,
				recordId: 0,
				labelName1: "",//表值1
				labelName2: "",//表值2
				params: {},//筛选参数
            }
        },
        onLoad(e) {
            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: {
			//对比参数
			opCompareParameters(value){
				this.labelName1 = value.name1;
				this.labelName2 = value.name2;
				this.params = value;
				this.getValue()
			},
            //获取报告结果
            getTestRecord(currentYear, currentTerm,recordId) {
                uni.showLoading({
                    title: "加载中"
                })
                api.workValuesResult(currentYear, currentTerm,recordId).then(res => {
                    uni.hideLoading();
                    if (res.Result === 1) {
                        if (res.Data.TestResult != null) {
                            let data = res.Data;
                            this.testDate = data.TestDate;
                            let descList = data.Desc;
                            let scoreList = data.TestResult;
                            this.result = scoreList;
							
                            this.currentYear = data.Year;
                            this.currentTerm = data.Term;
							this.recordId = data.RecordId;
							this.userId = data.UserId;
							this.labelName1 = data.TestDate;
							
                            this.workValuesNameList.forEach((item, index) => {
                                scoreList.forEach(ritem => {
                                    if (index + 1 == Number(ritem.Title)) {
                                        ritem.Name = item;
                                    }
                                })
                            })
                            scoreList.forEach(item => {
                                item.Desc = "";
                                descList.forEach(ritem => {
                                    if (Number(item.Title) == ritem.TitleId) {
                                        item.Desc = ritem.Title;
                                    }
                                })
                            })
							console.log(scoreList)
                            this.tableData = scoreList;
							this.initChart();
                        }
                    } else {
                        uni.showToast({
                            title: res.Message,
                            icon: "none"
                        })
                    }
                })
            },
            //更改对比图
            getValue() {
                //群体维度对比
                api.getWorkValuesTestGroupResult(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 initChart() {
			    let arr = [];
			    this.result.forEach(item => {
			        arr.push(item.Score)
			    })
			    this.barOption.series = {
			        name: this.labelName1,
			        data: arr,
			        type: "bar",
				    barWidth: 10
			    }
			    // chart 图表实例不能存在data里
			    const chart = await this.$refs.chartRef.init(echarts, "theme");
			    chart.clear();
			    chart.setOption(this.barOption)
			},
			//时间维度/群体维度对比
            async doChart(DATA) {
                let arr = [];
                this.result.forEach(item => {
                    arr.push(item.Score)
                })
                this.barOption.series = [{
                        name: this.labelName1,
                        data: arr,
                        type: 'bar',
						barWidth: 10
                    },
                    {
                        name: this.labelName2,
                        data: DATA,
                        type: 'bar',
						barWidth: 10
                    },
                ];
                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%;
    }

    .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;
            }
        }
        .content {
            padding: 35rpx 20rpx 220rpx;
            .section-block {
                padding: 40rpx 30rpx 40rpx;
                background: #fff;
                border-radius: 12rpx;
                margin-bottom: 20rpx;
                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;
                        }
                    }

                    .tip-icon {
                        margin-left: 10rpx;
                        width: 56rpx;
                        height: 56rpx;
                        background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAMAAABF0y+mAAAAM1BMVEUAAADMzMzPz8/Hx8fLy8vMzMzNzc3Nzc3KysrMzMzMzMzMzMzKysrLy8vMzMzMzMzMzMxTlLHLAAAAEHRSTlMA3xAgQFCPfzCfr+9gcL/P9mj/kgAAAQFJREFUKM9tUtsWwyAIUwS1um78/9fOFPB0l7woEAIi6QZikV7SH5Sa9UJu5Tt06A0H3WM9I2U0lnPgOjltPBDqYTHCj20to9Kl0HFQXQ7n0lSV8OkTirKUrK1j5SGW1QDv4h1Xo4sFsabaiNrKdWYx59Vb1ozjpdNTqjsBWCZIwQVlpMsygWmZaYDUVU9ruievnFJUE3uHo+3ZMfwCxm1Uh90siaHjINVX3E/VDsdwO1SioWI9O0oOXrgrKA6Ki1Xz8UWdabwYXwweeBrdB++VVCVewtHZdLW+P5tKio/ljzXZVvE1CfBEeJzCbeRYqA36XM2fzW2x1PX/0ncRppvjDWNoDuKTMIXYAAAAAElFTkSuQmCC") center no-repeat;
                        background-size: 50%;
                        border-radius: 50%;
                    }
                }

                .chat-wrap {
                    position: relative;
                    z-index: 1;
                    .row-item {
                        display: flex;
                        align-items: center;

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

                    }
                }
                .desc-item-wrap {
                    .desc-item {
                        margin-bottom: 30rpx;

                        .name-block {
                            width: 590rpx;
                            padding: 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 {
                                    width: 60rpx;
                                    height: 36rpx;
                                    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;
                            }
                        }
                    }
                }
            }
        }


    }
</style>
<style>
.lime-echart__canvas {
  position: absolute;
  top: 0; /* 根据需要调整 */
  left: 0; /* 根据需要调整 */
  z-index: 1 !important; /* 根据需要调整 */
}
	
</style>