import { Pen, FormItem } from '@meta2d/core';
import { ReplaceMode } from '@meta2d/chart-diagram';
import { cdn } from './api';

export const lineDashObj = [
  undefined,
  [5, 5],
  [10, 10],
  [10, 10, 2, 10],
  [1, 16],
];

/**
 * 默认动画
 */
export const normalAnimate: any = {
  upDown: [
    {
      y: -10,
      duration: 100,
    },
    { y: 0, duration: 100 },
    { y: -10, duration: 200 },
  ],
  leftRight: [
    {
      x: -10,
      duration: 100,
    },
    {
      x: 10,
      duration: 80,
    },
    {
      x: -10,
      duration: 50,
    },
    {
      x: 10,
      duration: 30,
    },
    {
      x: 0,
      duration: 300,
    },
  ],
  heart: [
    {
      // 通过 scale 来替代原版心跳
      scale: 1.1,
      duration: 100,
    },
    {
      scale: 1,
      duration: 400,
    },
  ],
  success: [{ background: '#389e0d22', color: '#237804', duration: 500 }],
  warning: [
    {
      color: '#fa8c16',
      lineDash: [10, 10],
      duration: 300,
    },
    {
      color: '#fa8c16',
      lineDash: undefined,
      duration: 500,
    },
    {
      color: '#fa8c16',
      lineDash: [10, 10],
      duration: 300,
    },
  ],
  error: [{ color: '#cf1322', background: '#cf132222', duration: 100 }],
  show: [
    {
      color: '#fa541c',
      rotate: -10,
      duration: 100,
    },
    {
      color: '#fa541c',
      rotate: 10,
      duration: 100,
    },
    {
      color: '#fa541c',
      rotate: 0,
      duration: 100,
    },
  ],
  rotate: [
    {
      rotate: 360,
      duration: 1000,
    },
  ],
};

export const defaultFormat: Pen = {
  borderRadius: 0,
  rotate: 0,
  paddingLeft: 0,
  paddingRight: 0,
  paddingTop: 0,
  paddingBottom: 0,
  progress: 0,
  progressColor: '#fff0',
  verticalProgress: false,
  flipX: false,
  flipY: false,
  input: false,
  lineDash: [],
  lineCap: 'round',
  lineJoin: 'round',
  strokeType: 0,
  lineGradientFromColor: undefined,
  lineGradientToColor: undefined,
  lineGradientAngle: 0,
  // color: "#222",
  hoverColor: undefined,
  activeColor: undefined,
  lineWidth: 0,
  bkType: 0,
  gradientFromColor: undefined,
  gradientToColor: undefined,
  gradientAngle: 0,
  gradientRadius: 0,
  hoverBackground: undefined,
  activeBackground: undefined,
  globalAlpha: 1,
  anchorColor: undefined,
  anchorRadius: 0,
  shadowColor: undefined,
  shadowBlur: 0,
  shadowOffsetX: 0,
  shadowOffsetY: 0,
  textHasShadow: undefined,
  fontFamily: undefined,
  fontSize: 0,
  textColor: undefined,
  hoverTextColor: undefined,
  activeTextColor: undefined,
  textBackground: undefined,
  fontStyle: undefined,
  fontWeight: undefined,
  textAlign: undefined,
  textBaseline: undefined,
  lineHeight: 0,
  whiteSpace: undefined,
  textWidth: 0,
  textHeight: 0,
  textLeft: 0,
  textTop: 0,
  ellipsis: false,
  hiddenText: false,
  keepDecimal: 0,
  borderWidth: 0,
  borderColor: undefined,
  animateLineWidth: 0,
  lineAnimateType: 0,
  frames: [],
  animateColor: undefined,
  // animateType: undefined,
  animateReverse: false,
  background: '#fff0',
  gradientColors: undefined,
  lineGradientColors: undefined,
  gradientSmooth: 0,
};

export interface FormItemType extends FormItem {
  key: string; // 属性标识，绑定变量时使用
  key2?: string; // 有些属性存在嵌套
  name: string; // 标题
  tips?: string; // 提示
  placeholder?: string; // input placeholder
  type:
    | 'text' // string 类型输入框
    | 'number'
    | 'color'
    | 'textarea'
    | 'select'
    | 'switch'
    | 'code'
    | 'image'
    | 'icon'
    | 'slider'
    | 'autoComplete'
    | 'label'; // 文字，不含输入框;
  options?: {
    // 选项
    label: string; // 选项的标题，可以使用 html
    value: any; // 选项的值
    disabled?: boolean;
  }[];
  min?: number; // 最小值
  max?: number; // 最大值
  step?: number; // 步长
  rows?: number; // textarea 所需要的行数
  iconFamily?: string; // icon 类型节点需要
  title?: string; // code 类型编辑器需要
  language?: 'javascript' | 'json' | 'markdown'; // code 编辑器需要
  readonly?: boolean; // 是否只读
  mode?: 'multiple' | 'tags'; // select 选项
  isNotString?: boolean; // monaco 需要 string 类型的 code ，不是 string 协助转换

  multiple?: boolean; // 绑定多个属性
  isTime?: boolean; // 是否是时序的， undefined 不会出现 历史趋势 的 checkbox
  isYCategory?: boolean; // y 轴是否是分类，true y 轴分类，false x 轴分类，undefined 不会出现 y轴分类轴 的 checkbox
  // 绑定单个属性是对象， 多个数组
  // dataIds?: BindId | BindId[]; // 关联业务数据
  precision?: number; //精度
  gradient?: boolean; //是否为渐变色
  hidden?: boolean; //是否隐藏
}

