import React, { useState } from 'react';
import { View, Image, Text } from '@tarojs/components';
import Price from '.././../components/price';
import Label from '../../components/label';
import Stepper from '../../components/stepper';
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 ListItemMiddle: React.FC<Props> = () => {
  const [param1, setParam1] = useState(28);
  const imgUrl =
    'https://wanmi-b2b.oss-cn-shanghai.aliyuncs.com/fda56711d8ff081499c038b812692600.png';
  return (
    <View className='wm-list-item wm-list-item-middle'>
      <Image className='img-radius img' src={imgUrl} />
      <View className='info-box'>
        <View className='info-head'>
          <View className='title-box'>
            <Text className='title words-omit2'>
              大戏哈哈hj还包括就会生病了哈Klan我上课就是节能环保四大皆空吗不是吗你看见了
            </Text>
          </View>
          <View className='type-box desc'>
            <Text className='type-color'>灰色</Text>
            <Text className='size'>66CM</Text>
            <Text className='weight'>100g</Text>
          </View>
          <View className='label-box'>
            <Label name='女神节' type='red' />
            <Label name='满减' type='default' />
            <Label name='满减' type='default' />
          </View>
        </View>
        <View className='info-footer'>
          <View className='comments-box desc'>
            <Text className='comments'>17销量</Text>
            <Text className='comments-num'>8评论</Text>
            <Text className='comments'>100%好评</Text>
          </View>
          <View className='num-box'>
            <Price price={990.98} />
            <Stepper count={param1} getNum={(num) => setParam1(num)} />
          </View>
        </View>
      </View>
    </View>
  );
};
export default connect(ListItemMiddle, defaultValue);