<template>
  <!-- <div>数据统计组件</div> -->
  <div class="flex-1 flex-column">
    <div
      :key="item.id"
      class="flex-1 flex-nowrap mt-2 align-center justify-space-between box"
      v-for="item in lists"
    >
      <div class="title">{{ item.name }}</div>
      <div class="number flex-1">
        <div
          :key="a"
          :style="item.number[a-1] === '.' ? 'padding-right:5%' : '' "
          class="num_item"
          v-for="a in 7"
        >
          <span>{{ item.number[a-1] ? item.number[a-1] : 0 }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions, mapMutations } from 'vuex';

export default {
  name: 'LoadCells',
  data() {
    return {
      lists: [
        {
          id: 1,
          name: '称重传感器1',
          number: ['0', '0', '.', '0', '0', '0', '0'],
        },
        {
          id: 2,
          name: '称重传感器2',
          number: ['0', '0', '.', '0', '0', '0', '0'],
        },
        {
          id: 3,
          name: '称重传感器3',
          number: ['0', '0', '.', '0'],
        },
        {
          id: 4,
          name: '称重传感器4',
          number: ['0', '0', '.', '0', '0', '0', '0'],
        },
      ],
    };
  },

  computed: mapState('messages', ['weighSensor1', 'weighSensor2', 'weighSensor3', 'weighSensor4']),

  watch: {
    weighSensor1: {
      handler(value) {
        this.lists[0].number = value.split('');
      },
      deep: true,
    },
    weighSensor2(value) {
      if (value) {
        this.lists[1].number = value.split('');
      }
    },
    weighSensor3(value) {
      if (value) {
        this.lists[2].number = value.split('');
      }
    },
    weighSensor4(value) {
      if (value) {
        this.lists[3].number = value.split('');
      }
    },
  },

  methods: {},
};
</script>

<style lang="stylus" scoped >
@import './LoadCells.styl';
</style>