export const shapes = [
  {
    name: '基本形状',
    show: true,
    list: [
      {
        name: '正方形',
        icon: 'l-rect',
        id: 1,
        data: {
          width: 100,
          height: 100,
          name: 'square',
        },
      },
      {
        name: '矩形',
        icon: 'l-rectangle',
        id: 2,
        data: {
          width: 200,
          height: 50,
          borderRadius: 0.1,
          name: 'rectangle',
        },
      },
      {
        name: '圆',
        icon: 'l-circle',
        id: 3,
        data: {
          width: 100,
          height: 100,
          name: 'circle',
        },
      },
      {
        name: '三角形',
        icon: 'l-triangle',
        id: 4,
        data: {
          width: 100,
          height: 100,
          name: 'triangle',
        },
      },
      {
        name: '菱形',
        icon: 'l-diamond',
        id: 5,
        data: {
          width: 100,
          height: 100,
          name: 'diamond',
        },
      },
      {
        name: '五边形',
        icon: 'l-pentagon',
        id: 6,
        data: {
          width: 100,
          height: 100,
          name: 'pentagon',
        },
      },
      {
        name: '六边形',
        icon: 'l-hexagon',
        id: 7,
        data: {
          width: 100,
          height: 100,
          name: 'hexagon',
        },
      },
      {
        name: '五角星',
        icon: 'l-pentagram',
        id: 8,
        data: {
          width: 100,
          height: 100,
          name: 'pentagram',
        },
      },
      {
        name: '左箭头',
        icon: 'l-arrow-left',
        id: 9,
        data: {
          width: 120,
          height: 60,
          name: 'leftArrow',
        },
      },
      {
        name: '右箭头',
        icon: 'l-arrow-right',
        id: 10,
        data: {
          width: 120,
          height: 60,
          name: 'rightArrow',
        },
      },
      {
        name: '双向箭头',
        icon: 'l-twoway-arrow',
        id: 11,
        data: {
          width: 150,
          height: 60,
          name: 'twowayArrow',
        },
      },
      {
        name: '云',
        icon: 'l-cloud',
        id: 13,
        data: {
          width: 100,
          height: 100,
          name: 'cloud',
        },
      },
      {
        name: '消息框',
        icon: 'l-msg',
        id: 14,
        data: {
          textTop: -0.1,
          width: 100,
          height: 100,
          name: 'message',
        },
      },
      {
        name: '文件',
        icon: 'l-file',
        id: 15,
        data: {
          width: 80,
          height: 100,
          name: 'file',
        },
      },
      {
        name: '文字',
        icon: 'l-text',
        id: 16,
        data: {
          width: 160,
          height: 30,
          name: 'text',
        },
      },
      {
        name: '图片',
        icon: 'l-image',
        id: 17,
        data: {
          width: 100,
          height: 100,
          name: 'image',
          image: cdn + '/img/logo.png',
        },
      },
      {
        name: '立方体',
        icon: 'l-cube',
        id: 18,
        data: {
          width: 60,
          height: 100,
          name: 'cube',
          z: 0.25,
          props: [
            {
              key: 'z',
              label: 'Z',
              type: 'number',
              min: 0,
              placeholder: '<= 1 即宽度的比例',
            },
            {
              key: 'backgroundFront',
              label: '前背景色',
              type: 'color',
            },
            {
              key: 'backgroundUp',
              label: '顶背景色',
              type: 'color',
            },
            {
              key: 'backgroundRight',
              label: '右背景色',
              type: 'color',
            },
          ],
        },
      },
      {
        name: '人',
        icon: 'l-people',
        id: 19,
        data: {
          width: 70,
          height: 100,
          name: 'people',
        },
      },
      {
        name: '视频',
        icon: 'l-pc',
        id: 20,
        data: {
          width: 200,
          height: 200,
          externElement: true,
          name: 'video',
          video:
            'https://video.699pic.com/videos/17/69/11/a_aa3jeKZ0D63g1556176911_10s.mp4',
        },
      },
      {
        name: '网页',
        icon: 'l-02',
        id: 21,
        data: {
          name: 'iframe',
          width: 100,
          height: 100,
          externElement: true,
          iframe: 'http://le5le.com',
        },
      },
    ],
  },
  {
    name: '脑图',
    show: true,
    list: [
      {
        name: '主题',
        icon: 'l-zhuti',
        data: {
          text: '主题',
          width: 200,
          height: 50,
          name: 'mindNode',
          borderRadius: 0.5,
        },
      },
      {
        name: '子主题',
        icon: 'l-zizhuti',
        data: {
          text: '子主题',
          width: 160,
          height: 40,
          name: 'mindLine',
        },
      },
    ],
  },
  {
    name: '流程图',
    show: true,
    list: [
      {
        name: '开始/结束',
        icon: 'l-flow-start',
        id: 21,
        data: {
          text: '开始/结束',
          width: 120,
          height: 40,
          borderRadius: 0.5,
          name: 'rectangle',
        },
      },
      {
        name: '流程',
        icon: 'l-rectangle',
        id: 22,
        data: {
          text: '流程',
          width: 120,
          height: 40,
          name: 'rectangle',
        },
      },
      {
        name: '判定',
        icon: 'l-diamond',
        id: 23,
        data: {
          text: '判定',
          width: 120,
          height: 60,
          name: 'diamond',
        },
      },
      {
        name: '数据',
        icon: 'l-flow-data',
        id: 24,
        data: {
          text: '数据',
          width: 120,
          height: 50,
          name: 'flowData',
          offsetX: 0.14,
          form: [
            {
              key: 'offsetX',
              name: '斜率',
              type: 'number',
              min: 0,
              step: 0.1,
              placeholder: '<= 1 即宽度的比例',
            },
          ] as FormItemType[],
        },
      },
      {
        name: '准备',
        icon: 'l-flow-ready',
        id: 25,
        data: {
          text: '准备',
          width: 120,
          height: 50,
          name: 'hexagon',
        },
      },
      {
        name: '子流程',
        icon: 'l-flow-subprocess',
        id: 26,
        data: {
          text: '子流程',
          width: 120,
          height: 50,
          name: 'flowSubprocess',
        },
      },
      {
        name: '数据库',
        icon: 'l-db',
        id: 27,
        data: {
          text: '数据库',
          width: 80,
          height: 120,
          name: 'flowDb',
        },
      },
      {
        name: '文档',
        icon: 'l-flow-document',
        id: 28,
        data: {
          text: '文档',
          width: 120,
          height: 100,
          name: 'flowDocument',
        },
      },
      {
        name: '内部存储',
        icon: 'l-internal-storage',
        id: 29,
        data: {
          text: '内部存储',
          width: 120,
          height: 80,
          name: 'flowInternalStorage',
        },
      },
      {
        name: '外部存储',
        icon: 'l-extern-storage',
        id: 30,
        data: {
          text: '外部存储',
          width: 120,
          height: 80,
          name: 'flowExternStorage',
        },
      },
      {
        name: '队列',
        icon: 'l-flow-queue',
        id: 31,
        data: {
          text: '队列',
          width: 100,
          height: 100,
          name: 'flowQueue',
        },
      },
      {
        name: '手动输入',
        icon: 'l-flow-manually',
        id: 32,
        data: {
          text: '手动输入',
          width: 120,
          height: 80,
          name: 'flowManually',
        },
      },
      {
        name: '展示',
        icon: 'l-flow-display',
        id: 33,
        data: {
          text: '展示',
          width: 120,
          height: 80,
          name: 'flowDisplay',
        },
      },
      {
        name: '并行模式',
        icon: 'l-flow-parallel',
        id: 34,
        data: {
          text: '并行模式',
          width: 120,
          height: 50,
          name: 'flowParallel',
        },
      },
      {
        name: '注释',
        icon: 'l-flow-comment',
        id: 35,
        data: {
          text: '注释',
          width: 100,
          height: 100,
          name: 'flowComment',
        },
      },
    ],
  },
  {
    name: '活动图',
    show: true,
    list: [
      {
        name: '开始',
        icon: 'l-inital',
        id: 36,
        data: {
          text: '',
          width: 30,
          height: 30,
          name: 'circle',
          background: '#555',
          lineWidth: 0,
        },
      },
      {
        name: '结束',
        icon: 'l-final',
        id: 37,
        data: {
          width: 30,
          height: 30,
          name: 'activityFinal',
        },
      },
      {
        name: '活动',
        icon: 'l-action',
        id: 38,
        data: {
          text: '活动',
          width: 120,
          height: 50,
          borderRadius: 0.25,
          name: 'rectangle',
        },
      },
      {
        name: '决策/合并',
        icon: 'l-diamond',
        id: 39,
        data: {
          text: '决策/合并',
          width: 120,
          height: 50,
          name: 'diamond',
        },
      },
      {
        name: '垂直泳道',
        icon: 'l-swimlane-v',
        id: 40,
        data: {
          text: '垂直泳道',
          width: 200,
          height: 500,
          name: 'swimlaneV',
          textBaseline: 'top',
          textTop: 20,
          // textHeight: ,
          lineTop: 0.08,
        },
      },
      {
        name: '水平泳道',
        icon: 'l-swimlane-h',
        id: 41,
        data: {
          text: '水平泳道',
          width: 500,
          height: 200,
          name: 'swimlaneH',
          textWidth: 0.01,
          textLeft: 0.04,
          textAlign: 'left',
          lineLeft: 0.08,
        },
      },
      {
        name: '垂直分岔/汇合',
        icon: 'l-fork-v',
        id: 42,
        data: {
          text: '垂直分岔/汇合',
          width: 10,
          height: 150,
          name: 'forkV',
          fillStyle: '#555',
          strokeStyle: 'transparent',
        },
      },
      {
        name: '水平分岔/汇合',
        icon: 'l-fork',
        id: 43,
        data: {
          text: '水平分岔/汇合',
          width: 150,
          height: 10,
          name: 'forkH',
          fillStyle: '#555',
          strokeStyle: 'transparent',
        },
      },
    ],
  },
  {
    name: '时序图和类图',
    show: true,
    list: [
      {
        name: '生命线',
        icon: 'l-lifeline',
        id: 44,
        data: {
          text: '生命线',
          width: 150,
          height: 400,
          textHeight: 50,
          name: 'lifeline',
        },
      },
      {
        name: '激活',
        icon: 'l-focus',
        id: 45,
        data: {
          text: '激活',
          width: 12,
          height: 200,
          name: 'sequenceFocus',
        },
      },
      {
        name: '简单类',
        icon: 'l-simple-class',
        id: 46,
        data: {
          text: 'Topolgoy',
          width: 270,
          height: 200,
          textHeight: 200,
          name: 'simpleClass',
          textAlign: 'center',
          textBaseline: 'top',
          textTop: 10,
          list: [
            {
              text: '- name: string\n+ setName(name: string): void',
            },
          ],
        },
      },
      {
        name: '类',
        icon: 'l-class',
        id: 47,
        data: {
          text: 'Topolgoy',
          width: 270,
          height: 200,
          textHeight: 200,
          name: 'interfaceClass',
          textAlign: 'center',
          textBaseline: 'top',
          textTop: 10,
          list: [
            {
              text: '- name: string',
            },
            {
              text: '+ setName(name: string): void',
            },
          ],
        },
      },
    ],
  },

  {
    name: '故障树',
    show: true,
    list: [
      {
        name: '与门',
        icon: 'l-ANDmen',
        data: {
          name: 'andGate',
          width: 100,
          height: 150,
        },
      },
      {
        name: '基本事件',
        icon: 'l-jibenshijian',
        data: {
          name: 'basicEvent',
          width: 100,
          height: 150,
        },
      },
      {
        name: '未展开事件',
        icon: 'l-weizhankaishijian',
        data: {
          name: 'unexpandedEvent',
          width: 100,
          height: 150,
        },
      },
      {
        name: '优先AND门',
        icon: 'l-youxianANDmen',
        data: {
          name: 'priorityAndGate',
          width: 100,
          height: 150,
        },
      },
      {
        name: '禁止门',
        icon: 'l-jinzhimen',
        data: {
          name: 'forbiddenGate',
          width: 100,
          height: 150,
        },
      },
      {
        name: '事件',
        icon: 'l-shijian',
        data: {
          name: 'event',
          width: 100,
          height: 150,
        },
      },
      {
        name: '开关事件',
        icon: 'l-kaiguanshijian',
        data: {
          name: 'switchEvent',
          width: 100,
          height: 150,
        },
      },
      {
        name: '条件事件',
        icon: 'l-tiaojianshijian',
        data: {
          name: 'conditionalEvent',
          width: 150,
          height: 100,
        },
      },
      {
        name: '转移符号',
        icon: 'l-zhuanyifuhao',
        data: {
          name: 'transferSymbol',
          width: 100,
          height: 150,
        },
      },
      {
        name: '或门',
        icon: 'l-ORmen',
        data: {
          name: 'orGate',
          width: 100,
          height: 150,
        },
      },
      {
        name: '异或门',
        icon: 'l-yihuomen',
        data: {
          name: 'xorGate',
          width: 100,
          height: 150,
        },
      },
      {
        name: '表决门',
        icon: 'l-biaojuemen',
        data: {
          name: 'votingGate',
          width: 100,
          height: 150,
        },
      },
    ],
  },
];

