<template>
    <div class="contract-preview">
        <view class="contract-template">
            <ContractTemplate :image-list="imageList" />
        </view>
        <ContractSign v-if="show" :path="signPath" />
        <TFooterBtn v-if="!isShowBtn" :text="btnText" @handle-btn-click="handleSendContract" />
    </div>
</template>

<script setup lang="ts">
import { onLoad, onReady } from '@dcloudio/uni-app'
import { computed, ref, shallowRef } from 'vue'
import ContractTemplate from '@/pages/salesman/contract/components/contract-template.vue'
import ContractSign from './components/sign.vue'
import contractTemplate1 from '@/static/images/contract-template1.png'
import contractTemplate2 from '@/static/images/contract-template1.png'
import contractTemplate3 from '@/static/images/contract-template1.png'
import { useToggle } from '@/hooks/useLockFn'

const { show, handleToggle } = useToggle()

const imageList = shallowRef([
    { src: contractTemplate1 },
    { src: contractTemplate2 },
    { src: contractTemplate3 }
])
interface IFieldMap {
    btnText: string
    navigationBarTitle: string
    url: string
}
const fieldMap: Record<string, IFieldMap> = {
    launch: {
        btnText: '确认发起合同',
        navigationBarTitle: '核对合同信息',
        url: '/bundle/pages/contract/contract-result/index'
    },
    signatory: {
        btnText: '开始签署',
        navigationBarTitle: '合同详情',
        url: '/bundle/pages/contract/contract-preview/index?type=ownerSignatory'
    },
    ownerSignatory: {
        btnText: '提交',
        navigationBarTitle: '合同详情',
        url: ''
    },
    sign: {
        btnText: '提交签署',
        navigationBarTitle: '合同详情',
        url: '/bundle/pages/contract/contract-sign-result/index'
    },
    signResult: {
        btnText: '',
        navigationBarTitle: '合同详情',
        url: ''
    }
}
const signPath = ref('')
const handleSendContract = () => {
    uni.navigateTo({
        url: fieldMap[payloadType.value].url
    })
}
const payloadType = ref('launch') // 发起方：launch 签署方：signatory/ownerSignatory
const btnText = computed(() => fieldMap[payloadType.value].btnText)
const isShowBtn = computed(() => payloadType.value === 'signResult')

onLoad(async e => {
    payloadType.value = e.type!

    if (payloadType.value === 'ownerSignatory') {
        // 点击开始签署
        handleToggle()
    } else if (payloadType.value === 'sign') {
        // 点击完成签名后
        handleToggle(false)
        signPath.value = e.path!
    }
})
onReady(() => {
    uni.setNavigationBarTitle({
        title: fieldMap[payloadType.value].navigationBarTitle
    })
})
</script>

<style lang="scss" scoped>
.contract-preview {
    width: 100vw;
    height: 100vh;
    @include flex-direction;
    background-color: $gray-1;
    .contract-template {
        flex: 1;
        overflow-y: auto;
        padding: 20rpx 0;
    }
}
</style>
