<template>
    <view>
        <view class="container">
            <view class="title">请输入车牌号码</view>
            <car-number-input @numberInputResult="numberInputResult" :defaultStr="defaultNum" ref="carNumberInput" />
            <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>
import {
    isPhone,
    picUrl,
    request,
    upload,
    NavgateTo
} from '../../../utils';
import { apiArr } from '@/api/park.js'

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

    },
    methods: {
        numberInputResult(e) {
            this.defaultNum = 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() {
            const actualNumber = this.defaultNum.replace(/\s/g, '');
            if (this.defaultNum == '' || actualNumber.length < 7) {
                uni.showToast({
                    title: '请输入正确的车牌号',
                    icon: 'none',
                    duration: 2000
                })
                return;
            }
            if (this.color == '请选择') {
                uni.showToast({
                    title: '请选择车牌颜色',
                    icon: 'none',
                    duration: 2000
                })
                return;
            }
            const params = {
                user_id: uni.getStorageSync('userId'),
                car_number: this.defaultNum,
                car_number_color: this.color
            }
            request(apiArr.carAdd, "POST", params).then((res) => {
                uni.showToast({
                    title: '添加成功',
                    icon: 'success',
                    duration: 2000
                })
                if (this.$refs.carNumberInput) {
                    // 直接更新子组件的inputList数组
                    for (let i = 0; i < 8; i++) {
                        this.$refs.carNumberInput.inputList[i] = ' ';
                    }
                    this.$refs.carNumberInput.$forceUpdate();
                }
                this.color = '请选择';
                this.selectedColorIndex = -1;
            });
        }
    }
}
</script>

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