import React, {useState} from "react";
import { Card, ConfigProvider, Select, Table, Button, Divider, Input } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import usePagination from "@/hooks/usePagination";
import { getList, ListVO } 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 { history } from 'umi';
import DetailModal from "@/pages/pms/partPlan/PlanManage/components/DetailModal";

// 计划状态 1:待审核2:已通过3待付款4已付款9:已拒绝
const statusName: {[key: number]: string} = {
  0: '草稿',
  1: '待审核',
  2: '已通过',
  3: '待付款',
  4: '已付款',
  9: '已拒绝',
};
const { Column } = Table;
export default function Index() {
  const { list, paginationConfig, loading, setParams, innerParams } = usePagination<ListVO>(getList, {});
  const { data: brands } = useInitial(API.getBrandFilterApi, [], {});
  const [visibleDetail, setVisibleDetail] = useState(false);
  const [item, setItem] = useState<ListVO>({});

  return (
    <PageHeaderWrapper title="配件计划管理">
      <ConfigProvider locale={zhCN}>
        <Card className={st.page}>
          <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', marginBottom: 20}}>
            <div style={{display: 'flex', alignItems: 'center'}}>
              <Input.Search
                allowClear
                enterButton
                placeholder="输入配件名称/编码搜索"
                onSearch={v => setParams({keywords: v}, true)}
                style={{ maxWidth: 240, marginRight: 20 }}
              />
              <Input.Search
                allowClear
                enterButton
                placeholder="输入计划人员搜索"
                onSearch={v => setParams({userName: v}, true)}
                style={{ maxWidth: 200, marginRight: 20 }}
              />
              <Select
                placeholder="请选择品牌"
                showSearch
                allowClear
                style={{ width: 200, marginRight: 20 }}
                value={innerParams.brandId}
                onChange={brandId => setParams({ ...innerParams, brandId, current: 1 }, true)}
                optionFilterProp="children"
              >
                {brands.map((item: any) => (
                  <Select.Option value={item.id} key={item.id}>
                    {item.name}
                  </Select.Option>
                ))}
              </Select>
              <Select
                placeholder="状态筛选"
                showSearch
                allowClear
                style={{ width: 200, marginRight: 20 }}
                onChange={v => setParams({status: v }, true)}
                optionFilterProp="children"
              >
                <Select.Option value={0} key={0}>草稿</Select.Option>
                <Select.Option value={1} key={1}>待审核</Select.Option>
                <Select.Option value={2} key={2}>已通过</Select.Option>
                <Select.Option value={9} key={9}>已拒绝</Select.Option>
              </Select>
            </div>
            <Button type="primary" onClick={() => history.push('/pms/partPlan/planManage/apply')}>新增</Button>
          </div>
          <Table
            size="small"
            loading={loading}
            pagination={paginationConfig}
            dataSource={list}
            rowKey={(item: ListVO) => `${item.planId}`}
            onChange={(_pagination) => setParams({ ..._pagination }, true)}
          >
            <Column title="计划单号" dataIndex="planNo" />
            <Column title="品牌" dataIndex="brandName" />
            <Column title="计划日期" dataIndex="planDate" render={(t: number) => t && moment(t).format('YYYY-MM-DD HH:mm')} />
            <Column title="计划人员" dataIndex="userName" />
            <Column title="计划总金额（元）" dataIndex="totalAmount" />
            <Column title="状态" dataIndex="status" render={(t: number) => statusName[t]} />
            <Column
              title="操作"
              fixed="right"
              render={(text, _item: ListVO) => (
                <>
                  {[0, 9].includes(_item.status || 0) ? (
                    <a onClick={() => history.push(`/pms/partPlan/planManage/apply?planId=${_item.planId}`)}>
                      编辑
                    </a>
                )
                  : (
                    <a onClick={() => history.push(`/pms/partPlan/planManage/detail/${_item.planId}`)}>
                      查看
                    </a>
                )}
                  <Divider type="vertical" />
                  <a onClick={() => {
                      setItem(_item);
                      setVisibleDetail(true);
                    }}
                  >
                    进度
                  </a>
                </>
              )}
            />
          </Table>
          <DetailModal
            visible={visibleDetail}
            item={item}
            onCancel={() => setVisibleDetail(false)}
          />
        </Card>
      </ConfigProvider>
    </PageHeaderWrapper>
  );
}