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

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

const { RangePicker } = DatePicker

const batchSetupInitialValues = {
  'defList': [
    // 旺季
    {
      'useDateList': [
        {
          'useDate': [
            dayjs().add(1, 'year').startOf('y'), dayjs().add(1, 'year').endOf('y')
          ]
        }
      ],
      'unitId': '0',
      'currency': 'RMB',
      'weekend': [
      ],
      '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
          }
        }
      ]
    },
    // 淡季
    {
      'useDateList': [
        {
          'useDate': [
            dayjs().add(1, 'year').subtract(2, 'M').startOf('M'), dayjs().add(1, 'year').endOf('M')
          ]
        }
      ],
      'unitId': '0',
      'currency': 'RMB',
      'weekend': [
      ],
      '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 defaultUseDate = {
  'useDate': [dayjs().add(1, 'year').startOf('y'), dayjs().add(1, 'year').endOf('y')]
}

const defaultDefinitionValue = {
  'useDateList': [defaultUseDate],
  'unitId': '0',
  'currency': 'RMB',
  'weekend': [],
  'priceList': [defaultPriceValue]
}

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

  const { onChange } = props

  const { t } = useTranslation()

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

  const datePresets = useDatePresets()

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

  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)
    console.info('newList', newList)
    triggerChange(newList)
    setQuotationModalOpen(false)
  }

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

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

  const quotationColumns = [
    // { title: 'id', dataIndex: 'id', width: 40, className: 'italic text-gray-400' }, // test: 0
    // { title: 'WPI_SN', dataIndex: 'WPI_SN', width: 40, className: 'italic text-gray-400' }, // test: 0
    { title: t('products:adultPrice'), dataIndex: 'adult_cost', width: '5rem' },
    { title: t('products:childrenPrice'), dataIndex: 'child_cost', width: '5rem' },
    { title: t('products:currency'), dataIndex: 'currency', width: '4rem' },
    {
      title: (<>{t('products:unit_name')} <Tooltip placement='top' overlayInnerStyle={{width: '24rem'}} title={t('products:FormTooltip.PriceUnit')}><QuestionCircleOutlined className='text-gray-500' /></Tooltip> </>),
      dataIndex: 'unit_id',
      width: '6rem',
      render: (text) => t(`products:PriceUnit.${text}`), // (text === '0' ? '每人' : text === '1' ? '每团' : text),
    },
    {
      title: t('products:group_size'),
      dataIndex: 'group_size',
      width: '6rem',
      render: (_, record) => formatGroupSize(record.group_size_min,record.group_size_max),
    },

    {
      title: (<>{t('products:use_dates')} <Tooltip placement='top' overlayInnerStyle={{width: '24rem'}} title={t('products:FormTooltip.UseDates')}><QuestionCircleOutlined className='text-gray-500' /></Tooltip> </>),
      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: '10rem',
      render: (_, quotation) => {
        // const _rowEditable = [-1,3].includes(quotation.audit_state_id);
        const _rowEditable = true; // test: 0
        return (
          <Space>
            <Button type='link' disabled={!_rowEditable} onClick={() => onQuotationSeleted(quotation)}>{t('Edit')}</Button>
            <Button type='link' danger disabled={!_rowEditable} onClick={() => onDeleteQuotation(quotation)}>{t('Delete')}</Button>
          </Space>
        )
      },
    },
  ]

  return (
    <>
      <h2>{t('products:EditComponents.Quotation')}</h2>
      <Table size='small'
        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']}>
                      <Radio.Group>
                        <Radio value='RMB'>RMB</Radio>
                        <Radio value='USD'>USD</Radio>
                        <Radio value='THB'>THB</Radio>
                        <Radio value='JPY'>JPY</Radio>
                      </Radio.Group>
                    </Form.Item>
                    <Form.Item label='类型' name={[field.name, 'unitId']}>
                      <Radio.Group>
                        <Radio value='0'>每人</Radio>
                        <Radio value='1'>每团</Radio>
                      </Radio.Group>
                    </Form.Item>
                    <Form.Item label='周末' name={[field.name, 'weekend']}>
                      <Checkbox.Group
                        options={['5', '6', '7']}
                      />
                    </Form.Item>
                    <Form.Item label='有效期'>
                      <Form.List name={[field.name, 'useDateList']}>
                        {(useDateFieldList, useDateOptList) => (
                          <Flex gap='middle' vertical>
                            {useDateFieldList.map((useDateField, index) => (
                              <Space key={useDateField.key}>
                                <Form.Item noStyle name={[useDateField.name, 'useDate']}>
                                  <RangePicker style={{ width: '100%' }} allowClear={true} inputReadOnly={true} presets={datePresets} placeholder={['From', 'Thru']} />
                                </Form.Item>
                                {index == 0 ? <StarTwoTone twoToneColor='#eb2f96' /> : <CloseOutlined onClick={() => useDateOptList.remove(useDateField.name)} />}
                              </Space>
                            ))}
                            <Button type='dashed' icon={<PlusOutlined />} onClick={() => useDateOptList.add(defaultUseDate)} block>
                              新增有效期
                            </Button>
                          </Flex>
                        )}
                      </Form.List>
                    </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']}>
                                  <PriceCompactInput />
                                </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 value='THB'>THB</Radio>
            <Radio value='JPY'>JPY</Radio>
          </Radio.Group>
        </Form.Item>
        <Form.Item
          label={t('products:unit_name')}
          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>
          <Checkbox onChange={e => {
            if (e.target.checked) {
              quotationForm.setFieldValue('group_size_min', 0)
              quotationForm.setFieldValue('group_size_max', 1000)
              setGroupSizeUnlimit(true)

            } else {
              quotationForm.setFieldValue('group_size_min', 1)
              if (!groupMaxUnlimit) quotationForm.setFieldValue('group_size_max', 999)
              setGroupSizeUnlimit(false)
            }
          }}>不分人等(0~1000)</Checkbox>
        <Form.Item
          label={t('products:group_size')}
          name='group_size_min'
          rules={[
            {
              required: true,
              message: t('products:Validation.group_size_min'),
            },
          ]}
        >
          <InputNumber disabled={groupSizeUnlimit} min='0' max='999' style={{ width: '100%' }} />
        </Form.Item>

<Checkbox disabled={groupSizeUnlimit} onChange={e => {
            if (e.target.checked) {
              quotationForm.setFieldValue('group_size_max', 1000)
              setGroupMaxUnlimit(true)
            } else {
              quotationForm.setFieldValue('group_size_max', 999)
              setGroupMaxUnlimit(false)
            }
          }}>不限(1000)</Checkbox>
        <Form.Item
          label={t('products:group_size')}
          name='group_size_max'
          rules={[
            {
              required: true,
              message: t('products:Validation.group_size_max'),
            },
          ]}
        >
          <InputNumber disabled={groupSizeUnlimit || groupMaxUnlimit} min='0' max='999' style={{ width: '100%' }} />
        </Form.Item>
        <Form.Item
          label={t('products:use_dates')}
          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