<template>
    <div class="body">
        <div class="c_top">
            <div class="poster"><img src="../../../assets/avatar2.png" alt=""></div>
            <div>
                <div class="c_top_box">
                    <span style="font-size:26px">{{ data.school }}</span>
                </div>
                <div class="c_top_box">
                    <span>教师：</span><span>{{ data.username }}</span>
                </div>
            </div>
        </div>
        <div class="c_box" v-for="(item, index) in data.course" :key="index">
            <div class="c_title"><b>课程名称：</b>{{ item.title }}</div>
            <div class="line_box">
                <div :class="'line' + index"></div>
                <div :class="'line' + index"></div>
                <div :class="'line' + index"></div>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    props: ['data'],
    data() {
        return {
            option: {
                title: {
                    text: '阶段总数',
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        // Use axis to trigger tooltip
                        type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
                    }
                },
                xAxis: {
                    type: 'category',
                    data: ['任务', '工具', '评价']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [],
                        type: 'bar',
                        showBackground: true,
                        label: {
                            show: true
                        },
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        }
                    }
                ]
            },
            option2: {
                title: {
                    text: '各个阶段总数',
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        // Use axis to trigger tooltip
                        type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
                    }
                },

                xAxis: {
                    type: 'value'
                },
                yAxis: {
                    type: 'category',
                    data: [],
                    inverse: true
                },
                series: [
                    {
                        name: '任务',
                        type: 'bar',
                        stack: 'total',
                        label: {
                            show: true
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: []
                    },
                    {
                        name: '工具',
                        type: 'bar',
                        stack: 'total',
                        label: {
                            show: true
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: []
                    },
                    {
                        name: '评价',
                        type: 'bar',
                        stack: 'total',
                        label: {
                            show: true
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: []
                    },
                    // {
                    //     name: '字数',
                    //     type: 'bar',
                    //     stack: 'total',
                    //     label: {
                    //         show: true
                    //     },
                    //     emphasis: {
                    //         focus: 'series'
                    //     },
                    //     data: []
                    // }
                ]
            },
            option3: {
                title: {
                    text: '工具占比',
                },
                tooltip: {
                    trigger: 'item',
                    formatter: (params) => {
                        // marker 为一个HTML标签
                        var res = params.marker + params.name + ":" + params.value + "%";
                        return res;
                    },

                },
                toolbox: {
                    show: true,
                },
                grid: {},
                series: [
                    {
                        name: "工具占比",
                        type: "pie",
                        // radius: [10, "80%"],
                        center: ["50%", "50%"],
                        label: {
                            show: true,
                            position: "inside",
                            formatter: "{b}\n{d}%",
                        },
                        data: [
                            { value: 0, name: "思维网格" },
                            { value: 0, name: "思维导图" },
                            { value: 0, name: "电子白板" },
                            { value: 0, name: "选择题" },
                            { value: 0, name: "问卷调查" },
                            { value: 0, name: "提交作业" },
                            { value: 0, name: "其他" },
                        ],
                    },
                ],
            },
            chartObj: []
        }
    },
    watch: {
        data: {
            immediate: true,
            deep: true,
            handler(newValue, oldValue) {
                this.setChart();
            }
        }
    },
    methods: {
        setChart() {
            // 雷达图显示的标签
            let newPromise = new Promise((resolve) => {
                resolve();
            });
            //然后异步执行echarts的初始化函数
            newPromise.then(() => {
                for (var i = 0; i < this.data.course.length; i++) {
                    let el = this.data.course[i]
                    this.chartObj[i] = [1, 2, 3]
                    const chartObj = this.$echarts.init(
                        //劳动课程
                        // this.$el.querySelector(".line" + i)[0]
                        document.getElementsByClassName('line' + i)[0]
                        //   document.getElementById("#charts_canvas")
                    );
                    let a = JSON.parse(JSON.stringify(this.option))
                    a.series[0].data = [el.jdz.taskC, el.jdz.toolC, el.jdz.evalC]//, el.jdz.fontC
                    this.chartObj[i][0] = chartObj;
                    this.chartObj[i][0].setOption(a);

                    let c = JSON.parse(JSON.stringify(this.option3))
                    const chartObj2 = this.$echarts.init(
                        //劳动课程
                        // this.$el.querySelector(".line" + i)[0]
                        document.getElementsByClassName('line' + i)[1]
                        //   document.getElementById("#charts_canvas")
                    );
                    c.series[0].data[0].value = el.course.wang
                    c.series[0].data[1].value = el.course.si
                    c.series[0].data[2].value = el.course.dian
                    c.series[0].data[3].value = el.course.xuan
                    c.series[0].data[4].value = el.course.wen
                    c.series[0].data[5].value = el.course.ti
                    c.series[0].data[6].value = el.course.other
                    this.chartObj[i][1] = chartObj2;
                    this.chartObj[i][1].setOption(c);


                    let b = JSON.parse(JSON.stringify(this.option2))
                    for (var j = 0; j < el.jd.length; j++) {
                        b.yAxis.data.push('阶段' + (j + 1))
                        b.series[0].data.push(el.jd[j].taskC)
                        b.series[1].data.push(el.jd[j].toolC)
                        b.series[2].data.push(el.jd[j].evalC)
                        // b.series[3].data.push(el.jd[j].fontC)
                    }
                    const chartObj3 = this.$echarts.init(
                        //劳动课程
                        // this.$el.querySelector(".line" + i)[0]
                        document.getElementsByClassName('line' + i)[2]
                        //   document.getElementById("#charts_canvas")
                    );

                    this.chartObj[i][2] = chartObj3;
                    this.chartObj[i][2].setOption(b);

                    console.log(this.chartObj);
                }
            });
            let _this = this;
            window.addEventListener("resize", () => {
                for (var i = 0; i < _this.data.course.length; i++) {
                    if (_this.chartObj[i].length) {
                        _this.chartObj[i][0].resize();
                        _this.chartObj[i][1].resize();
                        _this.chartObj[i][2].resize();
                    }
                }
            });
        }
    },
    mounted() {
        this.setChart();
    }
}
</script>

<style scoped>
.body {
    height: 100%;
    width: 100%;
    background: #f1f1f1;
    overflow: auto;
}

.c_top {
    font-size: 20px;
    background: #fff;
    display: flex;
    width: 95%;
    margin: 10px auto;
    padding: 20px;
    border-radius: 5px;
    align-items: center;
    box-sizing: border-box;
}

.c_top .poster {
    width: 100px;
    height: 100px;
    border-radius: 100%;
    /* background: rgb(0 0 0); */
    margin-right: 10px;
    overflow: hidden;
}

.c_top .poster img{
    width: 100%;
    object-fit: cover;
}

.c_top_box+.c_top_box {
    margin-top: 20px;
}

.c_box {
    width: 95%;
    margin: 10px auto;
    display: flex;
    flex-direction: column;
    background: #fff;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 5px;
}

.c_title {
    font-size: 18px;
    margin-bottom: 20px;
}

.line_box {
    width: 100%;
    display: flex;
    min-height: 500px;
    justify-content: space-around;
    flex-wrap: wrap;
}

.line_box>div {
    width: 32%;
    margin: 10px 0;
    height: 500px;
    min-width: 300px;
}
</style>