<template>
    <view class="container-view-contril">
		<u-popup zIndex='9999' v-model="showLeaseType" :mask-close-able='false' :closeable="false" mode="bottom" border-radius="32">
		    <view class="bottom-popup">
		        <view class="title">{{ selectType == 'cabinet' ? $t('车辆类型') : $t('租借类型')}}</view>
		        <scroll-view style="max-height: 700rpx;" scroll-y>
		        	<view class="item-wrap">
		        	    <template v-if="selectType == 'cabinet'">
		        	        <view 
		        	            v-for="(item, index) in modelTypeList" 
		        	            :class="['item', leaseType == item.name && 'checked']"
		        	            :key="index"
		        	            @click="leaseType = item.name"
		        	        >
		        	            {{ item.name }}
		        	        </view>
		        	    </template>
		        	    <template v-if="selectType == 'store'" >
		        	        <view class="">
		        	        	<view class="flexs">
		        	        		<view
		        	        		    v-for="(item, index) in LEASE_TYPE_ARR" 
		        	        		    :class="['item', leaseType == item.value && 'checked']"
		        	        		    :key="index"
		        	        		    @click="leaseType = item.value"
		        	        			v-if="item.value != 100"
		        	        		>
		        	        		    {{ item.label }}
		        	        		</view>
		        	        	</view>
		        	        	<view class="bugFlex">
		        	        		  <view class="title">{{ $t('购买') }}</view>
		        	        		  <u-switch v-model="buy"></u-switch>
		        	        	</view>
		        	        </view>
							
		        	    </template>
		        	</view>
		        </scroll-view>
				
				<view class="options-wrap">
		            <view class="btn cancle" @click="closeLeaseType">取消</view>
		            <view class="btn confirm" @click="chooseLeaseType">确定</view>
		        </view>
				<view style="height: 170rpx;"></view>
		    </view>
		
		</u-popup>
    </view>
</template>

<script>
	import { LEASE_TYPE_ARR } from '@/common/constant.js'
export default {
    data() {
        return {
			// showLeaseType: false,
			LEASE_TYPE_ARR,
			leaseType:100,
			buy:true
		};
    },
    /**
     * 组件的属性列表
     */
    props: {
		modelTypeList:{
			type:Array,
		},
        showLeaseType: {
			type: Boolean,
			default: false
		},
		isBuy:{
			type: Boolean,
			default: true
		},
		shopType:{
			type: Number,
			default: 1
		},
        selectType: {
			type: String,
			default: ''
		},

    },
	mounted() {
		
		this.leaseType = this.shopType
		this.buy = this.isBuy
	},
    /**
     * 组件的方法列表
     */
    methods: {
		closeLeaseType() {
            this.$emit('closeSelectType')
		},
        chooseLeaseType() {
			console.log(this.buy)
            this.$emit('checkCabinetType', {
				selectType:this.selectType,
				leaseType:this.leaseType,
				isBuy:this.buy
			})
		}
	}
};
</script>
<style lang="scss" scoped>
	.bugFlex{
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
	}
	.flexs{
		display: flex;
		flex-wrap: wrap;
	}
.bottom-popup {
        padding: 40rpx 32rpx 32rpx 32rpx;
        padding-bottom: env(safe-area-inset-bottom);
        .title {
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 40rpx;
            color: #060809;
            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: 218rpx;
                height: 80rpx;
                background: #F3F8FF;
                border-radius: 16rpx;
                border: 4rpx solid #F3F8FF;
                box-sizing: border-box;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 32rpx;
                color: #060809;
                text-align: center;
                font-style: normal;
				margin-right: 16rpx;
				&:nth-child(3n+3){
					margin-right: 0;
				}
            }
            .checked {
                background: #FFFFFF;
                border-radius: 16rpx;
                border: 4rpx solid #0A59F7;
            }
        }
        .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: #EBECEC;
				color: #060809;
            }
            .confirm {
                background: #060809;
                color: #FFFFFF;
            }
        }
    }
</style>
