<template lang="pug">
  view.product-item(v-if="data" @click="onClick(data)" @longpress="onLongpress(data)")
    text.name {{data.name}}
    //text.category(v-if="item.model") {{item.model}}
    image.product(:src="data.image" mode="aspectFill")
    image.link(:src="data.stateIcon" v-if="data.stateIcon")
</template>

<script lang="ts">
import {Vue, Component, Watch, Prop} from 'vue-property-decorator';

@Component
export default class ProductItem extends Vue {

  @Prop() public index!: number;
  @Prop() public data!: {name: string, image: string, stateIcon: string};

  onClick(data: any) {
    this.$emit("click", { data, index: this.index});
  }

  onLongpress(data: any) {
    this.$emit("longpress", { data, index: this.index});
  }
}
</script>

<style lang="scss" scoped>
@import '../../static/styles/h5-unit';
@import '../../static/styles/base';

.product-item {
  width: auto;
  height: $px108;
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: #CEC6BF;
  opacity: 1;
  border-radius: $px18;
  margin-top: $px5;
  margin-bottom: $px5;
  margin-left: $px5;
  margin-right: $px5;
  min-width: 42vw;
  max-width: calc(48vw - 27px);
  float: left;

  .name {
    margin-top: $px7;
    margin-left: $px11;
    font-size: $px15; /*30rpx*/
  }

  .category {
    margin-top: $px4;
    margin-left: $px11;
    font-size: $px13;
    color: #696969;
  }

  .product {
    max-width: $px172;
    max-height: $px73;
    margin-left: $px6;
    margin-bottom: $px2;
    width: $px73;
  }

  .link {
    width: $px25;
    height: $px25;
    position: absolute;
    bottom: $px10;
    right: $px10;
  }
}
</style>
