<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="text-desc-wrap" v-if="!isNoHight">
                    <view class="row" v-if="scoreDetail[0].Leavel >= 4">
                        在群体中充满能量和快乐，<text class="strong">外向、热情</text>
                    </view>
                    <view class="row" v-if="scoreDetail[1].Leavel >= 4">
                        有说服力和影响力，争做团体中的<text class="strong">领导者</text>
                    </view>
                    <view class="row" v-if="scoreDetail[2].Leavel >= 4">
                        <text class="strong">善于交际</text>，广交朋友，朋友圈庞大
                    </view>
                    <view class="row" v-if="scoreDetail[3].Leavel >= 4">
                        <text class="strong">灵活变通</text>，参考多方意见再做出自己的决定
                    </view>
                    <view class="row" v-if="scoreDetail[4].Leavel >= 4">
                        逆来顺受，<text class="strong">几乎不与人发生冲突</text>，脾气温和
                    </view>
                    <view class="row" v-if="scoreDetail[5].Leavel >= 4">
                        与人为善，沟通能力强，<text class="strong">易于亲近</text>
                    </view>
                    <view class="row" v-if="scoreDetail[6].Leavel >= 4">
                        做事尽职尽责，竭尽全力，未完成前<text class="strong">决不放弃</text>
                    </view>
                    <view class="row" v-if="scoreDetail[7].Leavel >= 4">
                        <text class="strong">严格遵守计划</text>，生活规律有秩序
                    </view>
                    <view class="row" v-if="scoreDetail[8].Leavel >= 4">
                        需要长时间的思考和较多的信息才能做出决策，<text class="strong">犹豫不果断</text></view>
                    <view class="row" v-if="scoreDetail[9].Leavel >= 4">
                        追求新鲜事物，<text class="strong">愿意接受挑战与冒险</text>
                    </view>
                    <view class="row" v-if="scoreDetail[10].Leavel >= 4">
                        <text class="strong">随机应变</text>，不拘泥规则限制，对生活求新、求变
                    </view>
                    <view class="row" v-if="scoreDetail[11].Leavel >= 4">
                        <text class="strong">情感丰富</text>，同理心强，艺术表现力和感受力较好
                    </view>
                </view>
                <view class="text-desc-wrap" v-else>
                    <view class="empty-tip">
                        无强项特质
                    </view>
                </view>
                <view class="title">
                    <view class="name">普通特质</view>
                </view>
                <view class="text-desc-wrap" v-if="!isNoMid">
                    <view class="row" v-if="scoreDetail[0].Leavel == 3">
                        在群体中<text class="strong">收放自如</text>，可以较好的适应
                    </view>
                    <view class="row" v-if="scoreDetail[1].Leavel == 3">
                        具有一定的领导力，但<text class="strong">不会争做团队领头人</text>
                    </view>
                    <view class="row" v-if="scoreDetail[2].Leavel == 3">
                        有自己的朋友圈，在交际中<text class="strong">不会过于热情</text>
                    </view>
                    <view class="row" v-if="scoreDetail[3].Leavel == 3">
                        墨守成规，<text class="strong">做事不够灵活</text>，可以多参考他人建议
                    </view>
                    <view class="row" v-if="scoreDetail[4].Leavel == 3">个性温和，但遇事敢于挑战权威，<text
                            class="strong">不会一味退让</text>
                    </view>
                    <view class="row" v-if="scoreDetail[5].Leavel == 3">
                        与人交往过程中可以<text class="strong">恰当的展现倾听和交流技巧</text>
                    </view>
                    <view class="row" v-if="scoreDetail[6].Leavel == 3">
                        <text class="strong">认真负责</text>，但偶尔会
                        <text class="strong">虎头蛇尾</text>，中途放弃
                    </view>

                    <view class="row" v-if="scoreDetail[7].Leavel == 3">
                        执行计划有一定<text class="strong">弹性</text>
                    </view>

                    <view class="row" v-if="scoreDetail[8].Leavel == 3">
                        做决定前会谨慎思考，但<text class="strong">不会长时间犹豫不决</text>
                    </view>
                    <view class="row" v-if="scoreDetail[9].Leavel == 3">
                        对新事物充满好奇，<text class="strong">但没有信心与勇气接受新的挑战</text>
                    </view>
                    <view class="row" v-if="scoreDetail[10].Leavel == 3">
                        <text class="strong">稳重</text>，难以突破自己；但面对新变化，<text class="strong">也会迎难而上去接受</text>
                    </view>
                    <view class="row" v-if="scoreDetail[11].Leavel == 3">
                        <text class="strong">感性与理智兼具</text>
                    </view>
                </view>
                <view class="text-desc-wrap" v-else>
                    <view class="empty-tip">
                        无普通特质
                    </view>
                </view>
                <view class="title">
                    <view class="name">弱项特质</view>
                </view>
                <view class="text-desc-wrap" v-if="!isNoLow">
                    <view class="row" v-if="scoreDetail[0].Leavel < 3">
                        在群体活动中表现<text class="strong">沉默、孤独</text>
                    </view>
                    <view class="row" v-if="scoreDetail[1].Leavel < 3">
                        不会在团体中争做领导者，<text class="strong">避免在集体中出风头</text>
                    </view>
                    <view class="row" v-if="scoreDetail[2].Leavel < 3">
                        冷漠，<text class="strong">不善交际</text>，朋友圈狭窄
                    </view>
                    <view class="row" v-if="scoreDetail[3].Leavel < 3">
                        <text class="strong">固执已见</text>，拒绝他人介入自己的事情
                    </view>
                    <view class="row" v-if="scoreDetail[4].Leavel < 3">遇到不满的人和，<text class="strong">事敢于抗争</text>针锋相对
                    </view>
                    <view class="row" v-if="scoreDetail[5].Leavel < 3">缄默冷淡，<text class="strong">不易亲近</text>
                    </view>
                    <view class="row" v-if="scoreDetail[6].Leavel < 3">
                        不够认真专注，做事<text class="strong">拖延</text>
                    </view>
                    <view class="row" v-if="scoreDetail[7].Leavel < 3">
                        <text class="strong">率性而为</text>，不喜欢按照计划规律生活
                    </view>
                    <view class="row" v-if="scoreDetail[8].Leavel < 3">
                        <text class="strong">做事果断</text>，不需要思考很久就可以行动
                    </view>
                    <view class="row" v-if="scoreDetail[9].Leavel < 3">
                        不愿接受过大改变，<text class="strong">墨守成规</text>
                    </view>
                    <view class="row" v-if="scoreDetail[10].Leavel < 3">享受平稳、安逸的生活，<text class="strong">不要有过多变化</text>
                    </view>
                    <view class="row" v-if="scoreDetail[11].Leavel < 3">
                        理性、现实，对情绪或情感<text class="strong">较不敏感</text>，难以同理他人
                    </view>
                </view>
                <view class="text-desc-wrap" v-else>
                    <view class="empty-tip">
                        无弱项特质
                    </view>
                </view>
                <view  class="chat-wrap blue-bg" style="margin-bottom:40rpx;">
                    <view class="chat-title">
                        综合特质等级侧面图
                    </view>
                        <view class="row-item"><l-echart ref="charts1" class="charts-box"></l-echart>
                    </view>
                </view>
                <view class="chat-tip">
                    <text>*强项：等级4-5</text>
                    <text>普通：等级3</text>
                    <text>弱项：等级1-2</text>
                </view>
            </view>
            <view class="section-block" >
                <view class="title">
                    <view class="name">分特质解释说明</view>
                </view>
                <view class="score-item blue">
                    <view class="row">
                        <text class="name">{{scoreSummary1.Name}}</text>
                        <view class="level-label">
                            等级： {{scoreSummary1.Leavel}}
                        </view>
                        <view class="score-label">
                            原始分数： {{scoreSummary1.Score}}分
                        </view>
                    </view>
                    <view class="item-desc">{{scoreSummary1.Desc}}</view>
                </view>
                <view  class="chat-wrap blue-bg">
                    <view class="chat-title">
                        内外向综合特质侧面图
                    </view>
                         <view class="row-item"><l-echart ref="charts2" class="charts-box"></l-echart>
                    </view>
                </view>
                <view class="score-item purple">
                    <view class="row">
                        <text class="name">{{scoreSummary2.Name}}</text>
                        <view class="level-label">
                            等级： {{scoreSummary2.Leavel}}
                        </view>
                        <view class="score-label">
                            原始分数： {{scoreSummary2.Score}}分
                        </view>
                    </view>
                    <view class="item-desc">{{scoreSummary2.Desc}}</view>
                </view>
                <view  class="chat-wrap purple-bg">
                    <view class="chat-title">
                        人际关系综合特质侧面图
                    </view>
                     <view class="row-item"><l-echart ref="charts3" class="charts-box"></l-echart>
                    </view>
                </view>
                <view class="score-item orange">
                    <view class="row">
                        <text class="name">{{scoreSummary3.Name}}</text>
                        <view class="level-label">
                            等级： {{scoreSummary3.Leavel}}
                        </view>
                        <view class="score-label">
                            原始分数： {{scoreSummary3.Score}}分
                        </view>
                    </view>
                    <view class="item-desc">{{scoreSummary3.Desc}}</view>
                </view>
                <view  class="chat-wrap orange-bg">
                    <view class="chat-title">
                        严谨性综合特质侧面图
                    </view>
                     <view class="row-item"><l-echart ref="charts4" class="charts-box"></l-echart>
                    </view>
                </view>
                <view class="score-item green">
                    <view class="row">
                        <text class="name">{{scoreSummary4.Name}}</text>
                        <view class="level-label">
                            等级： {{scoreSummary4.Leavel}}
                        </view>
                        <view class="score-label">
                            原始分数： {{scoreSummary4.Score}}分
                        </view>
                    </view>
                    <view class="item-desc">{{scoreSummary4.Desc}}</view>
                </view>
                <view   class="chat-wrap green-bg">
                    <view class="chat-title">
                        开放性综合特质侧面图
                    </view>
                       <view class="row-item"><l-echart ref="charts5" class="charts-box"></l-echart>
                    </view>
                </view>
            </view>
            <view class="section-block" >
                <view class="title">
                    <view class="name">与你的人格特质可能相关的专业</view>
                </view>
                <view class="job-table">
                    <view class="tr">
                        <view class="th">特质名称</view>
                        <view class="th">专业选择</view>
                    </view>
                    <view class="tr" v-if="scoreDetail[0].Leavel > 2">
                        <view class="td">乐群性</view>
                        <view class="td">
                            <view class="row">
                                <text class="strong">人文科学：</text>新闻传播学
                            </view>
                            <view class="row">
                                <text class="strong">社会科学：</text>教育学、心理学
                            </view>
                            <view class="row">
                                <text class="strong">体育：</text>体育学
                            </view>
                        </view>
                    </view>
                    <view class="tr" v-if="scoreDetail[1].Leavel > 2">
                        <view class="td">领导性</view>
                        <view class="td">
                            <view class="row">
                                <text class="strong">人文科学：</text>新闻传播学
                            </view>
                            <view class="row">
                                <text class="strong">经济管理：</text>工商管理、公共管理等
                            </view>
                            <view class="row">
                                <text class="strong">社会科学：</text>法学
                            </view>
                        </view>
                    </view>
                    <view class="tr" v-if="scoreDetail[2].Leavel > 2">
                        <view class="td">社交性</view>
                        <view class="td">
                            <view class="row">
                                <text class="strong">人文科学：</text>新闻传播学
                            </view>
                            <view class="row">
                                <text class="strong">经济管理：</text>工商管理、公共管理旅游管理等
                            </view>
                        </view>
                    </view>
                    <view class="tr" v-if="scoreDetail[9].Leavel > 2">
                        <view class="td">探究性</view>
                        <view class="td">
                            <view class="row">
                                <text class="strong">数理工程：</text>数学、物理学、统计学、计算机、电子信息、自动化、土木等
                            </view>
                            <view class="row">
                                <text class="strong">化工：</text>化学、纺织、轻工、材料等
                            </view>
                            <view class="row">
                                <text class="strong">农林牧鱼：</text>农业工程、林业工程、林学、自然保护与环境生态等
                            </view>
                            <view class="row">
                                <text class="strong">生物医药：</text>生物科学、基础医学、临床医学、口腔医学、医学药学、护理学等
                            </view>
                            <view class="row">
                                <text class="strong">地理科学：</text>地质、矿业、交通运输、海洋工程、天文等
                            </view>
                        </view>
                    </view>
                    <view class="tr" v-if="scoreDetail[10].Leavel > 2">
                        <view class="td">变通性</view>
                        <view class="td">
                            <view class="row">
                                <text class="strong">数理工程：</text>土木、建筑等
                            </view>
                            <view class="row">
                                <text class="strong">艺术设计：</text>艺术学理论、美术学、设计学等
                            </view>
                        </view>
                    </view>
                    <view class="tr" v-if="scoreDetail[11].Leavel > 2">
                        <view class="td">感觉性</view>
                        <view class="td">
                            <view class="row">
                                <text class="strong">数理工程：</text>土木、建筑等
                            </view>
                            <view class="row">
                                <text class="strong">艺术设计：</text>艺术学理论、音乐与舞蹈、戏剧与影视学、美术学、设计学等
                            </view>
                            <view class="row">
                                <text class="strong">人文科学：</text>中国语言文学、外国语言文学、新闻传播等
                            </view>
                        </view>
                    </view>
                </view>
                <view class="title">
                    <view class="name">与你的人格特质可能相关的工作领域</view>
                </view>
                <view class="job-table">
                    <view class="tr">
                        <view class="th">特质名称</view>
                        <view class="th">工作领域</view>
                    </view>
                    <view class="tr" v-if="scoreDetail[3].Leavel > 2">
                        <view class="td">客观性</view>
                        <view class="td">顾客服务 市场销售 心理咨询 教育训练</view>
                    </view>
                    <view class="tr" v-if="scoreDetail[4].Leavel > 2">
                        <view class="td">顺从性</view>
                        <view class="td">行政管理 会计稽核 军警保安 工程制造</view>
                    </view>
                    <view class="tr" v-if="scoreDetail[5].Leavel > 2">
                        <view class="td">亲和性</view>
                        <view class="td">市场销售 教育训练 顾客服务 医护社工</view>
                    </view>
                    <view class="tr" v-if="scoreDetail[6].Leavel > 2">
                        <view class="td">坚毅性</view>
                        <view class="td">设计艺术 工程制造 医学治疗 科学研究 军警保安</view>
                    </view>
                    <view class="tr" v-if="scoreDetail[7].Leavel > 2">
                        <view class="td">秩序性</view>
                        <view class="td">财务会计 工程制造 医学治疗 科学研究 档案管理</view>
                    </view>
                    <view class="tr" v-if="scoreDetail[8].Leavel > 2">
                        <view class="td">深思性</view>
                        <view class="td">文艺写作 科学研究 设计艺术 文史哲学 信息程序</view>
                    </view>
                </view>
                <view class="title" @click="showTipLayer(1)">
                    <view class="name">作答态度</view>
                    <view class="tip-icon"></view>
                </view>
                <view class="score-item blue">
                    <view class="row">
                        <text class="name">{{scoreSummary5.Name}}</text>
                        <view class="level-label">
                            {{scoreSummary5.Leavel == 1?'一致性低':'一致性高'}}
                        </view>
                        <view class="score-label">
                            原始分数： {{scoreSummary5.Score}}分
                        </view>
                    </view>
                    <view class="item-desc">{{scoreSummary5.Desc}}</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 opts from "./chartOpts.js"
    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,
                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/%E4%BA%BA%E6%A0%BC%E6%B5%8B%E8%AF%84%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/personalTestReport.png",
                layerTitile: "",
                layerDesc: "",
                scoreSummary1: {},
                scoreSummary2: {},
                scoreSummary3: {},
                scoreSummary4: {},
                scoreSummary5: {},
                scoreDetail: [], //
                isNoHight: false,
                isNoMid: false,
                isNoLow: false,
                scoreSummary: [],
                testDate: "",
                opts, //图表配置
                chartData: {
                    categories: ["内外向", "人际关系", "严谨性", "开放性"],
                    series: [{
                        name: "",
                        data: []
                    }]
                },
                chartData1: {
                    categories: ["乐群性", "领导性", "社交性"],
                    series: [{
                        name: "",
                        data: []
                    }]
                },
                chartData2: {
                    categories: ["客观性", "顺从性", "亲和性"],
                    series: [{
                        name: "",
                        data: []
                    }]
                },
                chartData3: {
                    categories: ["坚毅性", "秩序性", "深思性"],
                    series: [{
                        name: "",
                        data: []
                    }]
                },
                chartData4: {
                    categories: ["探究性", "变通性", "感觉性"],
                    series: [{
                        name: "",
                        data: []
                    }]
                },
                opts2: {},
                opts3: {},
                opts4: {},

                data1: [], //综合特质等级
                data2: [], //内外向综合
                data3: [], //人际关系综合
                data4: [], //严谨性综合
                data5: [], //开放性综合
                option1: {},
                option2: {},
                option3: {},
                option4: {},
                option5: {},
                showContrast: false,
                currentYear: 0,
                currentTerm: 0,
				
				testType: "15",
				userId: "",
				platformType: 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: {
            //报告介绍
            playIntroduce() {
				this.showIntroduce = true;
            },
            //视频介绍
            playVideo() {
				this.videoUrlVisitor = this.videoUrl;
				this.showVideo = true;
            },
            //对比参数
            opCompareParameters(value){
            	this.labelName1 = value.name1;
            	this.labelName2 = value.name2;
            	this.params = value;
            	this.getValue()
            },
			//获取报告结果
            getTestRecord(currentYear, currentTerm,recordId) {
                uni.showLoading({
                    title: "加载中"
                })
                api.personalityTestResult(currentYear, currentTerm,recordId).then(res => {
                    uni.hideLoading();
                    if (res.Result === 1) {
                        if (res.Data != null) {
							let info = res.Data.testRecord;
							this.currentYear = info.Year;
							this.currentTerm = info.Term;
							this.recordId = info.Id;
							this.userId = info.UserId;
							this.labelName1 = res.Data.TestDate;
                            this.testDate = res.Data.TestDate;
							
                            let data = JSON.parse(res.Data.testRecord.Suggestion)
                            data.ScoreSummary.forEach(item => {
                                switch (item.Type) {
                                    case 1: {
                                        item.Name = "内外向综合特质";
                                        this.scoreSummary1 = item;
                                        break;
                                    }
                                    case 2: {
                                        item.Name = "人际关系综合特质";
                                        this.scoreSummary2 = item;
                                        break;
                                    }
                                    case 3: {
                                        item.Name = "严谨性综合特质";
                                        this.scoreSummary3 = item;
                                        break;
                                    }
                                    case 4: {
                                        item.Name = "开放性综合特质";
                                        this.scoreSummary4 = item;
                                        break;
                                    }
                                    case 5: {
                                        item.Name = "一致性";
                                        this.scoreSummary5 = item;
                                        break;
                                    }
                                }
                            })
                            this.scoreSummary = data.ScoreSummary;
                            this.scoreDetail = data.ScoreDetail;
                            let hight = 0;
                            let mid = 0;
                            let low = 0;
                            data.ScoreDetail.forEach(item => {
                                if (item.Leavel < 4) {
                                    hight++
                                }
                                if (item.Leavel != 3) {
                                    mid++
                                }
                                if (item.Leavel >= 3) {
                                    low++
                                }
                            })
                            if (hight == 12) {
                                this.isNoHight = true;
                            }
                            if (mid == 12) {
                                this.isNoMid = true;
                            }
                            if (low == 12) {
                                this.isNoLow = true;
                            }
                            // 综合特质等级侧面图
                            let leavelList = [];
                            this.scoreSummary.forEach((item, index) => {
                                if (index < 4) {
                                    leavelList.push(item.Leavel)
                                }
                            })
                            this.data1 = leavelList;
                            //  内外向综合特质侧面图
                            this.data2 = [data.ScoreDetail[0].Leavel, data.ScoreDetail[1]
                                .Leavel, data.ScoreDetail[2].Leavel
                            ];
                            //  人际关系综合特质侧面图
                            this.data3 = [data.ScoreDetail[3].Leavel, data.ScoreDetail[4]
                                .Leavel, data.ScoreDetail[5].Leavel
                            ];
                            //  严谨性综合特质侧面图
                            this.data4 = [data.ScoreDetail[6].Leavel, data.ScoreDetail[7]
                                .Leavel, data.ScoreDetail[8].Leavel
                            ];
                            //  开放性综合特质侧面图
                            this.data5 = [data.ScoreDetail[9].Leavel, data.ScoreDetail[10]
                                .Leavel, data.ScoreDetail[11].Leavel
                            ];
                            this.initChart();
                        }
                    } else {
                        uni.showToast({
                            title: res.Message,
                            icon: "none"
                        })
                    }
                })
            },
			//更改对比图
			getValue() {
			    //群体维度对比
				api.getPersonTestGroupResult(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);
				    }
				})
			},
            async initChart() {
                let name = this.labelName1;
                let legend = [name];
                this.createdChart('charts1', '综合特质等级侧面图', ['内外向', '人际关系', '严谨性', '开放性'], legend, this.data1);
                this.createdChart('charts2', '内外向综合特质侧面图', ['乐群性', '领导性', '社交性'], legend, this.data2);
                this.createdChart('charts3', '人际关系综合特质侧面图', ['客观性', '顺从性', '亲和性'], legend, this.data3);
                this.createdChart('charts4', '严谨性综合特质侧面图', ['坚毅性', '秩序性', '深思性'], legend, this.data4);
                this.createdChart('charts5', '开放性综合特质侧面图', ['探究性', '变通性', '感觉性'], legend, this.data5);
            },
            //时间维度/群体维度对比
            async doChart(DATA) {
                let name1 = this.labelName1;
                let name2 = this.labelName2;
                let legend = [name1, name2];
                let data1 = [],
                    data2 = [],
                    data3 = [],
                    data4 = [],
                    data5 = [];
                if (DATA.result1.data != null) {
                    data1 = DATA.result1.data;
                } else {
                    data1 = [0, 0, 0, 0];
                }
                if (DATA.result2.data != null) {
                    let dataScore = DATA.result2.data
                    data2 = [dataScore[0], dataScore[1], dataScore[2]];
                    data3 = [dataScore[3], dataScore[4], dataScore[5]];
                    data4 = [dataScore[6], dataScore[7], dataScore[8]];
                    data5 = [dataScore[9], dataScore[10], dataScore[11]];
                } else {
                    data2 = [0, 0, 0];
                    data3 = [0, 0, 0];
                    data4 = [0, 0, 0];
                    data5 = [0, 0, 0];
                }

                this.createdChart('charts1', '综合特质等级侧面图', ['内外向', '人际关系', '严谨性', '开放性'], legend, this.data1, data1);
                this.createdChart('charts2', '内外向综合特质侧面图', ['乐群性', '领导性', '社交性'], legend, this.data2, data2);
                this.createdChart('charts3', '人际关系综合特质侧面图', ['客观性', '顺从性', '亲和性'], legend, this.data3, data3);
                this.createdChart('charts4', '严谨性综合特质侧面图', ['坚毅性', '秩序性', '深思性'], legend, this.data4, data4);
                this.createdChart('charts5', '开放性综合特质侧面图', ['探究性', '变通性', '感觉性'], legend, this.data5, data5);
            },
            //生成图表
            async createdChart(EL, TITLE, CATEGORIES, LEGEND, DATA1, DATA2) {
                let seriesDataAll = [{
                    name: LEGEND[0],
                    type: 'line',
                    data: DATA1
                }];
                if (DATA2) {
                    seriesDataAll.push({
                        name: LEGEND[1],
                        type: 'line',
                        data: DATA2
                    })
                }
                const option = {
                    tooltip: {
                        show:false,
                        trigger: 'axis'
                    },
                    label:{
                        
                       show:true,  
                    },
                    legend: {
                        // data: ['Email', 'Union Ads']
                        show: true,
                        data: LEGEND,
                        right: 4,
                        top: 4
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },

                    xAxis: {
                        type: 'category',
                        data: CATEGORIES
                    },
                    yAxis: {
                        type: 'value',
                        max: 5
                    },
                    series: seriesDataAll
                }

                // chart 图表实例不能存在data里
                if (EL == "charts1") {
                    this.option1 = option;
                    const chart = await this.$refs.charts1.init(echarts, "theme");
                    chart.clear();
                    chart.setOption(option)
                } else if (EL == "charts2") {
                    this.option2 = option;
                    const chart = await this.$refs.charts2.init(echarts, "theme");
                    chart.clear();
                    chart.setOption( this.option2)
                } else if (EL == "charts3") {
                    this.option3 = option;
                    const chart = await this.$refs.charts3.init(echarts, "theme");
                    chart.clear();
                    chart.setOption(this.option3)
                } else if (EL == "charts4") {
                    this.option4 = option;
                    const chart = await this.$refs.charts4.init(echarts, "theme");
                    chart.clear();
                    chart.setOption(this.option4)
                } else if (EL == "charts5") {
                    this.option5 = option;
                    const chart = await this.$refs.charts5.init(echarts, "theme");
                    chart.clear();
                    chart.setOption( this.option5)
                }
            },
            goback() {
                uni.navigateBack(-1);
            },
            showTipLayer(INDEX) {
                switch (INDEX) {
                    case 1: {
                        this.layerTitile = "作答态度";
                        this.layerDesc =
                            "· 一致性分数代表了你的作答态度，也代表了测评是否更具有参考价值。<br>· 一致性分数越高代表你作答时越诚实认真，测评的结果也更能真实描述你的个性特质。";
                        break;
                    }
                }
                this.showTip = true;
            },
        }
    }
