import {TextGroup} from '@components';
import {Text, View} from '@tarojs/components';
import classNames from 'classnames';
import {Button} from '@nutui/nutui-react-taro';
import {usePreview} from './hooks';

export default function List() {
  const onClick = usePreview();

  return (
    <View className='h-screen overflow-auto bg-gray-200 py-4'>
      <View className='bg-white mx-4 rounded-lg px-3 py-4'>
        <View
          className={classNames(
            'flex items-center overflow-hidden border-0 border-b border-gray-200 border-solid',
            'pb-3',
          )}
        >
          <Text className='flex-1 text-over text-[#333] mr-2 text-sm'>
            TSDFSDFTSDF
          </Text>
          <View className='text-center w-16 h-7 leading-7 text-sm text-white bg-primary rounded-md'>
            已送达
          </View>
        </View>

        <View className='mt-4 overflow-hidden border-0 border-b border-dashed border-gray-200 pb-4'>
          <View className='flex overflow-hidden text-sm text-gray-500'>
            <Text className='flex-1 block text-over mr-2'>品号</Text>
            <Text className='w-[7em]'>数量</Text>
          </View>
          <View className='flex overflow-hidden text-sm mt-2'>
            <Text className='flex-1 block text-over mr-2'>12312</Text>
            <Text className='w-[7em]'>9871876</Text>
          </View>
          <View className='flex overflow-hidden text-sm mt-2'>
            <Text className='flex-1 block text-over mr-2'>12312</Text>
            <Text className='w-[7em]'>9871876</Text>
          </View>
          <View className='flex overflow-hidden text-sm mt-2'>
            <Text className='flex-1 block text-over mr-2'>12312</Text>
            <Text className='w-[7em]'>9871876</Text>
          </View>
        </View>

        <View className='mt-4'>
          <TextGroup title='卡车号' content='123' className='py-0' />
          <TextGroup title='客户编号' content='123555' className='py-0 mt-2' />
          <TextGroup
            title='发货时间'
            content='2020-12-22'
            className='py-0 mt-2'
          />
          <TextGroup
            title='送达时间'
            content='2020-12-23'
            className='py-0 mt-2'
          />
        </View>

        <View className='flex justify-end mt-2'>
          <Button
            className='!h-9 !text-sm'
            onClick={onClick([
              'https://picsum.photos/id/1/800/600',
              'https://picsum.photos/id/2/800/600',
              'https://picsum.photos/id/3/800/600',
              'https://picsum.photos/id/4/800/600',
              'https://picsum.photos/id/5/800/600',
            ])}
          >
            查看图片
          </Button>
        </View>
      </View>
    </View>
  );
}