<template>
    <ContractLayout title="处理结果">
        <view class="result">
            <view class="tip">
                <view class="scan-icon">
                    <TIcon name="icon-scan-code" :size="24" color="#0E66FB" />
                </view>
                <view class="desc">
                    <text class="strong">待他人签署</text>
                    <text class="sub-title">扫描下方二维码完成签署</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 class="qrcode">
                    <view class="text">长按分享二维码</view>
                    <view class="code">
                        <image src="@/static/images/qrcode.png" :show-menu-by-longpress="true" />
                    </view>
                </view>
            </view>
            <view class="btn">
                <u-button
                    text="发送给对方"
                    :plain="true"
                    color="#0E66FB"
                    :customStyle="{ height: '80rpx', fontWeight: 700 }"
                    open-type="share"
                />
            </view>
        </view>
    </ContractLayout>
</template>

<script setup lang="ts">
import { onShareAppMessage } from '@dcloudio/uni-app'
import ContractLayout from '@/pages/salesman/contract/components/contract-layout.vue'

onShareAppMessage(res => {
    return {
        title: '这份合同需要您补充信息并签署，前往查看 >',
        path: '/bundle/pages/contract/contract-detail/index',
        imageUrl: 'https://cdn.uviewui.com/uview/swiper/1.jpg'
    }
})
</script>

<style lang="scss" scoped>
.result {
    .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 {
        @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;
                }
            }
        }
        .qrcode {
            flex-direction: column;
            @include flex-center;
            margin-top: 32rpx;
            .text {
                font-size: 28rpx;
                color: $gray-2;
            }
            .code {
                width: 300rpx;
                height: 300rpx;
                image {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
        }
    }
    .btn {
        padding: 0 32rpx;
        margin-top: 32rpx;
    }
}
</style>
