
<template>
  <div class="ux-card-image-item" @longpress="_longPress" @click="_click">
      <image class="item-img" :src="image"/>
      <text class="item-content">{{title}}</text>
      <div class="badge" v-if="badge!=null">
        <text class="badge-text">{{badge}}</text>
      </div>
  </div>
</template>
<script>
  export default {
    components: { },
    props: {
      image: {
        type: String,
        default:'bmlocal://assets/monitor.png'
      },
      title: {
        type: String,
        default: ''
      },
      badge: {
        type: Number,
        default: null
      }
    },
    methods:{
      _click (e) {
        this.$emit('click', e)
        this.$emit('pcClick', e)
      },
      _longPress(e){
        this.$emit('longpress', e)
      }
    }
  };
</script>
<style scoped>
  .badge {
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 15px;
    background-color: red;
    border-width: 0px;
    position: absolute;
    top: 8px;
    left: 105px;
  }
  .badge-text {
    font-size: 24px;
    color: #ffffff;
  }
  .ux-card-image-item {
    margin-top: 5px;
    margin-left: 5px;
    margin-right: 20px;
    width: 150px;
    height: 170px;
    background-color:#ffffff;

    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .item-img {
    margin-top: 15px;
    width: 96px;
    height: 96px;
    border-radius: 10px;
  }
  .item-content {
    margin-top: 20px;
    width: 110px;
    height: 27px;
    text-align: center;
    align-content: center;
    font-size: 26px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #11171d;
  }
</style>