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 Tooltip from 'bizcharts/lib/components/Tooltip';
import Line from 'bizcharts/lib/components/TypedGeom/Line';
import Point from 'bizcharts/lib/components/TypedGeom/Point';

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

  const domain = 'priceCompare';
  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 />,
  }, {
    title: '物料名称',
    dataIndex: 'item',
    tag: <Input />,
  }];

  const tableProps = {
    rowKey: 'id',
    sortBy: 'start',
    scroll: { x: '120%', y: 400 },
    domain,
    dispatch,
    loading,
    total,
    showAdd: false,
    enableSelection: false,
    dataSource: list,
    filter: [],
    columns: [{
      title: '供应商名称',
      dataIndex: 'supplier',
      width: '15%',
    }, {
      title: '物料编号',
      className: 'column-money',
      dataIndex: 'itemCode',
      width: '10%',
    }, {
      title: '物料名称',
      dataIndex: 'item',
      width: '15%',
    }, {
      title: '日期',
      dataIndex: 'date',
      width: '15%',
    }, {
      title: '历史采购价',
      dataIndex: 'priceHistory',
      width: '10%',
    }, {
      title: '币种',
      dataIndex: 'cunrency',
      width: '10%',
    }, {
      title: '计量单位',
      dataIndex: 'unit',
      width: '10%',
    }, {
      title: '规格',
      dataIndex: 'spec',
      width: '15%',
    }],
  };

  const data = [
    { days: '2018-01-10', price: 3 },
    { days: '2018-01-11', price: 4 },
    { days: '2018-01-12', price: 3.5 },
    { days: '2018-01-13', price: 5 },
    { days: '2018-01-14', price: 4.9 },
    { days: '2018-01-15', price: 6 },
    { days: '2018-01-16', price: 7 },
    { days: '2018-01-17', price: 9 },
    { days: '2018-01-18', price: 13 },
  ];

  const cols = {
    'price': { min: 0 },
    '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: 50, bottom: 30, left: 70 }} forceFit>
          <Axis name="days" />
          <Axis name="price" />
          <Tooltip crosshairs={{ type: 'y' }} />
          <Line position="days*price" size={2} shape={'smooth'} />
          <Point position="days*price" size={4} shape={'circle'} style={{ stroke: '#fff', lineWidth: 1 }} />
        </Chart>
      </Card>
    </div>
  );
};

export default connect(({ priceCompare, ouBanks, loading }) => ({ priceCompare, ouBanks, loading }))(PriceCompare);
