<template>
    <view class="interest-report-wrap">
        <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="code-value" v-if="interestCodeList.length > 0">
                    <text class="scort" v-for="(item,index) in interestCodeList" :key="index">{{item}}</text>
                    <view class="p-code-list">
                        <view class="code-row" v-for="(item,index) in codeList" :key="index">
                            <text class="h3-code">{{item.code}}</text>
                            {{item.name}}
                        </view>
                    </view>

                </view>
                <view class="empty-desc-value" v-else>你的六个兴趣代码类型分数沒有区别，无法提供代码。建议你重新测评，或咨询老师。</view>
                <view class="code-desc" :class="showMore?'more':''" v-if="interestCodeList.length > 0 && gradeLevel>=2">
                    <view class="txt-wrap" v-if="codeDescription!=null">
                        {{codeDescription}}
                    </view>
                    <view class="more-btn" @click="showMore=!showMore"></view>
                </view>
                <view class="code-desc" v-else>
                    <view class="txt-wrap" v-if="codeDescription!=null">
                        {{interestTestRecordModel.InterestTwoCodeDesc}} 
                    </view>
                </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="score-table-wrap">
                    <view class="tr">
                        <view class="th">实用型(R)</view>
                        <view class="th">研究型(I)</view>
                        <view class="th">艺术型(A)</view>
                    </view>
                    <view class="tr">
                        <view class="td">{{interestScort.R}}分</view>
                        <view class="td">{{interestScort.I}}分</view>
                        <view class="td">{{interestScort.A}}分</view>
                    </view>
                    <view class="tr">
                        <view class="th">社会型(S)</view>
                        <view class="th">企业型(E)</view>
                        <view class="th">事务型(C)</view>
                    </view>
                    <view class="tr">
                        <view class="td">{{interestScort.S}}分</view>
                        <view class="td">{{interestScort.E}}分</view>
                        <view class="td">{{interestScort.C}}分</view>
                    </view>
                </view>
                <view class="s-line"></view>
                <view class="show-item" v-if="gradeLevel>=2">
                    <view class="title">
                        <view class="name">自我介绍</view>
                    </view>
                    <view class="h2-value">
                        {{interestTestRecordModel.SelfIntroductionCode}}
                    </view>
                </view>
                <view class="show-item" v-if="gradeLevel>=2">
                    <view class="title" @click="showTipLayer(2)">
                        <view class="name">谐和度</view>
                        <view class="tip-icon"></view>
                    </view>
                    <view class="h2-value">
                        {{interestTestRecordModel.SameCode}}
                    </view>
                    <view class="desc-value">
                        {{interestTestRecordModel.SameCode}}级，
                        <text v-if="interestTestRecordModel.SameCode===6">谐和度显示兴趣代码非常稳定与清晰。</text>
                        <text v-if="interestTestRecordModel.SameCode===5">谐和度显示兴趣代码稳定与清晰。</text>
                        <text v-if="interestTestRecordModel.SameCode===4">谐和度显示兴趣代码还算稳定与清晰。</text>
                        <text v-if="interestTestRecordModel.SameCode===3">谐和度显示兴趣代码在未来随着成长会有些变化。</text>
                        <text v-if="interestTestRecordModel.SameCode===2">谐和度显示兴趣代码在未来随着成长会改变。</text>
                        <text v-if="interestTestRecordModel.SameCode===1">谐和度显示兴趣代码在未来随着成长会改变。</text>
                        <text v-if="interestTestRecordModel.SameCode===0">谐和度显示兴趣代码在未来会有很大的改变。</text>
                    </view>
                </view>
                <view class="show-item" v-if="gradeLevel>=2">
                    <view class="title" @click="showTipLayer(1)">
                        <view class="name">区分值</view>
                        <view class="tip-icon"></view>
                    </view>
                    <view class="h2-value">
                        {{interestTestRecordModel.Discrimination}}
                    </view>
                    <view class="desc-value">
                        <text v-if="interestTestRecordModel.Discrimination<3">
                            区分值较低，兴趣六型分数很接近，分不出我对那个类型更有兴趣，建议找老师讨论，或对自己的兴趣做更多的探索</text>
                        <text v-else-if="interestTestRecordModel.Discrimination<5">区分值不高，兴趣六型分数有些差别，能知道我对那个类型较有兴趣</text>
                        <text
                            v-else-if="interestTestRecordModel.Discrimination<7">区分值适中，兴趣六型分数区分蛮明显，能知道我对那个类型较有兴趣</text>
                        <text
                            v-else-if="interestTestRecordModel.Discrimination<10">区分值高，兴趣六型分数区分明显，明显的知道我对那个类型较有兴趣</text>
                        <text
                            v-else-if="interestTestRecordModel.Discrimination<45">区分值很高，六兴趣类型区分很明显，明确的知道我对那个类型较有兴趣</text>
                        <text v-else>区分值非常高，六兴趣类型区分非常明显，非常明确知道我对那个类型较有兴趣</text>
                    </view>
                </view>
            </view>
            <view class="section-block" >
                <view class="title">
                    <view class="name">选择兴趣代码查看推荐的专业/职业</view>
                </view>
                <view class="label-wrap" v-if="interestCodeList.length > 0">
                    <view class="litem" :class="item == selCode?'on':''" v-for="(item,index) in interestCodeList"
                        :key="index" @click="changeCode(item)">
                        {{item}}
                    </view>
                </view>
                <view class="empty-desc-value" v-else>你的六个兴趣代码类型分数沒有区别，无法提供代码。建议你重新测评，或咨询老师。</view>
                <view class="title" @click="showTipLayer(3)">
                    <view class="name"><text>推荐的专业</text></view>
                    <view class="tip-icon"></view>
                </view>
				<view class="title-h3">
					普通本科专业：
				</view>
                <view class="label-wrap" v-if="showSpecialtyList.length > 0 && gradeLevel>=2">
                    <view class="job-item" v-for="(item,index) in showSpecialtyList" :key="index">
                        <view class="type">{{item.name}}</view>
                        <view class="child-wrap">
                            <text class="text" v-for="(ritem,rindex) in item.value" :key="rindex">
                                {{ritem.Name}}
                            </text>
                        </view>
                    </view>
                </view>
                <view class="label-wrap" v-if="showSpecialtyList.length > 0 &&  gradeLevel==1">
                    <view class="job-item">
                        <view class="mid-child-wrap" v-for="(item,index) in showSpecialtyList" :key="index">
                            <text class="text" v-for="(ritem,rindex) in item.value" :key="index">
                                {{ritem.Name}}
                            </text>
                        </view>
                    </view>
                </view>
                <view class="label-wrap" v-if="showSpecialtyList.length == 0">
                    <view class="null-tip">无匹配的专业学类</view>
                </view>
				<view class="title-h3">
					高职本科专业：
				</view>
				<view class="label-wrap" v-if="GZBKList.length > 0">
				    <view class="job-item" v-for="(item,index) in GZBKList" :key="index">
				        <view class="type">{{item.name}}</view>
				        <view class="child-wrap">
				            <text class="text" v-for="(ritem,rindex) in item.children" :key="rindex">
				                {{ritem.GaoZhiSpecialty}}
				            </text>
				        </view>
				    </view>
				</view>
				<view class="label-wrap" v-else>
				    <view class="null-tip">无匹配的专业学类</view>
				</view>
				<view class="title-h3">
					高职专科专业：
				</view>
				<view class="label-wrap" v-if="GZZKList.length > 0">
				    <view class="job-item" v-for="(item,index) in GZZKList" :key="index">
				        <view class="type">{{item.name}}</view>
				        <view class="child-wrap">
				            <text class="text" v-for="(ritem,rindex) in item.children" :key="rindex">
				                {{ritem.GaoZhiSpecialty}}
				            </text>
				        </view>
				    </view>
				</view>
				<view class="label-wrap" v-else>
				    <view class="null-tip">无匹配的专业学类</view>
				</view>
				<view class="title-h3" v-if="gradeLevel==1">
					中职专业：
				</view>
				<view class="label-wrap" v-if="ZZList.length > 0 && gradeLevel==1">
				    <view class="job-item" v-for="(item,index) in ZZList" :key="index">
				        <view class="type">{{item.name}}</view>
				        <view class="child-wrap">
				            <text class="text" v-for="(ritem,rindex) in item.children" :key="rindex">
				                {{ritem.GaoZhiSpecialty}}
				            </text>
				        </view>
				    </view>
				</view>
                <view class="label-wrap" v-if="ZZList.length == 0 && gradeLevel==1">
                    <view class="null-tip">无匹配的专业学类</view>
                </view>
				<view class="title" @click="showTipLayer(4)">
                    <view class="name">推荐的职业</view>
                    <view class="tip-icon"></view>
                </view>
                <view class="label-wrap" v-if="showJobList.length > 0 && gradeLevel>=2">
                    <view class="job-item" v-for="(item,index) in showJobList" :key="index">
                        <view class="type">{{item.name}}</view>
                        <view class="child-wrap">
                            <text class="text" v-for="(ritem,rindex) in item.value" :key="rindex">{{ritem.Name}}</text>
                        </view>
                    </view>
                </view>
                <view class="label-wrap" v-if="showJobList.length > 0 &&  gradeLevel==1">
                    <view class="job-item">
                        <view class="mid-child-wrap" v-for="(item,index) in showJobList" :key="index">
                            <text class="text" v-for="(ritem,rindex) in item.value" :key="rindex">
                                {{ritem.Name}}
                            </text>
                        </view>
                    </view>
                </view>
                <view class="label-wrap" v-if="showJobList.length == 0">
                    <view class="null-tip">无匹配的职业类</view>
                </view>
            </view>
        </view>
