<!--
 * @FilePath: \code\gitscreenFront\src\views\Mechanics\components\devFaultTip.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-06-12 08:52:40
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->
<template>
  <div style="height: 100%; width: 100%">
    <h2 class="components-header">{{title}}</h2>
    <div class="components-content" :key="keynum">
      <swiper-container
        :slidesPerView="per_view"
        :initialSlide="0"
        :loop="true"
        :spaceBetween="0"
        direction="vertical"
        :autoplay="{
          delay: 3000,
          disableOnInteraction: false,
        }"
        @progress="onProgress"
        @slidechange="onSlideChange"
      >
        <swiper-slide v-for="(res, index) in props.tipList" :key="index">
          <div class="itemclass">
              <el-row :gutter="5" class="row-flex">
                <el-col :span="2" class="col-flex" style="color: #fff; font-size: 18px;">
                  {{ index + 1 }}
                </el-col>
                <el-col :span="18"  class="col-flex" style="flex-direction: column; font-size: 18px; color: #fff; align-items: flex-start;"> 
                <p><span>机架号：</span><span>{{ res.label }}</span></p>
                <p><span>设备位置及名称：</span><span> {{ res.devName }}</span></p>
                </el-col>
                <el-col :span="4" class="col-flex" style="font-size: 25px; color: red;"> 故障 </el-col>
              </el-row>
          </div>
        </swiper-slide>
      </swiper-container>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from "vue";
import { register } from "swiper/element/bundle";
import { useI18n } from "vue-i18n";
let { t } = useI18n();
register();
const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  tipList: {
    type: Array,
    default: [],
  },
});
let per_view = ref(3);
let useSwiper: any = ref(null);
let swiperRef = ref(null);
let listVal = ref([]);
let keynum = ref(0);
// space-between:幻灯片间距
//             slides-per-view:每个视图幻灯片数量
//             initialSlide：初始幻灯片索引
//             height:框高,
//             direction:滑动方向
//             autoplay：{
//                 delay：时间
//                 disableOnInteraction：禁止交互
//             }

// let swiperConfig= reactive({
//     perView:3,
//     initialSlide:1,
//     loop:true,
//     spaceBetween:0,
//     swiperHeight:200,
//     direction:'vertical',
//     autoplay:{ delay: 3000,disableOnInteraction: false,height:200}
// })

watch(
  () => props.tipList,
  (val) => {
    keynum.value++;
  },
  { deep: true }
);

const onProgress = (e) => {};

const onSlideChange = (e) => {};
</script>

<style scoped>
.components-header {
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 20px;
  margin-bottom: 10px;
}
.components-content {
  height: 90%;
  width: 100%;
}
.itemclass {
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  border-bottom: #0545a1 1px solid;
}
.row-flex{
    width: 100%;
    height: 100%;
}
.col-flex{
    display: flex;
    justify-content: center;
    align-items: center;
}
.swiper,
swiper-container {
  width: 100%;
  height: 100%;
  display: inline-block !important;
}
</style>
