<template>
<div class="container">
    <div class="page-pack" :style="{transform: zoom}" style="transform-origin: 0 0">
      <swiper :options="swiperOption2">
          <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>&nbsp;</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>
  </div>
</div>
</template>

<script>
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    import Moment from 'moment'
    export default {
        name: 'StationSurfaceVarnish',
        components: {
            swiper,
            swiperSlide
        },
        data () {
            return {
                // Data轮询定时器
                dataTimer: '',
                mockArray: [0, 1, 2, 3, 4, 5, 6, 7],
                // 工位实时数据
                timmingData: {},
                // 报警数据
                warningList: [],
                width: 0,
                height: 0,
                zoom: 'scale(0)',
                // 屏幕显示当前时间
                timeNow: '',
                // 定时器
                timer: '',
                // swiper配置信息
                swiperOption: {
                    autoplay: {
                        delay: 5000 //轮播频率 5s
                    }
                },
                swiperOption2: {
                    autoplay: {
                        delay: 10000 //轮播频率 5s
                    }
                },
                // 面清漆室实时数据
                roomInfoList: [],
                reponse: [
                    {
                        name: '喷漆飞机1',
                        stationState: '工作',
                        workingHours: '60'
                    },
                    {
                        name: '喷漆飞机2',
                        stationState: '工作',
                        workingHours: '60'
                    },
                    {
                        name: '喷漆飞机3',
                        stationState: '工作',
                        workingHours: '60'
                    },
                    {
                        name: '喷漆飞机4',
                        stationState: '工作',
                        workingHours: '60'
                    },
                    {
                        name: '喷漆飞机5',
                        stationState: '工作',
                        workingHours: '60'
                    },
                    {
                        name: '喷漆飞机6',
                        stationState: '工作',
                        workingHours: '60'
                    },
                    {
                        name: '喷漆飞机7',
                        stationState: '工作',
                        workingHours: '60'
                    },
                    {
                        name: '喷漆飞机8',
                        stationState: '工作',
                        workingHours: '60'
                    },
                    {
                        name: '喷漆飞机9',
                        stationState: '工作',
                        workingHours: '60'
                    },
                    {
                        name: '喷漆飞机10',
                        stationState: '工作',
                        workingHours: '60'
                    },
                    {
                        name: '喷漆飞机11',
                        stationState: '工作',
                        workingHours: '60'
                    },
                    {
                        name: '喷漆飞机12',
                        stationState: '工作',
                        workingHours: '60'
                    },
                    {
                        name: '喷漆飞机13',
                        stationState: '工作',
                        workingHours: '60'
                    },
                    {
                        name: '喷漆飞机14',
                        stationState: '工作',
                        workingHours: '60'
                    },
                    {
                        name: '喷漆飞机14',
                        stationState: '工作',
                        workingHours: '60'
                    },
                    {
                        name: '喷漆飞机15',
                        stationState: '工作',
                        workingHours: '60'
                    },
                    {
                        name: '喷漆飞机16',
                        stationState: '工作',
                        workingHours: '60'
                    }
                ]
            }
        },
        methods: {
            //获取工位实时信息
            getData () {
                this.$fetch('led-controller/ledInfo-get', {ledNo: '6'}).then(res => {
                    this.timmingData = _.cloneDeep(res);
                    this.roomInfoList = _.cloneDeep(res.roomInfoList);
                    this.warningList = _.cloneDeep(res.warningList)
                    console.log(this.roomInfoList.length)
                    console.log(res)
                    for (let item of this.roomInfoList) {
                        console.log('item', item)
                        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(() => {
                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: 100px;
                text-align: center;
                color: yellow;
                line-height: 100px;
                font-weight: bold;
                font-size: 60px;
            }

            .table-pack {
                overflow: hidden;

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

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

                    .th-r {
                        width: 855px;
                        height: 100px;
                        border-top: 2px solid yellow;
                        float: left;
                        text-align: center;
                        color: yellow;
                        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;
                    .swiper-slide{
                        word-wrap: break-word;
                        word-break: break-all;
                    }
                }

                .time {
                    width: 1710px;
                    height: 100px;
                    border-top: 2px solid yellow;
                    color: yellow;
                    font-weight: bold;
                    line-height: 100px;
                    font-size: 60px;
                }
            }
            .sprayDrying {
                width: 1710px;
                height: 860px;
                background-color: #111;

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

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

                            .th-1,.th-2,.th-3,.th-4,.th-5,.th-6 {
                                width: 600px;
                                height: 60px;
                                border-top: 2px solid yellow;
                                border-right: 2px solid yellow;
                                float: left;
                                text-align: center;
                                color: yellow;
                                line-height: 60px;
                                font-weight: bold;
                                font-size: 50px;
                            }
                            .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 yellow;
                                float: left;
                                text-align: center;
                                color: yellow;
                                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 yellow;
                                border-right: 2px solid yellow;
                                float: left;
                                text-align: center;
                                color: yellow;
                                line-height: 75px;
                                font-weight: bold;
                                font-size: 40px;
                            }
                            .nth-2 {width: 14%;}
                            .nth-3 {
                                width: 19.3%;
                                border-right: 2px solid yellow;
                            }
                            .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 yellow;
                                float: left;
                                text-align: center;
                                color: yellow;
                                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: 100px;
                            border-top: 2px solid yellow;
                            color: yellow;
                            font-weight: bold;
                            line-height: 100px;
                            font-size: 60px;
                    // }
                }
            }
        }
    }
</style>