import React from 'react';
import { connect } from 'dva';
import { Input } from 'antd';
import { DataTable, MonthPicker, SuggestSelect } from '../../../components';
import { config, stringUtils } from '../../../utils';
import moment from 'moment';
import { CascaderItem, ExcelImport } from '../../components';

const { api } = config;
const { excel } = api;
const { exportExcelURL } = excel;
import { numberUtils, dataUtils } from '@utils';

const Prices = ({ dispatch, prices, loading }) => {
  const { list, total, showUploadModal, outBtn, historyBtn, adjustBtn } = prices;
  const domain = 'prices';
  // 接收路径上的参数
  const cccCode = stringUtils.queryURL('cccCode') ? stringUtils.queryURL('cccCode').split('%2C') : [];
  const suppCenter = stringUtils.queryURL('suppCenter') ? stringUtils.queryURL('suppCenter').split('%2C') : [];
  const yearMonthDate = stringUtils.queryURL('yearMonthDateFrom') ? [moment(stringUtils.queryURL('yearMonthDateFrom'), 'YYYY-MM-DD'), moment(stringUtils.queryURL('yearMonthDateTo'), 'YYYY-MM-DD')] : [];

  const handleDownload = (url) => {
    const a = document.createElement('a');
    // a.style = 'display: none';
    a.style.display = 'none';
    // a.download = fileName;
    a.href = url;
    a.target = '_blank';

    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  };

  const tableProps = {
    rowKey: 'id',
    limit: stringUtils.queryURL('limit'),
    offset: stringUtils.queryURL('offset'),
    sortBy: stringUtils.queryURL('sortBy') || 'yearMonth',
    sortDirection: stringUtils.queryURL('sortDirection') || 'DESC',
    scroll: {
      x: 3200,
      y: 500
    },
    domain,
    dispatch,
    loading,
    total,
    dataSource: list,
    enableDoubleClick: false,
    showAdd: false,
    showDelete: false,
    showView: false,
    showEdit: false,
    showUpload: true,
    handleDownload: {
      requestUrl: `${exportExcelURL}/price-info`,
      requestParam: window.location.search,
    },
    buttons: [{
      key: 'outerPrice',
      type: 'primary',
      name: '外部参考价维护',
      requiredSelected: 0,
      hidden: outBtn,
      disabled: outBtn,
      cb: (selectedRowKeys, searchBarForm, selectedRows) => {
        dispatch({
          type: `${domain}/goToReferprices`,
          payload: { selectedRowKeys, searchBarForm, selectedRows }
        });
      },
    }, {
      key: 'newItem',
      type: 'primary',
      name: '新原料导出',
      requiredSelected: 0,
      hidden: 0,
      disabled: 0,
      cb: (selectedRowKeys, searchBarForm, selectedRows) => {
        handleDownload(`${exportExcelURL}/price/items?rownum=2000`);
      },
    }, {
      key: 'history',
      type: 'primary',
      name: '查看历史报价',
      requiredSelected: 1,
      hidden: historyBtn,
      disabled: historyBtn,
      cb: (selectedKeys) => {
        dispatch({
          type: `${domain}/getSingle`,
          payload: {
            id: selectedKeys,
            mode: 'update',
          },
        });
      },
    }, {
      key: 'adjust',
      type: 'primary',
      name: '价格调整',
      requiredSelected: 1,
      hidden: adjustBtn,
      disabled: adjustBtn,
      cb: (selectedKeys) => {
        dispatch({
          type: `${domain}/adjust`,
          payload: {
            id: selectedKeys[0],
            mode: 'create',
          },
        });
      },
    }],
    filter: [{
      title: '物料',
      dataIndex: 'itemCode',
      tag: <Input placeholder="请输入名称/编号" />,
      options: {
        initialValue: stringUtils.queryURL('itemCode'),
      },
    }, {
      title: '供应商',
      dataIndex: 'suppCode',
      tag: <Input placeholder="请输入名称/编号" />,
      options: {
        initialValue: stringUtils.queryURL('suppCode'),
      },
    }, {
      title: '供货区域',
      dataIndex: 'suppCenter',
      tag: <SuggestSelect apiName="regions" mode="multiple" />,
      options: {
        initialValue: suppCenter,
      },
    }, {
      title: '物料类别',
      dataIndex: 'cccCode',
      tag: <CascaderItem
        placeholder="选择大类/中类/小类"
        changeOnSelect={true} />,
      options: {
        initialValue: cccCode,
      },
    }, {
      title: '价格期间',
      dataIndex: 'yearMonthDate',
      tag: <MonthPicker style={{ width: '100%' }} />,
      options: {
        initialValue: yearMonthDate,
      },
    }],
    columns: [{
      title: '物料编号',
      dataIndex: 'outerCode',
      className: 'alignCenter noWrap',
      sorter: true,
      width: 100,
    }, {
      title: '临时编号',
      dataIndex: 'itemCode',
      className: 'alignCenter noWrap',
      sorter: true,
      width: 100,
    }, {
      title: '物料',
      dataIndex: 'item',
      className: 'alignLeft',
      width: 120,
    }, {
      title: '价格期间',
      className: 'alignCenter',
      width: 200,
      render: (value, row, index) => {
        return (<span>{dataUtils.ymd(row.validFromDate)}--{dataUtils.ymd(row.validToDate)}</span>);
      }
    }, {
      title: '供货区域',
      dataIndex: 'suppCenterName',
      className: 'alignCenter',
      sorter: true,
      width: 120,
    }, {
      title: '物料类型',
      dataIndex: 'typeName',
      className: 'alignCenter',
      width: 100,
    }, {
      title: '执行价',
      dataIndex: 'taxPrice',
      className: 'alignRight',
      sorter: false,
      width: 100,
      render: (value) => {
        return (
          numberUtils.round_half_up_format(value,4)
        );
      },
    }, {
      title: '基准价',
      dataIndex: 'basePrice',
      className: 'alignRight',
      sorter: false,
      width: 100,
      render: (value) => {
        return (
          numberUtils.round_half_up_format(value,4)
        );
      },
    }, {
      title: '供应商',
      dataIndex: 'suppName',
      className: 'alignLeft',
      sorter: true,
      width: 100,
    }, {
      title: '报价',
      dataIndex: 'suppPrice',
      className: 'alignRight',
      sorter: false,
      width: 100,
      render: (value) => {
        return (
          numberUtils.round_half_up_format(value,4)
        );
      },
    }, {
      title: '中标价',
      dataIndex: 'bidPrice',
      className: 'alignRight',
      sorter: false,
      width: 100,
      render: (value) => {
        return (
          numberUtils.round_half_up_format(value,4)
        );
      },
    }, {
      title: '网址1',
      dataIndex: 'webSite1Name',
      className: 'alignLeft',
      sorter: false,
      width: 250,
    }, {
      title: '1价格',
      dataIndex: 'webSite1Price',
      className: 'alignRight',
      sorter: false,
      width: 100,
      render: (value) => {
        return (
          numberUtils.round_half_up_format(value,4)
        );
      },
    }, {
      title: '网址2',
      dataIndex: 'webSite2Name',
      className: 'alignLeft',
      sorter: false,
      width: 250,
    }, {
      title: '2价格',
      dataIndex: 'webSite2Price',
      className: 'alignRight',
      sorter: false,
      width: 100,
      render: (value) => {
        return (
          numberUtils.round_half_up_format(value,4)
        );
      },
    }, {
      title: '网址3',
      dataIndex: 'webSite3Name',
      className: 'alignLeft',
      sorter: false,
      width: 250,
    }, {
      title: '3价格',
      dataIndex: 'webSite3Price',
      className: 'alignRight',
      sorter: false,
      width: 100,
      render: (value) => {
        return (
          numberUtils.round_half_up_format(value,4)
        );
      },
    }, {
      title: '网址4',
      dataIndex: 'webSite4Name',
      className: 'alignLeft',
      sorter: false,
      width: 250,
    }, {
      title: '4价格',
      dataIndex: 'webSite4Price',
      className: 'alignRight',
      sorter: false,
      width: 100,
      render: (value) => {
        return (
          numberUtils.round_half_up_format(value,4)
        );
      },
    }, {
      title: '网址5',
      dataIndex: 'webSite5Name',
      className: 'alignLeft',
      sorter: false,
      width: 250,
    }, {
      title: '5价格',
      dataIndex: 'webSite5Price',
      className: 'alignRight',
      sorter: false,
      width: 100,
      render: (value) => {
        return (
          numberUtils.round_half_up_format(value,4)
        );
      },
    }, {
      title: '币种',
      dataIndex: 'currency',
      className: 'alignCenter',
      sorter: false,
      width: 100,
    }],
  };

  const uploadModal = {
    domain,
    dispatch,
    showModal: showUploadModal,
    dataSource: [{
      aim: 'price-info',
      name: '物料价格历史',
      temp: 'Price_History',
      tempName: '历史价格',
    }, {
      aim: 'outer-price',
      name: '外部参考价',
      temp: 'Outer_Price',
      tempName: '外部参考价 ',
    }, {
      aim: 'base-price',
      name: '基准价',
      temp: 'Base_Price',
      tempName: '物料基准价',
    }],
  };

  return (
    <div className="content-inner">
      <DataTable {...tableProps} />
      {showUploadModal && <ExcelImport {...uploadModal} />}
    </div>
  );
};

export default connect(({ prices, loading }) => ({ prices, loading }))(Prices);
