<template>
    <div class="container">
        <div class="page-pack" :style="{transform: zoom}" style="transform-origin: 0 0">
            <swiper :options="swiperOption2" ref="outSwiper">
                <!-- <swiper-slide>
                    <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="swiperOption">
                                    <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>
                  </swiper-slide> -->
                <swiper-slide>
                    <div class="title-pack">{{ timmingData.name }}</div>
                    <div class="sprayDrying">
                        <div class="tr clear-float" :class="roomInfoList.length > 8 ? 'ntr' : ''">
                            <div :class="roomInfoList.length > 8 ? 'nth-1' : 'th-1'"></div>
                            <div :class="roomInfoList.length > 8 ? 'nth-2' : 'th-2'">状态</div>
                            <div :class="roomInfoList.length > 8 ? 'nth-3' : 'th-3'">作业时间</div>
                            <div v-if="roomInfoList.length > 8"
                                 :class="roomInfoList.length > 8 ? 'nth-4' : 'th-4'"></div>
                            <div v-if="roomInfoList.length > 8" :class="roomInfoList.length > 8 ? 'nth-5' : 'th-5'">状态
                            </div>
                            <div v-if="roomInfoList.length > 8" :class="roomInfoList.length > 8 ? 'nth-6' : 'th-6'">
                                作业时间
                            </div>
                        </div>
                        <div class="tr clear-float" v-for="(item, index) in mockArray" :key="index"
                             :class="roomInfoList.length >'8'? 'ntr' : ''">
                            <div :class="roomInfoList.length > 8 ? 'nth-1' : 'th-1'">{{ judgeDataRnder(index) ? roomInfoList[index].name: '' }}</div>
                            <div :class="roomInfoList.length > 8 ? 'nth-2' : 'th-2'">{{ judgeDataRnder(index) ? roomInfoList[index].stationState: '' }}</div>
                            <div :class="roomInfoList.length > 8 ? 'nth-3' : 'th-3'">{{ judgeDataRnder(index) ? `${roomInfoList[index].workingHours}min`: '' }}</div>
                            <div v-if="roomInfoList.length > 8" :class="roomInfoList.length > 8 ? 'nth-4' : 'th-4'">{{ judgeDataRnder(index + 8) ? roomInfoList[index+8].name: '' }}</div>
                            <div v-if="roomInfoList.length > 8" :class="roomInfoList.length > 8 ? 'nth-5' : 'th-5'">{{ judgeDataRnder(index + 8) ? roomInfoList[index+8].stationState: '' }}</div>
                            <div v-if="roomInfoList.length > 8" :class="roomInfoList.length > 8 ? 'nth-6' : 'th-6'">{{ judgeDataRnder(index + 8) ? `${roomInfoList[index+8].workingHours}min`: '' }}</div>
                        </div>
                        <div class="time">时间：{{ timeNow }}</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>
    </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: 'StationSeven',
        components: {
            swiper,
            swiperSlide,
            Logo,
            GreenFuture
        },
        data () {
            return {
                // Data轮询定时器
                dataTimer: '',
                mockArray: [0, 1, 2, 3, 4, 5],
                // 工位实时数据
                timmingData: {},
                // 报警数据
                warningList: [],
                width: 0,
                height: 0,
                zoom: 'scale(0)',
                // 屏幕显示当前时间
                timeNow: '',
                // 定时器
                timer: '',
                // swiper配置信息
                // swiperOption: {
                //     autoplay: {
                //         delay: 5000 //轮播频率 5s
                //     }
                // },
                swiperOption2: {
                    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
                                })
                            }
                        }
                    }
                },
                // 面清漆室实时数据
                roomInfoList: []
            }
        },
        methods: {
            //获取工位实时信息
            getData () {
                this.$fetch('led-controller/ledInfo-get', {ledNo: '7'}).then(res => {
                    this.timmingData = _.cloneDeep(res);
                    this.roomInfoList = _.cloneDeep(res.roomInfoList);
                    this.warningList = _.cloneDeep(res.warningList)
                    for (let item of this.roomInfoList) {
                        if (item.stationState === 'USE') {
                            item.stationState = '使用'
                        }
                        if (item.stationState === 'FREE') {
                            item.stationState = '空闲'
                        }
                    }
                })
            },
            // 实时时间
            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)
            },
            // 判断数据是否需要渲染
            judgeDataRnder (index) {
                if (index < this.roomInfoList.length) {
                    return true
                } else {
                    return false
                }
            }
        },
        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})`
                console.log(this.zoom)
            }, 0)
        },
        beforeDestroy () {
            if (this.timer) {
                clearInterval(this.timer);  //在Vue实例销毁前，清除定时器
            }
            if (this.dataTimer) {
                clearInterval(this.dataTimer);  //在Vue实例销毁前，清除定时器
            }
        }
    }
</script>

<style lang="scss" scoped>
    .container {
        height: 100%;
        width: 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: 100px;
            }

            .table-pack {
                overflow: hidden;

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

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

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

                }

                .info {
                    width: 1710px;
                    height: 454px;
                    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;
                }
            }
            .sprayDrying {
                width: 1710px;
                background-color: #111;

                    .title-pack {
                        // width: 1710px;
                        // height: 100px;
                        text-align: center;
                        color: red;
                        line-height: 120px;
                        font-weight: bold;
                        font-size: 100px;
                    }
                    // .table-pack {
                    //     overflow: hidden;

                        .tr {
                            width: 1708px;
                            // height: 30px;

                            .th-1,.th-2,.th-3,.th-4,.th-5,.th-6 {
                                width: 600px;
                                height: 92px;
                                border-top: 2px solid red;
                                border-right: 2px solid red;
                                float: left;
                                text-align: center;
                                color: red;
                                line-height: 92px;
                                font-weight: bold;
                                font-size: 85px;
                            }
                            .th-2 {width: 506px;}
                            .th-3 {
                                width: 598px;
                                border-right: 0px;
                            }
                            .th-4 {width: 17%;}
                            .th-5 {width: 15%;}
                            .th-6 {width: 17%;}

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

                        }
                        // 数据量大于8条时
                        .ntr {
                            width: 1708px;
                            // height: 30px;

                            .nth-1,.nth-2,.nth-3,.nth-4,.nth-5,.nth-6 {
                                width: 16%;
                                height: 70px;
                                border-top: 2px solid red;
                                border-right: 2px solid red;
                                float: left;
                                text-align: center;
                                color: red;
                                line-height: 75px;
                                font-weight: bold;
                                font-size: 40px;
                            }
                            .nth-2 {width: 14%;}
                            .nth-3 {
                                width: 19.3%;
                                border-right: 2px solid red;
                            }
                            .nth-4 {width: 16%;}
                            .nth-5 {width: 14%;}
                            .nth-6 {
                                width: 19.3%;
                                border-right: none;
                            }

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

                        }

                        // .info {
                        //     width: 1710px;
                        //     height: 454px;
                        //     border-top: 2px solid yellow;
                        //     color: yellow;
                        //     font-weight: bold;
                        //     font-size: 60px;
                        // }

                        .time {
                            width: 1710px;
                            height: 92px;
                            border-top: 2px solid red;
                            color: red;
                            font-weight: bold;
                            line-height: 92px;
                            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>
