<template>
  <el-row>
    <div>
      <el-col :span="12" :offset="6">
        <div>
          <el-cascader
            :options="options"
            ref="choices"
            @change="handleClassChosen"
            clearable
            filterable
          ></el-cascader>
        </div>
      </el-col>

      
        <div>
          <el-button type="primary" @click.native="Create_Instance" id="choose"
            >创建物品</el-button
          >
          <el-button type="primary" @click.native="dialogVisible = true" id="choose"
            >调用函数</el-button
          >
        </div>
      

      <el-dialog title="新建方法调用" :visible.sync="dialogVisible" width="30%">
        <el-cascader
          :options="nameList"
          ref="choices"
          @change="handleInstanceChosen"
          clearable
          filterable
        >
        </el-cascader>
        <el-cascader
          :options="functionList"
          ref="choices"
          @change="handleFunctionChosen"
          clearable
          filterable
        >
        </el-cascader>
        <span slot="footer" class="dialog-footer">
          <el-button @click.native="dialogVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click.native="
              handleDialogClose();
              dialogVisible = false;
            "
            >确 定</el-button
          >
        </span>
      </el-dialog>
      <div>
        <el-row>
          <el-col :span="8" :offset="8">
            <div>
              <el-input v-model="input" placeholder="请输入画布名称"></el-input>

              <el-select v-model="choose_quality" placeholder="请选择画质">
                <el-option
                  v-for="item in picture_quality"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </el-col>
        </el-row>
      </div>

      <div>
        <el-row>
          <el-col :span="16" :offset="8">
            <el-table
              :data="tableData"
              class="table STYLE1"
              type="index"
              @cell-dblclick="tableDbEdit"
            >
              <el-table-column prop="param_list" type="expand">
                <template slot-scope="props">
                  <el-button
                    plain
                    @click.native="Set_line_index(props.$index)"
                    id="choose"
                    >获取大行号</el-button
                  >
                  <el-button
                    plain
                    @click.native="Create_Varargs(props.$index)"
                    id="choose"
                    >添加*参数</el-button
                  >
                  <el-table
                    :data="props.row.param_list"
                    max-height="300"
                    @cell-dblclick="tableDbEdit"
                  >
                    <el-table-column
                      label="参数名称"
                      prop="name"
                    ></el-table-column>
                    <el-table-column
                      label="参数类型"
                      prop="type"
                    ></el-table-column>
                    <el-table-column label="参数值" prop="value" sortable>
                    </el-table-column>
                    <el-table-column
                      label="参数标签"
                      prop="param_tag"
                      :filters="[
                        { value: 'normal', text: '常规参数' },
                        { value: 'varargs', text: '不定长*参数' },
                      ]"
                      :filter-method="filterTag"
                      filter-placement="bottom-end"
                    >
                    </el-table-column>
                  </el-table>
                </template>
              </el-table-column>
              <el-table-column label="物品类型" prop="class"> </el-table-column>
              <el-table-column label="物品名称" prop="name"> </el-table-column>
              <el-table-column label="调用方法" prop="function">
              </el-table-column>
              <el-table-column
                label="标签"
                prop="tag"
                :filters="[
                  { value: 'create_instance', text: '创建物品' },
                  { value: 'call_function', text: '调用方法' },
                ]"
                :filter-method="filterTag"
                filter-placement="bottom-end"
              >
                <template slot-scope="scope">
                  <el-tag
                    :type="
                      scope.row.tag === 'create_instance'
                        ? 'primary'
                        : 'success'
                    "
                    disable-transitions
                    >{{ scope.row.tag }}</el-tag
                  >
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="danger"
                    @click.native="deleteRow(scope.$index, tableData)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </div>
      <el-button type="primary" @click.native="submit">提交</el-button>
    </div>
  </el-row>
</template>

<script>
import axios from "axios";
import Login from "@/components/Login";

