<template>
    <view
        class="button-view"
        :style="'background-color:' + backgroundColor + ';height:' + height + ';color:' + color + ';border:' + border + ';font-size:' + fontSize + 'rpx'"
        @click="clickUpdate"
    >
        {{ title }}
    </view>
</template>

<script>
export default {
    data() {
        return {};
    },
    mixins: [],
    props: {
        title: '',
        color: '#EC681F',
        fontSize: {
            type: Number,
            default: 24
        },
        index: {
            type: Number,
            default: 0
        },
        height: '30rpx',
        padding: '6rpx 20rpx',
        backgroundColor: '#fff',
        border: '1rpx solid #00817B',
        affixType: '',
        onClick: () => {}
    },
    didMount() {},
    didUpdate() {},
    didUnmount() {},
    methods: {
        clickUpdate() {
            this.props.onClick({
                affixType: this.props.affixType,
                index: this.props.index
            });
        }
    },
    created: function () {}
};
</script>
<style>
.button-view {
    padding: 4rpx 20rpx;
    border-radius: 40rpx;
    background-color: rgba(255, 255, 255, 100);
    color: rgba(236, 104, 31, 100);
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}
</style>
