<template>
    <ContractLayout title="合同详情">
        <view class="result">
            <view class="tip">
                <view class="scan-icon">
                    <TIcon name="icon-clock" :size="24" color="#0E66FB" />
                </view>
                <view class="desc">
                    <text class="strong">待我签署</text>
                    <text class="sub-title">剩余6天16时32分 自动失效</text>
                </view>
            </view>
            <view class="contract">
                <view class="form">
                    <view>
                        <text class="label">合同名称</text>
                        <text>充电桩报价单</text>
                    </view>
                    <view>
                        <text class="label">发起方</text>
                        <text>kaeery</text>
                    </view>
                    <view>
                        <text class="label">签署方</text>
                        <text>广东星星新能源有限公司</text>
                    </view>
                </view>
            </view>
            <TFooterBtn text="查看合同并签署" @handle-btn-click="handleBtnClick" />
        </view>
    </ContractLayout>
</template>

<script setup lang="ts">
import ContractLayout from '@/pages/salesman/contract/components/contract-layout.vue'

const handleBtnClick = () => {
    uni.navigateTo({
        url: '/bundle/pages/contract/contract-preview/index?type=signatory'
    })
}
</script>

<style lang="scss" scoped>
.result {
    flex: 1;
    display: flex;
    flex-direction: column;
    .tip {
        display: flex;
        gap: 12rpx;
        padding: 32rpx 40rpx 24rpx;
        .scan-icon {
            margin-top: 4rpx;
        }
        .desc {
            @include flex-direction;
            gap: 6rpx;
            color: $blue-1;
            .strong {
                font-size: 40rpx;
            }
            .sub-title {
                font-size: 28rpx;
            }
        }
    }
    .contract {
        flex: 1;
        overflow-y: auto;
        @include flex-direction;
        gap: 28rpx;
        padding: 32rpx 32rpx 20rpx;
        margin: 0 32rpx;
        background-color: $white-1;
        border-radius: 16rpx;
        .form {
            @include flex-direction;
            gap: 24rpx;
            > view {
                display: flex;
                gap: 48rpx;
                .label {
                    width: 128rpx;
                    text-align: right;
                    color: $gray-2;
                }
            }
        }
    }
    .btn {
        padding: 0 32rpx;
        margin-top: 32rpx;
    }
}
</style>
