import { Card, Input } from 'antd';
import { connect } from 'dva';
import React from 'react';

import { Toolbar } from '@bizComponents';
import { DataTable, FormEL, MonthPicker } from '@components';
import Modal from './Modal';
import { numberUtils } from '@utils';

const ItemPriceHistory = ({ dispatch, itemPriceHistory, app, loading }) => {
  const { list, total, itemInfo, modalVisible, mode, chartData,
    webs, filterParams, isSupplier, selectedWeb, selectedSupp, supps } = itemPriceHistory;
  const { user } = app;

  const domain = 'itemPriceHistory';
  const domainCN = '历史';

  const cardStyle = {
    marginBottom: 12,
    border: 'none',
  };

  const cardProps = {
    style: cardStyle,
    bordered: false,
  };

  const modalProps = {
    dispatch,
    loading,
    mode,
    domain,
    filterParams,
    isSupplier,
    selectedWeb,
    selectedSupp,
    webs,
    supps,
    record: chartData,
    visible: modalVisible,
    maskClosable: false,
    width: '70%',
    readOnly: mode === 'view',
    title: '查询价格历史趋势',
    wrapClassName: 'vertical-center-modal',
    onOk(data) {
      dispatch({
        type: `${domain}/${mode}`,
        payload: data,
      });
    },
    onCancel() {
      dispatch({
        type: `${domain}/hideModal`,
      });
    },

  };

  let readOnly = false;

  const product = [{
    title: '物料编号',
    dataIndex: 'outerCode',
  }, {
    title: '物料名称',
    dataIndex: 'itemName',
  }, {
    title: '物料大类',
    dataIndex: 'c1Name',
  }, {
    title: '临时编号',
    dataIndex: 'itemCode',
  }, {
    title: '品牌',
    dataIndex: 'brandName',
  }, {
    title: '物料中类',
    dataIndex: 'c2Name',
  }, {
    title: '询价周期(月)',
    dataIndex: 'pricePeriod',
  }, {
    title: '规格型号',
    dataIndex: 'spec',
  }, {
    title: '物料品类',
    dataIndex: 'c3Name',
  }, {
    title: '计量单位',
    dataIndex: 'uom',
  }];

  const tableProps = {
    rowKey: 'id',
    sortBy: 'id',
    scroll: { x: '150%', y: 400 },
    domain,
    dispatch,
    loading,
    total,
    enableSelection: false,
    showAdd: false,
    showDelete: false,
    showView: false,
    showEdit: false,
    dataSource: list,
    withFetch: false,
    buttons: [{
      name: '价格趋势图',
      key: 'history',
      type: 'primary',
      requiredSelected: 0,
      cb: (selectedKeys) => {
        dispatch({ type: `${domain}/showModal`, payload: { selectedKeys } });
      },
    }],
    filter: [{
      title: '报价期间',
      dataIndex: 'yearMonthDate',
      tag: <MonthPicker />,
      colProps: {
        xs: 24,
        sm: 24,
        md: 12,
        lg: 12,
        xl: 12,
      },
    }, {
      title: '供应商',
      dataIndex: 'suppCode',
      options: {
        initialValue: isSupplier ? user.user.name : '',
      },
      tag: <Input placeholder="请输入供应商编号/名称" disabled={isSupplier} />,
    }],
    columns: [{
      title: '供货区域',
      dataIndex: 'suppCenterName',
      className: 'alignCenter',
      sorter: true,
      width: '6%',
    }, {
      title: '供应商',
      dataIndex: 'suppName',
      className: 'alignLeft',
      sorter: true,
      width: '10%',
    }, {
      title: '报价期间',
      dataIndex: 'yearMonth',
      className: 'alignCenter',
      sorter: true,
      width: '6%',
    }, {
      title: '执行价',
      dataIndex: 'taxPrice',
      className: 'alignRight',
      sorter: true,
      width: '5%',
      render: (value, row, num) => {
        return (
          numberUtils.round_half_up_format(value,4)
        );
      },
    }, {
      title: '基准价',
      dataIndex: 'basePrice',
      className: 'alignRight',
      sorter: true,
      width: '5%',
      render: (value, row, num) => {
        return (
          numberUtils.round_half_up_format(value,4)
        );
      },
    }, {
      title: '网站1',
      dataIndex: 'webSite1Name',
      className: 'alignLeft',
      width: '8%',
    }, {
      title: '1价格',
      dataIndex: 'webSite1Price',
      className: 'alignRight',
      width: '5%',
      render: (value, row, num) => {
        return (
          numberUtils.round_half_up_format(value,4)
        );
      },
    }, {
      title: '网站2',
      dataIndex: 'webSite2Name',
      className: 'alignLeft',
      width: '8%',
    }, {
      title: '2价格',
      dataIndex: 'webSite2Price',
      className: 'alignRight',
      width: '5%',
      render: (value, row, num) => {
        return (
          numberUtils.round_half_up_format(value,4)
        );
      },
    }, {
      title: '网站3',
      dataIndex: 'webSite3Name',
      className: 'alignLeft',
      width: '8%',
    }, {
      title: '3价格',
      dataIndex: 'webSite3Price',
      className: 'alignRight',
      width: '5%',
      render: (value, row, num) => {
        return (
          numberUtils.round_half_up_format(value,4)
        );
      },
    }, {
      title: '网站4',
      dataIndex: 'webSite4Name',
      className: 'alignLeft',
      width: '8%',
    }, {
      title: '4价格',
      dataIndex: 'webSite4Price',
      className: 'alignRight',
      width: '5%',
      render: (value, row, num) => {
        return (
          numberUtils.round_half_up_format(value,4)
        );
      },
    }, {
      title: '网站5',
      dataIndex: 'webSite5Name',
      className: 'alignLeft',
      width: '8%',
    }, {
      title: '5价格',
      dataIndex: 'webSite5Price',
      className: 'alignRight',
      width: '5%',
      render: (value, row, num) => {
        return (
          numberUtils.round_half_up_format(value,4)
        );
      },
    }, {
      title: '币种',
      dataIndex: 'currency',
      className: 'alignCenter',
      sorter: false,
      width: '3%',
    }]
    // .concat(webs.map((web, index) => {
    //   return {
    //     title: `${web}(元)`,
    //     dataIndex: `webPrice${index+1}`,
    //     className: 'alignRight',
    //     sorter: true,
    //     width: '6%',
    //     render: (value, row, num) => {
    //       return (
    //         formatAmt(value)
    //       )
    //     },
    //   }
    // }))
    // .concat([{
    //   title: '供应商报价(元)',
    //   dataIndex: 'suppPrice',
    //   className: 'alignRight',
    //   sorter: true,
    //   width: '6%',
    //   render: (value, row, num) => {
    //     return (
    //       formatAmt(value)
    //     )
    //   },
    // }, {
    //   title: '中标价(元)',
    //   dataIndex: 'bidPrice',
    //   className: 'alignRight',
    //   sorter: true,
    //   width: '6%',
    //   render: (value, row, num) => {
    //     return (
    //       formatAmt(value)
    //     )
    //   },
    // }, {
    //   title: '币种',
    //   dataIndex: 'currency',
    //   className: 'alignLeft',
    //   sorter: true,
    //   width: '6%',
    // }]),
  };

  const handleFormChange = (field) => {
    const key = Object.keys(field)[0];

    dispatch({
      type: `${domain}/updateForm`,
      payload: {
        key,
        value: field[key],
      },
    });
  };

  const handleCancel = () => {
    dispatch({ type: `${domain}/cancel` });
  };

  return (
    <div>
      <Toolbar
        domain={domain}
        loading={loading}
        formData={itemInfo}
        readOnly={readOnly}
        mode={mode}
        buttons={[]}
        handleCancel={handleCancel}

      />

      {Object.keys(itemInfo).length > 0 &&
        <Card title="物料信息" {...cardProps} id="product">
          <FormEL items={product} record={itemInfo} readOnly={readOnly} onFieldsChange={handleFormChange} />
        </Card>
      }

      <Card title="价格历史表" {...cardProps} id="feedback">
        <DataTable {...tableProps} />
        {modalVisible && <Modal {...modalProps} />}
      </Card>
    </div>
  );
};

export default connect(({ itemPriceHistory, loading, app }) =>
  ({ itemPriceHistory, loading, app }))(ItemPriceHistory);
