<template>
  <div class="dashboard-container">
    <!-- <div class="dashboard-text">name: {{ name }}</div> -->
    <div class="bg-w p-20 br-10"></div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import mxFilterList from '@/mixins/filterList';

export default {
  name: 'Dashboard',

  computed: {
    ...mapGetters(['name'])
  },
  data() {
    return {
      arr1: [],
      arr2: [],
      arr3: []
    };
  },
  watch: {
    arr1: {
      handler(arr) {
        this.arr2 = arr;
        if (this.arr3.length === 0 && arr.length !== 0) {
          this.arr3 = arr.map(x => Object.freeze(x)); // [Object.freeze(...arr)];
          // this.arr3 = arr.map(x => JSON.parse(JSON.stringify(x))); // [Object.freeze(...arr)];
        }
      },
      deep: true
    },
    arr3: {
      handler(arr) {
        console.log('--change---', arr);
      },
      deep: true
    }
  },

  created() {
    this.arr1 = [
      {
        sex: 'man',
        name: 'loki'
      },
      {
        sex: 'woman',
        name: 'lily'
      }
    ];
    setTimeout(() => {
      this.arr1.push({
        sex: 'man',
        name: 'john'
      });
    }, 500);
    setTimeout(() => {
      this.arr2.push({
        sex: 'woman',
        name: 'saly'
      });
      this.arr2[1].name = 'amy';
      console.log(this.arr1);
      console.log(this.arr2);
      console.log(this.arr3);
    }, 1000);
  },
  methods: {}
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
