<template>
    <view>
        <view class="container">
            <view class="title">请输入车牌号码</view>
            <car-number-input @numberInputResult="numberInputResult" :defaultStr="defaultNum" />
            <view class="selectColorBox" @click="show = true">
                <view>车牌颜色</view>
                <view class="selectColor">
                    <view class="color">{{ color }}</view>
                    <u-icon name="arrow-right" size="25"></u-icon>
                </view>
            </view>
        </view>
        <view class="btn" @click="submit">确定</view>

        <!-- 选择车牌颜色 -->
        <u-popup :show="show" :round="30" mode="bottom" @close="onClose">
            <view class="payIpt">
                <view class="tit">选择车牌颜色</view>
                <!-- 颜色选择列表 -->
                <scroll-view class="color-list" scroll-y>
                    <view 
                        class="color-item" 
                        :class="{ 'active': selectedColorIndex === index }"
                        v-for="(item, index) in colorOptions" 
                        :key="index"
                        @click="selectColor(index)"
                    >
                        {{ item }}
                    </view>
                </scroll-view>
                <!-- 底部按钮 -->
                <view class="popup-footer">
                    <view class="cancel-btn" @click="onClose">取消</view>
                    <view class="confirm-btn" @click="confirmColor">确定</view>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
export default {
    data() {
        return {
            defaultNum: '',
            color: '请选择',
            show: false,
            // 颜色选项列表
            colorOptions: ['蓝色', '黄色', '黑色', '白色', '绿色', '渐变绿底黑字', '黄绿双拼底黑字'],
            // 当前选中的颜色索引
            selectedColorIndex: -1
        };
    },
    mounted() {

    },
    methods: {
        numberInputResult(e) {
            console.log('结果--' + e)
        },
        onClose() {
            this.show = false;
        },
        // 选择颜色
        selectColor(index) {
            this.selectedColorIndex = index;
        },
        // 确认选择的颜色
        confirmColor() {
            if (this.selectedColorIndex !== -1) {
                this.color = this.colorOptions[this.selectedColorIndex];
            }
            this.show = false;
        },
        // 提交表单
        submit() {
            // 这里可以添加提交逻辑
            console.log('车牌号码:', this.defaultNum, '车牌颜色:', this.color);
        }
    }
}
</script>

<style>
@import url('./index.css')
</style>