<template>
    <view class="global-card" :class="class" :style="style">
        <view class="global-card-title">
            <view class="left">
                <view class="txt">{{ title }}</view>
            </view>
            <view class="right" @tap="handleTitleClick">
                <view class="txt">{{ titleSuffix }}</view>
                <up-icon name="arrow-right" size="16"></up-icon>
            </view>
        </view>
        <view class="global-card-content">
            <slot></slot>
        </view>
    </view>
</template>

<script setup>
const es = defineEmits(['handleTitleClick'])
const ps = defineProps({
    class: {
        type: String,
        default: ''
    },
    style: {
        type: Object,
        default: () => {
            return {}
        }
    },
    title: {
        type: String,
        default: ''
    },
    titleSuffix: {
        type: String,
        default: ''
    }
})
const handleTitleClick = () => {
    es('handleTitleClick')
}
</script>
<style lang="scss" scoped>
.global-card {
    background: #fff;
    border-radius: 12rpx;
    padding: 24rpx;
    margin-top: 16rpx;
    &-title {
        padding-bottom: 16rpx;
        border-bottom: 2rpx solid #f4f4f4;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left {
            font-size: 34rpx;
            .txt {
                color: $mocp-text-5;
            }
        }
        .right {
            display: flex;
            align-items: center;
            .txt {
                color: $mocp-text-4;
                margin-right: 16rpx;
            }
        }
    }
    &-content {
        padding-top: 16rpx;
        line-height: 40rpx;
        color: $mocp-text-4;
    }
}
</style>
