import React, { useState } from "react";
import { Card, ConfigProvider, DatePicker, Divider, Table, Dropdown, Menu } from 'antd';
import { DownOutlined } from '@ant-design/icons';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import usePagination from "@/hooks/usePagination";
import DetailModal from './components/ConfirmDetailModal';
import { getList, Item } from './api';
import st from './style.less';
import zhCN from "antd/lib/locale-provider/zh_CN";
import moment from 'moment';
import useInitial from '@/hooks/useInitail';
import * as API from '@/common/api';
import UploadExcel from './components/UploadExcel';
import PmsSelect from '@/pages/pms/comonents/PmsSelect';
import * as api from "@/pages/pms/storage/partShop/api";

const { Column } = Table;
export default function PartPriceCoefficient() {
  const { list, paginationConfig, loading, setParams, innerParams } = usePagination<Item>(getList, {});
  const { data: brands } = useInitial(API.getBrandFilterApi, [], {});
  const [importVisible, setImportVisible] = useState(false);
  const [visibleConfirm, setVisibleConfirm] = useState(false);
  const [confirm, setConfirm] = useState(false);
  const [item, setItem] = useState<Item>({});
  const { data: shops } = useInitial<PmsStoragePartShop.Option[], {}>(api.getShopApi, [], {});

  const menu = (
    <Menu
      items={
      [
        {
          label: <a href="/api/pms/erp/part/template/shipping">通用模板</a>,
          key: '0',
        },
        {
          label: <a href="/api/pms/erp/part/template/shipping/ca">长安模板</a>,
          key: '1',
        },
      ]
    }
    />
);

  return (
    <PageHeaderWrapper title="发运单">
      <ConfigProvider locale={zhCN}>
        <Card className={st.page}>
          <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
            <div style={{ display: 'flex', flexDirection: 'row'}}>
              <DatePicker
                value={innerParams.month == undefined ? moment(new Date().toLocaleDateString(), 'YYYY-MM') : moment(innerParams.month)}
                picker="month"
                allowClear={false}
                style={{ marginRight: 20 }}
                onChange={(v) => setParams({...innerParams, month: v && v.valueOf(), current: 1}, true)}
              />
              <PmsSelect
                placeholder="请选择品牌"
                showSearch
                style={{ width: 200, marginRight: 20 }}
                value={innerParams.brandId}
                onChange={brandId => setParams({ ...innerParams, brandId, current: 1 }, true)}
                options={brands.map((i: any) => ({value: i.id, label: i.name}))}
              />
              <PmsSelect
                style={{ width: 200}}
                allowClear
                value={innerParams.shopId}
                onChange={value => {
                  setParams({ ...innerParams, current: 1, shopId: value}, true);
                }}
                placeholder="请选择服务站"
                options={shops.map((item: PmsStoragePartShop.Option) => ({value: item.id, label: item.name}))}
              />
            </div>
            <div style={{ display: 'flex', flexDirection: 'row'}}>
              <Dropdown overlay={menu} trigger={['click']} placement="bottomLeft" arrow overlayStyle={{width: 120}}>
                <a style={{display: 'flex', alignItems: 'center'}}>导入模板<DownOutlined style={{fontSize: 14, marginLeft: 3}} /></a>
              </Dropdown>
              <div style={{marginLeft: 20}}><a onClick={() => { setImportVisible(true); }}>导入数据</a></div>
            </div>
          </div>
          <Table
            size="small"
            loading={loading}
            pagination={paginationConfig}
            dataSource={list}
            rowKey={(item: Item) => `${item.shippingNo}`}
            onChange={(_pagination) => setParams({ ..._pagination }, true)}
          >
            <Column title="发运单号" dataIndex="shippingNo" />
            <Column title="品牌" dataIndex="brandName" />
            <Column title="供应商" dataIndex="supplierName" />
            <Column title="库房" dataIndex="storageName" />
            <Column title="门店" dataIndex="shopName" />
            <Column title="结算商家" dataIndex="settleDealerName" />
            <Column title="总金额(元)" dataIndex="totalAmount" render={(t: number) => t.toFixed(2) || 0} />
            <Column title="导入时间" dataIndex="shippingDate" render={(t: number) => t && moment(t).format('YYYY-MM-DD HH:mm')} />
            <Column title="导入人员" dataIndex="importUserName" />
            <Column title="入库人员" dataIndex="inStorageUserName" render={t => t || '--'} />
            <Column title="状态" dataIndex="status" render={(t: number) => ['待确认', '待入库', '已完成'][t]} />
            <Column
              title="操作"
              className={st.edit}
              render={(text, _item: Item) => (
                <>
                  <a onClick={() => { setVisibleConfirm(true); setConfirm(false); setItem(_item); }}>查看</a>
                  {_item.status == 0 && (
                    <>
                      <Divider type="vertical" />
                      <a onClick={() => { setVisibleConfirm(true); setConfirm(true); setItem(_item); }}>导入确认</a>
                    </>
                  )}
                </>
              )}
            />
          </Table>
        </Card>
        <DetailModal
          visible={visibleConfirm}
          item={item}
          confirm={confirm}
          onCancel={() => setVisibleConfirm(false)}
          fetchList={() => setParams({ current: 1 }, true)}
        />
        <UploadExcel
          importVisible={importVisible}
          setImportVisible={setImportVisible}
          brands={brands}
          getList={() => setParams({ current: 1 }, true)}
        />
      </ConfigProvider>
    </PageHeaderWrapper>
  );
}