<template>
    <div id="car-container" v-if="carList.length != 0">
      <div class="scontainer">
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="car in carList" :key="car.id">
              <!-- <CarItem height="800px" :carData="car"></CarItem> -->
              <CarItem :carData="car"></CarItem>
            </div>
          </div>
          <!-- 如果需要导航按钮 v-if="carList.length >= 4" --> 
          <div class="swiper-button-prev btn"></div>
          <div class="swiper-button-next btn"></div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import "swiper/swiper-bundle.css";
  import Swiper from "swiper";
  import "swiper/swiper-bundle.esm.js";
  import CarItem from './CarItem/CarItem.vue'
  import { mapActions, mapMutations, mapState } from 'vuex';
  export default {
    name: "Car",
    components: {
        CarItem
    },
    data() {
      return {
        id: this.$route.query.id || localStorage.getItem('id')
      }
    },
    mounted() {
      // 轮播图
      var mySwiper = new Swiper(".swiper-container", {
        slidesPerView: 3,
        // 如果需要前进后退按钮
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });
      // this.CLEARCARLIST()    // 解开之后轮播就不行了？？？？？
      this.getCarList(this.id)
    },
    methods: {
      // 获取车辆列表信息根据停车场id
      ...mapActions('carsAbout', ['getCarList']),
      ...mapMutations('carsAbout', ['CLEARCARLIST']),
    },
    computed: {
      ...mapState('carsAbout', ['carList'])
    }
  };
  </script>
  
  <style lang="scss" scoped>
  #car-container {
    position: fixed;
    bottom: 84px;
    left: 50%;
    transform: translate(-50%);
    .scontainer {
      width: 1785px;
      margin: auto;
    }
    .swiper-container {
      // position: relative;
      // padding-left: 50px;
      margin: auto;
      overflow: initial;
      .swiper-slide {
          position: relative;
          width: 505px !important;
          height: 258px;
          margin-right: 90px;
          // z-index: 12;
      }
      .swiper-button-next,
      .swiper-button-prev {
          z-index: 4;
          width: 60px;
          height: 100px;
          background-color: #fff;
          opacity: 1;
          border-radius: 30px;
          cursor: pointer;
          border: 1px solid #e1e1e1;
          box-shadow: 0px 1px 1px 0.2px rgba(0, 0, 0, 0.2);
      }
      // .f {
      //     margin-left: 115px;
      // }
      .swiper-button-prev:after, .swiper-button-next:after {
          font-size: 20px;
          color: #029ff7;
          font-weight: 700;
          cursor: pointer;
      }
      .swiper-button-prev {
          left: -45px;
          &:hover {
              background-color: #34393f;
          } 
      }
      .swiper-button-next {
          right: -20px;
          &:hover {
              background-color: #34393f;
              color: #029ff7;
          }
      }
    }
  }
  </style>