GHHub/src/views/products/Detail/ProductInfoQuotation.jsx

import { useState } from 'react'
import { Table, Form, Modal, Button, Radio, Input, Flex, Card, Select, InputNumber, Checkbox, DatePicker, Space, App } from 'antd'
import { useTranslation } from 'react-i18next'
import { CloseOutlined, StarTwoTone, PlusOutlined, ExclamationCircleFilled } from '@ant-design/icons'
import { useDatePresets } from '@/hooks/useDatePresets'
import dayjs from 'dayjs'
import useProductsStore from '@/stores/Products/Index'

const { RangePicker } = DatePicker

const PriceInput = (props) => {
  const { id, value = {}, onChange } = props
  const [numberStart, setNumberStart] = useState(0)
  const [numberEnd, setNumberEnd] = useState(0)
  const [audultPrice, setAudultPrice] = useState(0)
  const [childrenPrice, setChildrenPrice] = useState(0)
  const triggerChange = (changedValue) => {
    onChange?.({
      numberStart,
      numberEnd,
      audultPrice,
      childrenPrice,
      ...value,
      ...changedValue,
    })
  }
  const onNumberStartChange = (e) => {
    const newNumber = parseInt(e.target.value || '0', 10)
    if (Number.isNaN(numberStart)) {
      return
    }
    if (!('numberStart' in value)) {
      setNumberStart(newNumber)
    }
    triggerChange({
      numberStart: newNumber,
    })
  }
  const onNumberEndChange = (e) => {
    const newNumber = parseInt(e.target.value || '0', 10)
    if (Number.isNaN(numberEnd)) {
      return
    }
    if (!('numberEnd' in value)) {
      setNumberEnd(newNumber)
    }
    triggerChange({
      numberEnd: newNumber,
    })
  }
  const onAudultPriceChange = (e) => {
    const newNumber = parseInt(e.target.value || '0', 10)
    if (Number.isNaN(audultPrice)) {
      return
    }
    if (!('audultPrice' in value)) {
      setAudultPrice(newNumber)
    }
    triggerChange({
      audultPrice: newNumber,
    })
  }
  const onChildrenPriceChange = (e) => {
    const newNumber = parseInt(e.target.value || '0', 10)
    if (Number.isNaN(childrenPrice)) {
      return
    }
    if (!('childrenPrice' in value)) {
      setChildrenPrice(newNumber)
    }
    triggerChange({
      childrenPrice: newNumber,
    })
  }
  return (
    <Space.Compact id={id}>
      <Input
        type='text'
        value={value.numberStart || numberStart}
        onChange={onNumberStartChange}
        style={{
          width: '20%',
        }}
      />
      <Input
        type='text'
        value={value.numberEnd || numberEnd}
        onChange={onNumberEndChange}
        style={{
          width: '40%',
        }}
        addonBefore='~'
      />
      <Input
        type='text'
        value={value.audultPrice || audultPrice}
        onChange={onAudultPriceChange}
        style={{
          width: '70%',
        }}
        addonBefore='成人价'
      />
      <Input
        type='text'
        value={value.childrenPrice || childrenPrice}
        onChange={onChildrenPriceChange}
        style={{
          width: '70%',
        }}
        addonBefore='儿童价'
      />
    </Space.Compact>
  )
}

