import { useState } from 'react';
import SearchBox from '~/components/search-box';
import { Button } from 'antd';

// 订单状态搜索列表
const statusCodeButtonList = [
  { value: -1, label: '全部订单' },
  { value: 0, label: '沟通意向' },
  { value: 1, label: '签约付款' },
  { value: 2, label: '待发货' },
  { value: 3, label: '待收货' },
  { value: 4, label: '已完成' },
  { value: 5, label: '已关闭' },
];

function ProductOrderView() {
  // 当前选择的是第几个按钮
  const [statusCodeButtonIndex, setStatusCodeButtonIndex] = useState<number>(0);
  // 订单状态筛选
  const statusChangeEvent = (index: number) => {
    setStatusCodeButtonIndex(index);
  };
  return (
    <>
      <SearchBox
        search={[
          {
            label: '订单编号',
            name: 'keyword',
            type: 'input',
            placeholder: '请输入订单编号',
          },
          {
            label: '买家账号',
            name: 'keyword2',
            type: 'input',
            placeholder: '请输入用户账号',
          },
          {
            label: '相关销售',
            name: 'saleId',
            type: 'Select',
            placeholder: '请选择相关销售',
            options: [],
          },
          {
            label: '时间',
            name: 'time',
            type: 'rangePicker',
            placeholder: '请选择创建时间',
          },
        ]}
        searchData={(e: any) => console.log('提交数据 --->', e)}
        sufFixBtn={
          <>
            {statusCodeButtonList?.map((i, j) => {
              return (
                <Button
                  key={j}
                  type={j === statusCodeButtonIndex ? 'primary' : 'default'}
                  onClick={() => statusChangeEvent(j)}
                  style={{ marginTop: '5px' }}
                >
                  {i.label}
                </Button>
              );
            })}
          </>
        }
      />
    </>
  );
}

export default ProductOrderView;
