import { useContext } from 'react';
import { Row, Col, Tabs, Table, Divider, Spin, Checkbox, Space } from 'antd';
import { ContainerOutlined, BlockOutlined, SmileOutlined, MobileOutlined, CustomerServiceOutlined, IeOutlined } from '@ant-design/icons';
import { Line, Pie } from '@ant-design/charts';
import { NavLink } from 'react-router-dom';
import * as comm from '@haina/utils-commons';
import DateGroupRadio from '../../components/DateGroupRadio';
import SearchForm from '../../components/search/SearchForm';
import { TableExportBtn } from '../../components/Data';
import { RenderVSDataCell } from './../../components/Data';

import { observer } from 'mobx-react';
import { toJS } from 'mobx';
import { stores_Context } from '../../config';
import { useShallow } from 'zustand/shallow';
import useToBOrderStore, { orderCountDataMapper, orderCountDataFieldMapper } from '../../zustand/ToBOrder';


const ToBOrder = observer(() => {
  const { date_picker_store: searchFormStore } = useContext(stores_Context);

  const [searchValues, setSearchValues] = useToBOrderStore(useShallow((state) => [state.searchValues, state.setSearchValues]));
  const [activeTab, setActiveTab] = useToBOrderStore(useShallow((state) => [state.activeTab, state.setActiveTab]));
  const [loading, typeLoading, onTabChange] = useToBOrderStore(useShallow((state) => [state.loading, state.typeLoading,state.onTabChange]));

  const orderCountDataRaw = useToBOrderStore((state) => state.orderCountDataRaw);
  const [orderCountDataLines, avgLineValue] = useToBOrderStore(useShallow((state) => [state.orderCountDataLines, state.avgLineValue]));
  const [onChangeDateGroup, activeDateGroupRadio] = useToBOrderStore(useShallow((state) => [state.onChangeDateGroup, state.activeDateGroupRadio]));

  const orderCountDataByType = useToBOrderStore((state) => state.orderCountDataByType);
  const result = orderCountDataByType[activeTab] || {};

  const getToBOrderCount = useToBOrderStore((state) => state.getToBOrderCount);

  const showDiff = !comm.isEmpty(searchFormStore.start_date_cp);

  const avg_line_y = Math.round(avgLineValue);
  const lineConfig = {
    data: orderCountDataLines,
    padding: 'auto',
    xField: 'xField',
    yField: 'yField',
    seriesField: 'seriesField',
    // xAxis: {
    // 	type: "timeCat",
    // },
    point: {
      size: 4,
      shape: 'cicle',
    },
    annotations: [
      {
        type: 'text',
        position: ['start', avg_line_y],
        content: avg_line_y,
        offsetX: -15,
        style: {
          fill: '#F4664A',
          textBaseline: 'bottom',
        },
      },
      {
        type: 'line',
        start: [-10, avg_line_y],
        end: ['max', avg_line_y],
        style: {
          stroke: '#F4664A',
          lineDash: [2, 2],
        },
      },
    ],
    label: {}, // 显示标签
    legend: {
      itemValue: {
        formatter: (text, item) => {
          const items = orderCountDataLines.filter((d) => d.seriesField === item.value); // 按站点筛选
          return items.length ? items.reduce((a, b) => a + b.yField, 0) : ''; // 计算总数
        },
      },
    },
    tooltip: {
      customItems: (originalItems) => {
        // process originalItems,
        return originalItems.map((ele) => ({ ...ele, name: ele.data?.seriesField || ele.data?.xField }));
      },
      title: (title, datum) => {
        let ret = title;
        switch (activeDateGroupRadio) {
          case 'day':
            ret = `${title} ${comm.getWeek(datum.xField)}`; // 显示周几
            break;

          default:
            break;
        }
        return ret;
      },
    },
    // smooth: true,
  };
  const pieConfig = {
    appendPadding: 10,
    data: [],
    angleField: 'OrderCount',
    colorField: 'OrderType',
    radius: 0.8,
    label: {
      type: 'outer',
      content: '{name} {value} \t {percentage}',
    },
    legend: false, // 不显示图例
    interactions: [
      {
        type: 'element-selected',
      },
      {
        type: 'element-active',
      },
    ],
  };

  const tableProps = {
    dataSource: result?.ordercount1 || [], // table_data.dataSource,
    columns: [
      {
        title: '#',
        fixed: 'left',
        children: [
          {
            title: (
              <span>
                <div>{result.ordercountTotal1?.groups}</div>
                {showDiff ? <div>{result.ordercountTotal2?.groups}</div> : null}
              </span>
            ),
            titleX: `${result.ordercountTotal1?.groups}` + (showDiff ? ` vs ${result.ordercountTotal2?.groups}` : ''),
            dataIndex: 'OrderType',
            fixed: 'left',
            render: (text, record) => <NavLink to={`/tob_orders_sub/${activeTab}/${record.OrderTypeSN}/${encodeURIComponent(record.OrderType)}`}>{text}</NavLink>,
          },
        ],
      },
      {
        title: '数量',
        children: [
          {
            title: (
              <RenderVSDataCell
                showDiffData={showDiff}
                data1={result.ordercountTotal1?.OrderCount}
                data2={result.ordercountTotal2?.OrderCount}
                diffPercent={result.ordercountTotal1?.OrderCount_vs}
                diffData={result.ordercountTotal1?.OrderCount_diff}
              />
            ),
            titleX: [result.ordercountTotal1?.OrderCount, result.ordercountTotal2?.OrderCount].join(' vs '),
            dataIndex: 'OrderCount',
            render: (text, r) => <RenderVSDataCell showDiffData={showDiff} data1={text} data2={r.diff?.OrderCount} diffPercent={r.OrderCount_vs} diffData={r.OrderCount_diff} />,
          },
        ],
      },
      {
        title: '成交数',
        children: [
          {
            title: (
              <RenderVSDataCell
                showDiffData={showDiff}
                data1={result.ordercountTotal1?.CJCount}
                data2={result.ordercountTotal2?.CJCount}
                diffPercent={result.ordercountTotal1?.CJCount_vs}
                diffData={result.ordercountTotal1?.CJCount_diff}
              />
            ),
            titleX: [result.ordercountTotal1?.CJCount, result.ordercountTotal2?.CJCount].join(' vs '),
            dataIndex: 'CJCount',
            render: (text, r) => <RenderVSDataCell showDiffData={showDiff} data1={text} data2={r.diff?.CJCount} diffPercent={r.CJCount_vs} diffData={r.CJCount_diff} />,
          },
        ],
      },
      {
        title: '成交人数',
        children: [
          {
            title: (
              <RenderVSDataCell
                showDiffData={showDiff}
                data1={result.ordercountTotal1?.CJPersonNum}
                data2={result.ordercountTotal2?.CJPersonNum}
                diffPercent={result.ordercountTotal1?.CJPersonNum_vs}
                diffData={result.ordercountTotal1?.CJPersonNum_diff}
              />
            ),
            titleX: [result.ordercountTotal1?.CJPersonNum, result.ordercountTotal2?.CJPersonNum].join(' vs '),
            dataIndex: 'CJPersonNum',
            render: (text, r) => <RenderVSDataCell showDiffData={showDiff} data1={text} data2={r.diff?.CJPersonNum} diffPercent={r.CJPersonNum_vs} diffData={r.CJPersonNum_diff} />,
          },
        ],
      },
      {
        title: '成交率',
        children: [
          {
            title: (
              <RenderVSDataCell
                showDiffData={showDiff}
                data1={result.ordercountTotal1?.CJrate}
                data2={result.ordercountTotal2?.CJrate}
                diffPercent={result.ordercountTotal1?.CJrate_vs}
                diffData={result.ordercountTotal1?.CJrate_diff}
              />
            ),
            titleX: [result.ordercountTotal1?.CJrate, result.ordercountTotal2?.CJrate].join(' vs '),
            dataIndex: 'CJrate',
            render: (text, r) => <RenderVSDataCell showDiffData={showDiff} data1={text} data2={r.diff?.CJrate} diffPercent={r.CJrate_vs} diffData={r.CJrate_diff} />,
          },
        ],
      },
      {
        title: '成交毛利（预计）',
        children: [
          {
            title: (
              <RenderVSDataCell
                showDiffData={showDiff}
                data1={result.ordercountTotal1?.YJLY}
                data2={result.ordercountTotal2?.YJLY}
                diffPercent={result.ordercountTotal1?.YJLY_vs}
                diffData={result.ordercountTotal1?.YJLY_diff}
              />
            ),
            titleX: [result.ordercountTotal1?.YJLY, result.ordercountTotal2?.YJLY].join(' vs '),
            dataIndex: 'YJLY',
            render: (text, r) => <RenderVSDataCell showDiffData={showDiff} data1={text} data2={r.diff?.YJLY} diffPercent={r.YJLY_vs} diffData={r.YJLY_diff} />,
          },
        ],
      },

      {
        title: '单个订单价值',
        children: [
          {
            title: (
              <RenderVSDataCell
                showDiffData={showDiff}
                data1={result.ordercountTotal1?.Ordervalue}
                data2={result.ordercountTotal2?.Ordervalue}
                diffPercent={result.ordercountTotal1?.Ordervalue_vs}
                diffData={result.ordercountTotal1?.Ordervalue_diff}
              />
            ),
            titleX: [result.ordercountTotal1?.Ordervalue, result.ordercountTotal2?.Ordervalue].join(' vs '),
            dataIndex: 'Ordervalue',
            render: (text, r) => <RenderVSDataCell showDiffData={showDiff} data1={text} data2={r.diff?.Ordervalue} diffPercent={r.Ordervalue_vs} diffData={r.Ordervalue_diff} />,
          },
        ],
      },
    ],
    size: 'small',
    pagination: false,
    scroll: { x: 100 * 7 },
    loading,
  };

  return (
    <>
      <div>
        <Row gutter={16} className={toJS(searchFormStore.siderBroken) ? '' : 'sticky-top'}>
          <Col className="gutter-row" span={24}>
            <SearchForm
              defaultValue={{
                initialValue: {
                  ...toJS(searchFormStore.formValues),
                  ...searchValues,
                },
                //
                shows: ['DateType', 'WebCode','IncludeTickets', 'DepartmentList', 'dates'],
                fieldProps: {
                  DepartmentList: { show_all: false, mode: 'multiple' },
                  WebCode: { show_all: false, mode: 'multiple' },
                  years: { hide_vs: true },
                },
              }}
              onSubmit={(_err, obj, form, str) => {
                setSearchValues(obj, form);
                getToBOrderCount(obj);
                onTabChange(activeTab);
              }}
            />
          </Col>
        </Row>
        <Row gutter={[16, { sm: 16, lg: 32 }]}>
          <Col span={24} style={{ textAlign: 'right' }}>
            <DateGroupRadio
              visible={orderCountDataLines.length !== 0}
              dataRaw={orderCountDataRaw}
              onChange={onChangeDateGroup}
              value={activeDateGroupRadio}
              dataMapper={orderCountDataMapper}
              fieldMapper={orderCountDataFieldMapper}
            />
          </Col>
          <Col span={24}>
            <Spin spinning={loading}>
              <Line {...lineConfig} />
            </Spin>
          </Col>

          <Col span={24}>
            <Tabs
              activeKey={activeTab}
              onChange={(active_key) => onTabChange(active_key)}
              items={[
                {
                  key: 'customer_types',
                  label: (
                    <span>
                      <CustomerServiceOutlined />
                      分销客户
                    </span>
                  ),
                },
              ].map((ele) => {
                return {
                  ...ele,
                  children: (
                    <>
                      <Table sticky key={`table_to_xlsx_${ele.key}`} {...tableProps} loading={typeLoading} />
                      <Divider orientation="right" plain>
                        <TableExportBtn label={ele.key} {...{ columns: tableProps.columns, dataSource: tableProps.dataSource }} />
                      </Divider>
                    </>
                  ),
                };
              })}
            />
          </Col>
        </Row>

        <div>
          <h3>各项占比</h3>
          {/* <Checkbox
            checked={true}
            // onChange={(e) => setIsShowEmpty(e.target.checked)}
          >
            包含空值
          </Checkbox> */}
        </div>
        <Spin spinning={typeLoading}>
        <Row>
          <Col sm={24} lg={12}>
            <Pie {...pieConfig} data={result?.ordercount1 || []}  innerRadius={0.6} statistic={{title: false,content:{content:'数量'}}} />
            <Pie {...pieConfig} data={result?.ordercount1 || []} angleField='YJLYx' innerRadius={0.6} statistic={{title: false,content:{content:'预计毛利'}}} />
          </Col>

          {showDiff && <Col sm={24} lg={12}>
            <Pie {...pieConfig} data={result?.ordercount2 || []} innerRadius={0.6} statistic={{title: false,content:{content:'数量'}}} />
            <Pie {...pieConfig} data={result?.ordercount2 || []} angleField='YJLYx' innerRadius={0.6} statistic={{title: false,content:{content:'预计毛利'}}} />
          </Col>}
        </Row>
        </Spin>
      </div>
    </>
  );
});
export default ToBOrder;