<template>
    <div class="cell-price">
        <div v-if="canChange">
            <p class="retail-price">吊牌价：{{retailPrice}}</p>
            <p v-if="!showChange">
                <i-button type="info" size="small" @click="changeClick">改</i-button>
                销售价：{{salesPrice}}
            </p>
            <p v-else>
                <i-button type="warning" size="small" @click="saveClick">存</i-button>
                销售价：<span class="price-input">
                <Input v-model.number="newPrice"></Input></span>
            </p>
        </div>
        <div v-else>
            <p>吊牌价：{{retailPrice}}</p>
            <p>销售价：{{salesPrice}}</p>
        </div>
    </div>
</template>

<script>

    export default {
        name: 'CellPrice',
        props: {
            currentRow: {
                type: Object
            },
            showChange: {
                type: Boolean,
                default: false
            },
            canChange: {
                type: Boolean,
                default: false
            },
            retailPrice: {
                type: [String, Number]
            },

            salesPrice: {
                type: [String, Number]
            }
        },
        data() {
            return {
                newPrice: this.salesPrice
            };
        },
        methods: {
            changeClick() {
                this.$emit('click-change');
            },

            saveClick() {
                const row = this.currentRow;
                const price = this.newPrice;

                this.$emit('click-save', row, price);
            }

        }
    };
</script>

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

        .retail-price {
            margin-left: 30px;
        }

        .price-input {
            display: inline-block;
            width: 60px;
        }
    }
</style>