<template>
  <div class="items">
    <el-badge :value="item.qty" class="item-pro" type="primary" :max="99" v-for="(item,index) of value" :key="index">
      <div class="image-slot" >
        {{ item.title }}
        <!-- <i class="el-icon-goods"></i> -->
      </div>
    </el-badge>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import VueViews from '@/benyun/compVue/VueViews'
@Component
export default class Items extends VueViews {
  value:Array<any>=[]

  @Watch('propValue')
  propValueChange(v:any){
    this.setValue(v);
  }
  
  mounted(){
    if(this.propValue){
      this.setValue(this.propValue)
    }
  }
  setValue(data:any){
    if(data){
      try{
        this.value = JSON.parse(data);
      }catch(e){}
    }else{
      this.value=[]
    }
  }
}
</script>

<style lang="scss" scoped>
.items{
  width: 100%;
  // display: flex;
  // align-items: center;
  // justify-content: center;
  flex-direction: column;
  .image-slot{
    .el-icon-goods{
      font-size: 28px;
      color: #999;
    }
  }
  .item-pro{
    padding-left: 12px;
  }
  .item-pro:first-child{
    padding: 0;
  }
}
</style>