<template>
    <view class="card">
        <view class="card-title">
            <view class="left">
                <global-icon :icon="titleIcon" color="#1D2129"></global-icon>
                <text class="txt">{{ title }}</text>
            </view>
            <view class="right" v-if="edit">
                <global-button type="text" @tap="handleAdd">编辑</global-button>
            </view>
        </view>
        <view class="card-content">
            <slot></slot>
        </view>
        <slot name="footer" v-if="showfooter">
            <view class="card-footer">
                <view class="label">
                    <global-icon icon="idcard" color="#1D2129"></global-icon>
                    <text class="txt">{{ idcard || '-' }}</text>
                </view>
                <view class="label">
                    <global-icon icon="calendar" color="#1D2129"></global-icon>
                    <text class="txt">{{ calendar != -1 ? timeStampFormat(calendar) : '-' }}</text>
                </view>
            </view>
        </slot>
    </view>
</template>

<script setup>
import { timeStampFormat } from 'mocp/utils/tool'
const es = defineEmits(['handleAdd'])
const ps = defineProps({
    title: {
        type: String,
        default: ''
    },
    titleIcon: {
        type: String,
        default: 'message'
    },
    edit: {
        type: Boolean,
        default: false
    },
    showfooter: {
        type: Boolean,
        default: false
    },
    idcard: {
        type: String,
        default: '-'
    },
    calendar: {
        type: [String, Number],
        default: '-'
    }
})
const handleAdd = () => {
    es('handleAdd')
}
</script>
<style lang="scss" scoped>
.card {
    margin-top: 16rpx;
    padding: 16rpx 24rpx;
    border-radius: 12rpx;
    color: $mocp-text-4;
    background: #ffffff;
    &-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 2rpx solid #f4f4f4;
        padding-bottom: 16rpx;
        color: $mocp-text-5;
        .left {
            display: flex;
            align-items: center;
            .txt {
                margin-left: 8rpx;
                color: $mocp-text-5;
            }
        }
    }
    &-content {
        padding-top: 16rpx;
    }
    &-footer {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        .label {
            margin-left: 16rpx;
            .txt {
                margin-left: 16rpx;
            }
        }
    }
}
</style>
