import React, { useEffect, useRef, useState } from 'react';
import { Button as AmisButton } from '../../../components';
import { Icon } from '../../../components/icons';
import { Action } from '../../../types';
import { IColumn } from '../../../store/table';
import { isMobile, uuid } from '../../../utils/helper';
import Dialog from "../../../components/DragModal";
import { Button, Checkbox, Col, InputNumber, message, Radio, RadioChangeEvent, Row, Spin } from 'antd';
import { DataArea, SelectWrapperGroup } from '../commonSelect';
import { CheckboxChangeEvent } from 'antd/lib/checkbox';
import '../dataStatic.scss';
import './index.scss';
import { CalcField, DataAreaType } from '../DataStatic';
import { getColumnShowLabel } from '../../../store/utils/commonTableFunction';
import { tools } from '../../../utils/shell/tools';
import { isNil } from 'lodash';
import { getAbcTableData, getBasedCount } from './toolFunc';
import { getChartSchema } from '../DataCharts/chartTools';
export type ISettingType = 'auto' | 'manual';
export interface IAbcDataParams {
  dataArea: DataAreaType;
  sortSelectes: string;
  statisticsSelects: string;
  settingType: ISettingType;
  aType?: number;
  bType?: number;
  displayEachColumn?: boolean;
}
interface IProps {
  action?: Action;
  columns: IColumn[];
  data: {
    items: any[];//当前页数据
    selectedItems: any[];//选中数据
    itemRaws: any[]//前端分页时全部数据
  },
  loadDataOnce?: boolean;
  getAllData: (showFields: string[]) => Promise<any>;
  container: HTMLDivElement | null;
  crudTitle: string;
  originHeaderToolbar: any[];
  name: string;
  isStatic?: boolean;
  handleDealData: (toolType: string, label: string, schema: any, extraProps: { [key: string]: any }, subTitle?: string,) => void;
  primaryField?: string;
  staticRecords: (port: 141 | 142 | 143 | 145) => void;
}
const AbcAnalysis = (props: IProps) => {
  const { action, columns, loadDataOnce, getAllData, data, handleDealData, staticRecords, crudTitle, name, primaryField } = props;
  const [visible, setVisible] = useState(false);
  const [loading, setLoading] = useState(false);
  // A类数值
  const [aType, setAType] = useState<number>(65)
  // B类数值
  const [bType, setBType] = useState<number>(85)
  // 分类列表
  const [sortData, setSortData] = useState<Array<CalcField>>([])
  // 统计列表
  const [statisticsFields, setStatisticsFields] = useState<Array<CalcField>>([])
  // 分类选中列表
  const [sortSelectes, setSortSelectes] = useState<string>()
  // 统计选中列表
  const [statisticsSelects, setStatisticsSelects] = useState<string>()
  // 设置选中项
  const [settingType, setSettingType] = useState<ISettingType>('auto')
  // 数据范围选中项
  const [dataArea, setDataArea] = useState<DataAreaType>('present')
  // 是否显示每一类的列表
  const [displayEachColumn, setDisplayEachColumn] = useState<boolean>(false)
  //记录是否已经打开过
  const hasInit = useRef(false)

  // 初始化
  const mountHandle = () => {
    // let dataTypeArr = ['10', '11', '14', '15'];
    const statisticsFields: CalcField[] = []
    const sortData: CalcField[] = []
    columns.forEach(col => {
      let obj = {
        title: getColumnShowLabel(col),
        value: col.name || ''
      }
      if (['number', 'statc-number', 'input-number'].includes(col.type)) {
        statisticsFields.push(obj)
      }
      sortData.push(obj);
    });
    setSortData(sortData)
    setStatisticsFields(statisticsFields)
  }

  useEffect(() => {
    mountHandle()
  }, [columns])

  useEffect(() => {
    //如果是第一次打开，就使用默认值，否则使用上一次的值
    if(visible) {
      if(!hasInit.current) {
        const defaultValueStr = localStorage.getItem('analysis-' + name)
        if (!isNil(defaultValueStr)) {
          const defaultValues = JSON.parse(defaultValueStr)
          setSortSelectes(defaultValues.sortSelectes)
          setStatisticsSelects(defaultValues.statisticsSelects)
          setAType(defaultValues.aType)
          setBType(defaultValues.bType)
          setSettingType(defaultValues.settingType)
          setDisplayEachColumn(defaultValues.displayEachColumn)
          setDataArea(defaultValues.dataArea)
        }
      }
      hasInit.current = true
    }
  }, [visible])

  // 构建报文
  const createSchema = (tableColList: any[], tableData: any[]) => {
    return ({
      type: "crud",
      data: {
        total: tableData.length,
        items: tableData
      },
      aliasTitle: crudTitle ? crudTitle + '-统计' : '统计',
      loadDataOnce: true,
      "name": `${name || uuid()}_total`,
      "affixHeader": true,
      "columns": tableColList,
      "filterTogglable": false,
      source: "${items}",
      "autoFillHeight": true,
      "multiple": true,
      "setBorder": true,
      "keepItemSelectionOnPageChange": false,
      "syncLocation": false,
      "headerToolbar": [
        {
          "type": "auto-width",
          "label": "列宽",
          "icon": "#icon-tooltool_autowidth",
          "align": "right"
        },
        {
          "redDot": false,
          "actionType": "export",
          "type": "action",
          "name": "default_export",
          "label": "导出",
          "icon": "#icon-tooltool_download",
          "tooltip": "默认导出",
          "align": "right",
          "close": true,
          "tooltipPlacement": "top"
        },
      ],
      "checkOnItemClick": false,
      "showIndex": false,
      "header": [],
      "footer": [],
      footerToolbar: [
        {
          "type": "pagination",
          "align": "right"
        },
        {
          "type": "switch-per-page",
          "align": "right"
        },
        {
          "type": "statistics",
          "align": "right"
        }
      ],
      isStatic: true,
      perPage: 100,
      perPageAvailable: [100, 200, 500, 1000]
    })
  }

  // 校验函数
  const check = () => {
    if (!dataArea) {
      return message.info({
        content: '请选择范围'
    });
    }
    if (tools.isEmpty(aType) && settingType === 'manual') {
      return message.info({
        content: '请填写A类'
      });
    }
    if (tools.isEmpty(bType) && settingType === 'manual') {
      return message.info({
        content: '请填写B类'
      });
    }
    if (aType > bType && settingType === 'manual') {
      return message.info({
        content: 'A类不得大于B类'
      });
    }
    if (tools.isEmpty(sortSelectes)) {
      return message.info({
        content: '请选择分类'
      });
    }
    if (tools.isEmpty(statisticsSelects)) {
      return message.info({
        content: '请选择统计值'
      });
    }
    if (sortSelectes === statisticsSelects) {
      return message.info({
        content: '分类不能和统计值相同'
      });
    }
    return true;
  }

  const handleAction = () => {
    setVisible(true)
  }

  const handleOk = async () => {
    if (check() !== true) return;
    let calcData = dataArea === 'all' ? (loadDataOnce ? data.itemRaws : []) 
      : (dataArea === 'some' ? data.selectedItems : data.items);
    if (dataArea === 'all') {
      if(loadDataOnce && (!data.itemRaws || !data.itemRaws.length)) {
        return message.warn({
          content: '当前数据为空'
        });
      }
      if(!loadDataOnce) {
        setLoading(true)
        const res = await getAllData([sortSelectes, statisticsSelects].filter(item => !isNil(item)));
        setLoading(false)
        if(!res || !res.items || !res.items.length) {
          return message.warn({
            content: '当前数据为空'
          });
        }
        calcData = res.items;
      }
    }
    const params: IAbcDataParams = {
      dataArea,
      sortSelectes,
      statisticsSelects,
      settingType,
      aType,
      bType,
      displayEachColumn
    }
    let { tableData, tableColumns } = getAbcTableData(params, calcData, columns);
    setLoading(false)
    const list = getBasedCount(calcData, sortSelectes, statisticsSelects);
    const chartSchema = getChartSchema({
      type: 'line-bar',
      selectedXAxisData: sortSelectes,
      selectedYAxisData: [statisticsSelects, 'countPer'],
      data: list,
      columns: [...columns, {
        label: columns.find(col => col.name === statisticsSelects)?.label + '累计占有',
        name: 'countPer',
        type: 'number',
        suffix: '%',
        precision: 3,
        isPercentage: true
      }],
      primaryField: primaryField ?? '',
      barValue: [statisticsSelects],
      chartTitle: crudTitle,
      tableName: name
    }, tableData)
    handleDealData('data-analysis', crudTitle ? crudTitle + '-ABC分析' : 'ABC分析', {
      tableSchema: createSchema(tableColumns, tableData),
      chartSchema
    }, {...params, sortData, statisticsFields})
    setVisible(false)
    staticRecords(145)
  }

  const setDefault = () => {
    const param = { sortSelectes, statisticsSelects, aType, bType, settingType, displayEachColumn, dataArea }
    localStorage.setItem('analysis-' + name, JSON.stringify(param))
    message.success('设置成功！')
  }

  const onReset = () => {
    const defaultValueStr = localStorage.getItem('analysis-' + name)
    if (!isNil(defaultValueStr)) {
      const defaultValues = JSON.parse(defaultValueStr)
      setSortSelectes(defaultValues.sortSelectes)
      setStatisticsSelects(defaultValues.statisticsSelects)
      setAType(defaultValues.aType)
      setBType(defaultValues.bType)
      setSettingType(defaultValues.settingType)
      setDisplayEachColumn(defaultValues.displayEachColumn)
      setDataArea(defaultValues.dataArea)
    } else {
      setSortSelectes(undefined)
      setStatisticsSelects(undefined)
      setAType(65)
      setBType(85)
      setSettingType('auto')
      setDisplayEachColumn(false)
      setDataArea('present')
    }
  }

  const handleClose = () => {
    setSortSelectes(undefined)
    setStatisticsSelects(undefined)
    setAType(65)
    setBType(85)
    setSettingType('auto')
    setDisplayEachColumn(false)
    setDataArea('present')
  }

  const renderButton = () => {
    return <AmisButton onClick={handleAction}>
      <Icon icon={action?.icon ?? "#icon-tooltool_autowidth"} className="icon" symbol />
      {action?.label}
    </AmisButton>
  }

  const renderBody = () => {
    return <div>
      <div className="select-wrapper-group-container">
        <SelectWrapperGroup
          label="分类"
          type='single'
          data={sortData}
          defaultValue={[sortSelectes]}
          onChange={([value]) => {
            setSortSelectes(value)
          }}
        />
        <SelectWrapperGroup
          label="统计值"
          type='single'
          data={statisticsFields}
          defaultValue={[statisticsSelects]}
          onChange={([value]) => {
            setStatisticsSelects(value)
          }}
        />
      </div>
      <Row className='tools-area abc-setting-item'>
        <Col span={24} className='tools-label'>
          <span>设置</span>
        </Col>
        <Row>
          <Col span={24}>
            <Radio.Group
              value={settingType}
              onChange={(e: RadioChangeEvent) => setSettingType(e.target.value)}>
                <Radio value='auto' className='abc-setting-item-radio'>自动寻找</Radio>
                <Radio value='manual' className='abc-setting-item-radio'>手工设置</Radio>
              </Radio.Group>
          </Col>
          <Col span={24}>
            <div className='abc-type-setting-container'>
              <div className='abc-type-setting'>
                <span className='manual-type'>A类： &nbsp;0% - </span>
                <InputNumber
                  min={0}
                  max={80}
                  width={60}
                  disabled={settingType === 'auto'}
                  formatter={value => `${value}%`}
                  parser={value => value!.replace('%', '')}
                  onChange={(value) => setAType(value)}
                  value={aType}
                />
              </div>
              <div className='abc-type-setting'>
                <span className='manual-type'>B类： {aType}% - </span>
                <InputNumber
                  min={0}
                  max={100}
                  disabled={settingType === 'auto'}
                  formatter={value => `${value}%`}
                  parser={value => value!.replace('%', '')}
                  onChange={(value) => setBType(value)}
                  value={bType}
                />
              </div>
              <div style={{ lineHeight: '32px' }} className='manual-type'>
                C类： {bType}% - 100%
              </div>
            </div>
          </Col>
        </Row>
      </Row>
      <DataArea
        value={dataArea}
        className="static-data-area"
        onChange={(e: RadioChangeEvent) => setDataArea(e.target.value)}
      />
      <Row className='mg-top15'>
        <Checkbox
          checked={displayEachColumn}
          onChange={(e: CheckboxChangeEvent) => setDisplayEachColumn(e.target.checked)}
        >显示每一类的列表</Checkbox>
      </Row>
    </div>
  }

  const renderFooter = () => {
    return <div className="statics-footer">
      <div>
        <Button disabled={loading} className="tools-set-default" onClick={setDefault}>设置默认值</Button>
        <Button disabled={loading} className="tools-reset-default" onClick={onReset}>重置</Button>
      </div>
      <div>
        <Button disabled={loading} onClick={() => setVisible(false)}>取消</Button>
        <Button disabled={loading} type="primary" onClick={handleOk}>确认</Button>
      </div>
    </div>
  }

  return <>
    {renderButton()}
    {!isMobile() && visible && <Dialog getContainer={props.container || document.body}
      zIndex={1000} dialogVisible={visible} title='ABC分析' width={540} destroyOnClose centered drag
      footer={renderFooter()}
      className={'statics-modal common-modal-component'}
      onCancel={() => setVisible(false)}
      afterClose={handleClose}
    >
      <Spin spinning={loading}>{renderBody()}</Spin>
    </Dialog>
    }
  </>
}

export default AbcAnalysis;