<template>
    <div class="container">
        <swiper :options="outSwiperOption" ref="outSwiper">
            <swiper-slide>
                <div class="page-pack" :style="{transform: zoom}" style="transform-origin: 0 0">
                    <div class="title-pack">{{timmingData.name}}</div>
                    <div class="table-pack">
                        <div class="tr">
                            <div class="th-l">进车数</div>
                            <div class="th-r">{{timmingData.busIn}}</div>
                        </div>
                        <div class="tr">
                            <div class="th-l">出车数</div>
                            <div class="th-r">{{timmingData.busOut}}</div>
                        </div>
                        <div class="info">
                            设备报警信息：
                            <div class="line"></div>
                            <swiper :options="contentSwiperOption" ref="contentSwiper">
                                <swiper-slide v-for="(item, index) in warningList" :key="index">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{warningList[index].name}}：{{warningList[index].info}}</swiper-slide>
                            </swiper>
                        </div>
                        <div class="time">时间：{{ timeNow }}</div>
                    </div>
                </div>
            </swiper-slide>
            <swiper-slide>
                <div class="logo-pack">
                    <Logo></Logo>
                </div>
            </swiper-slide>
            <swiper-slide>
                <div class="green-future-pack">
                    <GreenFuture></GreenFuture>
                </div>
            </swiper-slide>
        </swiper>
    </div>
</template>

<script>
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    import Logo from './components/Logo'
    import GreenFuture from './components/GreenFuture'
    import Moment from 'moment'

    let self = null
    export default {
        name: 'StationOne',
        components: {
            swiper,
            swiperSlide,
            Logo,
            GreenFuture
        },
        data () {
            return {
                // 实时数据
                timmingData: {},
                // 报警数据
                warningList: [],
                width: 0,
                height: 0,
                zoom: 'scale(0)',
                // 屏幕显示当前时间
                timeNow: '',
                // 定时器
                timer: '',
                // Data轮询定时器
                dataTimer: '',
                // 内容swiper配置信息
                contentSwiperOption: {
                    autoplay: {
                        delay: 5000
                    }
                },
                // 外层swiper配置
                outSwiperOption: {
                    autoplay: {
                        delay: 5000
                    },
                    effect: 'fade',
                    on: {
                        slideChange () {
                            // 当为第一屏是时间为5s切换，其他屏为3s切换
                            if (this.activeIndex === 0) {
                                self.$nextTick(() => {
                                    self.$refs.outSwiper.swiper.params.autoplay.delay = 5000
                                })
                            } else {
                                self.$nextTick(() => {
                                    self.$refs.outSwiper.swiper.params.autoplay.delay = 3000
                                })
                            }
                        }
                    }
                }
            }
        },
        methods: {
            // 实时时间
            judgeTimeNow () {
                this.timeNow = Moment().format('YYYY-MM-DD HH:mm:ss')
                this.timer = setInterval(() => {
                    this.timeNow = Moment().format('YYYY-MM-DD HH:mm:ss')
                }, 1000)
            },
            //获取工位实时信息
            getData () {
                this.$fetch('led-controller/ledInfo-get', {ledNo: '1'}).then(res => {
                    this.timmingData = res;
                    this.warningList = res.warningList;
                })
            }
        },
        mounted () {
            setTimeout(() => {
                self = this
                this.getData()
                // 实时时间
                this.judgeTimeNow()
                this.dataTimer = setInterval(() => {
                    this.getData()
                }, 60000)
                this.width = document.body.offsetWidth
                this.height = document.body.offsetHeight
                this.zoom = `scale(${this.width / 1710})`
            }, 0)
        },
        beforeDestroy () {
            if (this.timer) {
                clearInterval(this.timer);  //在Vue实例销毁前，清除定时器
            }
            if (this.dataTimer) {
                clearInterval(this.dataTimer);  //在Vue实例销毁前，清除定时器
            }
        }
    }
</script>

<style lang="scss" scoped>
    .container {
        width: 100%;
        height: 100%;
        background-color: #111;
        .page-pack {
            width: 1710px;
            height: 860px;
            background-color: #111;

            .title-pack {
                width: 1710px;
                height: 120px;
                text-align: center;
                color: red;
                line-height: 120px;
                font-weight: bold;
                font-size: 110px;
            }

            .table-pack {
                overflow: hidden;

                .tr {
                    width: 1710px;
                    height: 152px;

                    .th-l {
                        width: 853px;
                        height: 150px;
                        border-top: 2px solid red;
                        border-right: 2px solid red;
                        float: left;
                        text-align: center;
                        color: red;
                        line-height: 150px;
                        font-weight: bold;
                        font-size: 100px;
                    }

                    .th-r {
                        width: 855px;
                        height: 150px;
                        border-top: 2px solid red;
                        float: left;
                        text-align: center;
                        color: red;
                        line-height: 150px;
                        font-weight: bold;
                        font-size: 100px;
                    }

                }

                .info {
                    width: 1710px;
                    height: 350px;
                    border-top: 2px solid red;
                    color: red;
                    font-weight: bold;
                    font-size: 90px;
                    .line {
                        height: 20px;
                    }
                    .swiper-slide{
                        word-wrap: break-word;
                        word-break: break-all;
                        font-size: 80px;
                    }
                }

                .time {
                    width: 1710px;
                    height: 80px;
                    border-top: 2px solid red;
                    color: red;
                    font-weight: bold;
                    line-height: 80px;
                    font-size: 70px;
                }
            }
        }
        .logo-pack {
            width: 1710px;
            height: 860px;
            background-color: rgb(255,255,255);
        }
        .green-future-pack {
            width: 1710px;
            height: 860px;
            background-color: rgb(255,255,255);
        }
    }
</style>