<!--        <u-modal :show="showTip" @confirm="showTip=false" @cancel="showTip=false" confirmText="我明白了">
            <view class="slot-content">
                <view class="tip-layer">
                    <view class="title">{{layerTitile}}</view>
                    <view class="desc" v-html="layerDesc"></view>
                </view>
            </view>
        </u-modal> -->
    </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 echarts from '@/packageCa/uni_modules/lime-echart/static/echarts.min';
    // // 注册主题
    // echarts.registerTheme('theme', theme);

    export default {
		components: {
			contrastBox,
			testHead
		},
        data() {
            return {
                platform: uni.getDeviceInfo().platform,
                showTip: false,
                layerTitile: "",
                layerDesc: "",
                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/%E9%AB%98%E4%B8%AD%E5%85%B4%E8%B6%A3%E6%B5%8B%E8%AF%84%E7%BB%93%E6%9E%9C%E8%A7%A3%E8%AF%BB.mp4",
                introduceUrl: "https://51xuanxiao.oss-cn-hangzhou.aliyuncs.com/Resource/xcx_sygh/report/interestTestReport.png",
                routerType: 1, //1正常入口，2活动中心
                testDate: "",
                // year: 0,
                emptyData: true,
                gradeLevel: 2,
                interestScort: {
                    R: "-",
                    I: "-",
                    A: "-",
                    S: "-",
                    E: "-",
                    C: "-"
                }, //兴趣六码
                codeList: [], //三码
                showMore: false,
                codeDescription: "", //第一个兴趣码描述
                interestCodeList: {}, //兴趣组合码
                interestTestRecordModel: {
                    InterestTwoCodeDesc: ""
                },
                selCode: "",
                perfosionalAndJobList: {}, //兴趣码对应职业专业
                showSpecialtyList: [], //显示专业内容
                showJobList: [],

                // 柱状图
                barOption: {
                    title: {
                        text: ''
                    },
                    legend: {
                        show: true,
                    },
                    label: {
                        show: true,
                        position: 'top'
                    },
                    tooltip: {},
                    xAxis: {
                        type: 'category',
                        data: ['实用型(R)', '研究型(I)', '艺术型(A)', '社会型(S)', '企业型(E)', '事务型(C)']
                    },
                    yAxis: {
                        type: 'value',
                    },
                    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'
                        // }
                    ]
                },
                //蜘蛛图
                radarOption: {
                    title: {
                        text: ''
                    },
                    legend: {
                        show: true,
                        orient: "vertical",
                        right: 0,
                    },
                    radar: {
                        radius: '60%', // 或者使用数组指定内外半径，例如：[20%, 40%]
                        splitNumber: 3,
                        axisName: {
                            color: '#555555',
                            fontSize: 14,
                        },
                        splitArea: {
                            show: false
                        },
                        indicator: [{
                                name: '实用型\n(R)',
                                max: 90,
                                min: 0,
                                axisLabel: {
                                    show: true
                                }
                            },
                            {
                                name: '研究型\n(I)',
                                max: 90,
                                min: 0
                            },
                            {
                                name: '艺术型\n(A)',
                                max: 90,
                                min: 0
                            },
                            {
                                name: '社会型\n(S)',
                                max: 90,
                                min: 0
                            },
                            {
                                name: '企业型\n(E)',
                                max: 90,
                                min: 0
                            },
                            {
                                name: '事务型\n(C)',
                                max: 90,
                                min: 0
                            },
                        ],
                    },
                     tooltip: {
                           show: false  // 关闭 tooltip 显示
                       },
                    label: {
                         show: true
                    },
                    series: [{
                        name: '',
                        type: 'radar',
                        data: [
                            // {
                            // value: [1, 2, 3, 3, 3, 2],
                            // name: '2024级'
                            // },
                            // {
                            // value: [4, 4, 4, 2, 2, 1],
                            // name: '班级'
                            // },
                        ],
                        lineStyle: {
                            width: 3
                        }
                    }]
                },
				
				interestingGZSpecialty: [],//高职本科、专科、中职专业列表
				GZBKList: [],//高职本科
				GZZKList: [], //高职专科
				ZZList: [], //中职
				
				testType: "11",
				userId: "",
				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;
           }
            if (e.routerType != undefined) {
                this.routerType = e.routerType;
            }
            if (uni.getStorageSync("CAuserInfo").user.GradeLevel == 1) {
				this.testType = "18";
				this.radarOption.radar.indicator.forEach(item=>{
					item.max = 72;
				})
                this.queryJuniorTestRecord();
				
            } else {
				this.testType = "11";
				this.getTestRecord();
            }
            this.gradeLevel = uni.getStorageSync("CAuserInfo").user.GradeLevel;
        },
        methods: {
			showConfirmInfor(){
				uni.showModal({
					title:this.layerTitile,
					content:this.layerDesc,
					confirmText:"我明白了",
					confirmColor:"#1677ff",
					showCancel:false
				})		
			},			
			// 处理高职本科，专科，中职
			getInterestingGZSpecialty(CODE){
				let list = this.interestingGZSpecialty[CODE];
				const GZBKList = [];
				const GZZKList = [];
				const ZZList = [];
				
				// 遍历数据，根据条件将对象添加到对应的列表中
				list.forEach(item => {
				    if (item.GZBKId > 0) {
				        GZBKList.push({
				            GaoZhiSpecialty: item.GaoZhiSpecialty,
				            GZBKId: item.GZBKIdStr,
				            GZBKParentName: item.GZBKParentName
				        });
				    }
				    if (item.GZZKId > 0) {
				        GZZKList.push({
				            GaoZhiSpecialty: item.GaoZhiSpecialty,
				            GZZKId: item.GZZKIdStr,
				            GZZKParentName: item.GZZKParentName
				        });
				    }
				    if (item.ZZId > 0) {
				        ZZList.push({
				            GaoZhiSpecialty: item.GaoZhiSpecialty,
				            ZZId: item.ZZIdStr,
				            ZZParentName: item.ZZParentName
				        });
				    }
				});
				const GZBKArr = GZBKList.reduce((acc, item) => {
				    const { GZBKParentName, ...rest } = item;
				    const existingCategory = acc.find(category => category.name === GZBKParentName);
				    if (existingCategory) {
				        existingCategory.children.push(rest);
				    } else {
				        acc.push({
				            name: GZBKParentName,
				            children: [rest]
				        });
				    }
				    return acc;
				}, []);
				const GZZKArr = GZZKList.reduce((acc, item) => {
				    const { GZZKParentName, ...rest } = item;
				    const existingCategory = acc.find(category => category.name === GZZKParentName);
				    if (existingCategory) {
				        existingCategory.children.push(rest);
				    } else {
				        acc.push({
				            name: GZZKParentName,
				            children: [rest]
				        });
				    }
				    return acc;
				}, []);
				const ZZArr = ZZList.reduce((acc, item) => {
				    const { ZZParentName, ...rest } = item;
				    const existingCategory = acc.find(category => category.name === ZZParentName);
				    if (existingCategory) {
				        existingCategory.children.push(rest);
				    } else {
				        acc.push({
				            name: ZZParentName,
				            children: [rest]
				        });
				    }
				    return acc;
				}, []);
				this.GZBKList = GZBKArr;
				this.GZZKList = GZZKArr;
				this.ZZList = ZZArr;
			},
            getJobSpecialty(ITEM) {
                let jobList = [];
                let specialtyList = [];
                ITEM.forEach(item => {
                    if (item.CodeType == 1) {
                        specialtyList.push(item);
                    } else if (item.CodeType == 2) {
                        jobList.push(item);
                    }
                })

                const m1 = new Map()
                specialtyList.map(item => {
                    m1.set(item.ParentName, [...(m1.get(item.ParentName) || ''), item])
                })
                let listObj1 = Object.fromEntries(m1.entries());
                let list1 = [];
                Reflect.ownKeys(listObj1).forEach(key => {
                    list1.push({
                        name: key,
                        value: listObj1[key]
                    })
                })
                const m = new Map()
                jobList.map(item => {
                    m.set(item.ParentName, [...(m.get(item.ParentName) || ''), item])
                })

                let listObj = Object.fromEntries(m.entries());
                let list = [];
                Reflect.ownKeys(listObj).forEach(key => {
                    list.push({
                        name: key,
                        value: listObj[key]
                    })
                })
                this.showJobList = list;
                this.showSpecialtyList = list1;
            },
            //对比参数
            opCompareParameters(value){
            	this.labelName1 = value.name1;
            	this.labelName2 = value.name2;
            	this.params = value;
            	this.getValue()
            },
			//获取报告结果
            getTestRecord() {
                uni.showLoading({
                    title: "加载中"
                })
                api.queryInterestTestResult(this.currentYear, this.currentTerm,this.recordId).then(res => {
                    uni.hideLoading();
                    if (res.Result === 1) {
                        if (res.Data != null) {
                            let data = res.Data;
                            this.interestScort = data.InterestScort;
                            this.testDate = data.TestDate;
                            this.currentYear = data.Year;
                            this.currentTerm = data.Term;
						
							this.recordId = data.TestRecord.Id;
							this.userId = data.TestRecord.UserId;
							this.labelName1 = data.TestDate;
							
                            this.selCode = data.InterestCodeList[0];
                            if (data.InterestCodeList[0]) {
                                let codeArr = data.InterestCodeList[0].split("");
                                let codeList = [];
                                codeArr.forEach(item => {
                                    if (item == 'R') {
                                        codeList.push({
                                            code: item,
                                            name: "实用型",
                                        })
                                    } else if (item == 'I') {
                                        codeList.push({
                                            code: item,
                                            name: "研究型",
                                        })
                                    } else if (item == 'A') {
                                        codeList.push({
                                            code: item,
                                            name: "艺术型",
                                        })
                                    } else if (item == 'S') {
                                        codeList.push({
                                            code: item,
                                            name: "社会型",
                                        })
                                    } else if (item == 'E') {
                                        codeList.push({
                                            code: item,
                                            name: "企业型",
                                        })
                                    } else if (item == 'C') {
                                        codeList.push({
                                            code: item,
                                            name: "事务型",
                                        })
                                    }
                                })
                                this.codeList = codeList;
                                data.InterestingCodeDesc.forEach(item => {
                                    if (item.Code == data.InterestCodeList[0].substring(0, 2)) {
                                        this.codeDescription = item.Description;
                                    }
                                })
                            }
                            this.interestTestRecordModel = data;
                            this.interestCodeList = data.InterestCodeList;
                            this.perfosionalAndJobList = data.InterestingPerfosionalAndJob;
                            this.getJobSpecialty(data.InterestingPerfosionalAndJob[this.selCode])
							this.interestingGZSpecialty = data.InterestingGZSpecialty;
							this.getInterestingGZSpecialty(data.InterestCodeList[0])
							this.initChart();
                            this.emptyData = false;
                        } else {
                            this.emptyData = true;
                        }
                    } else {
                        this.emptyData = true;
                        uni.showToast({
                            title: res.Message,
                            icon: "none"
                        })
                    }
                })
            },
            //获取初中报告结果
            queryJuniorTestRecord() {
                uni.showLoading({
                    title: "加载中"
                })
                api.queryJuniorTestRecord(this.currentYear, this.currentTerm,this.recordId).then(res => {
                    uni.hideLoading();
                    if (res.Result === 1) {
                        if (res.Data != null) {
                            let data = res.Data;
                            this.interestScort = {};
                            this.interestScort = data.InterestScort;
                            this.selCode = data.InterestCodeList[0];
                            this.testDate = data.TestDate;

                            this.currentYear = data.Year;
                            this.currentTerm = data.Term;
							this.recordId = data.TestRecord.Id;
							this.userId = data.TestRecord.UserId;
							this.labelName1 = data.TestDate;
                            this.initChart();
                            this.interestTestRecordModel = data;
                            this.interestCodeList = data.InterestCodeList;
                            if (data.InterestCodeList[0]) {
                                let codeArr = data.InterestCodeList[0].split("");
                                let codeList = [];
                                codeArr.forEach(item => {
                                    if (item == 'R') {
                                        codeList.push({
                                            code: item,
                                            name: "实用型",
                                        })
                                    } else if (item == 'I') {
                                        codeList.push({
                                            code: item,
                                            name: "研究型",
                                        })
                                    } else if (item == 'A') {
                                        codeList.push({
                                            code: item,
                                            name: "艺术型",
                                        })
                                    } else if (item == 'S') {
                                        codeList.push({
                                            code: item,
                                            name: "社会型",
                                        })
                                    } else if (item == 'E') {
                                        codeList.push({
                                            code: item,
                                            name: "企业型",
                                        })
                                    } else if (item == 'C') {
                                        codeList.push({
                                            code: item,
                                            name: "事务型",
                                        })
                                    }
                                })
                                this.codeList = codeList;
                            }
                            this.perfosionalAndJobList = data.InterestingPerfosionalAndJob;
							if(data.InterestingPerfosionalAndJob != null){
								this.getJobSpecialty(data.InterestingPerfosionalAndJob[this.selCode])
							}
							this.interestingGZSpecialty = data.InterestingGZSpecialty;
							this.getInterestingGZSpecialty(data.InterestCodeList[0])
                            this.emptyData = false;
                        } else {
                            this.emptyData = true;
                        }
                    } else {
                        this.emptyData = true;
                        uni.showToast({
                            title: res.Message,
                            icon: "none"
                        })
                    }
                })
            },
			//更改对比图
			getValue() {
			    //群体维度对比
				api.getInterestTestGroupResult(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.interestScort.R, this.interestScort.I, this.interestScort.A, this.interestScort.S,this.interestScort.E, this.interestScort.C];
                this.radarOption.series[0].data = [{
                    name: this.labelName,
                    value: arr,
                }]
                // chart 图表实例不能存在data里
                const chart = await this.$refs.chartRef.init(echarts, "theme");
                chart.clear();
                chart.setOption(this.radarOption)
            },
            //时间维度/群体维度对比
            async doChart(DATA) {
                let name1 = this.labelName1;
                let name2 = this.labelName2;
                let arr = [this.interestScort.R, this.interestScort.I, this.interestScort.A, this.interestScort.S,this.interestScort.E, this.interestScort.C];
                this.radarOption.series[0].data = [{
                        name: name1,
                        value: arr,
                    },
                    {
                        name: name2,
                        value: DATA,
                    },
                ];
                const chart = await this.$refs.chartRef.init(echarts, "theme");
                chart.clear();
                chart.setOption(this.radarOption)
            },
            changeCode(item) {
                this.selCode = item;
                this.getJobSpecialty(this.perfosionalAndJobList[item])
				this.getInterestingGZSpecialty(item)
            },
            goback() {
                uni.navigateBack(-1);
            },
            showTipLayer(INDEX) {
                switch (INDEX) {
                    case 1: {
                        this.layerTitile = "区分值";
                        this.layerDesc =
                            "· 区分值代表学生对于自己喜欢或不喜欢什么的清晰程度。<br>· 区分值高的学生说明他很清楚自己喜欢什么，不喜欢什么，因此他做出的选择会比较稳定，变动不会太大。<br>· 而区分值较低的学生，不太清楚自己喜欢什么、排斥什么，因此在未来的选择上常有变动。";
                        break;
                    }
                    case 2: {
                        this.layerTitile = "谐和度";
                        this.layerDesc =
                            "· 谐和度指的是自我介绍代码和测评得出的兴趣代码的一致程度，以此来推测个人兴趣代码稳定与清晰的程度。<br>· 谐和度高代表个人的兴趣代码比较稳定与清晰，而谐和度低代表该学生的兴趣代码在未来会有改变。";
                        break;
                    }
                    case 3: {
                        this.layerTitile = "推荐的专业";
                        this.layerDesc = "· 基于兴趣代码对专业库进行检索后推荐的专业。<br>· 此处列出推荐的专业，仅是具有代表性的部分专业，并非全部的专业。";
                        break;
                    }
                    case 4: {
                        this.layerTitile = "推荐的职业";
                        this.layerDesc = "· 基于兴趣代码对职业库进行检索后推荐的职业。<br>· 此处列出推荐的职业，仅是具有代表性的部分职业，并非全部的职业。";
                        break;
                    }
                }
                //this.showTip = true;
				this.showConfirmInfor();
            },
        }
    }
