<template>
    <up-popup :show="true">
        <view class="popup">
            <view class="title">
                <text>签署区域</text>
                <text class="required">（必填）</text>
            </view>
            <view class="sign-area">
                <text v-show="isShowSignImage" class="placeholder" @click="handleStartSign">
                    点击开始签名
                </text>
                <image
                    v-if="!isShowSignImage"
                    class="img"
                    :style="{ '--height': signHeight + 'rpx' }"
                    src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg"
                    mode="aspectFill"
                />
            </view>
        </view>
    </up-popup>
</template>

<script setup lang="ts">
import { computed, getCurrentInstance, ref } from 'vue'

const props = defineProps({
    path: {
        type: String,
        default: ''
    }
})
const instance = getCurrentInstance()

const signHeight = ref(0)
const isShowSignImage = computed(() => props.path === '')

const handleStartSign = () => {
    uni.navigateTo({
        url: '/bundle/pages/contract/contract-sign/index'
    })
}
// 获取签字区域信息
const getRect = () => {
    return new Promise(resolve => {
        const query = uni.createSelectorQuery().in(instance)
        query
            .select('.sign-area')
            .boundingClientRect(data => {
                return resolve(data)
            })
            .exec()
    })
}
getRect().then(rect => {
    signHeight.value = rect.height * 2
})
</script>

<style lang="scss" scoped>
.popup {
    padding: 40rpx 0 20rpx;
    background-color: $white-1;
    min-height: 400rpx;
    @include flex-direction;
    .title {
        text-align: center;
        .required {
            color: $gray-2;
        }
    }
    .sign-area {
        flex: 1;
        flex-direction: column;
        @include flex-center;
        margin: 24rpx 32rpx 0;
        background-color: $gray-1;
        border-radius: 12rpx;
        .placeholder {
            color: $blue-1;
        }
        image {
            width: 100%;
            height: var(--height);
            object-fit: cover;
        }
    }
}
</style>
