<template>
    <div class="cell-stock-out">
        <p class="row">
            缺货<span class="num">
                <Input v-model="uploadNum" placeholder="数量"></Input>
            </span>
        </p>
        <p class="row" :class="{highlight: lackNum > 0}">缺货数：{{lackNum}}</p>
        <p class="row">
            <Button type="error" @click="showModal">上传确认缺货</Button>
        </p>
    </div>
</template>

<script>
export default {
    name: 'CellStockOut',
    props: {
        rowIndex: {
            type: [String, Number]
        },
        lackNum: {
            type: [String, Number]
        }
    },
    data() {
        return {
            uploadNum: ''
        };
    },
    watch: {
        uploadNum(value) {
            this.$emit('lack-num-change', {
                value,
                index: this.rowIndex
            });
        }
    },
    methods: {
        showModal() {
            this.$emit('click-upload', this.rowIndex);
        }
    }
};
</script>

<style lang="scss" scoped>
    .cell-stock-out {
        text-align: left;

        .row {
            margin: 10px 0;

            &.highlight {
                color: #f00;
                font-weight: bold;
            }
        }

        .num {
            display: inline-block;
            width: 50px;
            padding-left: 5px;
        }
    }
</style>