const batchSetupInitialValues = {
  'defList': [
    // 旺季
    {
      'useDate': [
        dayjs().add(1, 'year').startOf('y'), dayjs().add(1, 'year').endOf('y')
      ],
      'unitId': '0',
      'currency': 'RMB',
      'weekend': [
        '5',
        '6'
      ],
      'priceList': [
        {
          'priceInput': {
            'numberStart': 1,
            'numberEnd': 2,
            'audultPrice': 0,
            'childrenPrice': 0
          }
        },
        {
          'priceInput': {
            'numberStart': 3,
            'numberEnd': 4,
            'audultPrice': 0,
            'childrenPrice': 0
          }
        },
        {
          'priceInput': {
            'numberStart': 5,
            'numberEnd': 6,
            'audultPrice': 0,
            'childrenPrice': 0
          }
        },
        {
          'priceInput': {
            'numberStart': 7,
            'numberEnd': 9,
            'audultPrice': 0,
            'childrenPrice': 0
          }
        }
      ]
    },
    // 淡季
    {
      'useDate': [
        dayjs().add(1, 'year').subtract(2, 'M').startOf('M'), dayjs().add(1, 'year').endOf('M')
      ],
      'unitId': '0',
      'currency': 'RMB',
      'weekend': [
        '5',
        '6'
      ],
      'priceList': [
        {
          'priceInput': {
            'numberStart': 1,
            'numberEnd': 2,
            'audultPrice': 0,
            'childrenPrice': 0
          }
        },
        {
          'priceInput': {
            'numberStart': 3,
            'numberEnd': 4,
            'audultPrice': 0,
            'childrenPrice': 0
          }
        },
        {
          'priceInput': {
            'numberStart': 5,
            'numberEnd': 6,
            'audultPrice': 0,
            'childrenPrice': 0
          }
        },
        {
          'priceInput': {
            'numberStart': 7,
            'numberEnd': 9,
            'audultPrice': 0,
            'childrenPrice': 0
          }
        }
      ]
    }
  ]
}

const defaultPriceValue = {
  'priceInput': {
    'numberStart': 1,
    'numberEnd': 2,
    'audultPrice': 0,
    'childrenPrice': 0
  }
}

const defaultDefinitionValue = {
  'useDate': [
    dayjs().add(1, 'year').subtract(2, 'M').startOf('M'), dayjs().add(1, 'year').endOf('M')
  ],
  'unitId': '0',
  'currency': 'RMB',
  'weekend': [
    '5',
    '6'
  ],
  'priceList': [
    defaultPriceValue
  ]
}

