<template>
    <view class="cardHeader">
        <view class="icon">
            <u-icon :name="iconName" size="40rpx" width="40rpx"></u-icon>
        </view>
        <view class="title">{{ title }}</view>
        <view class="button" :style="{
            textAlign: hasBtn ? 'center' : 'right',
            backgroundColor: hasBtn ? btnColor : '#211F32',
            paddingRight: hasBtn ? 0 : '12rpx',
            color: fontColor,
        }">{{ rightName }}</view>
    </view>
</template>

<script>
export default {
    name: 'cardHeader',
    props: {
        iconName: {
            type: String,
            default() {
                return '@/static/maskets/bye.png'
            }
        },
        title: {
            type: String | Number,
            default() {
                return ''
            }
        },
        rightName: {
            type: String | Number,
            default() {
                return ''
            }
        },
        fontColor: {
            type: String | Boolean,
            default() {
                return '#15141F'
            }
        },
        hasBtn: {
            type: Boolean,
            default() {
                return false
            }
        },
        btnColor: {
            type: String | Number,
            default() {
                return '#211F32'
            }
        },
    },
    data() {
        return {
            leftColor: '#A1A0A8',
            rightColor: '#fff',
        }
    }

}
</script>

<style lang="scss" scoped>
.cardHeader {
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    height: 104rpx;
    border-bottom: 2rpx solid #323045;
    padding: 20rpx;

    .icon {
        vertical-align: top;
        overflow: hidden;
        display: inline-block;
        box-sizing: border-box;
        width: 64rpx;
        height: 64rpx;
        background: #323045;
        border-radius: 20rpx;
        padding: 12rpx;
    }

    .title {
        display: inline-block;
        width: 180rpx;
        height: 100%;
        line-height: 64rpx;
        font-size: 28rpx;
        margin-left: 16rpx;
    }

    .button {
        position: absolute;
        right: 20rpx;
        display: inline-block;
        width: 202rpx;
        height: 64rpx;
        border-radius: 16rpx;
        line-height: 64rpx;
        background-color: $mainColor;
        font-size: 28rpx;
        text-align: center;
        color: #15141F;
    }
}
</style>