import { moneyFormat } from '@/helpers/utils'
import { Cell, Image } from 'vant'
import { defineComponent } from 'vue'
import styles from './index.module.less'

export default defineComponent({
  name: 'GoodItem',
  props: {
    item: {
      type: Object,
      default: {}
    }
  },
  setup({ item }) {
    return () => (
      <Cell
        center
        v-slots={{
          icon: () => (
            <Image class={styles.goodsImg} src={item.productPic} fit="cover" />
          ),
          default: () => (
            <div class={styles.goodsContainer}>
              <div class={[styles.goodsTitle, 'van-ellipsis']}>
                {item.productName}
              </div>
              <div class={styles.model}>{item.productAttr}</div>
              <div class={styles.goodsPrice}>
                <span class={styles.price}>
                  <i>¥</i>
                  {moneyFormat(item.productPrice)}
                </span>
                <span class={styles.num}>x{item.productQuantity}</span>
              </div>
            </div>
          )
        }}
      ></Cell>
    )
  }
})