import React, { useEffect, useState } from 'react'
import { Select, Tag } from 'antd'
import { fetchList, apis } from '@/utils/request'

const getData = fetchList(apis.shop.badge.list)

export default React.forwardRef((props, ref) => {
  const [list, setList] = useState([])
  const value = (props.value || '').split(',').filter(Boolean)
  const handleChange = v => {
    props.onChange(v.join(','))
  }

  useEffect(() => {
    getData({ pageNum: 1, pageSize: 999 }).then(res =>setList(res[0]))
  }, [])

  return (
    <Select
      ref={ref}
      style={{ width: '100%' }}
      {...props}
      value={value}
      onChange={handleChange}
      optionLabelProp="label"
    >
      {
        list.map(item => (
          <Select.Option key={item.shopBadgeCode} value={item.shopBadgeCode} label={<Tag color={item.color}>{item.shopBadgeCode}</Tag>}>
            <span><Tag color={item.color}>{item.shopBadgeCode}</Tag></span>
            <span style={{ position: 'absolute', top: '50%',  transform: 'translateY(-50%)', right: '48px', color: '#aaa' }}><small>{item.remark}</small></span>
          </Select.Option>
        ))
      }
    </Select>
  )
})
