<template>
    <div class='hanzo-settlement-bar'>
        <div class='left'>
            <div :class="{'checked-radio': true, checked, disabled}" @click="onChecked">
                <h-icon v-if="checked" type="success" size="20rpx" color="#fff" />
            </div>
            全选
        </div>
        <div class='sumMoney'>
            <span class="accounts">合计:</span>
            <span>￥{{amount}}</span>
        </div>
        <div class='right'>
            <div v-if="mode== 'normal'" :class="[ 'balance', { 'not-select': count === 0 } ]" @click="onSubmit">去结算({{count}})</div>
            <div v-else class="delete" @click="onDel">删除({{count}})</div>
        </div>
    </div>
</template>
<script>
import hIcon from '../icon/index.vue';
export default {
    name: 'h-settlement-bar',
    components: {
        hIcon
    },
    props: {
        count: Number,
        amount: Number,
        mode: {
            type: String,
            default: 'normal'
        },
        checked: {
            type: Boolean,
            default: false
        },
        disabled: {
            type: Boolean,
            default: false
        }
    },
    methods: {
        onChecked() {
            if (!this.disabled) {
                this.$emit("checked", { item: this.$props });
            }
        },
        onSubmit() {
            this.$emit("submit");
        },
        onDel(e) {
            this.$emit("del");
        }
    }
}
</script>
<style lang="less" scoped>
@import './index.less';
</style>