</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;

        .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;
                }
            }
        }

        .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;
            }
        }

        .exp-gard-btn {
            position: fixed;
            bottom: 130rpx;
            left: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 120rpx;
            width: 100%;
            background: #fff;
            z-index: 9;

            .btn {
                width: 670rpx;
                height: 88rpx;
                line-height: 88rpx;
                background: #1677ff;
                font-size: 28rpx;
                color: #fff;
                border-radius: 60rpx;
                text-align: center;
            }
        }
        .content {
            padding: 35rpx 20rpx 220rpx;

            .section-block {
                padding: 40rpx 30rpx 20rpx;
                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;
                    }
                }
                .code-value {
                    position: relative;
                    display: flex;
                    align-items: flex-end;
                    margin-bottom: 20rpx;
                    padding-top: 40rpx;
                    padding-bottom: 20rpx;

                    .scort {
                        font-weight: 600;
                        font-size: 32rpx;
                        color: #1677ff;
                        margin-right: 20rpx;

                        &:nth-child(1) {
                            font-size: 88rpx;
                            line-height: 92rpx;
                        }
                    }

                    .p-code-list {
                        position: absolute;
                        right: 0;
                        top: -70rpx;

                        .code-row {
                            font-size: 24rpx;
                            margin-bottom: 20rpx;
                            color: #666;
                            text-align: right;

                            .h3-code {
                                color: #000000;
                                font-weight: 600;
                                margin-right: 4rpx;
                            }
                        }
                    }
                }

                .code-desc {
                    position: relative;
                    margin-bottom: 40rpx;

                    .txt-wrap {
                        width: 536rpx;
                        height: 84rpx;
                        font-size: 28rpx;
                        color: #666666;
                        line-height: 40rpx;
                        transition: all 1.5s;
                        overflow: hidden;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                    }

                    .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;

                    }

                    &.more {
                        .txt-wrap {
                            overflow: inherit;
                            height: initial;
                            -webkit-line-clamp: 100;
                        }

                        .more-btn {
                            transform: rotate(180deg);
                        }
                    }
                }

                .chat-wrap {
                    position: relative;
                    // padding: 15rpx 0 0;
                    // margin: 30rpx 0 54rpx;
                    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;
                        justify-items: center;
                        justify-content: center;

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

                    }
                }

                .empty-desc-value {
                    font-size: 28rpx;
                    color: #333;
                    padding: 20rpx 0;
                }

                .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%;
                    }
                }
				.title-h3 {
					font-weight: 600;
					font-size: 28rpx;
					color: #000000;
					margin-bottom: 25rpx;
				}

                .label-wrap {
                    display: flex;
                    flex-wrap: wrap;
                    padding-bottom: 20rpx;

                    .null-tip {
                        font-size: 28rpx;
                        color: #000;
                        margin-bottom: 10rpx;
                    }

                    .litem {
                        width: 88rpx;
                        height: 72rpx;
                        text-align: center;
                        line-height: 72rpx;
                        background: #F3F4F6;
                        margin-right: 20rpx;
                        border-radius: 8rpx;
                        font-size: 28rpx;
                        color: #000000;

                        &:nth-child(6) {
                            margin-right: 0;
                        }

                        &.on {
                            color: #1677ff;
                            font-weight: 600;
                            background: #EDF6FF;
                        }
                    }

                    .job-item {
                        margin-bottom: 15rpx;
                        width: 100%;

                        .type {
                            display: flex;
                            align-items: center;
                            font-size: 28rpx;
                            font-weight: 600;
                            color: #1677ff;
                            margin-bottom: 25rpx;

                            &:before {
                                content: "";
                                display: block;
                                width: 6rpx;
                                height: 6rpx;
                                background: #1677ff;
                                border-radius: 50%;
                                margin-right: 10rpx;
                            }
                        }

                        .child-wrap {
                            display: flex;
                            flex-wrap: wrap;

                            .text {
                                padding: 0 25rpx;
                                height: 72rpx;
                                line-height: 72rpx;
                                margin: 0 20rpx 25rpx 0;
                                background: #F3F4F6;
                                border-radius: 8rpx;
                                font-size: 28rpx;
                                color: #000000;
                            }
                        }

                        .mid-child-wrap {
                            display: inline-block;

                            .text {
                                display: inline-block;
                                padding: 0 25rpx;
                                height: 72rpx;
                                line-height: 72rpx;
                                margin: 0 20rpx 25rpx 0;
                                background: #F3F4F6;
                                border-radius: 8rpx;
                                font-size: 28rpx;
                                color: #000000;
                            }
                        }
                    }
                }

                .score-table-wrap {
                    border-left: 2rpx solid #EEF2FD;
                    border-top: 2rpx solid #EEF2FD;
                    border-right: 2rpx solid #EEF2FD;
                    border-radius: 4rpx;
                    width: 588rpx;
                    margin: 0 auto 50rpx;

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

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

                        .td {
                            width: 200rpx;
                            height: 72rpx;
                            font-size: 28rpx;
                            color: #1677ff;
                            text-align: center;
                            line-height: 72rpx;
                        }
                    }
                }

                .show-item {
                    .h2-value {
                        font-weight: 600;
                        font-size: 36rpx;
                        color: #1677ff;
                        margin-bottom: 32rpx;
                    }

                    .desc-value {
                        font-size: 28rpx;
                        color: #666666;
                        line-height: 40rpx;
                        margin-bottom: 35rpx;
                    }
                }
            }
        }
    }
</style>