import React from 'react';
import { connect } from 'dva';
import { Button, Card, DatePicker, Input } from 'antd';
import { DataTable, FormEL } from '../../../components';
import Chart from 'bizcharts/lib/components/Chart';
import Axis from 'bizcharts/lib/components/Chart';
import Guide from 'bizcharts/lib/components/Guide';
import Tooltip from 'bizcharts/lib/components/Tooltip';
import Line from 'bizcharts/lib/components/TypedGeom/Line';
import Point from 'bizcharts/lib/components/TypedGeom/Point';

const Deliver = ({ dispatch, deliver, ouBanks, loading }) => {
  const { list, total, currentItem, modalVisible, mode } = deliver;

  const domain = 'deliver';
  const domainCN = '送货准时率';

  function handleOk() {
    dispatch({ type: 'userInfo/save' });
  }

  const colProps = {
    xs: 24,
    sm: 24,
    md: 8,
    lg: 8,
    xl: 8,
    style: {},
  };

  const dataSource = {
    supplier: '',
    startTime: '',
    endTime: '',
    item: '',
  };
  const items = [{
    title: '起始日期',
    dataIndex: 'startTime',
    options: {},
    tag: <DatePicker format="YYYY-MM-DD" style={{ width: '100%' }} />,
  }, {
    title: '截止日期',
    dataIndex: 'endTime',
    options: {},
    tag: <DatePicker format="YYYY-MM-DD" style={{ width: '100%' }} />,
  }, {
    title: '供应商名称',
    dataIndex: 'supplier',
    options: {},
    tag: <Input />,
  }];


  const tableProps = {
    rowKey: 'id',
    sortBy: 'start',
    scroll: { x: '100%', y: 400 },
    domain,
    dispatch,
    loading,
    total,
    showAdd: false,
    enableSelection: false,
    dataSource: list,
    filter: [],
    columns: [{
      title: '供应商名称',
      dataIndex: 'supplier',
      width: '25%',
    }, {
      title: '月份',
      dataIndex: 'month',
      width: '15%',
    }, {
      title: '计划数量',
      dataIndex: 'planNum',
      width: '15%',
    }, {
      title: '实际数量',
      dataIndex: 'realNum',
      width: '15%',
    }, {
      title: '目标达成',
      dataIndex: 'realVal',
      width: '15%',
    }, {
      title: '目标值',
      dataIndex: 'expectVal',
      width: '15%',
    }],
  };

  const data = [
    { days: '2018-01', priceA: 91.5 },
    { days: '2018-02', priceA: 93.5 },
    { days: '2018-03', priceA: 92.5 },
    { days: '2018-04', priceA: 95.5 },
    { days: '2018-05', priceA: 94.5 },
    { days: '2018-06', priceA: 98.5 },
    { days: '2018-07', priceA: 96.5 },
    { days: '2018-08', priceA: 92.5 },
  ];

  // const ds = new DataSet();
  // const dv = ds.createView().source(data);
  // dv.transform({
  //   type: 'fold',
  //   fields: [ 'Tokyo', 'London' ], // 展开字段集
  //   key: 'city', // key字段
  //   value: 'temperature', // value字段
  // });

  const cols = {
    'priceA': { min: 90, max: 100 },
    'days': { range: [0, 1] },
  };

  return (
    <div>
      {Object.keys(dataSource).length > 0 && <Card
        title="供应商送货准时率统计查询"
        actions={[<Button type="primary" onClick={handleOk} loading={null}>生成送货准时率</Button>]}
        style={{ width: '100%', marginTop: 8 }}>
        <FormEL style={{ width: '100%' }} items={items} ColProps={colProps} record={dataSource} />
      </Card>}

      <Card style={{ width: '100%', marginTop: 8 }}>
        <DataTable {...tableProps} />
      </Card>

      <Card style={{ width: '100%', marginTop: 8 }}>
        <Chart height={400} data={data} scale={cols}
               padding={{ top: 30, right: 30, bottom: 30, left: 70 }} forceFit>
          <Axis name="days" />
          <Axis name="priceA" label={{ formatter: val => `${val}%` }} />
          <Tooltip crosshairs={{ type: 'y' }} />
          <Line position="days*priceA" size={2} shape={'smooth'} />
          <Point position="days*priceA" size={4} shape={'circle'}
                 style={{ stroke: '#fff', lineWidth: 1 }} />

          <Guide>
            <Guide.Line
              start={['min', 97]}
              end={['max', 97]}
              lineStyle={{ stroke: 'red' }}
              text={{
                content: `目标值 97%`,
                position: 'end',
                style: {
                  textAlign: 'end',
                },
              }}
            />
          </Guide>
        </Chart>
      </Card>
    </div>
  );
};

export default connect(({ deliver, ouBanks, loading }) => ({ deliver, ouBanks, loading }))(Deliver);
