<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="false" :videoUrl="videoUrl" :introduceUrl="introduceUrl" :introduceUrl2="introduceUrl2"></testHead>
                <view class="s-line"></view>
                <view class="title">
                    <view class="name">能力强</view>
                </view>
                <view class="code-value">
                    <text class="scort" v-text="advantage!=''?advantage:'无'"></text>
                </view>
                <view class="title">
                    <view class="name">能力中</view>
                </view>
                <view class="code-value">
                    <text class="scort" v-text="mid!=''?mid:'无'"></text>
                </view>
                <view class="title">
                    <view class="name">待加强</view>
                </view>
                <view class="code-value">
                    <text class="scort" v-text="low!=''?low:'无'"></text>
                </view>
                <view  class="chat-wrap blue-bg" style="margin-bottom:68rpx;">
                    <view class="chat-title">
                        语文相关能力得分
                    </view>
                     <view class="row-item"><l-echart ref="charts1" class="charts-box"></l-echart>
                    </view>
                </view>
                <view  class="chat-wrap purple-bg" style="margin-bottom:68rpx;">
                    <view class="chat-title">
                        数学相关能力得分
                    </view>
                   <view class="row-item"><l-echart ref="charts2" class="charts-box"></l-echart>
                    </view>
                </view>
                <view  class="chat-wrap orange-bg" style="margin-bottom:68rpx;">
                    <view class="chat-title">
                        科技相关能力得分
                    </view>
                   <view class="row-item"><l-echart ref="charts3" class="charts-box"></l-echart>
                    </view>
                </view>
                <view  class="chat-wrap green-bg" style="margin-bottom:68rpx;">
                    <view class="chat-title">
                        资讯相关能力得分
                    </view>
                   <view class="row-item"><l-echart ref="charts4" class="charts-box"></l-echart>
                    </view>
                </view>
                <view class="chat-wrap blue-bg" style="margin-bottom:68rpx;">
                    <view class="chat-title">
                        人际相关能力得分
                    </view>
                   <view class="row-item"><l-echart ref="charts5" class="charts-box"></l-echart>
                    </view>
                </view>
                <view  class="chat-wrap purple-bg" style="margin-bottom:68rpx;">
                    <view class="chat-title">
                        美感相关能力得分
                    </view>
                                       
                   <view class="row-item"><l-echart ref="charts6" class="charts-box"></l-echart>
                    </view>
                </view>
                <view class="chat-wrap orange-bg" style="margin-bottom:68rpx;">
                    <view class="chat-title">
                        自然相关能力得分
                    </view>
                   <view class="row-item"><l-echart ref="charts7" class="charts-box"></l-echart>
                    </view>
                </view>
                <view  class="chat-wrap green-bg">
                    <view class="chat-title">
                        艺能相关能力得分
                    </view>
                   <view class="row-item"><l-echart ref="charts8" class="charts-box"></l-echart>
                    </view>
                </view>
            </view>
            <view class="section-block" >
                <view class="title">
                    <view class="name">提升途径</view>
                </view>
                <view class="desc-item-wrap">
                    <view class="desc-item" v-for="(item,index) in wayData" :key="index">
                        <view class="name-block">
                            <view class="name">{{item.Name}}</view>
                            <view class="desc">{{item.Point}}</view>
                        </view>

                        <view class="list">
                            <view class="row">
                                <text class="strong">提升途径：</text>
                                <text class="txt">{{item.Desc}}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
	import testHead from "@/packageCa/testReport/components/testHead.vue"
	import contrastBox from "@/packageCa/testReport/components/contrastBox.vue"
    import api from "@/packageCa/apiCa/testManage.js"
    import wayData from "./multipleAbilityData.json";
    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,
				introduceUrl: "https://51xuanxiao.oss-cn-hangzhou.aliyuncs.com/Resource/xcx_sygh/report/multipleAbilityTestReport-1.png",
				introduceUrl2: "https://51xuanxiao.oss-cn-hangzhou.aliyuncs.com/Resource/xcx_sygh/report/multipleAbilityTestReport-2.png",
                videoUrl: "http://2-video.oss-cn-shenzhen.aliyuncs.com/2023%E5%B9%B4%E8%A7%86%E9%A2%91/%E5%88%9D%E4%B8%AD%E8%AF%BE%E7%A8%8B%E8%B5%84%E6%BA%90/%E5%A4%9A%E5%85%83%E6%99%BA%E8%83%BD%E6%B5%8B%E8%AF%84%E8%A7%A3%E8%AF%BB1.16%E4%BF%AE%E6%94%B92.mp4",
                testDate: "",
                id: "",
                wayData,
                advantage: '',
                mid: '',
                low: "",

                chartData1: {
                    categories: ["外语能力", "写作表达", "口语表达", "口语辨识", "阅读理解"],
                    series: [{
                        name: "",
                        data: []
                    }]
                },
                chartData2: {
                    categories: ["数学推理", "逻辑推理", "计算能力"],
                    series: [{
                        name: "",
                        data: []
                    }]
                },
                chartData3: {
                    categories: ["近观细察", "操作控制", "科学能力", "机械推理", "空间定向"],
                    series: [{
                        name: "",
                        data: []
                    }]
                },
                chartData4: {
                    categories: ["排序分类", "信息运用", "程序设计"],
                    series: [{
                        name: "",
                        data: []
                    }]
                },
                chartData5: {
                    categories: ["教学培训", "社会觉察", "合作协调", "说服推广", "助人服务"],
                    series: [{
                        name: "",
                        data: []
                    }]
                },
                chartData6: {
                    categories: ["创作力", "绘图设计", "美感鉴赏"],
                    series: [{
                        name: "",
                        data: []
                    }]
                },
                chartData7: {
                    categories: ["养育照护", "自然观察"],
                    series: [{
                        name: "",
                        data: []
                    }]
                },
                chartData8: {
                    categories: ["肢体协调", "音乐能力", "表演能力"],
                    series: [{
                        name: "",
                        data: []
                    }]
                },
                opts: {
                    color: ["#1677ff"],
                    padding: [10, 0, 0, 0],
                    enableScroll: false,
                    xAxis: {
                        disableGrid: true,
                        axisLineColor: "#EEEEEE",
                        fontSize: 12,
                    },
                    legend: {
                        show: false,
                    },
                    yAxis: {
                        gridType: "dash",
                        dashLength: 2,
                        showTitle: true,
                        gridColor: "#EEEEEE",
                        splitNumber: 4,
                        data: [{
                            max: 12,
                            min: 0,
                            axisLine: false,
                            title: "等级"
                        }]
                    },
                    extra: {
                        line: {
                            type: "straight",
                            width: 3,
                            activeType: "hollow"
                        }
                    }
                }, //图表配置
                opts2: {},
                opts3: {},
                opts4: {},

                result: [],
                data1: [], //初始数据1
                data2: [],
                data3: [],
                data4: [],
                data5: [],
                data6: [],
                data7: [],
                data8: [],
                option1: {},
                option2: {},
                option3: {},
                option4: {},
                option5: {},
                option6: {},
                option7: {},
                option8: {},
                showIntroduce: false, // 测评介绍
				
				testType: "-27",
				userId: 0,
				currentYear: 0,
				currentTerm: 0,
				recordId: 0,
				labelName1: "",//表值1
				labelName2: "",//表值2
            }
        },
        onLoad(e) {
            this.id = e.id;
            if (e.year != null) {
                this.currentYear = e.year;
            }
            if (e.term != null) {
                this.currentTerm = e.term;
            }
            if (e.recordId != null) {
                this.recordId = e.recordId;
            }
            this.getTestRecord(this.currentYear, this.currentTerm,this.recordId);
        },
        methods: {
			//对比参数
			opCompareParameters(value){
				this.labelName1 = value.name1;
				this.labelName2 = value.name2;
				this.params = value;
				this.getValue()
			},
            //获取报告结果
            getTestRecord(currentYear, currentTerm,recordId) {
                uni.showLoading({
                    title: "加载中"
                })
                api.queryCustomTestResult(this.testType, currentYear, currentTerm,recordId).then(res => {
                    uni.hideLoading();
                    if (res.Result === 1) {
						let data = res.Data;
						this.testDate = data.TestDate;
						this.currentYear = data.Year;
						this.currentTerm = data.Term;
						this.recordId = data.RecordId;
						// this.userId = data.UserId;
						this.labelName1 = data.TestDate;
						this.advantage = data.DimLevelList[0].DimStr;
						this.mid = data.DimLevelList[1].DimStr;
						this.low = data.DimLevelList[2].DimStr;
						let list = data.DimList;
						this.result = list;
						this.initChart();
                       
                    } else {
                        uni.showToast({
                            title: res.Message,
                            icon: "none"
                        })
                    }
                })
            },
            async initChart() {
                let data1 = [],
                    data2 = [],
                    data3 = [],
                    data4 = [],
                    data5 = [],
                    data6 = [],
                    data7 = [],
                    data8 = [];
                this.result.forEach(item => {
                    switch (item.Name) {
                        case "阅读理解":
                        case "口语表达":
                        case "写作表达":
                        case "外语能力": {
                            data1.push(item);
                            break
                        }
                        case "计算能力":
                        case "逻辑推理":
                        case "数学推理": {
                            data2.push(item);
                            break
                        }
                        case "空间定向":
                        case "机械推理":
                        case "科学能力":
                        case "操作控制":
                        case "近观细察": {
                            data3.push(item);
                            break
                        }
                        case "程序设计":
                        case "信息运用":
                        case "排序分类": {
                            data4.push(item);
                            break
                        }
                        case "自省觉察":
                        case "助人服务":
                        case "说服推广":
                        case "合作协调":
                        case "社会觉察":
                        case "教学培训": {
                            data5.push(item);
                            break
                        }
                        case "美感鉴赏":
                        case "绘图设计":
                        case "创作力": {
                            data6.push(item);
                            break
                        }
                        case "自然观察":
                        case "养育照护": {
                            data7.push(item);
                            break
                        }
                        case "表演能力":
                        case "音乐能力":
                        case "肢体协调": {
                            data8.push(item);
                            break
                        }
                    }
                })
                this.data1 = data1;
                this.data2 = data2;
                this.data3 = data3;
                this.data4 = data4;
                this.data5 = data5;
                if (data5.length == 5) {
                    data5.push({
                        Name: "自省觉察",
                        Score: 0,
                    })
                }
                this.data6 = data6;
                this.data7 = data7;
                this.data8 = data8;
                let name = this.labelName1;
                let legend = [name];
                this.createdChart('charts1', '语文相关能力得分', legend, data1);
                this.createdChart('charts2', '数学相关能力得分', legend, data2);
                this.createdChart('charts3', '科技相关能力得分', legend, data3);
                this.createdChart('charts4', '资讯相关能力得分', legend, data4);
                this.createdChart('charts5', '人际相关能力得分', legend, data5);
                this.createdChart('charts6', '美感相关能力得分', legend, data6);
                this.createdChart('charts7', '自然相关能力得分', legend, data7);
                this.createdChart('charts8', '艺能相关能力得分', legend, data8);
            },
            //更改对比图
            getValue() {
				api.getMultipleAbilityGroupResult(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 doChart(DATA) {
                let name1 = this.labelName1;
                let name2 = this.labelName2;
                let legend = [name1, name2];
                let data = [];
                DATA.forEach((item, index) => {
                    switch (index) {
                        case 0: {
                            data = this.data1;
                            break;
                        }
                        case 1: {
                            data = this.data2;
                            break;
                        }
                        case 2: {
                            data = this.data3;
                            break;
                        }
                        case 3: {
                            data = this.data4;
                            break;
                        }
                        case 4: {
                            data = this.data5;
                            if (item.data.length == 5) {
                                item.data.push(0)
                            }
                            break;
                        }
                        case 5: {
                            data = this.data6;
                            break;
                        }
                        case 6: {
                            data = this.data7;
                            break;
                        }
                        case 7: {
                            data = this.data8;
                            break;
                        }
                    }
                    this.createdChart(`charts${index+1}`, item.name, legend, data, item.data);
                })
            },
            //生成图表
            async createdChart(EL, TITLE, LEGEND, DATA1, DATA2) {
                let categories = [];
                let seriesData1 = [];
                let seriesData2 = DATA2;
                DATA1.forEach(item => {
                    categories.push(item.Name);
                    seriesData1.push(parseInt(item.Score));
                })
                let seriesDataAll = [{
                    name: LEGEND[0],
                    type: 'line',
                    data: seriesData1
                }];
                if (seriesData2) {
                    seriesDataAll.push({
                        name: LEGEND[1],
                        type: 'line',
                        data: seriesData2
                    })
                }
                const option = {
                    title: {
                        text: "",
                        textStyle: {
                            fontSize: 14
                        },
                        top: 10,
                        left: 10
                    },
                    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: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                        data: categories
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: seriesDataAll
                    // series: [
                    //     {
                    //     type: 'line',
                    //     data: [120, 132, 101, 134, 90, 230, 210]
                    //     },
                    //     {
                    //     type: 'line',
                    //     data: [220, 182, 191, 234, 290, 330, 310]
                    //     }
                    // ]
                }
                // chart 图表实例不能存在data里

                if (EL == "charts1") {
                    
                    this.option1 = option;
                    const chart = await this.$refs.charts1.init(echarts, "theme");
                    chart.clear();
                    chart.setOption(this.option1 )
                } 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)
                } else if (EL == "charts6") {
                    this.option6 = option;
                    const chart = await this.$refs.charts6.init(echarts, "theme");
                    chart.clear();
                    chart.setOption(this.option6)
                } else if (EL == "charts7") {
                    this.option7 = option;
                    const chart = await this.$refs.charts7.init(echarts, "theme");
                    chart.clear();
                    chart.setOption(    this.option7)
                } else if (EL == "charts8") {
                    this.option8 = option;
                    const chart = await this.$refs.charts8.init(echarts, "theme");
                    chart.clear();
                    chart.setOption(this.option8)
                }
            },


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

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

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

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

    .img-content {
        width: 690rpx;
        height: 1200rpx;
        overflow: auto;

        image {
            width: 690rpx;
        }
    }

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

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

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

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

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

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

                    .scort {
                        font-size: 36rpx;
                        color: #3095F9;
                        font-weight: 600;
                    }
                }

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

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

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

                    }

                    .chat {
                        height: 370rpx;
                    }

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

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

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

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

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

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

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

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

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

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

                        .list {
                            position: relative;
                            line-height: 44rpx;
                            width: 630rpx;

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

                                .txt {
                                    font-size: 28rpx;
                                    color: #666666;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>