import React, { useState, useEffect } from 'react';
import { FlowchartFormWrapper } from '@antv/xflow';
import { Button, message, Select } from 'antd';
import LuckyExcel from 'luckyexcel';
import {
  Position,
  Size,
  ColorPicker,
  InputNumberFiled,
  InputFiled,
  UploadFiled,
  RadioField,
} from '../fields';
import { PREFIX } from '../constants';
import { UnityAction } from '@/utils/utils';
import { connect } from 'dva';

export interface IConfig {
  label?: string;
  x?: number;
  y?: number;
  width?: number;
  height?: number;
  fontSize?: number;
  count?: number;
  fontFill?: string;
  fill?: string;
  stroke?: string;
  muti_version?: string | number;
  is_start_node?: string | number;
  bom_template?: string;
  version_name?: string;
  data?: any;
  excel_info?: any;
  role_list?:string;
}

const defaultConfig: IConfig = {
  muti_version: 1,
  is_start_node: 0,
};

const Component = (props: any) => {
  const { config, plugin = {}, roleList } = props;
  const { updateNode } = plugin;
  const [options, setOptions] = useState([])
  const [nodeConfig, setNodeConfig] = useState<IConfig>({
    ...defaultConfig,
    ...config,
  });
  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);
  };

  const beforeUpload = (file: any) => {
    LuckyExcel.transformExcelToLucky(file, (exportJson, luckysheetfile) => {
      if (exportJson.sheets == null || exportJson.sheets.length == 0) {
        message.error('读取xlsx文件失败!');
        return;
      }
      console.log(exportJson);
      const sheet = exportJson.sheets[0];
      let titleCell = [];
      sheet.celldata.forEach(item => {
        if(item.r == 0) {
          // 标题头
          titleCell.push(item)
        }
        // 生成cid
        item.v.cid = `${item.r}-${item.c}`
      })
      let cell = titleCell.map(item => {
        let value = '';
        if (item.v?.v) {
          value = item.v?.v;
        } else if (item.v.ct?.s && item.v.ct?.s instanceof Array) {
          value = item.v.ct.s.map(item => item?.v).join?.('');
        }
        return { sheet_name: sheet.name, col_idx: item.r, col_axis: item.c, col_value: value };
      });
      onNodeConfigChange(null, {
        data: [sheet],
        excel_info: {
          file_name: file.name,
          excel_cols: cell,
        },
      });
    });
  };

  useEffect(() => {
    setNodeConfig({
      ...defaultConfig,
      ...config,
    });
  }, [config]);
  // console.log(nodeConfig, config)

  useEffect(() => {
    if(!roleList || roleList.length <= 0) return;
    let op = []
    console.log(roleList)
    roleList.filter(cur=>cur.RoleType == 4).forEach(item => {
      op.push({label:`${item.Name}(${item.ID})`, value:item.ID})
    })
    setOptions(op);
    console.log(op)
  },[roleList])

  return (
    <div className={`${PREFIX}-panel-body`}>
      <div className={`${PREFIX}-panel-group`}>
        <h5>内容</h5>
        <InputFiled
          label="标题"
          value={nodeConfig.label}
          onChange={value => {
            onNodeConfigChange('label', value);
          }}
        />
      </div>
      <div className={`${PREFIX}-panel-group`}>
        <h5>数据</h5>
        <RadioField
          label="多个版本"
          value={nodeConfig.muti_version}
          onChange={value => {
            onNodeConfigChange('muti_version', value);
          }}
          options={[
            { label: '是', value: 1 },
            { label: '否', value: 0 },
          ]}
        />
        <RadioField
          label="起始起点"
          value={nodeConfig.is_start_node}
          onChange={value => {
            onNodeConfigChange('is_start_node', value);
          }}
          options={[
            { label: '是', value: 1 },
            { label: '否', value: 0 },
          ]}
        />
        {nodeConfig.is_start_node == 1 && (
          <>
            <InputFiled
              label="模板名称"
              value={nodeConfig.version_name}
              onChange={value => {
                onNodeConfigChange('version_name', value);
              }}
            />
            <UploadFiled
              label="模板"
              onChange={url => onNodeConfigChange('bom_template', url)}
              beforeUpload={beforeUpload}
            />
            <div>{nodeConfig.excel_info?.file_name}</div>
          </>
        )}
        <div className='group'>
          <label>权限</label>
          <Select
            value= {nodeConfig.role_list ? nodeConfig.role_list.split(",").map(item=>Number(item)) : []}
            mode="multiple"
            allowClear
            style={{ width: '100%' }}
            placeholder="选择权限"
            onChange={(v: number[]) => {
              onNodeConfigChange('role_list', v.join(','))
            }}
            options={options}
          />
        </div>
      </div>
      <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 style={{ display: 'flex' }}>
          <InputNumberFiled
            label="字号"
            value={nodeConfig.fontSize}
            width={68}
            onChange={value => {
              onNodeConfigChange('fontSize', value);
            }}
            style={{ marginRight: 10 }}
          />
          <ColorPicker
            value={nodeConfig.fontFill}
            onChange={(value: string) => {
              onNodeConfigChange('fontFill', value);
            }}
          />
        </div>
      </div>
      <Button 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(({ flow }) => ({ roleList: flow.roleList }))(RecthServe);