<template>
  <div class="title-area">
    <div v-for="value in titleList">{{ value }}</div>
  </div>
  <div class="userinfo-data">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="item in noticeList">
          <div>{{item.f_created_date||'无'}}</div>
          <div>{{item.f_user_name||'无'}}</div>
          <div>{{item.f_workorder_type||'无'}}</div>
          <div>{{item.f_address||'无'}}</div>
          <div>{{item.f_single_man||'无'}}</div>
          <div v-if="item.f_workorder_type=='报修单'||item.f_workorder_type=='置换通气单'">{{'下派'}}</div>
          <div v-else>{{item.f_handlings||'无'}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper"
import 'swiper/css/swiper.min.css'
export default {
  name: "SwiperSlide",
  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:6,
        speed:3
      }
    },
    titleList:{
      type:Object,
      default:{
      }
    }
    ,
    noticeList:{
      type:Array,
      default:[
        {
          f_created_date: '',
          f_user_name:'',
          f_workorder_type:'',
          f_address:'',
          f_single_man:'',
          f_handlings:''
        },
      ]
    }
  },
  ready(){
  }
}
</script>

<style lang="less" scoped>
.title-area {
  color: #00D2FF;
  font-size: 2.5vh;
  display: flex;
  height: 5.093vh;
  align-items: center;
  position: relative;
  margin-top: 2.407vh;
  text-align: center;
  div:nth-of-type(1){width: 260px}
  div:nth-of-type(2){width: 180px}
  div:nth-of-type(3){width: 170px}
  div:nth-of-type(4){width: 400px}
  div:nth-of-type(5){width: 150px}
  div:nth-of-type(6){width: 150px}
}

.userinfo-data {
  height: 19.63vh;
  pointer-events: none;
}
.swiper-slide{
  display: flex;
  color: #ffffff;
  font-size: 22px;
  line-height: 41px;

  div:nth-of-type(1){
    width: 260px;
    text-align: center;
  }
  div:nth-of-type(2){
    width: 180px;
    text-align: center;
  }
  div:nth-of-type(3){
    width: 170px;
    text-align: center;
  }
  div:nth-of-type(4){
    height: 100%;
    width: 400px;
    text-align: center;
    div{
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  div:nth-of-type(5){
    width: 150px;
    text-align: center;
  }
  div:nth-of-type(6){
    width: 150px;
    color: #F7DB35;
    text-align: center;
  }
}

</style>
