import React from 'react';
import { connect } from 'dva';
import { Button, Card, Table } from 'antd';
import 'braft-editor/dist/index.css';
import CustomDD from './CustomDD';
import { printUtils } from '@utils';
import tmpl from './tmpl.hbs';
import { CascaderItem, ContractPicker, EmpPicker, ItemPicker, OuPicker, SupplierPicker } from '@bizComponents';
import { CollapseEL, FormEL, MonthPicker, UdcSelect, UploadEL, } from '@components';

const DevComponents = ({ dispatch, loading, dev_components }) => {
  // console.log(dev_components);

  const handleRawChange = (rawContent) => {
    console.log(rawContent);
  };

  const handleSave = (rawContent) => {
    console.log(rawContent);
  };

  const editorProps = {
    height: 100,
    // contentFormat: 'raw',
    // initialContent: '<p>Hello World!</p>',
    placeholder: '请编辑合同模板',
    onRawChange: handleRawChange,
    onSave: handleSave,
    excludeControls: ['emoji'],
    extendControls: [{
      type: 'split',
    }, {
      type: 'dropdown',
      text: '插入模板变量',
      html: '<span style="color:red;">插入模板变量</span>',
      hoverTitle: '插入模板变量',
      showDropDownArrow: true, // 是否展示下拉组件顶部的小箭头
      autoHide: true, // 是否在下拉组件失去焦点后自动关闭下拉组件
      component: <CustomDD handleInsert={variable => {
        this.editorInstance.insertText(variable);
      }
      }/>,
    }],
    media: {
      allowPasteImage: true, // 是否允许直接粘贴剪贴板图片（例如QQ截图等）到编辑器
      image: true, // 开启图片插入功能
      video: false, // 开启视频插入功能
      audio: false, // 开启音频插入功能
      validateFn: null, // 指定本地校验函数，说明见下文
      uploadFn: null, // 指定上传函数，说明见下文
      removeConfirmFn: null, // 指定删除前的确认函数，说明见下文
      onRemove: null, // 指定媒体库文件被删除时的回调，参数为被删除的媒体文件列表(数组)
      onChange: null, // 指定媒体库文件列表发生变化时的回调，参数为媒体库文件列表(数组)
      onInsert: null, // 指定从媒体库插入文件到编辑器时的回调，参数为被插入的媒体文件列表(数组)
    },
  };

  return (
    <div>

      <Card title={'文件下载控件测试'}>
        <EmpPicker onChange={(item) => {
          console.log(item);
        }}/>


        <UploadEL api={'/dev/sfs-client/sfs/token'} dataKey={'rex'} listType={'text'}
                  disabled={false}/>
      </Card>
      <Card title={'文件下载控件测试'}>
        <UploadEL api={'/dev/sfs-client/sfs/token'} dataKey={'rex'} listType={'picture'}
                  disabled={false}/>
      </Card>
      <Card title={'文件下载控件测试'}>
        <UploadEL api={'/dev/sfs-client/sfs/token'} dataKey={'rex'} listType={'picture-card'}
                  disabled={true}/>
      </Card>

      <Card title={'文件下载控件测试'}>
        <Table columns={[{
          title: '序号1',
          dataIndex: 'a',
          width: '25%',
        }, {
          title: '序号2',
          dataIndex: 'b',
          width: '25%',
        }, {
          title: '文件',
          dataIndex: 'c',
          width: '50%',
          className: 'alignLeft',
          render: (value) => {
            return <UploadEL size={'small'} api={'/dev/sfs-client/sfs/token'} dataKey={'rex'}
                             listType={'text'} disabled={value === 'test3'}/>;
          },
        }]} dataSource={[{
          a: 'test',
          b: 'test2',
          c: 'test2',
        }, {
          a: 'test',
          b: 'test2',
          c: 'test3',
        }]}/>
      </Card>

      {/* <CollapseEL>
      <Card title={'braft-editor富文本编辑器测试'}>
      <BraftEditor {...editorProps} ref={instance => this.editorInstance = instance} />
      </Card>
      </CollapseEL> */}

      <CollapseEL>
        <Card title={'打印测试'}>
          <Button onClick={() => {
            const tasks = [{
              content: { test: 'This is a test' },
              tmpl: tmpl,
            }];
            printUtils.print(tasks, false);
          }}>打印</Button>
        </Card>
      </CollapseEL>

      <CollapseEL>
        <Card title={'自定义控件测试'}>
          <FormEL items={[
            {
              title: '跨月选择',
              dataIndex: 'month',
              validateStatus: 'warning',
              tag: <MonthPicker onChange={(value) => {
                console.log(value);
              }}/>,
            }, {
              title: '品类选择',
              dataIndex: 'itemClass',
              options: {
                initialValue: ['001'],
              },
              tag: <CascaderItem placeholder="选择大类/中类/小类"/>,
            }, {
              title: '品类选择(关闭)',
              dataIndex: 'itemClassC',
              tag: <CascaderItem placeholder="选择大类/中类/小类" disabled/>,
            }, {
              title: '质量检验',
              dataIndex: 'zljy',
              options: {
                initialValue: [],
              },
              tag: <UdcSelect domain="SUPP" code="ZLJY" mode="multiple"/>,
            },
          ]} record={dev_components.formData} onFieldsChange={(field) => {
            const key = Object.keys(field)[0];
            dispatch({
              type: `dev_components/updateForm`,
              payload: {
                key,
                value: field[key],
              },
            });
          }}/>
        </Card>
      </CollapseEL>

      <CollapseEL>
        <Card title={'放大镜输入测试'}>
          <FormEL items={[
            {
              title: '供应商选择',
              dataIndex: 'itemClass',
              options: {
                initialValue: 0,
              },
              tag: <SupplierPicker/>,
            }, {
              title: '供应商(有值)',
              dataIndex: 'itemClassC',
              tag: <SupplierPicker/>,
            }, {
              title: '供应商(有值关闭)',
              dataIndex: 'itemClassCC',
              tag: <SupplierPicker disabled/>,
            }, {
              title: '物料选择',
              dataIndex: 'item',
              tag: <ItemPicker/>,
            }, {
              title: '公司选择',
              dataIndex: 'ou',
              tag: <OuPicker/>,
            }, {
              title: '合同选择',
              dataIndex: 'contract',
              tag: <ContractPicker/>,
            },
          ]} record={dev_components.formData2} onFieldsChange={(field) => {
            const key = Object.keys(field)[0];
            dispatch({
              type: `dev_components/updateForm2`,
              payload: {
                key,
                value: field[key],
              },
            });
          }}/>
        </Card>
      </CollapseEL>

    </div>
  );
};

export default connect(({ dev_components, loading }) => ({ dev_components, loading }))(DevComponents);
