<!--
 * @FilePath: \code\gitscreenFront\src\views\Mechanics\components\devStatusTip.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="props.per_view" :loop="true" :spaceBetween="0" direction="vertical" :autoplay="{
        delay: 3000,
        disableOnInteraction: false,
      }" autoHeight=true observer=true observeParents=true @progress="onProgress" :loopAdditionalSlides="1" @slidechange="onSlideChange">
        <swiper-slide v-for="(res, index) in props.tipList" :key="res.id">
          <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>{{ label.name }} ：</span><span>{{ res.name }}</span></p>
                <p style="margin-top: 10px 0;">
                  <span>{{ label.date }}：</span><span>{{ res.date }}</span> &nbsp;
                  <span>{{ label.duration }}：</span><span>{{ res.duration }}</span>
                </p>
              </el-col>
              <el-col :span="4" class="col-flex" style="font-size: 25px;font-weight: bold;" :style="{color:compare[res.status]?compare[res.status]:'red'}"> {{res.status}} </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:any = defineProps({
  title: {
    type: String,
    default: "",
  },
  tipList: {
    type: Array,
    default: [{name:'',date:'',duration:'',status:''}],
  },
  label: {
    type: Object,
    default: { name: "设备名称", date: "保养日期", duration: "保养时长"}
  },
  per_view: {
    type: Number,
    default: 5,
  },
});
let compare = {
  '进行中':'#83C710',
  '未开始':'#E44610',
  '未进行':'#E54711',
  '故障':'#DA0F10',
  '维修中':'#83C710',
}
let useSwiper: any = ref(null);
let swiperRef = ref(null);
let listVal = ref([]);
let keynum = ref(0);
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>
  