<template>
  <view class="container">
    <!-- 车辆信息区域 -->
    <view class="container-box">
      <view class="car-info-container" v-for="(item, index) in carList" :key="index">
        <view class="car-info">
          <view class="license-plate">
            <view class="plate-type-box">
              <text class="plate-type" :class="{
                'plate-color-blue': item.car_number_color === '蓝牌',
                'plate-color-yellow': item.car_number_color === '黄牌',
                'plate-color-black': item.car_number_color === '黑牌',
                'plate-color-white': item.car_number_color === '白牌',
                'plate-color-green': item.car_number_color === '绿牌',
                'plate-color-gradient-green': item.car_number_color === '渐变绿底黑字',
                'plate-color-yellow-green': item.car_number_color === '黄绿双拼底黑字'
              }">{{ item.car_number_color }}</text>
            </view>
            <view class="plate-number">
              {{ item.car_number }}
              <view class="plate-energy" v-if="getActualCarNumberLength(item.car_number) > 7">新能源</view>
            </view>
          </view>
          <u-icon name="trash" size="45rpx" @click="deleteCar(item)"></u-icon>
        </view>
      </view>
    </view>

    <!-- 添加车辆按钮 -->
    <button class="add-car-btn" @click="addCar">添加车辆</button>
  </view>
</template>

<script>
import {
  isPhone,
  picUrl,
  request,
  upload,
  NavgateTo
} from '../../../utils';
import { apiArr } from '@/api/park.js'

export default {
  data() {
    return {
      carList: []
    }
  },
  methods: {
    getCarList() {
      const params = {
        user_id: uni.getStorageSync('userId')
      }
      request(apiArr.carList, "POST", params).then((res) => {
        this.carList = res.car_list;
      })
    },
    // 计算车牌号的实际长度，去除所有不可见字符
    getActualCarNumberLength(carNumber) {
      if (!carNumber) return 0;
      // 去除所有空格和不可见字符
      const actualNumber = carNumber.replace(/\s/g, '');
      return actualNumber.length;
    },



    deleteCar(item) {
      uni.showModal({
        title: '提示',
        content: '确定删除该车辆吗？',
        success: (res) => {
          if (res.confirm) {
            const params = {
              car_id: item.id
            }
            request(apiArr.deleteCar, "POST", params).then((res) => {
              uni.showToast({
                title: '删除成功',
                icon: 'success',
                duration: 2000
              });
              this.getCarList();
            })
          }
        }
      })
    },
    addCar() {
      // 跳转到添加车辆页面
      uni.navigateTo({
        url: '/packages/park/addCar/index'
      })
    }
  },
  onShow() {
    this.getCarList();
  }
}
</script>

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