import React, { useState, useEffect } from 'react';
import { FlowchartFormWrapper, MODELS, useXFlowApp } from '@antv/xflow';
import { Position, Size, ColorPicker, InputNumberFiled, InputFiled, SelectField } from '../fields';
import { PREFIX } from '../constants';
import { connect } from 'dva';
import { UnityAction } from '@/utils/utils';
import { Button } from 'antd';
import { IProps } from '@/components/Flow/index';

export interface IConfig {
  label?: string;
  x?: number;
  y?: number;
  width?: number;
  height?: number;
  count?: number;
  fontSize?: number;
  fontFill?: string;
  fill?: string;
  stroke?: string;
  flow_id?: string;
  flow_node_id?: string;
  process_code?: string;
  node_type_psr?: number | string;
  node_psr_classify?: number | string;
}
const defaultConfig: IConfig = {
  node_type_psr: 0,
};
const Component = (props: any) => {
  const { config, plugin = {}, auditList } = props;
  const { updateNode } = plugin;
  const [nodeConfig, setNodeConfig] = useState<IConfig>({
    ...defaultConfig,
    ...config,
  });
  const app = useXFlowApp();
  const [meta, setMeta] = useState<IProps['meta']>(null);
  const onNodeConfigChange = (key: string, value: number | string | object) => {
    if (key) {
      setNodeConfig({
        ...nodeConfig,
        [key]: value,
      });
      updateNode({
        [key]: value,
      });
    } else if (value instanceof Object) {
      setNodeConfig({
        ...nodeConfig,
        ...value,
      });
      updateNode({
        ...value,
      });
    }
  };

  const onSave = () => {
    UnityAction.emit('NODE_SAVE', nodeConfig);
  };
  useEffect(() => {
    setNodeConfig({
      ...config,
    });
  }, [config]);

  useEffect(() => {
    MODELS.GRAPH_META.useValue(app.modelService).then((meta: IProps['meta']) => {
      setMeta(meta);
    });
  }, []);

  return (
    <div className={`${PREFIX}-panel-body`}>
      <div className={`${PREFIX}-panel-group`}>
        <h5>内容</h5>
        <InputFiled
          label="标题"
          value={nodeConfig.label}
          disabled={meta?.editMode == 2}
          onChange={value => {
            onNodeConfigChange('label', value);
          }}
        />
      </div>
      <div className={`${PREFIX}-panel-group`}>
        <h5>数据</h5>
        <SelectField
          label="审批流程"
          value={nodeConfig.flow_id}
          disabled={meta?.editMode == 2}
          onChange={value => {
            let audit = auditList.find(item => item.list.id == value);

            onNodeConfigChange(null, {
              flow_node_id: audit.list.FlowNodes[0]?.id,
              flow_id: value,
              process_code: audit.list.process_code,
            });
          }}
          options={auditList.map(item => {
            const list = item.list;
            return {
              label: list.name || list.id,
              value: list.id,
            };
          })}
        />
        <SelectField
          label="节点类型"
          value={nodeConfig.node_type_psr}
          onChange={value => {
            onNodeConfigChange('node_type_psr', value);
          }}
          options={[
            { label: '默认', value: 0 },
            { label: '投标版', value: 1 },
            { label: '签字版', value: 2 },
            { label: '投标测算', value: 3 },
            { label: '合同测算', value: 4 },
            { label: '采购合同', value: 5 },
            { label: '方案总审', value: 6 },
            { label: '清单权限', value: 7 }, //发起人和审批人可见
          ]}
        />
        <SelectField
          label="审批类型"
          value={nodeConfig.node_psr_classify}
          onChange={value => {
            onNodeConfigChange('node_psr_classify', value);
          }}
          options={[
            { label: '其他', value: 0 },
            { label: '清单审核', value: 1 },
            { label: '合同审核', value: 2 },
            { label: 'PSR审核', value: 3 },
          ]}
        />
      </div>

      {meta?.editMode != 2 && (
        <>
          <div className={`${PREFIX}-panel-group`}>
            <h5>样式</h5>
            <Position
              x={nodeConfig.x}
              y={nodeConfig.y}
              onChange={(key, value) => {
                onNodeConfigChange(key, value);
              }}
            />
            <Size
              width={nodeConfig.width}
              height={nodeConfig.height}
              onChange={(key, value) => {
                onNodeConfigChange(key, value);
              }}
            />
            <ColorPicker
              label="填充"
              value={nodeConfig.fill}
              onChange={(value: string) => {
                onNodeConfigChange('fill', value);
              }}
            />
            <ColorPicker
              label="边框"
              value={nodeConfig.stroke}
              onChange={(value: string) => {
                onNodeConfigChange('stroke', value);
              }}
            />
            <InputNumberFiled
              label="消息数量"
              value={nodeConfig.count}
              onChange={value => {
                onNodeConfigChange('count', value);
              }}
            />
          </div>

          <div className={`${PREFIX}-node-text-style`}>
            <InputNumberFiled
              label="字号"
              value={nodeConfig.fontSize}
              width={68}
              onChange={value => {
                onNodeConfigChange('fontSize', value);
              }}
            />
            <ColorPicker
              value={nodeConfig.fontFill}
              onChange={(value: string) => {
                onNodeConfigChange('fontFill', value);
              }}
            />
          </div>
          <Button style={{ marginTop: 20 }} type="primary" onClick={onSave}>
            保存
          </Button>
        </>
      )}
    </div>
  );
};

function RecthServe(props: any) {
  return (
    <FlowchartFormWrapper {...props}>
      {(config, plugin) => <Component {...props} plugin={plugin} config={config} />}
    </FlowchartFormWrapper>
  );
}

export default connect(({ xflow }) => ({ auditList: xflow.auditList }))(RecthServe);