<template>
  <view class="container">
    <scroll-view scroll-y class="list" style="height: 80vh;">
      <block v-for="(item, index) in carList" :key="item.plate">
        <u-swipe-action :index="index" :options="rightOptions" @click="onDelete">
          <view class="car-item" @click="onItemClick(item)">
            <view class="car-num">{{ item.plate }}</view>
            <view class="car-time">上次停放时间: {{ item.time }}</view>
          </view>
        </u-swipe-action>
      </block>
    </scroll-view>

    <!-- 绑定车牌弹窗 -->
    <CarBindDialog
      :visible="showBindDialog"
      :carNumber="carNumArr"
      @save="handleSaveCar"
      @update:visible="showBindDialog = $event"
    />

    <button class="add-btn" @click="onAddCar">新增停车</button>
  </view>
</template>

<script>
import CarBindDialog from '@/components/CarBindDialog.vue';

export default {
  components: {
    CarBindDialog
  },
  data() {
    return {
      showBindDialog: false,              // 控制弹窗显示
      carNumArr: ['渝', '', '', '', '', '', ''],  // 当前编辑的车牌号码数组
      carList: [                         // 车牌列表数据
        { plate: '渝A·B8889', time: '2025-07-28' },
        { plate: '渝A·C1234', time: '2025-07-27' },
        { plate: '渝A·D5678', time: '2025-07-26' }
      ],
      rightOptions: [                    // 侧滑删除按钮配置
        {
          text: '删除',
          style: {
            backgroundColor: '#FF5A1F',
            color: '#fff',
            width: '150rpx'
          }
        }
      ]
    };
  },
  methods: {
    onAddCar() {
      // 新增车牌时，重置车牌数组为默认
      this.carNumArr = ['渝', '', '', '', '', '', ''];
      this.showBindDialog = true;
    },
    handleSaveCar(car) {
      // 保存车牌，格式化并加入列表
      const plate = car.join('').replace(/^([A-Z])/, '$1·');
      this.carList.push({
        plate,
        time: new Date().toISOString().slice(0, 10)
      });
      this.showBindDialog = false;
    },
    onDelete({ index, optionIndex }) {
      // 侧滑删除操作
      if (optionIndex === 0) {
        this.carList.splice(index, 1);
      }
    },
    onItemClick(item) {
      // 点击车牌，发送事件并返回上一页
      uni.$emit('selectPlate', item.plate);
      uni.navigateBack();
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20rpx;
  background-color: #f8f8f8;
  min-height: 100vh;
}

.list {
  margin-bottom: 60rpx;
}

.car-item {
  background-color: #fff;
  padding: 30rpx;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
}

.car-num {
  font-size: 32rpx;
  font-weight: 600;
  color: #000;
}

.car-time {
  font-size: 28rpx;
  color: #999;
  margin-top: 10rpx;
}

.add-btn {
  width: 80%;
  margin: 0 auto;
  background-color: #007aff;
  color: #fff;
  border-radius: 50rpx;
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  font-size: 32rpx;
  position: fixed;
  bottom: 40rpx;
  left: 10%;
}
</style>
