<template>
    <view class="global-card" :class="class" :style="style">
        <view class="global-card-title" :style="getTitleStyle" v-if="showTitle">
            <view class="left u-line-1">
                <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" :style="getContentStyle" v-if="showContent">
            <slot></slot>
        </view>
    </view>
</template>

<script setup>
import { computed } from 'vue'

const es = defineEmits(['handleTitleClick'])
const ps = defineProps({
    class: {
        type: String,
        default: ''
    },
    style: {
        type: Object,
        default: () => {
            return {}
        }
    },
    showTitle: {
        type: Boolean,
        default: true
    },
    title: {
        type: String,
        default: ''
    },
    titleStyle: {
        type: Object,
        default: () => {
            return {}
        }
    },
    titleSuffix: {
        type: String,
        default: ''
    },
    rightWidth: {
        type: [Number, String],
        default: 280
    },
    //是否显示内容
    showContent: {
        type: Boolean,
        default: true
    }
})
const getTitleStyle = computed(() => {
    const _style = { ...ps.titleStyle }
    if (ps.showContent) {
        _style['padding-bottom'] = '16rpx'
    }
    return _style
})
const getContentStyle = computed(() => {
    const _style = { ...ps.contentStyle }
    if (ps.showTitle) {
        _style['border-top'] = '2rpx solid #f4f4f4'
        _style['padding-top'] = '16rpx'
    }
    return _style
})
const getRightWidth = computed(() => {
    return ps.rightWidth + 'rpx'
})
const handleTitleClick = () => {
    es('handleTitleClick')
}
</script>
<style lang="scss" scoped>
.global-card {
    background: #fff;
    border-radius: 12rpx;
    padding: 24rpx;
    margin-top: 16rpx;
    &-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left {
            font-size: 33rpx;
            .txt {
                color: $mocp-text-5;
            }
        }
        .right {
            flex-basis: v-bind(getRightWidth);
            margin-left: 16rpx;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            .txt {
                color: $mocp-text-4;
                margin-right: 16rpx;
            }
        }
    }
    &-content {
        line-height: 40rpx;
        color: $mocp-text-4;
    }
}
</style>
