<template>
    <view class="carDemand-container" :style="{top: top + 'px'}">
        <u-popup v-model="showLeaseType" :closeable="true" mode="bottom" border-radius="32" @close="close">
            <view class="bottom-popup">
                <view class="title">选择租车类型</view>
                <view class="item-wrap">
                    <view 
                        v-for="(item, index) in LEASE_TYPE_ARR" 
                        :class="['item', leaseType === item.value && 'checked']"
                        :key="index"
                        @click="leaseType = item.value"
                    >
                        {{ item.label }}
                    </view>
                    <view class="item" style="opacity: 0;"></view>
                </view>
                <view class="options-wrap">
                    <view class="btn cancle" @click="close">取消</view>
                    <view class="btn confirm" @click="chooseLeaseType">确定</view>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
import { LEASE_TYPE_ARR } from '@/common/constant.js'
export default {
    props: {
        top: {
            type: Number,
            default: 0
        },
		showLeaseType: {
			type: Boolean,
			default: false
		},
    },
    data () {
        return {
            LEASE_TYPE_ARR,
            // showLeaseType: false,
            leaseType: 4
        }
    },
    methods: {
        chooseLeaseType() {
            this.$emit('changeLeaseType', this.leaseType)
            this.$emit('update:showLeaseType', false) 
        },
        close() {
           this.$emit('update:showLeaseType', false) 
        },
    }
}
</script>

<style lang="scss" scoped>
.carDemand-container {
    background: #fff;
    width: 100%;
    padding: 10rpx 32rpx;
	position: fixed;
	z-index: 999;
	left: 0;
	right: 0;
    .input-wrap {
        background: #F4F5F6;
        border-radius: 36rpx;
        .content {
            display: flex;
            justify-content: space-between;
            padding: 20rpx 30rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #5E6F90;
            line-height: 28rpx;
            text-align: left;
            font-style: normal;
            .img {
                width: 32rpx;
                height: 32rpx;
                margin-left: 20rpx;
            }
            .address-txt {
                width: 140rpx;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }
    }
    .bottom-popup {
        padding: 40rpx 32rpx 32rpx 32rpx;
        padding-bottom: env(safe-area-inset-bottom) !important;
        .title {
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 40rpx;
            color: #2A3A5A;
            line-height: 40rpx;
            text-align: left;
            font-style: normal;
            margin-bottom: 48rpx;
        }
        .item-wrap {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            .item {
                display: flex;
                justify-content: center;
                align-items: center;
                margin-bottom: 36rpx;
                width: 220rpx;
                height: 64rpx;
                background: #FFFFFF;
                border-radius: 38rpx;
                border: 3rpx solid #E7EAEE;
                font-family: PingFangSC, PingFang SC;
                font-weight: 600;
                font-size: 30rpx;
                color: #8997B1;
                line-height: 30rpx;
                text-align: center;
                font-style: normal;
            }
            .checked {
                background: #EDF5FF;
                color: #0074FF;
                border: 3rpx solid #0074FF;
            }
        }
        .options-wrap {
            display: flex;
            justify-content: space-between;
            .btn {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 334rpx;
                height: 80rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 500;
                font-size: 32rpx;
                line-height: 32rpx;
                text-align: center;
                font-style: normal;
                border-radius: 40rpx;
                
            }
            .cancle {
                background: #E5F1FF;
                color: #0074FF;
            }
            .confirm {
                background: #0074FF;
                color: #FFFFFF;
            }
        }
    }
}
</style>