<template>
  <div>
    <table style="width: 100%">
      <thead>
        <tr class="title-area" >
          <td v-for="value in titleList">{{ value }}</td>
        </tr>
      </thead>
<!--      显示不出来-->
      <tbody class="swiper-container">
        <template class="swiper-wrapper">
          <tr class="swiper-slide" v-for="item in noticeList">
            <td v-for="value in item">{{value}}</td>
          </tr>
        </template>
      </tbody>
<!--      格式不对-->
<!--      <tbody class="swiper-container">-->
<!--        <tr class="swiper-wrapper">-->
<!--          <td class="swiper-slide" v-for="item in noticeList">-->
<!--            <span v-for="value in item">{{value}}</span>-->
<!--          </td>-->
<!--        </tr>-->
<!--      </tbody>-->
<!--      动不了的-->
<!--      <tbody class="swiper-container">-->
<!--        <tr class="swiper-slide" v-for="item in noticeList">-->
<!--          <td v-for="value in item">{{value}}</td>-->
<!--        </tr>-->
<!--      </tbody>-->
    </table>
  </div>
</template>

<script>
import Swiper from "swiper";
import 'swiper/css/swiper.min.css'
export default {
  name: "SwiperTools2",
  watch:{
    noticeList: {
      immediate: true,
      deep:true,//深度监听,也是看情况使用
      handler() {
        this.$nextTick(()=>{
          new Swiper ('.swiper-container', {
            slidesPerView : this.rowSpeed.row,
            speed:this.rowSpeed.speed*1000,
            //垂直播放
            direction: 'vertical',
            autoplay: {
              delay: 0,
              stopOnLastSlide: false,
              disableOnInteraction: true,
              // waitForTransition: false,
            },
            loop: true // 循环模式选项
          });
        })
      },

    }
  },
  props:{
    rowSpeed:{
      /* 行数 row 速度 speed */
      type:Object,
      default: {
        row:5,
        speed:3
      }
    },
    titleList:{
      type:Object,
      default:{
      }
    }
    ,
    noticeList:{
      type:Array,
      default:[
  {
    date: "2022-09-01 10:25:06",
    duration:'2min',
    name:'赵王莉1',
    orderType:'报修',
    address:'建设小区21号112室',
    receptionist:'候倩楠',
    state:'接听'
  },
  {
    date: "2022-09-01 10:25:06",
    duration:'2min',
    name:'林妹妹1',
    orderType:'报修',
    address:'建设小区21号112室',
    receptionist:'候倩楠',
    state:'接听'
  },
  {
    date: "2022-09-01 10:25:06",
    duration:'2min',
    name:'赵王莉2',
    orderType:'报修',
    address:'建设小区21号112室',
    receptionist:'候倩楠',
    state:'接听'
  },
  {
    date: "2022-09-01 10:25:06",
    duration:'2min',
    name:'林妹妹2',
    orderType:'报修',
    address:'建设小区21号112室',
    receptionist:'候倩楠',
    state:'接听'
  },
  {
    date: "2022-09-01 10:25:06",
    duration:'2min',
    name:'赵王莉3',
    orderType:'报修',
    address:'建设小区21号112室',
    receptionist:'候倩楠',
    state:'接听'
  },
  {
    date: "2022-09-01 10:25:06",
    duration:'2min',
    name:'林妹妹3',
    orderType:'报修',
    address:'建设小区21号112室',
    receptionist:'候倩楠',
    state:'接听'
  },
],
    }
  }
}
</script>

<style lang="less" scoped>
.title-area {
  width: 100%;
  height: 100%;
  color: #00D2FF;
  font-size: 2.5vh;
  /*display: flex;*/
  /*height: 5.093vh;*/
  /*flex-direction: row;*/
  /*align-items: center;*/
  position: relative;
  text-align: center;
}

.userinfo-data {
  width: 100%;
  height: 100%;
  /*position: absolute;*/
  /*top: 8.148vh;*/
  /*left: 0.521vw;*/
  /*width: 71.354vw;*/
  //pointer-events: none;
}
.swiper-slide {
  /*display: flex;*/
  width: 100%;
  color: #ffffff;
  font-size: 22px;
  line-height: 41px;
  text-align: center;
  /*justify-content: space-evenly;*/
  height: 20%;
}

</style>
