<template>
  <view class="view">
    <view v-for="item in list" :key="item.id">
      <productCard 
        :data="item"
        cardStyle="width: 100%; height: 210px;"
        imgStyle="width: 100%; height: 110px;"
      ></productCard>
    </view>
  </view>
</template>

<script>
  import productCard from '@/components/product/productCard.vue'

  export default {
		components: {
      productCard,
    },
    data() {
      return {
        list: [],
      }
    },
    mounted() {

			this.list = [
        {
          id: '001',
					url: '/pages_order/static/product/detect-3.png', 
          name: '腹部超声',
          sales: 24770,
          price: 688.00,
          originalPrice: 1664,
        },
        {
          id: '002',
					url: '/pages_order/static/product/detect-4.png', 
          name: '血常规',
          sales: 24770,
          price: 688.00,
          originalPrice: 1664,
        },
        {
          id: '003',
					url: '/pages_order/static/product/detect-3.png', 
          name: '腹部超声',
          sales: 24770,
          price: 688.00,
          originalPrice: 1664,
        },
			]
    },
    methods: {
      onLevel1TabChange(e) {
        console.log('level1', e.index)
        this.level1 = e.index
        this.level2 = this.tabs[this.level1].children?.length ? 0 : null
        // todo
      },
      onLevel2TabChange(e) {
        console.log('level2', e.index)
        this.level2 = e.index
        // todo
      },
    },
  }
</script>

<style scoped lang="scss">
.view {
  padding: 0 32rpx 24rpx 32rpx;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32rpx;
}
</style>