export default {
  data() {
    return {
      input: "",
      choose_quality: "",
      line_index: 1,
      ID: "",
      activeNames: ["1"],
      dialogVisible: false,
      mobject_address: "/param?function=",
      function_address: "/function?class=manimlib.",
      full_class_name: "manimlib.",
      simple_class_name: "",
      instance_name: "",
      function_name: "",
      options: [
        {
          value: "mobject",
          label: "mobject",
          children: [
            {
              value: "types",
              label: "types",
              children: [
                {
                  value: "image_mobject",
                  label: "image_mobject",
                  children: [
                    {
                      value: "AbstractImageMobject",
                      label: "AbstractImageMobject",
                    },
                    {
                      value: "ImageMobject",
                      label: "ImageMobject",
                    },
                    {
                      value: "ImageMobjectFromCamera",
                      label: "ImageMobjectFromCamera",
                    },
                  ],
                },
                {
                  value: "vectorized_mobject",
                  label: "vectorized_mobject",
                  children: [
                    {
                      value: "CurvesAsSubmobjects",
                      label: "CurvesAsSubmobjects",
                    },
                    {
                      value: "DashedVMobject",
                      label: "DashedVMobject",
                    },
                    {
                      value: "VGroup",
                      label: "VGroup",
                    },
                    {
                      value: "VMobject",
                      label: "VMobject",
                    },
                    {
                      value: "VectorizedPoint",
                      label: "VectorizedPoint",
                    },
                  ],
                },
                {
                  value: "point_cloud_mobject",
                  label: "point_cloud_mobject",
                  children: [
                    {
                      value: "Mobject1D",
                      label: "Mobject1D",
                    },
                    {
                      value: "Mobject2D",
                      label: "Mobject2D",
                    },
                    {
                      value: "PGroup",
                      label: "PGroup",
                    },
                    {
                      value: "PMobject",
                      label: "PMobject",
                    },
                    {
                      value: "Point",
                      label: "Point",
                    },
                    {
                      value: "PointCloudDot",
                      label: "PointCloudDot",
                    },
                  ],
                },
              ],
            },
            {
              value: "changing",
              label: "changing",
              children: [
                {
                  value: "AnimatedBoundary",
                  label: "AnimatedBoundary",
                },
                {
                  value: "TracedPath",
                  label: "TracedPath",
                },
              ],
            },
            {
              value: "vector_field",
              label: "vector_field",
              children: [
                {
                  value: "AnimatedStreamLines",
                  label: "AnimatedStreamLines",
                },
                {
                  value: "ShowPassingFlashWithThinningStrokeWidth",
                  label: "ShowPassingFlashWithThinningStrokeWidth",
                },
                {
                  value: "StreamLines",
                  label: "StreamLines",
                },
                {
                  value: "VectorField",
                  label: "VectorField",
                },
              ],
            },
            {
              value: "geometry",
              label: "geometry",
              children: [
                {
                  value: "AnnularSector",
                  label: "AnnularSector",
                },
                {
                  value: "Annulus",
                  label: "Annulus",
                },
                {
                  value: "Arc",
                  label: "Arc",
                },
                {
                  value: "ArcBetweenPoints",
                  label: "ArcBetweenPoints",
                },
                {
                  value: "Arrow",
                  label: "Arrow",
                },
                {
                  value: "ArrowTip",
                  label: "ArrowTip",
                },
                {
                  value: "Circle",
                  label: "Circle",
                },
                {
                  value: "CubicBezier",
                  label: "CubicBezier",
                },
                {
                  value: "CurvedArrow",
                  label: "CurvedArrow",
                },
                {
                  value: "CurvedDoubleArrow",
                  label: "CurvedDoubleArrow",
                },
                {
                  value: "DashedLine",
                  label: "DashedLine",
                },
                {
                  value: "Dot",
                  label: "Dot",
                },
                {
                  value: "DoubleArrow",
                  label: "DoubleArrow",
                },
                {
                  value: "Elbow",
                  label: "Elbow",
                },
                {
                  value: "Ellipse",
                  label: "Ellipse",
                },
                {
                  value: "Line",
                  label: "Line",
                },
                {
                  value: "Polygon",
                  label: "Polygon",
                },
                {
                  value: "Rectangle",
                  label: "Rectangle",
                },
                {
                  value: "RegularPolygon",
                  label: "RegularPolygon",
                },
                {
                  value: "RoundedRectangle",
                  label: "RoundedRectangle",
                },
                {
                  value: "Sector",
                  label: "Sector",
                },
                {
                  value: "SmallDot",
                  label: "SmallDot",
                },
                {
                  value: "Square",
                  label: "Square",
                },
                {
                  value: "TangentLine",
                  label: "TangentLine",
                },
                {
                  value: "TipableVMobject",
                  label: "TipableVMobject",
                },
                {
                  value: "Triangle",
                  label: "Triangle",
                },
                {
                  value: "Vector",
                  label: "Vector",
                },
              ],
            },
            {
              value: "svg",
              label: "svg",
              children: [
                {
                  value: "drawings",
                  label: "drawings",
                  children: [
                    {
                      value: "AoPSLogo",
                      label: "AoPSLogo",
                    },
                    {
                      value: "BitcoinLogo",
                      label: "BitcoinLogo",
                    },
                    {
                      value: "Bubble",
                      label: "Bubble",
                    },
                    {
                      value: "Car",
                      label: "Car",
                    },
                    {
                      value: "Clock",
                      label: "Clock",
                    },
                    {
                      value: "ClockPassesTime",
                      label: "ClockPassesTime",
                    },
                    {
                      value: "DeckOfCards",
                      label: "DeckOfCards",
                    },
                    {
                      value: "DoubleSpeechBubble",
                      label: "DoubleSpeechBubble",
                    },
                    {
                      value: "Guitar",
                      label: "Guitar",
                    },
                    {
                      value: "Headphones",
                      label: "Headphones",
                    },
                    {
                      value: "Laptop",
                      label: "Laptop",
                    },
                    {
                      value: "Lightbulb",
                      label: "Lightbulb",
                    },
                    {
                      value: "Logo",
                      label: "Logo",
                    },
                    {
                      value: "PartyHat",
                      label: "PartyHat",
                    },
                    {
                      value: "PatreonLogo",
                      label: "PatreonLogo",
                    },
                    {
                      value: "PlayingCard",
                      label: "PlayingCard",
                    },
                    {
                      value: "SpeechBubble",
                      label: "SpeechBubble",
                    },
                    {
                      value: "Speedometer",
                      label: "Speedometer",
                    },
                    {
                      value: "SuitSymbol",
                      label: "SuitSymbol",
                    },
                    {
                      value: "SunGlasses",
                      label: "SunGlasses",
                    },
                    {
                      value: "ThoughtBubble",
                      label: "ThoughtBubble",
                    },
                    {
                      value: "VectorizedEarth",
                      label: "VectorizedEarth",
                    },
                    {
                      value: "VideoIcon",
                      label: "VideoIcon",
                    },
                    {
                      value: "VideoSeries",
                      label: "VideoSeries",
                    },
                  ],
                },
                {
                  value: "brace",
                  label: "brace",
                  children: [
                    {
                      value: "Brace",
                      label: "Brace",
                    },
                    {
                      value: "BraceLabel",
                      label: "BraceLabel",
                    },
                    {
                      value: "BraceText",
                      label: "BraceText",
                    },
                  ],
                },
                {
                  value: "tex_mobject",
                  label: "tex_mobject",
                  children: [
                    {
                      value: "BulletedList",
                      label: "BulletedList",
                    },
                    {
                      value: "SingleStringTexMobject",
                      label: "SingleStringTexMobject",
                    },
                    {
                      value: "TexMobject",
                      label: "TexMobject",
                    },
                    {
                      value: "TexMobjectFromPresetString",
                      label: "TexMobjectFromPresetString",
                    },
                    {
                      value: "TexSymbol",
                      label: "TexSymbol",
                    },
                    {
                      value: "TextMobject",
                      label: "TextMobject",
                    },
                    {
                      value: "Title",
                      label: "Title",
                    },
                  ],
                },
                {
                  value: "code_mobject",
                  label: "code_mobject",
                  children: [
                    {
                      value: "Code",
                      label: "Code",
                    },
                  ],
                },
                {
                  value: "text_mobject",
                  label: "text_mobject",
                  children: [
                    {
                      value: "Paragraph",
                      label: "Paragraph",
                    },
                    {
                      value: "Text",
                      label: "Text",
                    },
                    {
                      value: "TextSetting",
                      label: "TextSetting",
                    },
                    {
                      value: "TextWithFixHeight",
                      label: "TextWithFixHeight",
                    },
                  ],
                },
                {
                  value: "svg_mobject",
                  label: "svg_mobject",
                  children: [
                    {
                      value: "SVGMobject",
                      label: "SVGMobject",
                    },
                    {
                      value: "VMobjectFromSVGPathstring",
                      label: "VMobjectFromSVGPathstring",
                    },
                  ],
                },
              ],
            },
            {
              value: "coordinate_systems",
              label: "coordinate_systems",
              children: [
                {
                  value: "Axes",
                  label: "Axes",
                },
                {
                  value: "ComplexPlane",
                  label: "ComplexPlane",
                },
                {
                  value: "CoordinateSystem",
                  label: "CoordinateSystem",
                },
                {
                  value: "NumberPlane",
                  label: "NumberPlane",
                },
                {
                  value: "ThreeDAxes",
                  label: "ThreeDAxes",
                },
              ],
            },
            {
              value: "shape_matchers",
              label: "shape_matchers",
              children: [
                {
                  value: "BackgroundRectangle",
                  label: "BackgroundRectangle",
                },
                {
                  value: "Cross",
                  label: "Cross",
                },
                {
                  value: "SurroundingRectangle",
                  label: "SurroundingRectangle",
                },
                {
                  value: "Underline",
                  label: "Underline",
                },
              ],
            },
            {
              value: "probability",
              label: "probability",
              children: [
                {
                  value: "BarChart",
                  label: "BarChart",
                },
                {
                  value: "SampleSpace",
                  label: "SampleSpace",
                },
              ],
            },
            {
              value: "value_tracker",
              label: "value_tracker",
              children: [
                {
                  value: "ComplexValueTracker",
                  label: "ComplexValueTracker",
                },
                {
                  value: "ExponentialValueTracker",
                  label: "ExponentialValueTracker",
                },
                {
                  value: "ValueTracker",
                  label: "ValueTracker",
                },
              ],
            },
            {
              value: "three_dimensions",
              label: "three_dimensions",
              children: [
                {
                  value: "Cube",
                  label: "Cube",
                },
                {
                  value: "ParametricSurface",
                  label: "ParametricSurface",
                },
                {
                  value: "Prism",
                  label: "Prism",
                },
                {
                  value: "Sphere",
                  label: "Sphere",
                },
                {
                  value: "ThreeDVMobject",
                  label: "ThreeDVMobject",
                },
              ],
            },
            {
              value: "matrix",
              label: "matrix",
              children: [
                {
                  value: "DecimalMatrix",
                  label: "DecimalMatrix",
                },
                {
                  value: "IntegerMatrix",
                  label: "IntegerMatrix",
                },
                {
                  value: "Matrix",
                  label: "Matrix",
                },
                {
                  value: "MobjectMatrix",
                  label: "MobjectMatrix",
                },
              ],
            },
            {
              value: "numbers",
              label: "numbers",
              children: [
                {
                  value: "DecimalNumber",
                  label: "DecimalNumber",
                },
                {
                  value: "Integer",
                  label: "Integer",
                },
              ],
            },
            {
              value: "frame",
              label: "frame",
              children: [
                {
                  value: "FullScreenFadeRectangle",
                  label: "FullScreenFadeRectangle",
                },
                {
                  value: "FullScreenRectangle",
                  label: "FullScreenRectangle",
                },
                {
                  value: "PictureInPictureFrame",
                  label: "PictureInPictureFrame",
                },
                {
                  value: "ScreenRectangle",
                  label: "ScreenRectangle",
                },
              ],
            },
            {
              value: "functions",
              label: "functions",
              children: [
                {
                  value: "FunctionGraph",
                  label: "FunctionGraph",
                },
                {
                  value: "ParametricFunction",
                  label: "ParametricFunction",
                },
              ],
            },
            {
              value: "mobject",
              label: "mobject",
              children: [
                {
                  value: "Group",
                  label: "Group",
                },
                {
                  value: "Mobject",
                  label: "Mobject",
                },
              ],
            },
            {
              value: "number_line",
              label: "number_line",
              children: [
                {
                  value: "NumberLine",
                  label: "NumberLine",
                },
                {
                  value: "UnitInterval",
                  label: "UnitInterval",
                },
              ],
            },
          ],
        },
        {
          value: "animation",
          label: "animation",
          children: [
            {
              value: "creation",
              label: "creation",
              children: [
                {
                  value: "AddTextWordByWord",
                  label: "AddTextWordByWord",
                },
                {
                  value: "DrawBorderThenFill",
                  label: "DrawBorderThenFill",
                },
                {
                  value: "ShowCreation",
                  label: "ShowCreation",
                },
                {
                  value: "ShowIncreasingSubsets",
                  label: "ShowIncreasingSubsets",
                },
                {
                  value: "ShowPartial",
                  label: "ShowPartial",
                },
                {
                  value: "ShowSubmobjectsOneByOne",
                  label: "ShowSubmobjectsOneByOne",
                },
                {
                  value: "Uncreate",
                  label: "Uncreate",
                },
                {
                  value: "Write",
                  label: "Write",
                },
              ],
            },
            {
              value: "animation",
              label: "animation",
              children: [
                {
                  value: "Animation",
                  label: "Animation",
                },
              ],
            },
            {
              value: "composition",
              label: "composition",
              children: [
                {
                  value: "AnimationGroup",
                  label: "AnimationGroup",
                },
                {
                  value: "LaggedStart",
                  label: "LaggedStart",
                },
                {
                  value: "LaggedStartMap",
                  label: "LaggedStartMap",
                },
                {
                  value: "Succession",
                  label: "Succession",
                },
              ],
            },
            {
              value: "indication",
              label: "indication",
              children: [
                {
                  value: "AnimationOnSurroundingRectangle",
                  label: "AnimationOnSurroundingRectangle",
                },
                {
                  value: "ApplyWave",
                  label: "ApplyWave",
                },
                {
                  value: "CircleIndicate",
                  label: "CircleIndicate",
                },
                {
                  value: "Flash",
                  label: "Flash",
                },
                {
                  value: "FocusOn",
                  label: "FocusOn",
                },
                {
                  value: "Indicate",
                  label: "Indicate",
                },
                {
                  value: "ShowCreationThenDestruction",
                  label: "ShowCreationThenDestruction",
                },
                {
                  value: "ShowCreationThenDestructionAround",
                  label: "ShowCreationThenDestructionAround",
                },
                {
                  value: "ShowCreationThenFadeAround",
                  label: "ShowCreationThenFadeAround",
                },
                {
                  value: "ShowCreationThenFadeOut",
                  label: "ShowCreationThenFadeOut",
                },
                {
                  value: "ShowPassingFlash",
                  label: "ShowPassingFlash",
                },
                {
                  value: "ShowPassingFlashAround",
                  label: "ShowPassingFlashAround",
                },
                {
                  value: "TurnInsideOut",
                  label: "TurnInsideOut",
                },
                {
                  value: "WiggleOutThenIn",
                  label: "WiggleOutThenIn",
                },
              ],
            },
            {
              value: "transform",
              label: "transform",
              children: [
                {
                  value: "ApplyComplexFunction",
                  label: "ApplyComplexFunction",
                },
                {
                  value: "ApplyFunction",
                  label: "ApplyFunction",
                },
                {
                  value: "ApplyMatrix",
                  label: "ApplyMatrix",
                },
                {
                  value: "ApplyMethod",
                  label: "ApplyMethod",
                },
                {
                  value: "ApplyPointwiseFunction",
                  label: "ApplyPointwiseFunction",
                },
                {
                  value: "ApplyPointwiseFunctionToCenter",
                  label: "ApplyPointwiseFunctionToCenter",
                },
                {
                  value: "ClockwiseTransform",
                  label: "ClockwiseTransform",
                },
                {
                  value: "CounterclockwiseTransform",
                  label: "CounterclockwiseTransform",
                },
                {
                  value: "CyclicReplace",
                  label: "CyclicReplace",
                },
                {
                  value: "FadeToColor",
                  label: "FadeToColor",
                },
                {
                  value: "MoveToTarget",
                  label: "MoveToTarget",
                },
                {
                  value: "ReplacementTransform",
                  label: "ReplacementTransform",
                },
                {
                  value: "Restore",
                  label: "Restore",
                },
                {
                  value: "ScaleInPlace",
                  label: "ScaleInPlace",
                },
                {
                  value: "ShrinkToCenter",
                  label: "ShrinkToCenter",
                },
                {
                  value: "Swap",
                  label: "Swap",
                },
                {
                  value: "Transform",
                  label: "Transform",
                },
                {
                  value: "TransformAnimations",
                  label: "TransformAnimations",
                },
                {
                  value: "TransformFromCopy",
                  label: "TransformFromCopy",
                },
              ],
            },
            {
              value: "specialized",
              label: "specialized",
              children: [
                {
                  value: "Broadcast",
                  label: "Broadcast",
                },
                {
                  value: "MoveCar",
                  label: "MoveCar",
                },
              ],
            },
            {
              value: "numbers",
              label: "numbers",
              children: [
                {
                  value: "ChangeDecimalToValue",
                  label: "ChangeDecimalToValue",
                },
                {
                  value: "ChangingDecimal",
                  label: "ChangingDecimal",
                },
              ],
            },
            {
              value: "movement",
              label: "movement",
              children: [
                {
                  value: "ComplexHomotopy",
                  label: "ComplexHomotopy",
                },
                {
                  value: "Homotopy",
                  label: "Homotopy",
                },
                {
                  value: "MoveAlongPath",
                  label: "MoveAlongPath",
                },
                {
                  value: "PhaseFlow",
                  label: "PhaseFlow",
                },
                {
                  value: "SmoothedVectorizedHomotopy",
                  label: "SmoothedVectorizedHomotopy",
                },
              ],
            },
            {
              value: "fading",
              label: "fading",
              children: [
                {
                  value: "FadeIn",
                  label: "FadeIn",
                },
                {
                  value: "FadeInFrom",
                  label: "FadeInFrom",
                },
                {
                  value: "FadeInFromDown",
                  label: "FadeInFromDown",
                },
                {
                  value: "FadeInFromLarge",
                  label: "FadeInFromLarge",
                },
                {
                  value: "FadeInFromPoint",
                  label: "FadeInFromPoint",
                },
                {
                  value: "FadeOut",
                  label: "FadeOut",
                },
                {
                  value: "FadeOutAndShift",
                  label: "FadeOutAndShift",
                },
                {
                  value: "FadeOutAndShiftDown",
                  label: "FadeOutAndShiftDown",
                },
                {
                  value: "VFadeIn",
                  label: "VFadeIn",
                },
                {
                  value: "VFadeInThenOut",
                  label: "VFadeInThenOut",
                },
                {
                  value: "VFadeOut",
                  label: "VFadeOut",
                },
              ],
            },
            {
              value: "growing",
              label: "growing",
              children: [
                {
                  value: "GrowArrow",
                  label: "GrowArrow",
                },
                {
                  value: "GrowFromCenter",
                  label: "GrowFromCenter",
                },
                {
                  value: "GrowFromEdge",
                  label: "GrowFromEdge",
                },
                {
                  value: "GrowFromPoint",
                  label: "GrowFromPoint",
                },
                {
                  value: "SpinInFromNothing",
                  label: "SpinInFromNothing",
                },
              ],
            },
            {
              value: "update",
              label: "update",
              children: [
                {
                  value: "MaintainPositionRelativeTo",
                  label: "MaintainPositionRelativeTo",
                },
                {
                  value: "UpdateFromAlphaFunc",
                  label: "UpdateFromAlphaFunc",
                },
                {
                  value: "UpdateFromFunc",
                  label: "UpdateFromFunc",
                },
              ],
            },
            {
              value: "rotation",
              label: "rotation",
              children: [
                {
                  value: "Rotate",
                  label: "Rotate",
                },
                {
                  value: "Rotating",
                  label: "Rotating",
                },
              ],
            },
          ],
        },
        {
          value: "once_useful_constructs",
          label: "once_useful_constructs",
          children: [
            {
              value: "light",
              label: "light",
              children: [
                {
                  value: "AmbientLight",
                  label: "AmbientLight",
                },
                {
                  value: "LightSource",
                  label: "LightSource",
                },
                {
                  value: "Lighthouse",
                  label: "Lighthouse",
                },
                {
                  value: "Spotlight",
                  label: "Spotlight",
                },
                {
                  value: "SwitchOff",
                  label: "SwitchOff",
                },
                {
                  value: "SwitchOn",
                  label: "SwitchOn",
                },
              ],
            },
            {
              value: "fractals",
              label: "fractals",
              children: [
                {
                  value: "CircularFractal",
                  label: "CircularFractal",
                },
                {
                  value: "DiamondFractal",
                  label: "DiamondFractal",
                },
                {
                  value: "FlowSnake",
                  label: "FlowSnake",
                },
                {
                  value: "FractalCurve",
                  label: "FractalCurve",
                },
                {
                  value: "HilbertCurve",
                  label: "HilbertCurve",
                },
                {
                  value: "HilbertCurve3D",
                  label: "HilbertCurve3D",
                },
                {
                  value: "JaggedCurvePiece",
                  label: "JaggedCurvePiece",
                },
                {
                  value: "KochCurve",
                  label: "KochCurve",
                },
                {
                  value: "KochSnowFlake",
                  label: "KochSnowFlake",
                },
                {
                  value: "LindenmayerCurve",
                  label: "LindenmayerCurve",
                },
                {
                  value: "PeanoCurve",
                  label: "PeanoCurve",
                },
                {
                  value: "PentagonalFractal",
                  label: "PentagonalFractal",
                },
                {
                  value: "PentagonalPiCreatureFractal",
                  label: "PentagonalPiCreatureFractal",
                },
                {
                  value: "PiCreatureFractal",
                  label: "PiCreatureFractal",
                },
                {
                  value: "QuadraticKoch",
                  label: "QuadraticKoch",
                },
                {
                  value: "QuadraticKochIsland",
                  label: "QuadraticKochIsland",
                },
                {
                  value: "SelfSimilarFractal",
                  label: "SelfSimilarFractal",
                },
                {
                  value: "SelfSimilarSpaceFillingCurve",
                  label: "SelfSimilarSpaceFillingCurve",
                },
                {
                  value: "Sierpinski",
                  label: "Sierpinski",
                },
                {
                  value: "SierpinskiCurve",
                  label: "SierpinskiCurve",
                },
                {
                  value: "SnakeCurve",
                  label: "SnakeCurve",
                },
                {
                  value: "StellarCurve",
                  label: "StellarCurve",
                },
                {
                  value: "TriangleFillingCurve",
                  label: "TriangleFillingCurve",
                },
                {
                  value: "UtahFillingCurve",
                  label: "UtahFillingCurve",
                },
                {
                  value: "WonkyHexagonFractal",
                  label: "WonkyHexagonFractal",
                },
              ],
            },
            {
              value: "graph_theory",
              label: "graph_theory",
              children: [
                {
                  value: "CompleteGraph",
                  label: "CompleteGraph",
                },
                {
                  value: "CubeGraph",
                  label: "CubeGraph",
                },
                {
                  value: "DiscreteGraphScene",
                  label: "DiscreteGraphScene",
                },
                {
                  value: "Graph",
                  label: "Graph",
                },
                {
                  value: "OctohedronGraph",
                  label: "OctohedronGraph",
                },
                {
                  value: "SampleGraph",
                  label: "SampleGraph",
                },
              ],
            },
            {
              value: "complex_transformation_scene",
              label: "complex_transformation_scene",
              children: [
                {
                  value: "ComplexTransformationScene",
                  label: "ComplexTransformationScene",
                },
              ],
            },
            {
              value: "counting",
              label: "counting",
              children: [
                {
                  value: "CountInBinaryTo256",
                  label: "CountInBinaryTo256",
                },
                {
                  value: "CountInDecimal",
                  label: "CountInDecimal",
                },
                {
                  value: "CountInTernary",
                  label: "CountInTernary",
                },
                {
                  value: "CountingScene",
                  label: "CountingScene",
                },
                {
                  value: "FactorialBase",
                  label: "FactorialBase",
                },
                {
                  value: "PowerCounter",
                  label: "PowerCounter",
                },
              ],
            },
            {
              value: "arithmetic",
              label: "arithmetic",
              children: [
                {
                  value: "FlipThroughSymbols",
                  label: "FlipThroughSymbols",
                },
                {
                  value: "RearrangeEquation",
                  label: "RearrangeEquation",
                },
              ],
            },
            {
              value: "combinatorics",
              label: "combinatorics",
              children: [
                {
                  value: "GeneralizedPascalsTriangle",
                  label: "GeneralizedPascalsTriangle",
                },
                {
                  value: "PascalsTriangle",
                  label: "PascalsTriangle",
                },
              ],
            },
          ],
        },
        {
          value: "for_3b1b_videos",
          label: "for_3b1b_videos",
          children: [
            {
              value: "pi_creature",
              label: "pi_creature",
              children: [
                {
                  value: "BabyPiCreature",
                  label: "BabyPiCreature",
                },
                {
                  value: "Eyes",
                  label: "Eyes",
                },
                {
                  value: "Mathematician",
                  label: "Mathematician",
                },
                {
                  value: "Mortimer",
                  label: "Mortimer",
                },
                {
                  value: "PiCreature",
                  label: "PiCreature",
                },
                {
                  value: "Randolph",
                  label: "Randolph",
                },
                {
                  value: "TauCreature",
                  label: "TauCreature",
                },
                {
                  value: "ThreeLeggedPiCreature",
                  label: "ThreeLeggedPiCreature",
                },
              ],
            },
            {
              value: "common_scenes",
              label: "common_scenes",
              children: [
                {
                  value: "Banner",
                  label: "Banner",
                },
                {
                  value: "ExternallyAnimatedScene",
                  label: "ExternallyAnimatedScene",
                },
                {
                  value: "LogoGenerationTemplate",
                  label: "LogoGenerationTemplate",
                },
                {
                  value: "OpeningQuote",
                  label: "OpeningQuote",
                },
                {
                  value: "PatreonEndScreen",
                  label: "PatreonEndScreen",
                },
                {
                  value: "PatreonThanks",
                  label: "PatreonThanks",
                },
                {
                  value: "TODOStub",
                  label: "TODOStub",
                },
              ],
            },
            {
              value: "pi_creature_animations",
              label: "pi_creature_animations",
              children: [
                {
                  value: "Blink",
                  label: "Blink",
                },
                {
                  value: "FlashThroughClass",
                  label: "FlashThroughClass",
                },
                {
                  value: "PiCreatureBubbleIntroduction",
                  label: "PiCreatureBubbleIntroduction",
                },
                {
                  value: "PiCreatureSays",
                  label: "PiCreatureSays",
                },
                {
                  value: "RemovePiCreatureBubble",
                  label: "RemovePiCreatureBubble",
                },
              ],
            },
            {
              value: "pi_creature_scene",
              label: "pi_creature_scene",
              children: [
                {
                  value: "MortyPiCreatureScene",
                  label: "MortyPiCreatureScene",
                },
                {
                  value: "PiCreatureScene",
                  label: "PiCreatureScene",
                },
                {
                  value: "TeacherStudentsScene",
                  label: "TeacherStudentsScene",
                },
              ],
            },
            {
              value: "pi_class",
              label: "pi_class",
              children: [
                {
                  value: "PiCreatureClass",
                  label: "PiCreatureClass",
                },
              ],
            },
          ],
        },
        {
          value: "camera",
          label: "camera",
          children: [
            {
              value: "camera",
              label: "camera",
              children: [
                {
                  value: "BackgroundColoredVMobjectDisplayer",
                  label: "BackgroundColoredVMobjectDisplayer",
                },
                {
                  value: "Camera",
                  label: "Camera",
                },
              ],
            },
            {
              value: "moving_camera",
              label: "moving_camera",
              children: [
                {
                  value: "CameraFrame",
                  label: "CameraFrame",
                },
                {
                  value: "MovingCamera",
                  label: "MovingCamera",
                },
              ],
            },
            {
              value: "mapping_camera",
              label: "mapping_camera",
              children: [
                {
                  value: "MappingCamera",
                  label: "MappingCamera",
                },
                {
                  value: "OldMultiCamera",
                  label: "OldMultiCamera",
                },
                {
                  value: "SplitScreenCamera",
                  label: "SplitScreenCamera",
                },
              ],
            },
            {
              value: "multi_camera",
              label: "multi_camera",
              children: [
                {
                  value: "MultiCamera",
                  label: "MultiCamera",
                },
              ],
            },
            {
              value: "three_d_camera",
              label: "three_d_camera",
              children: [
                {
                  value: "ThreeDCamera",
                  label: "ThreeDCamera",
                },
              ],
            },
          ],
        },
        {
          value: "container",
          label: "container",
          children: [
            {
              value: "container",
              label: "container",
              children: [
                {
                  value: "Container",
                  label: "Container",
                },
              ],
            },
          ],
        },
        {
          value: "utils",
          label: "utils",
          children: [
            {
              value: "config_ops",
              label: "config_ops",
              children: [
                {
                  value: "DictAsObject",
                  label: "DictAsObject",
                },
              ],
            },
          ],
        },
        {
          value: "scene",
          label: "scene",
          children: [
            {
              value: "scene",
              label: "scene",
              children: [
                {
                  value: "EndSceneEarlyException",
                  label: "EndSceneEarlyException",
                },
                {
                  value: "Scene",
                  label: "Scene",
                },
              ],
            },
            {
              value: "graph_scene",
              label: "graph_scene",
              children: [
                {
                  value: "GraphScene",
                  label: "GraphScene",
                },
              ],
            },
            {
              value: "vector_space_scene",
              label: "vector_space_scene",
              children: [
                {
                  value: "LinearTransformationScene",
                  label: "LinearTransformationScene",
                },
                {
                  value: "VectorScene",
                  label: "VectorScene",
                },
              ],
            },
            {
              value: "moving_camera_scene",
              label: "moving_camera_scene",
              children: [
                {
                  value: "MovingCameraScene",
                  label: "MovingCameraScene",
                },
              ],
            },
            {
              value: "reconfigurable_scene",
              label: "reconfigurable_scene",
              children: [
                {
                  value: "ReconfigurableScene",
                  label: "ReconfigurableScene",
                },
              ],
            },
            {
              value: "sample_space_scene",
              label: "sample_space_scene",
              children: [
                {
                  value: "SampleSpaceScene",
                  label: "SampleSpaceScene",
                },
              ],
            },
            {
              value: "scene_file_writer",
              label: "scene_file_writer",
              children: [
                {
                  value: "SceneFileWriter",
                  label: "SceneFileWriter",
                },
              ],
            },
            {
              value: "scene_from_video",
              label: "scene_from_video",
              children: [
                {
                  value: "SceneFromVideo",
                  label: "SceneFromVideo",
                },
              ],
            },
            {
              value: "three_d_scene",
              label: "three_d_scene",
              children: [
                {
                  value: "SpecialThreeDScene",
                  label: "SpecialThreeDScene",
                },
                {
                  value: "ThreeDScene",
                  label: "ThreeDScene",
                },
              ],
            },
            {
              value: "zoomed_scene",
              label: "zoomed_scene",
              children: [
                {
                  value: "ZoomedScene",
                  label: "ZoomedScene",
                },
              ],
            },
          ],
        },
      ],
      //显示用
      picture_quality: [
        {
          value: "w",
          label: "2560*1440",
        },
        {
          value: "h",
          label: "1920*1080",
        },
        {
          value: "m",
          label: "1280*720",
        },
        {
          value: "l",
          label: "854*480",
        },
      ],
      nameList: [
        {
          value: "self",
          label: "self",
        },
      ],
      functionList: [
        {
          value: "get_arc_center",
          label: "get_arc_center",
        },
      ],
      function_display_template: {
        value: "",
        label: "",
      },
      //查询用
      n2cDict: {
        self: "manimlib.scene.scene.Scene",
        //instance1: "manimlib.mobject.geometry.Arc",
      },
      //显示用
      tableData: [
        {
          class: "TextMobject",
          name: "text1",
          function: "",
          param_list: [
            {
              name: "VarArgs0",
              type: "string",
              value: "Hello ManimOnline!",
              param_tag: "varargs",
            },
          ],
          tag: "create_instance",
        },
        {
          class: "TexMobject",
          name: "tex1",
          function: "",
          param_list: [
            {
              name: "VarArgs0",
              type: "string",
              value: "\\sum_{k=1}^\\infty {1 \\over k^2} = {\\pi^2 \\over 6}",
              param_tag: "varargs",
            },
          ],
          tag: "create_instance",
        },
        {
          class: "VGroup",
          name: "group1",
          function: "",
          param_list: [
            {
              name: "VarArgs0",
              type: "instance",
              value: "text1",
              param_tag: "varargs",
            },
            {
              name: "VarArgs1",
              type: "instance",
              value: "tex1",
              param_tag: "varargs",
            },
          ],
          tag: "create_instance",
        },
        {
          class: "VGroup",
          name: "group1",
          function: "arrange",
          param_list: [
            {
              name: "direction",
              type: "constant",
              value: "DOWN",
              param_tag: "normal",
            },
          ],
          tag: "call_function",
        },
        {
          class: "VGroup",
          name: "group1",
          function: "set_width",
          param_list: [
            {
              name: "width",
              type: "constant",
              value: "FRAME_WIDTH - 2 * LARGE_BUFF",
              param_tag: "normal",
            },
          ],
          tag: "call_function",
        },
        {
          class: "Write",
          name: "write1",
          function: "",
          param_list: [
            {
              name: "mobject",
              type: "instance",
              value: "text1",
              param_tag: "normal",
            },
          ],
          tag: "create_instance",
        },
        {
          class: "Write",
          name: "write2",
          function: "",
          param_list: [
            {
              name: "mobject",
              type: "instance",
              value: "tex1",
              param_tag: "normal",
            },
          ],
          tag: "create_instance",
        },
        {
          class: "Scene",
          name: "self",
          function: "play",
          param_list: [
            {
              name: "VarArgs0",
              type: "instance",
              value: "write1",
              param_tag: "varargs",
            },
          ],
          tag: "call_function",
        },
        {
          class: "Scene",
          name: "self",
          function: "play",
          param_list: [
            {
              name: "VarArgs0",
              type: "instance",
              value: "write2",
              param_tag: "varargs",
            },
          ],
          tag: "call_function",
        },
      ],
    };
  },
  methods: {
    Set_line_index(index) {
      this.line_index = index;
      console.log(this.line_index);
      alert("获取成功！");
    },
    handleChange(val) {
      console.log(val);
    },
    handleDialogClose(done) {
      var that = this;
      axios
        .get(this.mobject_address)
        .then(function (response) {
          console.log(response);
          var msg = response.data;
          var data = {
            class: "",
            name: "",
            function: "",
            param_list: [],
            tag: "",
          };
          for (var i = 0; i < msg.arguments.length; i++) {
            var name_value = {
              name: "",
              type: "",
              value: "",
              param_tag: "",
            };
            name_value.name = msg.arguments[i].name;
            name_value.value = msg.arguments[i].default;
            name_value.param_tag = "normal";
            data.param_list.push(name_value);
          }
          data.tag = "call_function";
          data.class = that.n2cDict[that.instance_name];
          data.name = that.instance_name;
          data.function = that.function_name;
          that.tableData.push(data);
          console.log(that.tableData);
        })
        .catch(function (response) {
          alert("Error:" + console.error());
          console.log(response);
        });
    },
    handleClassChosen(val) {
      this.full_class_name = "manimlib.";
      this.simple_class_name = "";
      this.mobject_address = "/param?function=";
      console.log(val);

      this.tmp = val;
      for (var i = 0; i < this.tmp.length - 1; i++) {
        this.full_class_name += this.tmp[i];
        this.full_class_name += ".";
      }
      this.simple_class_name = this.tmp[this.tmp.length - 1];
      this.full_class_name += this.simple_class_name;
      this.mobject_address += this.full_class_name + ".__init__";
    },
    handleInstanceChosen(val) {
      var that = this;
      //TODO: 更改物品名称为选中的
      this.function_address = "/function?class=";
      this.function_address += this.n2cDict[val[0]];
      this.instance_name = this.n2cDict[val[0]];
      axios
        .get(this.function_address)
        .then(function (response) {
          console.log(response);
          var msg = response.data;
          console.log(msg.functions);
          for (var i = 0; i < msg.functions.length; i++) {
            var name_item = {
              value: "",
              label: "",
            };
            name_item.value = msg.functions[i];
            name_item.label = msg.functions[i];
            that.functionList.push(name_item);
          }
        })
        .catch(function (response) {
          alert("Error:" + console.error());
          console.log(response);
        });
    },
    handleFunctionChosen(val) {
      this.mobject_name = this.instance_name;
      this.mobject_name += ".";
      this.mobject_name += val[0];
      this.mobject_address =
        "/param?function=" + this.mobject_name;
    },
    deleteRow(index, rows) {
      rows.splice(index, 1);
      console.log(this.tableData);
    },
    tableDbEdit(row, column, cell, event) {
      var that = this;
      console.log(row);
      console.log(column);
      var index = 0;
      var specialChange = 0;
      var nameList_index = 0;
      var full_class = "";
      if ("param_tag" in row) {
        var pl = this.tableData[this.line_index].param_list;
        for (var i = 0; i < pl.length; i++) {
          if (this.tableData[this.line_index].param_list[i].name == row.name) {
            index = i;
          }
        }
      } else {
        if (row.tag == "create_instance" && column.property == "name") {
          specialChange = 1;
          for (var i = 0; i < this.nameList.length; i++) {
            if (this.nameList[i].value == row.name) {
              nameList_index = i;
            }
          }
          full_class = this.n2cDict[row.name];
        }
        for (var i = 0; i < this.tableData.length; i++) {
          if (this.tableData[i].name == row.name) {
            index = i;
          }
        }
      }
      if (
        column.label != "参数名称" &&
        column.label != "标签" &&
        column.label != "操作" &&
        column.label != "物品类型"
      ) {
        //哪些字段不可编辑，可以在if里面做限制，可编辑的字段往下执行
        event.target.innerHTML = "";
        let cellInput = document.createElement("input");
        cellInput.value = "";
        cellInput.setAttribute("type", "text");
        cellInput.style.width = "80%";
        cellInput.style.padding = "0px";
        cellInput.style.border = "1px solid #288EFE";
        cellInput.style.borderRadius = "3px";
        cell.appendChild(cellInput);
        //当鼠标失去焦点时，判断输入是否为空，为空的话可以删除input
        cellInput.onblur = function () {
          if (cellInput.value == "") {
            message_w("字段名不能为空");
            cellInput.style.border = "1px solid #FD1B1E";
          } else {
            cell.removeChild(cellInput);
            event.target.innerText = cellInput.value;
            var prop_name = column.property;
            console.log(prop_name);
            console.log(index);
            console.log(that.tableData);
            if ("param_tag" in row) {
              that.tableData[that.line_index].param_list[index][prop_name] =
                cellInput.value;
              print(that.tableData);
            } else {
              if (specialChange == 1) {
                that.nameList[nameList_index].value = cellInput.value;
                that.nameList[nameList_index].label = cellInput.value;
                that.n2cDict[cellInput.value] = full_class;
              }
              that.tableData[index][prop_name] = cellInput.value;
            }
          }
        };
      }
    },
    Create_Instance() {
      var that = this;
      axios
        .get(that.mobject_address)
        .then(function (response) {
          console.log(response);
          var msg = response.data;
          var data = {
            class: "",
            name: "",
            function: "",
            param_list: [],
            tag: "",
          };
          for (var i = 0; i < msg.arguments.length; i++) {
            var name_value = {
              name: "",
              type: "",
              value: "",
              param_tag: "",
            };
            name_value.name = msg.arguments[i].name;
            name_value.value = msg.arguments[i].default;
            name_value.param_tag = "normal";
            data.param_list.push(name_value);
          }
          data.tag = "create_instance";
          data.class = that.simple_class_name;
          data.name = "new_instance"; //物品名称，可编辑
          that.tableData.push(data);
          //更新名称列表
          that.n2cDict[data.name] = that.full_class_name;
          var name_item = {
            value: data.name,
            label: data.name,
          };
          that.nameList.push(name_item);
        })
        .catch(function (response) {
          alert("Error:" + console.error());
          console.log(response);
        });
    },
    Create_Varargs(index) {
      var name_value = {
        name: "",
        type: "",
        value: "",
        param_tag: "",
      };
      name_value.name = this.tableData[index].param_list.length;
      name_value.type = "other";
      name_value.value = "";
      name_value.param_tag = "varargs";
      this.tableData[index].param_list.push(name_value);
    },
    submit() {
      var data = {
        username: "",
        scene_name: "",
        quality: "",
        mode: "",
        codes: [],
      };
      data.username = this.ID; //TODO
      data.scene_name = this.input; //TODO
      data.quality = this.choose_quality;
      data.mode = "interactive";
      if (data.mode == "interactive") {
        var code_temp = [];
        for (var i = 0; i < this.tableData.length; i++) {
          if (this.tableData[i].tag == "create_instance") {
            var t_ci = {
              type: "create_instance",
              name: this.tableData[i].name,
              class: this.tableData[i].class,
              params: {},
            };
            var t_param = this.tableData[i].param_list;
            var varargs_list = [];
            for (var j = 0; j < t_param.length; j++) {
              var t_par_item = {
                type: t_param[j].type,
                content: t_param[j].value,
              };
              if (t_param[j].param_tag == "normal") {
                t_ci.params[t_param[j].name] = t_par_item;
              } else if (t_param[j].param_tag == "varargs") {
                varargs_list.push(t_par_item);
              }
            }
            t_ci.params["varargs"] = varargs_list;
            code_temp.push(t_ci);
          } else if (this.tableData[i].tag == "call_function") {
            var t_ci = {
              type: "call_function",
              instance: this.tableData[i].name,
              function: this.tableData[i].function,
              params: {},
            };
            var t_param = this.tableData[i].param_list;
            var varargs_list = [];
            for (var j = 0; j < t_param.length; j++) {
              var t_par_item = {
                type: t_param[j].type,
                content: t_param[j].value,
              };
              if (t_param[j].param_tag == "normal") {
                t_ci.params[t_param[j].name] = t_par_item;
              } else if (t_param[j].param_tag == "varargs") {
                varargs_list.push(t_par_item);
              }
            }
            t_ci.params["varargs"] = varargs_list;
            code_temp.push(t_ci);
          }
        }
        data.codes = code_temp;
      }
      var data_json = JSON.stringify(data);
      console.log(data_json);
      this.axios({
        method: "POST",
        url: "/generate",
        data: data_json,
      }).then((res) => {
        console.log(res);
        if (res.status == 200) {
          this.$message({
            message: "动画生成成功",
            type: "success",
          });
          var pos =
            "/video?username=" +
            data.username +
            "&scene_name=" +
            data.scene_name +
            "&quality=" +
            data.quality;
          console.log(pos);
          window.location.href = pos;
        } else {
          this.$message({
            message: "选择错误，动画生成失败",
            type: "error",
          });
        }
      });
    },
    resetDateFilter() {
      this.$refs.filterTable.clearFilter("date");
    },
    clearFilter() {
      this.$refs.filterTable.clearFilter();
    },
    formatter(row, column) {
      return row.address;
    },
    filterTag(value, row) {
      return row.tag === value;
    },
    filterHandler(value, row, column) {
      const property = column["property"];
      return row[property] === value;
    },
    load(data) {},
  },
  mounted: function () {
    this.ID = this.$route.query.userID;
    console.log(this.ID);
  },
};
</script>

<style scoped>
.center {
  text-align: center;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.table {
  position: relative;
  text-align: center;
  width: 800px;
}
.Style1 {
  float: none;
}
</style>

