const DATA = {
    list: [
        {
            name: '第1项',
            checked: false,
            num: 1,
            price: 100,
        },
        {
            name: '第2项',
            checked: false,
            num: 2,
            price: 650,
        },
        {
            name: '第3项',
            checked: false,
            num: 5,
            price: 300,
        }
    ]
}


$(function () {
    var $list = $('#js-list')
    var $price = $('.js-select-price')
    var $num = $('.js-select-num')
    var list = DATA.list

    function toPrice(fen) {
        return (fen / 100).toFixed(2)
    }

    function selectedItem() {
        return list.filter(item => item.checked)
    }

    function selectedCount() {
        return selectedItem().reduce((pre, cur) => pre + cur.num, 0)
    }

    function selectedPrice() {
        return selectedItem().reduce((pre, cur) => pre + cur.num * cur.price, 0)
    }

    function updateUI() {
        var count = selectedCount()
        $price.text(toPrice(selectedPrice()))
        $num.text(selectedCount())
        $('.alert')[count === 0 ? 'show' : 'hide']()
    }

    $list.append(list.map((item, i) => `
<li class="list" data-index="${i}" ${ item.checked ? 'class="selected"' : ''}>
	<input type="checkbox" value="${ item.checked }">
	${ item.name }
	${ toPrice(item.price) }元 x <input type="text" value="${ item.num }">
</li>
`))

    updateUI()

    $list.on('change', 'input[type=checkbox]', function () {
        var $this = $(this)
        var $item = $this.closest('.list')
        var checked = $this.prop('checked')
        list[$item.data('index')].checked = checked
        if (checked) {
            $item.addClass('selected')
        } else {
            $item.removeClass('selected')
        }

        updateUI()
    })

    $list.on('input', 'input[type=text]', function () {
        var $this = $(this)
        var $item = $this.closest('.list')
        list[$item.data('index')].num = +$this.val()
        updateUI()
    })

})