export const charts = [
  {
    name: 'Echarts图表',
    show: true,
    list: [
      {
        name: '折线图',
        icon: 'l-line-chart',
        data: {
          name: 'echarts',
          width: 400,
          height: 300,
          externElement: true,
          form: [
            {
              key: 'dataY',
              name: '数据',
              type: 'text',
              readonly: true,
              placeholder: '仅绑定变量',
              multiple: true,
              isTime: false,
              isYCategory: false,
            },
            {
              key: 'echarts',
              name: 'echarts',
              type: 'code',
              language: 'json',
              isNotString: true,
            },
            {
              key: 'echarts',
              key2: 'max',
              type: 'number',
              name: '最大数量',
              placeholder: 'x',
            },
          ] as FormItemType[],
          disableAnchor: true,
          echarts: {
            option: {
              grid: {
                top: 10,
                bottom: 50,
                left: 40,
                right: 5,
              },
              dataZoom: [
                {
                  height: 16,
                  bottom: 10,
                },
              ],
              xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                axisLabel: {
                  fontSize: 12,
                },
              },
              yAxis: {
                type: 'value',
                axisLabel: {
                  fontSize: 12,
                },
              },
              series: [
                {
                  data: [820, 932, 901, 934, 1290, 1330, 1320],
                  type: 'line',
                },
              ],
            },
            max: 100,
          },
        },
      },
      {
        name: '柱状图',
        icon: 'l-bar-chart',
        data: {
          width: 300,
          height: 200,
          disableAnchor: true,
          externElement: true,
          name: 'echarts',
          form: [
            {
              key: 'dataY',
              name: '数据',
              type: 'text',
              readonly: true,
              placeholder: '仅绑定变量',
              multiple: true,
              isTime: false,
              isYCategory: false,
            },
            {
              key: 'echarts',
              name: 'echarts',
              type: 'code',
              language: 'json',
              isNotString: true,
            },
            {
              key: 'echarts',
              key2: 'max',
              type: 'number',
              name: '最大数量',
              placeholder: 'x',
            },
          ] as FormItemType[],
          echarts: {
            option: {
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  // 坐标轴指示器，坐标轴触发有效
                  type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
                },
              },
              grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true,
              },
              xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                axisTick: {
                  alignWithLabel: true,
                },
              },
              yAxis: [
                {
                  type: 'value',
                },
              ],
              series: [
                {
                  name: '直接访问',
                  type: 'bar',
                  barWidth: '60%',
                  data: [10, 52, 200, 334, 390, 330, 220],
                },
              ],
            },
            max: 100,
          },
        },
      },
      {
        name: '饼图',
        icon: 'l-pie-chart',
        data: {
          width: 200,
          height: 200,
          disableAnchor: true,
          externElement: true,
          name: 'echarts',
          form: [
            {
              key: 'dataY',
              name: '数据',
              type: 'text',
              readonly: true,
              placeholder: '仅绑定变量',
              multiple: true,
            },
            {
              key: 'echarts',
              name: 'echarts',
              type: 'code',
              language: 'json',
              isNotString: true,
            },
            {
              key: 'echarts',
              key2: 'max',
              type: 'number',
              name: '最大数量',
              placeholder: 'x',
            },
          ] as FormItemType[],
          echarts: {
            option: {
              tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)',
              },
              legend: {},
              series: [
                {
                  name: '访问来源',
                  type: 'pie',
                  radius: ['50%', '70%'],
                  avoidLabelOverlap: false,
                  label: {
                    normal: {
                      show: false,
                      position: 'center',
                    },
                    emphasis: {
                      show: true,
                      textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold',
                      },
                    },
                  },
                  labelLine: {
                    normal: {
                      show: false,
                    },
                  },
                  data: [
                    { value: 335, name: '直接访问' },
                    { value: 310, name: '邮件营销' },
                    { value: 234, name: '联盟广告' },
                    { value: 135, name: '视频广告' },
                    { value: 1548, name: '搜索引擎' },
                  ],
                },
              ],
            },
            replaceMode: ReplaceMode.Replace,
          },
        },
      },
      {
        name: '仪表盘',
        icon: 'l-dashboard-chart',
        data: {
          width: 300,
          height: 300,
          disableAnchor: true,
          externElement: true,
          name: 'echarts',
          form: [
            {
              key: 'dataY',
              name: '数据',
              type: 'text',
              readonly: true,
              placeholder: '仅绑定变量',
              multiple: true,
            },
            {
              key: 'echarts',
              name: 'echarts',
              type: 'code',
              language: 'json',
              isNotString: true,
            },
            {
              key: 'echarts',
              key2: 'max',
              type: 'number',
              name: '最大数量',
              placeholder: 'x',
            },
          ] as FormItemType[],
          echarts: {
            option: {
              tooltip: {
                formatter: '{a} <br/>{b} : {c}%',
              },
              series: [
                {
                  name: '业务指标',
                  type: 'gauge',
                  detail: { formatter: '{value}%' },
                  data: [{ value: 50, name: '完成率' }],
                },
              ],
            },
            replaceMode: ReplaceMode.Replace,
          },
        },
      },
    ],
  },
  {
    name: '乐吾乐Charts',
    show: true,
    list: [
      {
        name: '折线图',
        icon: 'l-line-chart',
        data: {
          name: 'lineChart',
          width: 400,
          disableAnchor: true,
          height: 200,
          form: [
            {
              key: 'data',
              name: 'data 数据',
              type: 'code',
              language: 'json',
              isNotString: true,
            },
          ] as FormItemType[],
          chartsColor: [
            '#1890ff',
            '#2FC25B',
            '#FACC14',
            '#c23531',
            '#2f4554',
            '#61a0a8',
            '#d48265',
          ],
          xAxisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          smooth: true,
          data: [
            [1820, 1932, 1901, 1934, 1990, 1830, 1920],
            [1710, 1932, 1901, 1834, 1700, 1830, 1720],
          ],
        },
      },
      {
        name: '柱状图',
        icon: 'l-bar-chart',
        data: {
          name: 'histogram',
          x: 600,
          y: 100,
          width: 400,
          height: 200,
          disableAnchor: true,
          form: [
            {
              key: 'data',
              name: 'data 数据',
              type: 'code',
              language: 'json',
              isNotString: true,
            },
          ] as FormItemType[],
          chartsColor: [
            '#1890ff',
            '#2FC25B',
            '#FACC14',
            '#c23531',
            '#2f4554',
            '#61a0a8',
            '#d48265',
          ],
          xAxisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          data: [
            [120, 200, 150, 80, 70, 110, 130],
            [140, 250, 150, 80, 60, 10, 30],
            [40, 50, 180, 210, 60, 70, 30],
          ],
        },
      },
      {
        name: '饼图',
        icon: 'l-pie-chart',
        data: {
          name: 'pieChart',
          x: 100,
          y: 300,
          width: 400,
          height: 200,
          disableAnchor: true,
          form: [
            {
              key: 'data',
              name: 'data 数据',
              type: 'code',
              language: 'json',
              isNotString: true,
            },
          ] as FormItemType[],
          chartsColor: [
            '#1890ff',
            '#36CBCB',
            '#2FC25B',
            '#FACC14',
            '#F2637B',
            '#fc8452',
            '#9a60b4',
            '#ea7ccc',
          ],
          data: [
            [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' },
            ],
            [
              { value: 1548, name: 'Search' },
              { value: 775, name: 'Direct' },
              { value: 679, name: 'Market' },
            ],
          ],
          chartsRadius: [
            ['60%', '70%'],
            ['0%', '50%'],
          ],
        },
      },
      {
        name: '仪表盘',
        icon: 'l-dashboard-chart',
        data: {
          name: 'gauge',
          x: 600,
          y: 300,
          width: 400,
          height: 400,
          disableAnchor: true,
          value: 90,
          unit: 'm/s',
          axisLine: [
            [0.3, '#67e0e3'],
            [0.7, '#37a2da'],
            [1, '#fd666d'],
          ],
          animateCycle: 1,
          keepAnimateState: 0,
        },
      },
      {
        name: '时钟',
        icon: 'l-07',
        data: {
          name: 'gauge',
          x: 600,
          y: 300,
          width: 400,
          height: 400,
          disableAnchor: true,
          isClock: true,
          startAngle: 90,
          endAngle: -270,
          min: 0,
          max: 12,
          splitNumber: 12,
          background: '#3A3A3A',
          color: '#C0911F',
        },
      },
    ],
  },
];

