class oldEquip {
    constructor() {
        this.$equipWrap = $('.old-equip-all')
        this.$container = this.$equipWrap.find('.equip-list-container')
        this.$navItem = this.$equipWrap.find('.type__item')
        this.$equipItem = this.$equipWrap.find('.equip-list li')
        this.show = false //是否显示所有装备
        this.init()
    }

    init() {
        this.setWrapHeight().setNavEvent().setShowMore()
        this.$navItem.eq(0).click()
    }
    setWrapHeight() {
        var unitHeight = this.$equipItem.outerHeight(true)
        this.$container.css('height', `${unitHeight * 3}px`)

        return this
    }
    setNavEvent() {
        var self = this
        this.$navItem.click(function () {
            var $this = $(this),
                type = $this.attr('data-type')

            $this.toggleClass('active')
            var selector = self.getSelectedType()

            if (selector == '') {
                self.$equipItem.show()
            } else {
                self.$equipItem.hide().filter(selector).show()
            }
            self.show && self.setEquipmentsHeight()
        })

        return this
    }
    getSelectedType() {
        var arr = [],
            selector
        this.$navItem.filter('.active').each(function (index, ele) {
            arr.push($(ele).attr('data-type'))
        })

        if (arr.length) {
            selector = `.${arr.join('.')}`
        } else {
            selector = ''
        }
        return selector
    }

    setEquipmentsHeight() {
        var $list = this.$container.children('.equip-list'),
            height = $list.outerHeight(true)

        this.$container.css('height', `${height}px`)
    }

    setShowMore() {
        var $moreLink = this.$equipWrap.find('.common-look-more')
        var self = this
        $moreLink.click(function () {
            self.setEquipmentsHeight()
            $moreLink.hide()
            self.show = true
        })

        return this
    }
}

$(() => {
    new oldEquip
})