import React from 'react';
import { View, Image, Text } from '@tarojs/components';
const iconNext = 'https://wanmi-b2b-x-site.oss-cn-shanghai.aliyuncs.com/pandora-ui/assets/templates/images/icon-next.png';
import Button from '../../components/button';
import { CompDefault, MetaProps } from '../data-channel';
import connect from '../connect';

export interface Props extends MetaProps {}

export interface State {}

const defaultValue: CompDefault<Props, State> = {
  props: {},
  state: {},
  meta: {},
};

/**
 * 列表项-锐利背景
 */
const ListItemSharp: React.FC<Props> = () => {
  const imgUrl =
    'https://wanmi-b2b.oss-cn-shanghai.aliyuncs.com/fda56711d8ff081499c038b812692600.png';
  return (
    <View className='wm-list-item-sharp'>
      <Text className='order-info-box'>
        <Text className='integral-box'>
          <Text className='black-words'>订单积分 </Text>
          <Text className='brand-words'>500</Text>
        </Text>
        <Text className='brand-words'>待发货</Text>
      </Text>
      <View className='info-box'>
        <View className='img-box'>
          <Image className='img-bar img' src={imgUrl} />
          <Image className='img-bar img' src={imgUrl} />
          <Image className='img-bar img' src={imgUrl} />
        </View>
        <View className='black-words more-imgs'>
          <Text className='num'>4</Text>
          <Image src={iconNext} className='img' />
        </View>
      </View>
      <View className='confirm-receipt'>
        <Button size='middle'>确认收货</Button>
      </View>
    </View>
  );
};
export default connect(ListItemSharp, defaultValue);