export const formComponents = [
  {
    name: '表单',
    show: true,
    list: [
      {
        name: '表格',
        icon: 'l-biaoge',
        data: {
          name: 'table2',
          width: 0,
          height: 0,
          form: [
            {
              key: 'data',
              name: '表格数据',
              type: 'code',
              language: 'json',
              isNotString: true,
            },
            {
              key: 'styles',
              name: '表格样式',
              type: 'code',
              language: 'json',
              isNotString: true,
            },
          ] as FormItemType[],
          disableAnchor: true,
          colWidth: 150,
          rowHeight: 40,
          data: [
            ['设备 ID', '设备名称', '数据协议', '状态', '操作'],
            ['1', '200', 'MQTT', '正在运行', {}],
            ['2', '湿度传感器', 'MQTT', '正在运行', {}],
            ['3', '物联网设备', 'MQTT', '正在运行', {}],
            ['4', '物联网设备/智能家居/智慧城市', 'MQTT', '正在运行', {}],
          ],
          styles: [
            {
              row: 1,
              col: 1,
              color: '#ff0000',
              background: '#ffff00',
              wheres: [
                //触发条件 成立后才允许配置样式
                {
                  comparison: '<=',
                  value: '123',
                },
              ],
            },
            {
              row: 0,
              height: 60,
            },
            {
              col: 4,
              width: 200, //为该列设置额外的节点
              pens: [
                {
                  name: 'rectangle',
                  width: 50,
                  height: 20,
                  text: '编辑',
                  fontSize: 0.6,
                  disableAnchor: true,
                  activeBackground: '#40a9ff',
                  activeColor: '#40a9ff',
                  background: '#1890ff',
                  color: '#1890ff',
                  hoverBackground: '#40a9ff',
                  hoverColor: '#40a9ff',
                  textColor: '#ffffff',
                  hoverTextColor: '#ffffff',
                  activeTextColor: '#ffffff',
                  events: [
                    {
                      action: 5,
                      name: 'click',
                      value: 'alert("点击了编辑")',
                    },
                  ],
                },
                {
                  name: 'rectangle',
                  width: 80,
                  height: 20,
                  text: '实时数据',
                  fontSize: 0.6,
                  disableAnchor: true,
                  activeBackground: '#40a9ff',
                  activeColor: '#40a9ff',
                  background: '#1890ff',
                  color: '#1890ff',
                  hoverBackground: '#40a9ff',
                  hoverColor: '#40a9ff',
                  textColor: '#ffffff',
                  hoverTextColor: '#ffffff',
                  activeTextColor: '#ffffff',
                  events: [
                    {
                      action: 5,
                      name: 'click',
                      value: 'alert("点击了实时数据")',
                    },
                  ],
                },
              ],
            },
          ],
        },
      },

      {
        name: '复选框',
        icon: 'l-xuanzeqi',
        data: {
          name: 'checkbox',
          width: 100,
          height: 30,
          fontSize: 16,
          disableAnchor: true,
          direction: 'vertical',
          checked: true,
          // isForbidden: true,
          value: '选项一',
          form: [
            {
              key: 'checked',
              name: '选中',
              type: 'switch',
            },
            {
              key: 'isForbidden',
              name: '是否禁用',
              type: 'switch',
            },
            {
              key: 'value',
              name: '选项值',
              type: 'text',
            },
          ] as FormItemType[],
        },
      },
      {
        name: '单选框',
        icon: 'l-danxuankuang',
        data: {
          name: 'radio',
          width: 150,
          height: 30,
          disableAnchor: true,
          direction: 'horizontal', // 'vertical', //'horizontal',
          form: [
            {
              key: 'options',
              name: '选项',
              type: 'code',
              language: 'json',
              isNotString: true,
            },
            {
              key: 'direction',
              name: '方向',
              type: 'select',
              options: [
                {
                  label: '水平',
                  value: 'horizontal',
                },
                {
                  label: '垂直',
                  value: 'vertical',
                },
              ],
            },
            {
              key: 'checked',
              name: '选择项',
              type: 'text',
            },
          ] as FormItemType[],
          options: [
            { text: '选项一', isForbidden: true },
            { text: '选项二' },
            { text: '选项三' },
          ],
          checked: '选项二',
        },
      },
      {
        name: '开关',
        icon: 'l-kaiguan',
        data: {
          name: 'switch',
          disableAnchor: true,
          height: 30,
          width: 60,
          checked: true,
          offColor: '#BFBFBF',
          onColor: '#1890ff',
          disableOffColor: '#E5E5E5',
          disableOnColor: '#A3D3FF',
          hoverBackground: '#40a9ff',
          form: [
            {
              key: 'checked',
              name: '开关状态',
              type: 'switch',
            },
          ] as FormItemType[],
        },
      },
      {
        name: '进度条',
        icon: 'l-jindutiao',
        data: {
          anchors: [],
          disableAnchor: true,
          name: 'slider',
          x: 400,
          y: 400,
          width: 300,
          height: 20,
          value: 10,
          textWidth: 50,
          barHeight: 4, //修改无效
          min: 0,
          max: 100,
          color: '#1890ff',
          background: '#D4D6D9',
          textColor: '#222222',
          unit: '%',
          form: [
            //TODO 添加最大最小
            {
              key: 'value',
              name: '当前进度值',
              type: 'number',
              min: 0,
              max: 100,
            },
            {
              key: 'unit',
              name: '显示单位',
              type: 'text',
            },
            {
              key: 'textColor',
              name: '文字颜色',
              type: 'color',
            },
          ] as FormItemType[],
        },
      },
      {
        name: '按钮',
        icon: 'l-anniu',
        data: {
          name: 'rectangle',
          x: 300,
          y: 200,
          width: 80,
          height: 30,
          disableAnchor: true,
          borderRadius: 2,
          text: '按钮',
          activeBackground: '#40a9ff',
          activeColor: '#40a9ff',
          background: '#1890ff',
          color: '#1890ff',
          hoverBackground: '#40a9ff',
          hoverColor: '#40a9ff',
          textColor: '#ffffff',
          hoverTextColor: '#ffffff',
          activeTextColor: '#ffffff',
        },
      },
      {
        name: '输入框',
        icon: 'l-shurukuang',
        data: {
          x: 100,
          y: 100,
          height: 40,
          width: 200,
          disableAnchor: true,
          name: 'rectangle',
          borderRadius: 0.05,
          input: true,
          ellipsis: true,
          text: '输入数据',
          textAlign: 'left',
          color: '#D9D9D9FF',
          textColor: '#000000FF',
          hoverTextColor: '#000000FF',
          activeTextColor: '#000000FF',
          textLeft: 10,
        },
      },
      {
        name: '选择器',
        icon: 'l-xuanzeqi',
        data: {
          x: 100,
          y: 100,
          height: 40,
          width: 200,
          disableAnchor: true,
          name: 'rectangle',
          borderRadius: 0.05,
          ellipsis: true,
          text: '选项1',
          textAlign: 'left',
          input: true,
          color: '#D9D9D9FF',
          textColor: '#000000FF',
          hoverTextColor: '#000000FF',
          activeTextColor: '#000000FF',
          textLeft: 10,
          dropdownList: [
            {
              text: '选项1',
            },
            {
              text: '选项2',
            },
            {
              text: '选项3',
            },
          ],
          form: [
            {
              key: 'text',
              name: '选择项',
              type: 'text',
            },
          ] as FormItemType[],
        },
      },
    ],
  },
  {
    name: '特殊图元',
    show: true,
    list: [
      {
        name: '海康威视摄像头',
        icon: 'l-10',
        data: {
          name: 'hikVideo',
          width: 200,
          height: 200,
          disableAnchor: true,
          videoPrototocol: 1,
          port: 80,
          username: 'admin',
          iWndowType: 1,
          form: [
            {
              key: 'videoPrototocol',
              name: '协议',
              type: 'select',
              options: [
                {
                  label: 'HTTP',
                  value: 1,
                },
                {
                  label: 'HTTPS',
                  value: 2,
                },
              ],
            },
            {
              key: 'videoIp',
              name: 'IP地址',
              type: 'text',
            },
            {
              key: 'videoPort',
              name: 'Port端口',
              type: 'text',
            },
            {
              key: 'username',
              name: '用户名',
              type: 'text',
            },
            {
              key: 'password',
              name: '密码',
              type: 'text',
            },
            {
              key: 'iWndowType',
              name: '屏幕数',
              type: 'number',
            },
          ] as FormItemType[],
        },
      },
      {
        name: '温度计',
        icon: 'l-wenduji',
        data: {
          name: 'thermometer',
          width: 100,
          height: 300,
          disableAnchor: true,
          background: '#F40',
          value: 10,
          min: -20,
          max: 20,
          form: [
            {
              key: 'value',
              name: '温度',
              type: 'number',
            },
            {
              key: 'min',
              name: '最小值',
              type: 'number',
            },
            {
              key: 'max',
              name: '最大值',
              type: 'number',
            },
          ] as FormItemType[],
        },
      },
      {
        name: '温度计1',
        icon: 'l-wenduji',
        data: {
          name: 'thermometer1',
          width: 200,
          height: 300,
          disableAnchor: true,
          backgroundColor: '#666',
          value: 0,
          min: -20,
          max: 20,
          markColor: '#fff',
          barrelColor: '#624',
          barrelShowColor: '#d26',
          fontColor: '#fff',
          sub: 5,
          barrel: {
            x: 0.3,
            y: 0.2,
            width: 0.2,
            height: 7 / 9,
          },
          form: [
            {
              key: 'value',
              name: '温度',
              type: 'number',
            },
            {
              key: 'min',
              name: '最小值',
              type: 'number',
            },
            {
              key: 'max',
              name: '最大值',
              type: 'number',
            },
            {
              key: 'backgroundColor',
              name: '背景颜色',
              type: 'color',
            },
            {
              key: 'markColor',
              name: '刻度颜色',
              type: 'color',
            },
            {
              key: 'barrelColor',
              name: '温度柱体背景颜色',
              type: 'color',
            },
            {
              key: 'barrelShowColor',
              name: '温度柱体高亮颜色',
              type: 'color',
            },
            {
              key: 'fontColor',
              name: '字体颜色',
              type: 'color',
            },
            {
              key: 'sub',
              name: '最小间隔',
              type: 'number',
            },
          ] as FormItemType[],
        },
      },
      {
        name: '水位',
        icon: 'l-db',
        data: {
          name: 'waterTank',
          width: 100,
          height: 100,
          disableAnchor: true,
          color: '#FFFFFF00',
          progress: 0.5,
          progressColor: '#00a9e6',
          form: [
            {
              key: 'progress',
              name: '进度',
              type: 'number',
              step: 0.1,
              max: 1,
              min: 0,
            },
            {
              key: 'progressColor',
              name: '进度颜色',
              type: 'color',
            },
          ],
        },
      },
      {
        name: '水流检查器',
        icon: 'l-shuiliujianceqi',
        data: {
          name: 'watermeter',
          width: 100,
          height: 100,
          disableAnchor: true,
          background: '#faad14',
          value: 50,
          max: 70,
          min: 20,
          maxBackground: '#f5222d',
          minBackground: '#52c41a',
          // maxText: 'max',
          // minText: 'min',
          scaleShow: false,
          form: [
            {
              key: 'value',
              name: '流量',
              type: 'number',
            },
            {
              key: 'max',
              name: '最大值',
              type: 'number',
            },
            {
              key: 'min',
              name: '最小值',
              type: 'number',
            },
            {
              key: 'maxBackground',
              name: '最大值背景',
              type: 'color',
            },
            {
              key: 'minBackground',
              name: '最小值背景',
              type: 'color',
            },
            {
              key: 'scaleShow',
              name: '显示刻度',
              type: 'switch',
            },
            {
              key: 'maxText',
              name: '最大值文字',
              type: 'text',
            },
            {
              key: 'minText',
              name: '最小值文字',
              type: 'text',
            },
          ] as FormItemType[],
        },
      },
      {
        name: '指示灯',
        icon: 'l-tuxingzhishideng1',
        data: {
          name: 'indicatorLight',
          width: 100,
          height: 100,
          displayStatus: 0,
          background: '#5ac8f7',
          color: '#5ac8f7',
          hiddenText: true,
          form: [
            {
              key: 'displayStatus',
              name: '显示状态',
              type: 'select',
              options: [
                {
                  label: '默认',
                  value: 0,
                },
                {
                  label: '方形',
                  value: 1,
                },
                {
                  label: '圆形',
                  value: 2,
                },
              ],
            },
          ] as FormItemType[],
          frames: [
            {
              background: '#f53e6c',
              color: '#f53e6c',
              bkType: 0,
              duration: 200,
              strokeType: 0,
              visible: true,
            },
            {
              background: '#5ac8f7',
              color: '#5ac8f7',
              bkType: 0,
              duration: 200,
              strokeType: 0,
              visible: true,
            },
          ],
          animateType: 'custom',
        },
      },
      {
        name: '闸刀',
        icon: 'l-zhadao',
        data: {
          name: 'knifeSwitch',
          width: 100,
          height: 100,
          switch: false,
          color: '#0AECA140',
          background: '#748E9140',
          form: [
            {
              key: 'switch',
              name: '开关',
              type: 'switch',
            },
          ] as FormItemType[],
          events: [
            {
              action: 5,
              name: 'click',
              value: 'window.meta2d.setValue({id:pen.id,switch:!pen.switch});',
            },
          ],
        },
      },
      {
        name: '拨动开关',
        icon: 'l-bodongkaiguan',
        data: {
          name: 'toggleSwitch',
          width: 100,
          height: 100,
          switch: false,
          color: '#0AECA140',
          background: '#748E9140',
          form: [
            {
              key: 'switch',
              name: '开关',
              type: 'switch',
            },
          ] as FormItemType[],
          events: [
            {
              action: 5,
              name: 'click',
              value:
                'window.meta2d.setValue({id:pen.id,switch:!pen.switch});window.meta2d.render()',
            },
          ],
        },
      },
      {
        name: '空气开关',
        icon: 'l-bodongkaiguan',
        data: {
          name: 'airSwitch',
          width: 180,
          height: 240,
          switch: true,
          color: '#748E9173',
          background: '#748E9140',

          form: [
            {
              key: 'switch',
              name: '开关',
              type: 'switch',
            },
          ] as FormItemType[],
          // events: [
          //   {
          //     action: 5,
          //     name: 'click',
          //     value:
          //       'window.meta2d.setValue({id:pen.id,switch:!pen.switch});window.meta2d.render()',
          //   },
          // ],
        },
      },
    ],
  },
];

export const cases: any[] = [
  { name: '智慧物联' },
  { name: '电力能源' },
  { name: '智慧水务' },
  { name: '智慧工厂' },
  { name: '智慧校园' },
  { name: '智慧园区' },
  { name: '智慧交通' },
  { name: '智慧城市' },
  { name: '智慧农业' },
  { name: '电信机房' },
  { name: '航天航空' },
  { name: '智能家居' },
];
