<template>
  <mu-paper class="normal-card no-body-gutter summay_card">
    <grid :rows="digitalBoardListSetting.length" hasline >
      <grid-item v-for="(item,index) in digitalBoardListSetting" :key="index" v-on:item-click="handleGridItem(item,index)">
        <span slot="num" :style="{color:item.dataColor}">
          <i class="weui-loading" v-if="item.state == 0"></i>
          <span class="m-sys-refresh" v-if="item.state == 2"></span>
          <span class="summay_card_value" v-if="item.state !== 2 && item.state !==0" v-text="item.state == 3 ? item.value : '-'"></span>
          <span class="summay_card_unit" v-if="item.state !== 2 && item.state !==0" v-text="item.state == 3 ? item.unit : ''"></span>
          </span>
          <span  slot="label" v-text="item.state == 2 ? loadErr : item.names"></span>
      </grid-item>
    </grid>
  </mu-paper>
</template>
<script>

import paper from '../paper';
import { Grid,GridItem }from '../grid';
export default {
  name: 'mu-digitalBoardList',
  props:{
    digitalBoardListSetting:{
      type:Array,
      default: []
    },
    loadErr:{
      type: String,
      default: '加载失败'
    }
  },
  components:{
    'mu-paper':paper,
    'grid':Grid,
    'grid-item':GridItem,
  },
  watch:{
    digitalBoardListSetting(){
      if(this.digitalBoardListSetting.length > 0){
        this.digitalBoardListSetting.forEach((item,index)=>{
          if(item.state == 0 ){
            this.$emit('boardAjaxData',{'item':item,'index':index})
          }
        });
      }
    }
  },
  mounted(){
    var self = this;
    if(this.digitalBoardListSetting.length > 0){
      this.digitalBoardListSetting.forEach((item,index)=>{
        this.$emit('boardAjaxData',{'item':item,'index':index})
      });
    }
  },
  methods: {
    handleGridItem:function(item,index){
      this.$emit("openBoardJumpPage",{'item':item,'index':index});
    }
  },
}
</script>

<style lang="less" scoped>
.summay_card_unit{
  font-size: 12px;
  height: 12px;
}
</style>
