import moment from 'moment'
import { Card, List, Badge, Space, Carousel } from 'antd'
import { useCallback, useEffect, useMemo, useState } from 'react'
import { getList } from '@/services/work'
import { random } from '@/utils/number'
import { useModel } from 'umi'

const colorList = [
  '#a8071a',
  '#ad2102',
  '#ad4e00',
  '#ad6800',
  '#ad8b00',
  '#5b8c00',
  '#237804',
  '#006d75',
  '#0050b3',
  '#10239e',
  '#391085',
  '#9e1068',
]

const Avatar = (props) => {
  const style = useMemo(() => {
    let r = random(0, colorList.length)
    if (r >= 12) r = 0;
    const color = colorList[r];

    return {
      background: color,
      color: '#fff',
      width: '48px',
      height: '48px',
      fontSize: '1.8em',
      lineHeight: '48px',
      textAlign: 'center',
    }
  }, [])

  return <div style={style}>{props.children}</div>
}


const Content = (props) => {
  const { item } = props;

  const abnormal = item.antigenIsNormal === 0 || item.nucleicIsNormal === 0
  const status = abnormal ? 'error' : 'success'

  return (
    <Space size="large">
      <span><Badge status={status} /> {abnormal ? '异常' : '正常'}</span>
      <span>{moment(item.createDate).format('HH:mm')}</span>
    </Space>
  )
}

const showNum = 8;

export default (props) => {
  const [loading, setLoading] = useState(false)
  const [list, setList] = useState([])
  const [disabled, setDisabled] = useState(false)
  const { initialState } = useModel('@@initialState');


  const queryList = useCallback(() => {
    setLoading(true)
    getList(
      {
        pageSize: 50, // 过多会很卡
        start: moment().format('YYYY-MM-DD'),
        end: moment().format('YYYY-MM-DD'),
        isAll: true,
        orgId: initialState.currentUser.orgId,
      }).then(res => {
        setLoading(false)
        setList((res.records || []).reverse())
      }).catch(er => {
        setLoading(false)
      })
  }, [])

  useEffect(() => {
    queryList()
  }, [])

  useEffect(() => {
    setDisabled(!list || list.length <= showNum)
  }, [list])

  return (
    <Card title="今日提交记录" loading={loading} bodyStyle={{ height: '600px' }}>
      <List style={{ height: '100%', overflow: 'hidden' }} itemLayout="horizontal">
        <Carousel
          autoplay={!disabled}
          infinite={!disabled}
          rtl
          slidesToShow={showNum}
          slidesToScroll={1}
          dot={false}
          dotPosition="right"
          style={{ height: '100%' }}
        >
          {
            list.map(item => (
              <div key={item.formId} style={{ display: 'flex' }}>
                <List.Item>
                  <List.Item.Meta
                    avatar={<Avatar>{item.orgName.substring(0, 1)}</Avatar>}
                    title={item.userName}
                    con
                    description={item.orgName}
                  />
                  <Content item={item} />
                </List.Item>
              </div>
            ))
          }
        </Carousel>
      </List>
    </Card>
  )
}
