import { Swipe, SwipeItem, Image } from 'vant'
import { defineComponent } from 'vue'
import styles from './index.module.less'

export default defineComponent({
  name: 'menu-list',
  props: {
    productList: {
      type: Array,
      default: []
    },
    onOpenWebView: {
      type: Function,
      default: (a: any) => {}
    }
  },
  render() {
    return (
      <Swipe
        class={[
          styles.swipeType,
          this.productList.length > 1 && styles.swipeTypeShow
        ]}
        indicator-color="var(--van-primary)"
        loop={false}
        showIndicators={this.productList.length > 1}
      >
        {this.productList.map((product: any) => (
          <SwipeItem class={styles.typeSection}>
            {product.map((item: any) => (
              <div
                class={styles.typeItem}
                onClick={() => {
                  this.onOpenWebView(
                    '/goodsList?' + 'id=' + item.id + '&tag=' + encodeURIComponent(item.name)
                  )
                }}
              >
                <Image
                  class={styles.swipeTypeImg}
                  src={item.icon}
                  fit="cover"
                />
                <p class={styles.typeName}>{item.name}</p>
              </div>
            ))}
          </SwipeItem>
        ))}
      </Swipe>
    )
  }
})
