<template>
    <view class="contract-quote">
        <view class="form">
            <view class="device">
                <view class="select">
                    <text>选择桩点</text>
                    <view class="icon" @click="handleToggle(false)">
                        <TIcon name="icon-add" color="#7C7E82" />
                    </view>
                </view>
                <SelectedList :data="selectedList" :expand="expand" />
                <view class="expand" v-if="isShow" @click="handleCollapse">
                    <view class="part">
                        <text>{{ parseText }}</text>
                        <TIcon :name="parseIcon" />
                    </view>
                </view>
            </view>
            <TSelectField
                label="安装日期"
                placeholder="请选择安装日期"
                @onClick="handleInstallDate"
                inputAlign="right"
                v-model="installDate"
            />
            <TPicker label="环境要素" placeholder="请选择环境要素" :columns="typeColumns" />
        </view>
        <view class="footer">
            <view class="price">
                <text class="label">预估报价</text>
                <view class="money">
                    <TIcon name="icon-rmb" color="#F5222D" />
                    <text class="strong">1954.00</text>
                </view>
            </view>
            <u-button
                class="btn"
                shape="circle"
                text="创建合同"
                color="#0E66FB"
                @click="handleNavigate"
            />
        </view>
    </view>
    <DevicePopup
        v-model="show"
        @close="handleToggle(true)"
        @handle-selected-list="handleSelectedList"
    />
    <AdvanceCalendar v-model="showDate" @confirm="handleSelectInstallDate" />
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import DevicePopup from './components/device-popup.vue'
import SelectedList from './components/selected-list.vue'
import { useToggle } from '@/hooks/useLockFn'

const { show, handleToggle } = useToggle()
const selectedList = ref([
    { id: 1, brandName: '品牌', deviceName: '设备名称' },
    { id: 2, brandName: '品牌', deviceName: '设备名称' },
    { id: 3, brandName: '品牌', deviceName: '设备名称' },
    { id: 4, brandName: '品牌', deviceName: '设备名称' },
    { id: 5, brandName: '品牌', deviceName: '设备名称' }
])
const isShow = computed(() => selectedList.value.length > 4)

const handleSelectedList = (list: []) => {
    selectedList.value = list
}
const expand = ref(false)
const parseText = computed(() => (expand.value ? '收起' : '展开'))
const parseIcon = computed(() => (expand.value ? 'icon-up' : 'icon-down'))
const handleCollapse = () => {
    expand.value = !expand.value
}
const showDate = ref(false)
const handleInstallDate = () => {
    showDate.value = !showDate.value
}
const installDate = ref('')
const handleSelectInstallDate = (val: string) => {
    console.log(val)
    showDate.value = false
    installDate.value = val
}
const typeColumns = [
    [
        {
            label: '中国',
            id: 1
        },
        {
            label: '法国',
            id: 2
        }
    ]
]
const handleNavigate = () => {
    console.log('handleNavigate')

    uni.navigateTo({
        url: '/bundle/pages/contract/contract-fill/index'
    })
}
</script>

<style lang="scss" scoped>
.contract-quote {
    width: 100vw;
    height: 100vh;
    background-color: $gray-1;
    .form {
        height: calc(100% - 120rpx);
        overflow-y: auto;
        background-color: #fff;
        .device {
            .select {
                padding: 0 32rpx;
                @include flex-center(space-between);
                height: 100rpx;
                border-bottom: 1px solid $gray-3;
                .icon {
                    width: 40rpx;
                    height: 40rpx;
                    @include flex-center;
                    border: 1px solid $gray-3;
                }
            }
            .expand {
                @include flex-align;
                color: $gray-2;
                position: relative;
                &::before {
                    content: '';
                    width: 40%;
                    border-bottom: 1px solid $gray-6;
                    border-top-color: $gray-6;
                    border-right-color: $gray-6;
                    border-left-color: $gray-6;
                    flex: 1 1 0%;
                    transform: scaleY(0.5);
                    margin: 0;
                }
                &::after {
                    content: '';
                    border-bottom: 1px solid $gray-6;
                    width: 40%;
                    transform: scaleY(0.5);
                    border-top-color: $gray-6;
                    border-right-color: $gray-6;
                    border-left-color: $gray-6;
                    flex: 1 1 0%;
                }

                .part {
                    @include flex-align;
                    margin: 0 24rpx;
                    gap: 8rpx;
                }
            }
        }
    }
    .footer {
        @include flex-align;
        gap: 32rpx;
        padding: 0 32rpx;
        height: 120rpx;
        background-color: $white-1;
        border-top: 1px solid $gray-3;
        .price {
            @include flex-align;
            gap: 16rpx;
            .label {
                font-size: 28rpx;
                color: $gray-2;
            }
            .money {
                @include flex-align;
                color: $red-1;
            }
        }
        .btn {
            flex: 1;
            :deep(.u-button) {
                height: 80rpx !important;
            }
        }
    }
}
</style>
