<template>

<a-carousel
    style="width: 100vw;height:100vh;"
    :default-current="1"
    :auto-play="{ interval: 5000}"
    indicator-type="line"
    show-arrow="always"
    arrow-class="color:red !important;"
  >
<a-carousel-item v-for="(item,index) in datalist" :key="index">
    <devinfoshow :devinfo="item"></devinfoshow>
    </a-carousel-item>
  </a-carousel>


</template>

<script>
import devinfoshow from './devinfoshow.vue'
import axios from 'axios';
export default {
    name: 'DevinfoMain',
    components: {
        devinfoshow
    },
    data() {
        return {
            datalist: []
            // Your component's data goes here
        }
    },
    mounted() {
        this.onloaddata();
        //每隔1分钟刷新一次
        setInterval(() => {
            this.onloaddata();
        }, 60000);
    },
    methods: {
        // Your component's methods go here
        async onloaddata() {
            const data=await axios.get('devinfo/getfilelistinfo');
            let datalist=data.data;
         
            //每9个数据为一组 不足的不补齐
        
            let newdatalist=[];
            let temp=[];

        for(let i=0;i<datalist.length;i++)
        {

            const datestr=datalist[i].last_online
            //如果上次时间距离现在超过1天则显示红色
            let lasttime=new Date(datestr);
            let nowtime=new Date();
            datalist[i].from_last_online_time=(nowtime-lasttime)/60000;


        }


            for(let i=0;i<datalist.length;i++){
                if(i%9==0&&i!=0){
                    newdatalist.push(temp);
                    temp=[];
                }
                temp.push(datalist[i]);
            }
            newdatalist.push(temp);
            this.datalist=newdatalist;
          //  console.log(newdatalist);
        }
    }
    // Your component's JavaScript logic goes here
}
</script>

<style >
/* Your component's CSS styles go here */
.arco-carousel-arrow > div > svg {
    color: rgb(0, 255, 132) !important;
    font-size: 20px;
    width: 100px !important;
    height: 100px !important;
}
.arco-carousel-arrow-right {
    width: 100px !important;
}
.arco-carousel-arrow-left {
    width: 100px !important;
}
</style>