<template>
    <view class="contract-fill">
        <view class="form">
            <TCard title="合同信息">
                <TSelectField
                    label="客户名称"
                    placeholder="请选择客户名称"
                    @on-click="handleToggle"
                    v-model="clientName"
                />
                <TInputField label="合同名称" placeholder="请输入合同名称" inputAlign="left" />
                <TSelectField
                    label="签署截至"
                    placeholder="请选择日期"
                    @on-click="handleCalenderClick"
                    v-model="endTime"
                />
            </TCard>
        </view>
        <TFooterBtn text="预览合同" @handle-btn-click="handlePreviewContract" />
    </view>
    <ClientListPopup v-model="show" @handle-selected-value="handleSelectedValue" />
    <AdvanceCalendar v-model="calenderShow" @confirm="confirmCalender" />
</template>

<script setup lang="ts">
import { useToggle } from '@/hooks/useLockFn'
import ClientListPopup from './components/client-list-popup.vue'
import { ref } from 'vue'

const calenderShow = ref(false)
const { show, handleToggle } = useToggle()

const clientName = ref('')
const endTime = ref('')
// 选中客户
const handleSelectedValue = client => {
    console.log(client)
    clientName.value = client.name
}
const handleCalenderClick = () => {
    calenderShow.value = !calenderShow.value
}
const confirmCalender = (date: string) => {
    endTime.value = date
    calenderShow.value = false
}
const handlePreviewContract = () => {
    uni.navigateTo({
        url: '/bundle/pages/contract/contract-preview/index?type=launch'
    })
}
</script>

<style lang="scss" scoped>
.contract-fill {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: $gray-1;
    .form {
        flex: 1;
        overflow-y: auto;
        padding: 20rpx 24rpx;
    }
}
</style>
