Component<
  {
    heightStyle: string
  },
  {
    scrollMaxHeight: ComponentPropertyNumberType
    active: ComponentPropertyNumberType
    borderColor: ComponentPropertyStringType
    borderWidth: ComponentPropertyNumberType
  },
  {
    updateChildren(activeIdx: number): void
  },
  {
    children: CustomComponent[]
    currentActive: number
  }
>({
  relations: {
    './sidebar-item/index': {
      type: 'child',
      linked(target: CustomComponent) {
        this.children.push(target)
        this.updateChildren(this.properties.active)
      },
      unlinked(target: CustomComponent) {
        this.children = this.children.filter((item) => item !== target)
      },
    },
  },

  properties: {
    scrollMaxHeight: {
      type: Number,
      observer(val: number) {
        this.setData({
          heightStyle: val > 0 ? `height: ${val}px;` : '',
        })
      },
    },
    active: {
      type: Number,
      value: 0,
      observer(val: number) {
        this.updateChildren(val)
      },
    },
    borderColor: {
      type: String,
      value: '#e73535',
    },
    borderWidth: {
      type: Number,
      value: 3,
    },
  },

  lifetimes: {
    created() {
      this.children = []
    },
  },

  data: {
    heightStyle: '',
  },

  methods: {
    updateChildren(activeIdx) {
      const { children } = this
      if (children && children.length > 0) {
        children.forEach((child, idx) => {
          child.setActive(idx === activeIdx)
        })
      }
      return Promise.resolve()
    },
  },
})