import React from 'react';
import { ComponentsType, DataType, iProperty, TagType } from '../../base/type';
import IOTIconSlider from './IOTIconSlider';
import { IOTIconSliderProps } from './interface';
import iGrapesJSConfig from '../../type';
import { iIOTIconSliderJSON } from '.';
import { mergeParameters } from '../../base/utils';

const grapesJSConfig: iGrapesJSConfig<iIOTIconSliderJSON, IOTIconSliderProps> = {
  type: [ComponentsType.NumberType],
  id: 'IOTIconSlider',
  tag: TagType.IOTIconSlider,
  access: 'rw',
  render: (jsonData, ...args) => {
    const props = mergeParameters(jsonData, ...args);
    return <IOTIconSlider {...props}></IOTIconSlider>;
  },
  buildData: (mock: boolean = false, property?: iProperty) => {
		if (property === undefined) return ;
    //区分类
    const props: IOTIconSliderProps = {
      type: property.valuedef.type,
      streamId: property.streamName,
      title: property['display-name'],
      subTitle: {
        show: true,
        value: '副标题',
      },
      icon: {
        value: 'insideicon-cu-1',
        show: true,
      },
      disabled: false,
      streamName: '',
      curValue: property?.valuedef?.specs?.min,
      unit: property?.valuedef?.specs?.unit,
      min: property['valuedef']['specs']['min'],
      max: property['valuedef']['specs']['max'],
      unitdesc: property?.valuedef?.specs?.unitdesc,
      step: property['valuedef']['specs']['step'],
      intType:property['valuedef']['type'],
      leftIcon: '',
      rightIcon: '',
    };
    return props;
  },
  traits: () => {
    return [
      {
        type: 'option-icon',
        name: 'icon',
        label: '显示图标',
      },
      {
        type: 'text',
        name: 'title',
        label: '',
      },
    ];
  },
};
export default grapesJSConfig;











// import React from 'react';
// import { GrapesjsConfig } from '../../type';
// import { iNumberProps, isIntType } from '../../base/type';
// import IOTIconSlider from './IOTIconSlider';
// import { IOTIconSliderProps } from './interface';

// const defaultTitle = '开关';
// const defaultSubTitle = '副标题';

// const tagName = 'IOTIconSlider';
// const blockName = 'IOTIconSliderBlock';
// const type = 'number';

// export const grapesjsConfig: GrapesjsConfig<IOTIconSliderProps> = {
//   blockConfig: {
//     type: type,
//     blockName: blockName,
//     tagName: tagName,
//     getBlockContent: (ifunction: IOTIconSliderProps) => {
//       return {
//         tagName: ifunction.title ? ifunction.title : '',
//         type: tagName,
//         attributes: {
//           ...ifunction,
//         },
//       };
//     },
//     //组件渲染
//     render: (ifunction: IOTIconSliderProps) => {
// 			var curValue = 0;
//       if (isIntType(ifunction.originType as string)) {
//         curValue = parseInt(ifunction.min ?? 0);
//       } else {
//         curValue = parseFloat(ifunction.min);
//       }
//       const props: IOTIconSliderProps = {
//         ...ifunction,
//         curValue: curValue,
//         startHandler:
//           ifunction.startHandler !== void 0
//             ? ifunction.startHandler
//             : (val: any) => {
//                 // console.log(val, '默认start事件');
//               },
//         endHandler:
//           ifunction.endHandler !== void 0
//             ? ifunction.endHandler
//             : (val: any) => {
//                 // console.log(val, '默认end事件');
//               },
//       };
//       return <IOTIconSlider {...props} />;
//     },
//     buildRender: (ifunction: IOTIconSliderProps) => {
//       return <IOTIconSlider {...ifunction} />;
//     }
//   },
//   typeConfig: {
//     tagName: tagName,
//     traits: (opt: any) => {
//       return [
//         {
//           type: 'option-icon',
//           name: 'icon',
//           label: '显示图标',
//           value: opt.icon,
//         },
//         {
//           type: 'text',
//           name: 'title',
//           value: opt.defaultTitle,
//         },
//       ];
//     },
//     render: (attributes: any) => {
// 				var curValue = 0;
//         if (isIntType(attributes.originType)) {
//           curValue = parseInt(attributes.min ?? 0);
//         } else {
//           curValue = parseFloat(attributes.min);
//         }

//       const props: IOTIconSliderProps = {
//         ...attributes,
//         curValue:
//           attributes.curValue !== void 0 ? Number.parseFloat(attributes.curValue + '') : curValue,
//         startHandler:
//           attributes.startHandler !== void 0
//             ? attributes.startHandler
//             : (val: any) => {
//                 // console.log(val, '默认start事件');
//               },
//         endHandler:
//           attributes.endHandler !== void 0
//             ? attributes.endHandler
//             : (val: any) => {
//                 // console.log(val, '默认end事件');
//               },
//       };
//       return <IOTIconSlider {...props} />;
//     },
//   },
// };