import { ComponentMetadata, Snippet } from "@alilc/lowcode-types";
import { chartWrap } from "../common/chartWrap";

const AreaMeta: ComponentMetadata = {
  componentName: "Area",
  title: "折线图",
  category: "图表",
  group: "精选组件",
  docUrl: "",
  screenshot: "",
  devMode: "proCode",
  npm: {
    package: "@pisell/charts-materials",
    version: "1.0.0",
    exportName: "Area",
    main: "src/index.ts",
    destructuring: true,
    subName: "",
  },
  props: [
    // 数据
    {
      name: "data",
      type: "group",
      display: "accordion",
      title: {
        label: "数据",
      },
      items: [
        {
          name: "data",
          title: "图表数据",
          setter: "JsonSetter",
        },
        {
          name: "xField",
          title: {
            label: "x轴字段名",
            tip: "x 方向映射对应的数据字段名",
          },
          setter: "StringSetter",
        },
        {
          name: "yField",
          title: {
            label: "y轴字段名",
            tip: "y 方向映射所对应的数据字段名",
          },
          setter: "StringSetter",
        },
      ],
    },
    // 图标容器
    chartWrap,
    // 图形属性
    {
      name: "",
      type: "group",
      display: "accordion",
      title: {
        label: "图形属性",
      },
      items: [
        {
          name: "color",
          title: "颜色",
          setter: "ColorSetter",
        },
        {
          name: "line.style.lineWidth",
          title: "粗细",
          setter: "NumberSetter",
        },
        {
          name: "smooth",
          title: "平滑",
          setter: "BoolSetter",
        },
        {
          name: "point.visible",
          title: "显示点",
          setter: "BoolSetter",
        },
        {
          name: "label.visible",
          title: "显示标签",
          setter: "BoolSetter",
        },
        {
          name: "autoFit",
          title: "自适应容器宽高",
          setter: "BoolSetter",
        },
      ],
    },
  ],
  configure: {
  },
};
const snippets: Snippet[] = [
  {
    title: '面积图',
    screenshot:
      'https://img.alicdn.com/imgextra/i2/O1CN012P76ko1dqUbwwmuF8_!!6000000003787-55-tps-56-56.svg',
    schema: {
      componentName: 'Area',
      props: {
        data: [
          { year: '1991', value: '72345678' },
          { year: '1992', value: '4321132' },
          { year: '1993', value: '33121112.5' },
          { year: '1994', value: '45227221' },
          { year: '1995', value: 4321221.9 },
          { year: '1996', value: 6322121 },
          { year: '1997', value: 78312213 },
          { year: '1998', value: 4192312 },
          { year: '1999', value: 6212332 },
          { year: '2000', value: 3192312 },
        ],
        xField: 'year',
        yField: 'value',
        autoFit: true,
        // color: '#0079f2',
        // label: {
        //   visible: true,
        // },
      },
    },
  },
];

export default {
  ...AreaMeta,
  snippets,
};