</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;
            }
        }
    }


    .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: 35rpx;

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

                .text-desc-wrap {
                    padding-bottom: 40rpx;

                    .row {
                        position: relative;
                        font-size: 28rpx;
                        color: #666666;
                        margin-bottom: 10rpx;
                        padding-left: 16rpx;

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

                        .strong {
                            color: #1677ff;
                            font-weight: 600;
                        }
                    }

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

                .score-item {
                    width: 606rpx;
                    padding: 25rpx 20rpx;
                    background: #F2F9FF;
                    border-radius: 12rpx 12rpx 12rpx 12rpx;
                    border: 2rpx solid #E7F4FD;
                    background: #F2F9FF;
                    margin-bottom: 46rpx;

                    &.blue {
                        border: 2rpx solid #E7F4FD;
                        background: #F2F9FF;
                    }

                    &.purple {
                        border: 2rpx solid #ECEEFD;
                        background: #F7F7FF;
                    }

                    &.orange {
                        border: 2rpx solid #FDF1EC;
                        background: #FFFBF7;
                    }

                    &.green {
                        border: 2rpx solid #A5F3C9;
                        background: #F4FFF9;
                    }

                    .row {
                        display: flex;
                        align-items: center;
                        margin-bottom: 10rpx;

                        .name {
                            font-size: 32rpx;
                            color: #000000;
                            margin-right: 8rpx;
                        }

                        .level-label {
                            width: 96rpx;
                            height: 36rpx;
                            background: #1677ff;
                            border-radius: 8rpx 8rpx 8rpx 8rpx;
                            text-align: center;
                            line-height: 36rpx;
                            font-size: 20rpx;
                            color: #FFFFFF;
                            margin-right: 8rpx;
                        }

                        .score-label {
                            padding: 0 10rpx;
                            height: 36rpx;
                            background: #5A73FF;
                            border-radius: 8rpx 8rpx 8rpx 8rpx;
                            text-align: center;
                            line-height: 36rpx;
                            font-size: 20rpx;
                            color: #FFFFFF;
                        }
                    }

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

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

                    .tr {
                        display: flex;

                        .th {
                            width: 180rpx;
                            height: 72rpx;
                            font-size: 28rpx;
                            color: #666666;
                            text-align: center;
                            line-height: 72rpx;
                            background: #f6f9fe;
                            font-weight: 600;
                            border-right: 2rpx solid #EEF2FD;
                            border-bottom: 2rpx solid #EEF2FD;

                            &:nth-child(2) {
                                width: 450rpx;
                            }
                        }

                        .td {
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            justify-content: center;
                            width: 180rpx;
                            min-height: 80rpx;
                            font-size: 28rpx;
                            line-height: 42rpx;
                            color: #666666;
                            font-weight: 600;
                            border-right: 2rpx solid #EEF2FD;
                            border-bottom: 2rpx solid #EEF2FD;

                            &:nth-child(2) {
                                width: 410rpx;
                                padding: 20rpx 20rpx;
                                color: #3095F9;
                            }

                            .row {
                                display: block;
                                width: 100%;

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

                .chat-wrap {
                    width: 622rpx;
                    min-height: 452rpx;
                    border-radius: 12rpx;
                    margin: 0 14rpx;
                    box-shadow: 0 0 1rpx 14rpx #BBDCFF;

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

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

                    }

                    .chat {
                        height: 384rpx;
                    }

                    &.blue-bg {
                        box-shadow: 0 0 1rpx 14rpx #BBDCFF;
                        margin-bottom: 44rpx;
                    }

                    &.purple-bg {
                        box-shadow: 0 0 1rpx 14rpx #C7C7FF;
                        margin-bottom: 44rpx;
                    }

                    &.orange-bg {
                        box-shadow: 0 0 1rpx 14rpx #FFD4A8;
                        margin-bottom: 44rpx;
                    }

                    &.green-bg {
                        box-shadow: 0 0 1rpx 14rpx #8FDAB1;
                        margin-bottom: 44rpx;
                    }

                    .chat-title {
                        padding-top: 25rpx;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 28rpx;
                        font-weight: 600;
                        color: #000000;
                        border-radius: 12rpx 12rpx 0 0;
                    }
                }

                .chat-tip {
                    font-size: 24rpx;
                    color: #999999;

                    text {
                        margin-right: 30rpx;
                    }
                }
            }
        }
    }
</style>