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

<script>
    import service from 'trade-service';

    export default {
        name: 'CellStockOut',
        props: {
            rowDisabled: {
                type: Boolean
            },
            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: #ff0000;
            font-weight: bold;
        }
    }

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

</style>