<template>
  <div>
    <el-collapse v-model="activeNames" @change="handleChange" class="Style1">
      <el-collapse-item
        title="Mobject：数学物品"
        name="1"
        @click.native="getData_Mobject"
      >
        <el-collapse v-model="activeNames" @change="handleChange">
          <el-collapse-item title="types：物体基类" name="1-1">
            <el-collapse-item title="image_mobject:图像物品" name="1-1-1">
              <div v-html="image_mobject"></div>
            </el-collapse-item>

            <el-collapse-item title="vectorized_mobject:矢量物品" name="1-1-2">
              <div v-html="vectorized_mobject"></div>
            </el-collapse-item>

            <el-collapse-item title="point_cloud_mobject:点云物品" name="1-1-3">
              <div v-html="point_cloud_mobject"></div>
            </el-collapse-item>
          </el-collapse-item>

          <el-collapse-item title="changing:改变" name="1-2">
            <div v-html="changing"></div>
          </el-collapse-item>

          <el-collapse-item title="vector_field:向量" name="1-3">
            <div v-html="vector_field"></div>
          </el-collapse-item>

          <el-collapse-item title="geometry:几何" name="1-4">
            <div v-html="geometry"></div>
          </el-collapse-item>

          <el-collapse-item title="svg:可伸缩图形" name="1-5">
            <el-collapse-item title="drawings:图画" name="1-5-1">
              <div v-html="drawings"></div>
            </el-collapse-item>

            <el-collapse-item title="brace:曲柄" name="1-5-2">
              <div v-html="brace"></div>
            </el-collapse-item>

            <el-collapse-item title="tex_mobject:支数物品" name="1-5-3">
              <div v-html="tex_mobject"></div>
            </el-collapse-item>

            <el-collapse-item title="code_mobject：代码物品" name="1-5-4">
              <div v-html="code_mobject"></div>
            </el-collapse-item>

            <el-collapse-item title="text_mobject：文本物品" name="1-5-5">
              <div v-html="text_mobject"></div>
            </el-collapse-item>

            <el-collapse-item title="svg_mobject：伸缩物品" name="1-5-6">
              <div v-html="svg_mobject"></div>
            </el-collapse-item>
          </el-collapse-item>

          <el-collapse-item title="coordinate_systems：有序系统" name="1-6">
            <div v-html="coordinate_systems"></div>
          </el-collapse-item>

          <el-collapse-item title="shape_matchers：形状匹配" name="1-7">
            <div v-html="shape_matchers"></div>
          </el-collapse-item>

          <el-collapse-item title="probability：可能性" name="1-8">
            <div v-html="probability"></div>
          </el-collapse-item>

          <el-collapse-item title="value_tracker：价值追踪" name="1-9">
            <div v-html="value_tracker"></div>
          </el-collapse-item>

          <el-collapse-item title="three_dimensions：三维" name="1-10">
            <div v-html="three_dimensions"></div>
          </el-collapse-item>

          <el-collapse-item title="matrix：方阵" name="1-11">
            <div v-html="matrix"></div>
          </el-collapse-item>

          <el-collapse-item title="numbers：数值" name="1-12">
            <div v-html="mobject_numbers"></div>
          </el-collapse-item>

          <el-collapse-item title="frame：框架" name="1-13">
            <div v-html="frame"></div>
          </el-collapse-item>

          <el-collapse-item title="functions：功能" name="1-14">
            <div v-html="functions"></div>
          </el-collapse-item>

          <el-collapse-item title="mobject：物件" name="1-15">
            <div v-html="mobject"></div>
          </el-collapse-item>

          <el-collapse-item title="number_line：数字列表" name="1-16">
            <div v-html="number_line"></div>
          </el-collapse-item>
        </el-collapse>
      </el-collapse-item>
      <el-collapse-item
        title="Animation：动画"
        name="2"
        @click.native="getData_Animation"
      >
        <el-collapse v-model="activeNames" @change="handleChange">
          <el-collapse-item title="creation：创造" name="2-1">
            <div v-html="creation"></div>
          </el-collapse-item>

          <el-collapse-item title="animation:动画" name="2-2">
            <div v-html="animation"></div>
          </el-collapse-item>

          <el-collapse-item title="composition:结合" name="2-3">
            <div v-html="composition"></div>
          </el-collapse-item>

          <el-collapse-item title="indication：指示" name="2-4">
            <div v-html="indication"></div>
          </el-collapse-item>

          <el-collapse-item title="image_mobject:图像物品" name="2-5">
            <div v-html="transform"></div>
          </el-collapse-item>

          <el-collapse-item title="specialized:特例化" name="2-6">
            <div v-html="specialized"></div>
          </el-collapse-item>

          <el-collapse-item title="numbers:数字" name="2-7">
            <div v-html="animation_numbers"></div>
          </el-collapse-item>
          <el-collapse-item title="movement:运动" name="2-8">
            <div v-html="movement"></div>
          </el-collapse-item>

          <el-collapse-item title="fading:消失" name="2-9">
            <div v-html="fading"></div>
          </el-collapse-item>

          <el-collapse-item title="growing：出现" name="2-10">
            <div v-html="growing"></div>
          </el-collapse-item>

          <el-collapse-item title="update:更新" name="2-11">
            <div v-html="update"></div>
          </el-collapse-item>

          <el-collapse-item title="rotation:旋转" name="2-12">
            <div v-html="rotation"></div>
          </el-collapse-item>
        </el-collapse>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "my-first-vue",
  data: function () {
    return {
      activeNames: ["1"],
      serverResponse: "resp",
      image_mobject: "",
      vectorized_mobject: "",
      point_cloud_mobject: "",
      changing: "",
      vector_field: "",
      geometry: "",
      drawings: "",
      brace: "",
      tex_mobject: "",
      code_mobject: "",
      text_mobject: "",
      svg_mobject: "",
      coordinate_systems: "",
      shape_matchers: "",
      probability: "",
      value_tracker: "",
      three_dimensions: "",
      matrix: "",
      mobject_numbers: "",
      frame: "",
      functions: "",
      mobject: "",
      number_line: "",

      creation: "",
      animation: "",
      composition: "",
      indication: "",
      transform: "",
      specialized: "",
      animation_numbers: "",
      movement: "",
      fading: "",
      growing: "",
      update: "",
      rotation: "",
    };
  },
  methods: {
    getData_Mobject() {
      var that = this;
      const path_mobject = "/class";
      axios
        .get(path_mobject)
        .then(function (response) {
          var msg = response.data;
          that.image_mobject = "";
          that.vectorized_mobject = "";
          that.point_cloud_mobject = "";
          that.changing = "";
          that.vector_field = "";
          that.geometry = "";
          that.drawings = "";
          that.brace = "";
          that.tex_mobject = "";
          that.code_mobject = "";
          that.text_mobject = "";
          that.svg_mobject = "";
          that.coordinate_systems = "";
          that.shape_matchers = "";
          that.probability = "";
          that.value_tracker = "";
          that.three_dimensions = "";
          that.matrix = "";
          that.mobject_numbers = "";
          that.frame = "";
          that.functions = "";
          that.mobject = "";
          that.number_line = "";
          for (
            var i = 0;
            i < msg.manimlib.mobject.types.image_mobject.length;
            i++
          )
            that.image_mobject +=
              msg.manimlib.mobject.types.image_mobject[i] + "<br>";

          for (
            var i = 0;
            i < msg.manimlib.mobject.types.vectorized_mobject.length;
            i++
          )
            that.vectorized_mobject +=
              msg.manimlib.mobject.types.vectorized_mobject[i] + "<br>";

          for (
            var i = 0;
            i < msg.manimlib.mobject.types.point_cloud_mobject.length;
            i++
          )
            that.point_cloud_mobject +=
              msg.manimlib.mobject.types.point_cloud_mobject[i] + "<br>";

          for (var i = 0; i < msg.manimlib.mobject.changing.length; i++)
            that.changing += msg.manimlib.mobject.changing[i] + "<br>";

          for (var i = 0; i < msg.manimlib.mobject.vector_field.length; i++)
            that.vector_field += msg.manimlib.mobject.vector_field[i] + "<br>";

          for (var i = 0; i < msg.manimlib.mobject.geometry.length; i++)
            that.geometry += msg.manimlib.mobject.geometry[i] + "<br>";

          for (var i = 0; i < msg.manimlib.mobject.svg.drawings.length; i++)
            that.drawings += msg.manimlib.mobject.svg.drawings[i] + "<br>";

          for (var i = 0; i < msg.manimlib.mobject.svg.brace.length; i++)
            that.brace += msg.manimlib.mobject.svg.brace[i] + "<br>";

          for (var i = 0; i < msg.manimlib.mobject.svg.tex_mobject.length; i++)
            that.tex_mobject +=
              msg.manimlib.mobject.svg.tex_mobject[i] + "<br>";

          for (var i = 0; i < msg.manimlib.mobject.svg.code_mobject.length; i++)
            that.code_mobject +=
              msg.manimlib.mobject.svg.code_mobject[i] + "<br>";

          for (var i = 0; i < msg.manimlib.mobject.svg.text_mobject.length; i++)
            that.text_mobject +=
              msg.manimlib.mobject.svg.text_mobject[i] + "<br>";

          for (var i = 0; i < msg.manimlib.mobject.svg.svg_mobject.length; i++)
            that.svg_mobject +=
              msg.manimlib.mobject.svg.svg_mobject[i] + "<br>";

          for (
            var i = 0;
            i < msg.manimlib.mobject.coordinate_systems.length;
            i++
          )
            that.coordinate_systems +=
              msg.manimlib.mobject.coordinate_systems[i] + "<br>";

          for (var i = 0; i < msg.manimlib.mobject.shape_matchers.length; i++)
            that.shape_matchers +=
              msg.manimlib.mobject.shape_matchers[i] + "<br>";

          for (var i = 0; i < msg.manimlib.mobject.probability.length; i++)
            that.probability += msg.manimlib.mobject.probability[i] + "<br>";

          for (var i = 0; i < msg.manimlib.mobject.value_tracker.length; i++)
            that.value_tracker +=
              msg.manimlib.mobject.value_tracker[i] + "<br>";

          for (var i = 0; i < msg.manimlib.mobject.three_dimensions.length; i++)
            that.three_dimensions +=
              msg.manimlib.mobject.three_dimensions[i] + "<br>";

          for (var i = 0; i < msg.manimlib.mobject.matrix.length; i++)
            that.matrix += msg.manimlib.mobject.matrix[i] + "<br>";

          for (var i = 0; i < msg.manimlib.mobject.numbers.length; i++)
            that.mobject_numbers += msg.manimlib.mobject.numbers[i] + "<br>";

          for (var i = 0; i < msg.manimlib.mobject.frame.length; i++)
            that.frame += msg.manimlib.mobject.frame[i] + "<br>";

          for (var i = 0; i < msg.manimlib.mobject.functions.length; i++)
            that.functions += msg.manimlib.mobject.functions[i] + "<br>";

          for (var i = 0; i < msg.manimlib.mobject.mobject.length; i++)
            that.mobject += msg.manimlib.mobject.mobject[i] + "<br>";

          for (var i = 0; i < msg.manimlib.mobject.number_line.length; i++)
            that.number_line += msg.manimlib.mobject.number_line[i] + "<br>";
        })
        .catch(function (error) {
          alert("Error " + error);
        });
    },
    getData_Animation() {
      var that = this;
      const path_animation = "/class";
      axios
        .get(path_animation)
        .then(function (response) {
          var msg = response.data;
          that.creation = "";
          that.animation = "";
          that.composition = "";
          that.indication = "";
          that.transform = "";
          that.specialized = "";
          that.animation_numbers = "";
          that.movement = "";
          that.fading = "";
          that.growing = "";
          that.update = "";
          that.rotation = "";

          for (var i = 0; i < msg.manimlib.animation.creation.length; i++)
            that.creation += msg.manimlib.animation.creation[i] + "<br>";

          for (var i = 0; i < msg.manimlib.animation.animation.length; i++)
            that.animation += msg.manimlib.animation.animation[i] + "<br>";

          for (var i = 0; i < msg.manimlib.animation.composition.length; i++)
            that.composition += msg.manimlib.animation.composition[i] + "<br>";

          for (var i = 0; i < msg.manimlib.animation.indication.length; i++)
            that.indication += msg.manimlib.animation.indication[i] + "<br>";

          for (var i = 0; i < msg.manimlib.animation.transform.length; i++)
            that.transform += msg.manimlib.animation.transform[i] + "<br>";

          for (var i = 0; i < msg.manimlib.animation.specialized.length; i++)
            that.specialized += msg.manimlib.animation.specialized[i] + "<br>";

          for (var i = 0; i < msg.manimlib.animation.numbers.length; i++)
            that.animation_numbers += msg.manimlib.animation.numbers[i] + "<br>";

          for (var i = 0; i < msg.manimlib.animation.movement.length; i++)
            that.movement += msg.manimlib.animation.movement[i] + "<br>";

          for (var i = 0; i < msg.manimlib.animation.fading.length; i++)
            that.fading += msg.manimlib.animation.fading[i] + "<br>";

          for (var i = 0; i < msg.manimlib.animation.growing.length; i++)
            that.growing += msg.manimlib.animation.growing[i] + "<br>";

          for (var i = 0; i < msg.manimlib.animation.update.length; i++)
            that.update += msg.manimlib.animation.update[i] + "<br>";

          for (var i = 0; i < msg.manimlib.animation.rotation.length; i++)
            that.rotation += msg.manimlib.animation.rotation[i] + "<br>";
        })
        .catch(function (error) {
          alert("Error " + error);
        });
    },
    handleChange(val) {
      console.log(val);
    },
  },
};
</script>

<style scoped>
.Style1 {
  float: right;
  width: 300px;
}
</style>