<template>
    <view class="contract-card" @click="handleViewDetail">
        <view class="title">
            <text>合同名称</text>
            <text class="status" :style="{ color: parseStatus('color') }">
                {{ parseStatus('text') }}
            </text>
        </view>
        <view class="info">
            <text>签署方：广东星星新能源有限公司</text>
            <text>发起时间：2024-07-27 11:15:00</text>
            <text>截止时间：2024-08-08 11:51:00</text>
        </view>
    </view>
</template>

<script setup lang="ts">
import { PropType, computed } from 'vue'
import { IContract, IContractStatus } from '../interface'

const props = defineProps({
    item: {
        type: Object as PropType<IContract>,
        default: () => ({})
    }
})
const contractStatusMap: Record<number, IContractStatus> = {
    1: { text: '待签署', color: '#fdba33' },
    2: { text: '已完成', color: '#46b97b' }
}
const parseStatus = computed(() => (type: string) => contractStatusMap[props.item.status][type])
const handleViewDetail = () => {
    uni.navigateTo({
        url: '/bundle/pages/contract/contract-view/index'
    })
}
</script>

<style lang="scss" scoped>
.contract-card {
    padding: 24rpx;
    background-color: $white-1;
    border-radius: 12rpx;
    .title {
        @include flex-justify;
        .status {
            font-size: 28rpx;
            color: $orage-1;
        }
    }
    .info {
        @include flex-direction;
        gap: 20rpx;
        margin-top: 20rpx;
        font-size: 28rpx;
        color: $gray-2;
    }
}
</style>