const ProductInfoQuotation = ({ editable, ...props }) => {

  const { onChange } = props

  const { t } = useTranslation()

  const [isQuotationModalOpen, setQuotationModalOpen] = useState(false)
  const [isBatchSetupModalOpen, setBatchSetupModalOpen] = useState(false)
  const { modal, notification } = App.useApp();
  const [quotationForm] = Form.useForm()
  const [batchSetupForm] = Form.useForm()

  const datePresets = useDatePresets()

  const [quotationList, newEmptyQuotation, appendQuotationList, saveOrUpdateQuotation, deleteQuotationById] =
    useProductsStore((state) => [state.quotationList, state.newEmptyQuotation, state.appendQuotationList, state.saveOrUpdateQuotation, state.deleteQuotationById])

  const triggerChange = (changedValue) => {
    onChange?.(
      changedValue
    )
  }

  const onQuotationSeleted = async (quotation) => {
    // 把 start, end 转换为 RangePicker 数组格式
    quotation.use_dates = [dayjs(quotation.use_dates_start), dayjs(quotation.use_dates_end)]
    quotation.weekdayList = quotation.weekdays.split(',')
    quotationForm.setFieldsValue(quotation)
    setQuotationModalOpen(true)
  }

  const onNewQuotation = () => {
    const emptyQuotation = newEmptyQuotation()
    quotationForm.setFieldsValue(emptyQuotation)
    setQuotationModalOpen(true)
  }

  const onQuotationFinish = (values) => {
    const newList = saveOrUpdateQuotation(values)
    triggerChange(newList)
    setQuotationModalOpen(false)
  }

  const onBatchSetupFinish = () => {
    const defList = batchSetupForm.getFieldsValue().defList
    const newList = appendQuotationList(defList)
    triggerChange(newList)
    setBatchSetupModalOpen(false)
  }

  const onDeleteQuotation = (quotationId) => {
    modal.confirm({
      title: '请确认',
      icon: <ExclamationCircleFilled />,
      content: '你要删除这条价格吗？',
      onOk() {
        deleteQuotationById(quotationId)
          .catch(ex => {
            notification.error({
              message: 'Notification',
              description: ex.message,
              placement: 'top',
              duration: 4,
            })
          })
      },
    })
  }

  const quotationColumns = [
    { title: t('products:adultPrice'), dataIndex: 'adult_cost', width: '4rem' },
    { title: t('products:childrenPrice'), dataIndex: 'child_cost', width: '4rem' },
    { title: t('products:currency'), dataIndex: 'currency', width: '4rem' },
    {
      title: t('products:Types'),
      dataIndex: 'unit_id',
      width: '4rem',
      render: (text) => (text === '0' ? '每人' : text === '1' ? '每团' : text),
    },
    {
      title: t('products:number'),
      dataIndex: 'group_size',
      width: '4rem',
      render: (_, record) => `${record.group_size_min}-${record.group_size_max}`,
    },

    {
      title: t('products:validityPeriod'),
      dataIndex: 'use_dates',
      width: '6rem',
      render: (_, record) => `${record.use_dates_start}-${record.use_dates_end}`,
    },

    { title: t('products:Weekdays'), dataIndex: 'weekdays', width: '4rem' },
    {
      title: t('products:operation'),
      dataIndex: 'operation',
      width: '3%',
      render: (_, quotation) => {
        return (
          <Space>
            <Button type='link' onClick={() => onQuotationSeleted(quotation)}>{t('Edit')}</Button>
            <Button type='link' danger onClick={() => onDeleteQuotation(quotation.id)}>{t('Delete')}</Button>
          </Space>
        )
      },
    },
  ]

  return (
    <>
      <h2>{t('products:EditComponents.Quotation')}</h2>
      <Table
        bordered
        dataSource={quotationList}
        columns={quotationColumns}
        pagination={false}
      />
      {
        editable &&
        <Space>
          <Button onClick={() => onNewQuotation()} type='primary' ghost style={{ marginTop: 16 }}>
            {t('products:addQuotation')}
          </Button>
          <Button onClick={() => setBatchSetupModalOpen(true)} type='primary' ghost style={{ marginTop: 16, marginLeft: 16 }}>
            批量设置
          </Button>
        </Space>
      }
      <Modal
        centered
        title='批量设置价格'
        width={'640px'}
        open={isBatchSetupModalOpen}
        onOk={() => onBatchSetupFinish()}
        onCancel={() => setBatchSetupModalOpen(false)}
        destroyOnClose
        forceRender
      >
        <Form
          labelCol={{ span: 3 }}
          wrapperCol={{ span: 20 }}
          form={batchSetupForm}
          name='batchSetupForm'
          autoComplete='off'
          initialValues={batchSetupInitialValues}
        >
          <Form.List name='defList'>
            {(fields, { add, remove }) => (
              <Flex gap='middle' vertical>
                {fields.map((field, index) => (
                  <Card
                    size='small'
                    title={index == 0 ? '旺季' : index == 1 ? '淡季' : '其他'}
                    key={field.key}
                    extra={index == 0 ? <StarTwoTone twoToneColor='#eb2f96' /> : <CloseOutlined onClick={() => {
                      remove(field.name)
                    }} />}
                  >
                    <Form.Item label='币种' name={[field.name, 'currency']}>
                      <Select placeholder='选择币种'>
                        <Select.Option value='RMB'>RMB</Select.Option>
                        <Select.Option value='USD'>USD</Select.Option>
                      </Select>
                    </Form.Item>
                    <Form.Item label='类型' name={[field.name, 'unitId']}>
                      <Select placeholder='选择类型'>
                        <Select.Option value='0'>每人</Select.Option>
                        <Select.Option value='1'>每团</Select.Option>
                      </Select>
                    </Form.Item>
                    <Form.Item label='周末' name={[field.name, 'weekend']}>
                      <Checkbox.Group
                        options={['5', '6', '7']}
                      />
                    </Form.Item>
                    <Form.Item label='有效期' name={[field.name, 'useDate']}>
                      <RangePicker style={{ width: '100%' }} allowClear={true} inputReadOnly={true} presets={datePresets} placeholder={['From', 'Thru']} />
                    </Form.Item>
                    <Form.Item label='人等'>
                      <Form.List name={[field.name, 'priceList']}>
                        {(priceFieldList, priceOptList) => (
                          <Flex gap='middle' vertical>
                            {priceFieldList.map((priceField, index) => (
                              <Space key={priceField.key}>
                                <Form.Item noStyle name={[priceField.name, 'priceInput']}>
                                  <PriceInput />
                                </Form.Item>
                                {index == 0 ? <StarTwoTone twoToneColor='#eb2f96' /> : <CloseOutlined onClick={() => priceOptList.remove(priceField.name)} />}
                              </Space>
                            ))}
                            <Button type='dashed' icon={<PlusOutlined />} onClick={() => priceOptList.add(defaultPriceValue)} block>
                              新增人等
                            </Button>
                          </Flex>
                        )}
                      </Form.List>
                    </Form.Item>
                  </Card>
                ))}
                <Button type='dashed' icon={<PlusOutlined />} onClick={() => add(defaultDefinitionValue)} block>
                  新增设置
                </Button>
              </Flex>
            )}
          </Form.List>
        </Form>
      </Modal>

      <Modal
        centered
        okButtonProps={{
          autoFocus: true,
          htmlType: 'submit',
        }}
        title={t('account:detail')}
        open={isQuotationModalOpen} onCancel={() => setQuotationModalOpen(false)}
        destroyOnClose
        forceRender
        modalRender={(dom) => (
          <Form
            name='quotationForm'
            form={quotationForm}
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 20 }}
            className='max-w-2xl'
            onFinish={onQuotationFinish}
            autoComplete='off'
          >
            {dom}
          </Form>
        )}
      >
        <Form.Item name='id' className='hidden' ><Input /></Form.Item>
        <Form.Item name='key' className='hidden' ><Input /></Form.Item>
        <Form.Item name='fresh' className='hidden' ><Input /></Form.Item>
        <Form.Item
          label={t('products:adultPrice')}
          name='adult_cost'
          rules={[
            {
              required: true,
              message: t('products:Validation.adultPrice'),
            },
          ]}
        >
          <InputNumber style={{ width: '100%' }} />
        </Form.Item>
        <Form.Item
          label={t('products:childrenPrice')}
          name='child_cost'
          rules={[
            {
              required: true,
              message: t('products:Validation.childrenPrice'),
            },
          ]}
        >
          <InputNumber style={{ width: '100%' }} />
        </Form.Item>
        <Form.Item
          label={t('products:currency')}
          name='currency'
          rules={[
            {
              required: true,
              message: t('products:Validation.currency'),
            },
          ]}
        >
          <Radio.Group>
            <Radio value='RMB'>RMB</Radio>
            <Radio value='USD'>USD</Radio>
          </Radio.Group>
        </Form.Item>
        <Form.Item
          label={t('products:Types')}
          name='unit_id'
          rules={[
            {
              required: true,
              message: t('products:Validation.unit_name'),
            },
          ]}
        >
          <Radio.Group>
            <Radio value='0'>每人</Radio>
            <Radio value='1'>每团</Radio>
          </Radio.Group>
        </Form.Item>
        <Form.Item
          label={t('products:number')}
          name='group_size_min'
          rules={[
            {
              required: true,
              message: t('products:Validation.group_size_min'),
            },
          ]}
        >
          <InputNumber style={{ width: '100%' }} />
        </Form.Item>
        <Form.Item
          label={t('products:number')}
          name='group_size_max'
          rules={[
            {
              required: true,
              message: t('products:Validation.group_size_max'),
            },
          ]}
        >
          <InputNumber style={{ width: '100%' }} />
        </Form.Item>
        <Form.Item
          label={t('products:validityPeriod')}
          name='use_dates'
          rules={[
            {
              required: true,
              message: t('products:Validation.use_dates'),
            },
          ]}
        >
          <RangePicker presets={datePresets} style={{ width: '100%' }} />
        </Form.Item>
        <Form.Item
          label={t('products:Weekdays')}
          name='weekdayList'
        >
          <Checkbox.Group options={['5', '6', '7']} />
        </Form.Item>
      </Modal>
    </>
  )
}

export default ProductInfoQuotation