import React from 'react'
import { Button, Input, Modal, Select, Table } from 'antd'

export type RegionEditItem = {
  id: number
  goodNum: string
  goodName: string
  region: string
  address: string
}

type Props = {
  open: boolean
  onCancel: () => void
  dataSource: RegionEditItem[]
  regionOptions: { label: string; value: string }[]
  onUpdateItem: (index: number, field: 'region' | 'address', value: string) => void
  onSubmit: () => void
}

function RegionSettingModal({
  open,
  onCancel,
  dataSource,
  regionOptions,
  onUpdateItem,
  onSubmit
}: Props) {
  return (
    <Modal title='展位设置' open={open} onCancel={onCancel} footer={null} width={800}>
      <Table
        dataSource={dataSource}
        rowKey='id'
        pagination={false}
        scroll={{ y: 600 }}
        columns={[
          { title: '藏品登记号', dataIndex: 'goodNum', width: 120 },
          { title: '藏品名称', dataIndex: 'goodName', width: 150 },
          {
            title: '展区',
            dataIndex: 'region',
            width: 150,
            render: (_: any, record: RegionEditItem, index: number) => (
              <Select
                placeholder='请选择展区'
                allowClear
                value={record.region || undefined}
                onChange={v => onUpdateItem(index, 'region', v || '')}
                options={regionOptions}
                style={{ width: '100%' }}
              />
            )
          },
          {
            title: '具体位置',
            dataIndex: 'address',
            render: (_: any, record: RegionEditItem, index: number) => (
              <Input
                placeholder='请填写具体位置'
                maxLength={100}
                showCount
                value={record.address}
                onChange={e => onUpdateItem(index, 'address', e.target.value)}
              />
            )
          }
        ]}
      />
      <div style={{ marginTop: 16, textAlign: 'right' }}>
        <Button onClick={onCancel}>取消</Button>
        <Button type='primary' onClick={onSubmit} style={{ marginLeft: 8 }}>
          提交
        </Button>
      </div>
    </Modal>
  )
}

export default React.memo(RegionSettingModal)
