Component({
  externalClasses: ['i-class'],
  properties: {
    list: {
      type: String,
      value: ''
    },
  },
  relations: {
    '../grid-item/index': {
      type: 'child',
      linked() {
        this.setGridItemWidth();
      },
      linkChanged() {
        this.setGridItemWidth();
      },
      unlinked() {
        this.setGridItemWidth();
      }
    }
  },

  methods: {
    setGridItemWidth() {
      const nodes = this.getRelationNodes('../grid-item/index');
      const len = nodes.length;
      if(this.data.list){
        nodes.forEach(item => {
          item.setData({
            'width': 100 / Number(this.data.list) + '%'
          });
        });
        return
      };
      if (len < 3) {
        nodes.forEach(item => {
          item.setData({
            'width': '33.33%'
          });
        });
      } else {
        const width = 100 / nodes.length;
        nodes.forEach(item => {
          item.setData({
            'width': width + '%'
          });
        });
      }
      const width = 100 / nodes.length;
      nodes.forEach(item => {
        item.setData({
          'width': width + '%'
        });
      });
    }
  },

  ready() {
    this.setGridItemWidth();
  }
});