import * as Component from "./types/component";
import html from "./render/html";
import svg from "./render/svg";
// import three from "./render/three";
// import chart from "./render/chart";
// import graph from "./render/graph";
// import node from "./render/node";

export default [
  {
    key: Component.Type.html,
    extension: (props: Record<string, any>) => {
      let attribute: any = [],
        slot = true,
        style: any = [];
      if (props.tag === "img") {
        attribute = attribute.concat([
          {
            tag: "input",
            key: "src",
            label: "地址",
            defaultValue: "",
            options: {
              tooltip: "请输入图片地址",
              placeholder: "请输入图片地址"
            }
          },
          {
            tag: "selectInput",
            key: "X",
            label: "X轴",
            defaultValue: [{ label: "总用电量", key: "rainfall" }],
            options: {
              placeholder: "请选择",
              tooltip: "",
              tags: [
                { label: "总用电量", key: "rainfall" },
                { label: "日期", key: "date" },
                { label: "test", key: "test" }
              ]
            }
          },
          {
            tag: "selectInput",
            key: "Y",
            label: "Y轴",
            defaultValue: "",
            options: {
              placeholder: "请选择",
              tooltip: "",
              tags: [
                { label: "总用电量", key: "rainfall" },
                { label: "日期", key: "date" },
                { label: "test", key: "test" }
              ]
            }
          }
        ]);
      }
      if (props.tag === "span") {
        attribute.push({
          tag: "input",
          key: "name",
          label: "标题",
          defaultValue: "",
          options: {
            tooltip: "请输入标题",
            placeholder: "请输入标题"
          }
        });
      }

      attribute = attribute.concat([
        {
          tag: "select",
          key: "click",
          label: "单击",
          defaultValue: "",
          options: {
            tooltip: "",
            options: ["test1", "test2", "test3"],
            placeholder: "-   -"
          }
        },
        {
          tag: "select",
          key: "doubelClick",
          label: "双击",
          defaultValue: "test11",
          options: {
            tooltip: "",
            options: [
              { name: "test1", value: "test11" },
              "test2",
              { name: "test3", value: "test33" }
            ],
            placeholder: "-   -"
          }
        },
        {
          tag: "selectCheckbox",
          key: "equipment",
          defaultValue: ["001", "102"],
          label: "对象选择",
          options: {
            placeholder: "对象选择",
            options: [
              {
                label: "设备",
                val: "1",
                children: [
                  {
                    label: "筒灯-001",
                    val: "001"
                  },
                  {
                    label: "空调",
                    val: "002"
                  },
                  {
                    label: "窗帘",
                    val: "004"
                  }
                ]
              },
              {
                label: "模式",
                val: "2",
                children: [
                  {
                    label: "模式一",
                    val: "101"
                  },
                  {
                    label: "模式2",
                    val: "102"
                  }
                ]
              }
            ]
          }
        }
      ]);
      style = [
        {
          tag: "background",
          key: "background",
          label: "背景",
          defaultValue: {
            "background-color": "rgba(242, 242, 242,0.5)",
            "background-image": "url(bg.gif);"
          },
          options: {
            tooltip: "",
            opacityMin: 0,
            opacityMax: 1
          }
        },
        {
          tag: "border",
          key: "border",
          label: "边框",
          defaultValue: {
            "border-width": "2px",
            "border-style": "",
            "border-color": "rgba(242, 242, 242,0.5)"
          },
          options: {
            opacityMin: 0,
            opacityMax: 1,
            widthMin: 0,
            widthMax: 20
          }
        }
      ];
      slot = false;
      return {
        attribute,
        style,
        source: {},
        props: {},
        slot
      };
    },
    component: html
  },
  {
    key: Component.Type.svg,
    extension: {},
    component: svg
  }
  // {
  //   key: Component.Type.three,
  //   extension: {},
  //   component: three
  // },
  // {
  //   key: Component.Type.chart,
  //   extension: (props: Record<string, any>) => {
  //     let attribute: any = [],
  //       slot = true,
  //       style: any = [];
  //     attribute = [
  //       {
  //         tag: "chart",
  //         key: "chart",
  //         label: "图表",
  //         defaultValue: "",
  //         options: {}
  //       }
  //     ];
  //     style = [
  //       {
  //         tag: "background",
  //         key: "background",
  //         label: "背景",
  //         defaultValue: {
  //           "background-color": "rgba(242, 242, 242,0)"
  //         },
  //         options: {
  //           tooltip: "",
  //           opacityMin: 0,
  //           opacityMax: 1,
  //           colorStyleName: "background-color"
  //         }
  //       },
  //       {
  //         tag: "border",
  //         key: "border",
  //         label: "边框",
  //         defaultValue: {
  //           "border-width": "1px",
  //           "border-style": "solid",
  //           "border-color": "rgba(242, 242, 242,0)"
  //         },
  //         options: {
  //           opacityMin: 0,
  //           opacityMax: 1,
  //           colorStyleName: "border-color",
  //           widthMin: 0,
  //           widthMax: 5
  //         }
  //       }
  //     ];
  //     return {
  //       attribute,
  //       style,
  //       source: {},
  //       props: {},
  //       slot
  //     };
  //   },
  //   component: chart
  // },
  // {
  //   key: Component.Type.graph,
  //   extension: (props: Record<string, any>) => {
  //     console.log(props, "props");
  //     return {
  //       attribute: [],
  //       style: [],
  //       slot: true
  //     };
  //   },
  //   component: graph
  // },
  // {
  //   key: Component.Type.node,
  //   extension: (props: Record<string, any>) => {
  //     console.log(props, "props");
  //     return {
  //       attribute: [],
  //       style: []
  //       // slot: true
  //     };
  //   },
  //   component: node
  // }
];