import { useContext } from 'react';
import { observer } from 'mobx-react';
import { stores_Context } from '../config';
import { Table, Row, Col, Divider, Tooltip  } from 'antd';
import { InfoCircleOutlined } from '@ant-design/icons';
import SearchForm from '../components/search/SearchForm';
import { TableExportBtn } from './../components/Data';
import { fixTo2Decimals } from './../utils/commons';

const numberConvert10K = (number, scale = 10) => {
  return fixTo2Decimals(number / (1000 * scale)) + '';
};
// 注意TdCell要提到DataTable作用域外声明
const TdCell = (tdprops) => {
  // onMouseEnter, onMouseLeave在数据量多的时候，会严重阻塞表格单元格渲染，严重影响性能
  const { onMouseEnter, onMouseLeave, ...restProps } = tdprops;
  return <td {...restProps} />;
};

export default observer((props) => {
  const { date_picker_store: searchFormStore, MeetingDataStore } = useContext(stores_Context);
  const { formValues, formValuesToSub, siderBroken } = searchFormStore;

  const dataRefresh = async (obj) => {
    MeetingDataStore.dataGHOrder({ ...(obj || formValuesToSub) });
    MeetingDataStore.dataGHSales({ ...(obj || formValuesToSub) });
    MeetingDataStore.dataGHService({ ...(obj || formValuesToSub) });
  };

  const targetTableProps = {
    loading: MeetingDataStore.GHLoading,
    // sticky: true,
    scroll: { x: 1000, y: 400 },
    pagination: false,
    components: { body: { cell: TdCell } },
    orderColumns: [
      { key: 'label', title: '市场:', dataIndex: 'label', width: 150 },
      {
        key: 'LineClass_Origin',
        titleX: '网站',
        title: () => (
          <>
            网站{' '}
            <Tooltip title="网前自然订单">
              <InfoCircleOutlined />
            </Tooltip>
          </>
        ),
        dataIndex: 'LineClass_Origin',
      },
      {
        key: 'external',
        titleX: '站外渠道',
        title: () => (
          <>
            站外渠道{' '}
            <Tooltip title="Facebook, Pinterest, Youtube, Instagram">
              <InfoCircleOutlined />
            </Tooltip>
          </>
        ),
        dataIndex: 'external',
      },
      { key: 'LineClass_PPC', title: 'PPC', dataIndex: 'LineClass_PPC' },
      { key: 'toB', title: 'To B', dataIndex: 'toB' },
      { key: 'isOld1', title: 'C老客户', dataIndex: 'isOld1' },
      { key: 'total', title: '合计', dataIndex: 'total' },
      { key: 'rowYear', title: '截至年订单数', dataIndex: 'rowYear' },
      // { key: 'groupsLabel2', title: '年订单目标', dataIndex: 'groupsLabel2' },
      // { key: 'groupsLabel2', title: '进度', dataIndex: 'groupsLabel2' },
    ],
    salesColumns: [
      { key: 'label', title: '顾问:', dataIndex: 'label', width: 150 },
      { key: 'CJCount', title: '成交个数', dataIndex: 'CJCount' },
      { key: 'YJLY', title: '成交毛利(万)', dataIndex: 'YJLY', render: (text) => numberConvert10K(text) },
      { key: 'CJCount1', title: '年成交个数', dataIndex: ['rowYear', 'CJCount'] },
      { key: 'YJLY1', title: '年成交毛利(万)', dataIndex: ['rowYear', 'YJLY'], render: (text) => numberConvert10K(text) },
      { key: 'YJLY2', title: '年走团毛利(万)', dataIndex: ['rowYear', 'YJLY2'], render: (text) => numberConvert10K(text) },
    ],
    serviceColumns: [
      { key: 'label', title: '客服:', dataIndex: 'label', width: 150 },
      { key: 'GroupCount', title: '走团个数', dataIndex: 'GroupCount' },
      { key: 'GoodCount', title: '好评个数', dataIndex: 'GoodCount' },
      { key: 'GroupCount1', title: '年走团个数', dataIndex: ['rowYear', 'GroupCount'] },
      { key: 'GoodCount2', title: '年好评个数', dataIndex: ['rowYear', 'GoodCount'] },
    ],
  };

  return (
    <>
      <Row gutter={16} className={siderBroken ? '' : 'sticky-top'}>
        <Col className="gutter-row" span={24}>
          <SearchForm
            defaultValue={{
              initialValue: {
                ...formValues,
                ...MeetingDataStore.searchValues,
                // ...searchInitial,
              },
              shows: ['IncludeTickets', 'dates'], // 'country'
              fieldProps: {
                dates: { hide_vs: true },
              },
            }}
            onSubmit={(_err, obj, form, str) => {
              MeetingDataStore.setSearchValues(form);
              dataRefresh(obj);
            }}
          />
        </Col>
      </Row>

      <Divider orientation="right" plain>
        <span>GH: 市场</span>
        <TableExportBtn label={`${formValuesToSub.Date1}-GH: 市场`} {...{ columns: targetTableProps.orderColumns, dataSource: MeetingDataStore.GHTableData }} />
      </Divider>
      <Table {...targetTableProps} key={'GHTable'} dataSource={MeetingDataStore.GHTableData} columns={targetTableProps.orderColumns} loading={MeetingDataStore.GHTableLoading} />

      <Divider orientation="right" plain>
        <span>GH: 顾问成交</span>
        <TableExportBtn label={`${formValuesToSub.Date1}-GH: 顾问成交`} {...{ columns: targetTableProps.salesColumns, dataSource: MeetingDataStore.GHSalesTableData }} />
      </Divider>
      <Table {...targetTableProps} key={'GHSales'} dataSource={MeetingDataStore.GHSalesTableData} columns={targetTableProps.salesColumns} loading={MeetingDataStore.GHSalesLoading} />

      <Divider orientation="right" plain>
        <span>GH: 客服</span>
        <TableExportBtn label={`${formValuesToSub.Date1}-GH: 客服`} {...{ columns: targetTableProps.serviceColumns, dataSource: MeetingDataStore.GHServiceTableData }} />
      </Divider>
      <Table {...targetTableProps} key={'GHService'} dataSource={MeetingDataStore.GHServiceTableData} columns={targetTableProps.serviceColumns} loading={MeetingDataStore.GHServiceLoading} />

    </>
  );
});