import React from 'react';
import { connect } from 'dva';
import { Button, Card, DatePicker, Form, Input, Select } 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 Defective = ({ dispatch, defective, ouBanks, loading }) => {
  const { list, total, currentItem, modalVisible, mode } = defective;


  const FormItem = Form.Item;
  const Option = Select.Option;

  const domain = 'defective';
  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: '100%', y: 400 },
    domain,
    dispatch,
    loading,
    total,
    showAdd: false,
    enableSelection: false,
    dataSource: list,
    filter: [],
    columns: [{
      title: '供应商名称',
      dataIndex: 'supplier',
      width: '20%',
    }, {
      title: '物料名称',
      dataIndex: 'item',
      width: '15%',
    }, {
      title: '月份',
      dataIndex: 'month',
      width: '15%',
    }, {
      title: '月送检总数',
      dataIndex: 'monthTotal',
      width: '15%',
    }, {
      title: '月合格总数',
      dataIndex: 'qualified',
      width: '15%',
    }, {
      title: '月合格率',
      dataIndex: 'rate',
      width: '15%',
    }],
  };


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

  const cols = {
    'price': { 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="price" label={{ formatter: val => `${val}%` }} />
          <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(({ defective, ouBanks, loading }) => ({ defective, ouBanks, loading }))(Defective);
