<template>
    <div class="machine-warning">
        <div class="time-warning-pack">
            <span class="time">{{ currentTime }}</span>
            <span class="week">{{ currentWeekDate }}</span>
            <span class="warning">设备告警数：</span>
            <span class="warning-number">{{ warningList.length }}</span>
        </div>
        <div class="warning-message-pack">
            <div class="table-header">
                <div class="time">
                    <svg-icon icon-class="time"></svg-icon>
                    <span>时间</span>
                </div>
                <div class="machine">
                    <svg-icon icon-class="machine"></svg-icon>
                    <span>设备</span>
                </div>
                <div class="info">
                    <svg-icon icon-class="pencil"></svg-icon>
                    <span>描述</span>
                </div>
            </div>
            <div class="table-body">
                <div 
                    class="tr"
                    v-for="(item, index) in warningList"
                    :key="index">
                    <div class="th-time">{{item.time}}</div>
                    <div class="th-machine">{{item.equipName}}</div>
                    <div class="th-pencil">{{item.info}}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Moment from 'moment'

    export default {
        props: {
            pollingRequestTime: {}
        },
        watch: {
            pollingRequestTime (newVal, oldVal) {
                // 请求设备异常列表
                this.getMachineWarningList()
                // 时间处理
                this.judgeTime()
            }
        },
        data () {
            return {
                // 报警信息列表
                warningList: [],
                // 当前时间
                currentTime: '',
                // 当前星期
                currentWeekDate: ''
            }
        },
        methods: {
            // 请求设备异常列表
            getMachineWarningList () {
                this.$fetch('report-controller/warningList-get', {}).then(response => {
                    this.warningList = _.cloneDeep(response.slice(0, 17))
                })
            },
            // 时间处理
            judgeTime () {
                let now = new Date()
                let weekDate = Moment().day()
                this.currentTime = Moment(now).format('YYYY-MM-DD')
                switch (weekDate) {
                case 1:
                    this.currentWeekDate = '星期一'
                    break
                case 2:
                    this.currentWeekDate = '星期二'
                    break
                case 3:
                    this.currentWeekDate = '星期三'
                    break
                case 4:
                    this.currentWeekDate = '星期四'
                    break
                case 5:
                    this.currentWeekDate = '星期五'
                    break
                case 6:
                    this.currentWeekDate = '星期六'
                    break
                case 7:
                    this.currentWeekDate = '星期天'
                    break
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .machine-warning {
        width: 534px;
        height: 881px;
        position: absolute;
        top: 166px;
        right: 57px;
        overflow: hidden;

        .time-warning-pack {
            width: 534px;
            height: 60px;
            // background-color: rgba(1,1,1,0.5);
            margin-top: 27px;
            line-height: 60px;
            .time {
                color: #3270e1;
                font-size: 18px;
                padding-left: 30px;
            }
            .week {
                color: #3270e1;
                font-size: 18px;
                padding-left: 5px;
            }
            .warning {
                color: #3270e1;
                font-size: 18px;
                padding-left: 20px;
            }
            .warning-number {
                color: #ee295c;
                font-size: 18px;
            }
        }

        .warning-message-pack {
            margin-top: 10px;
            width: 474px;
            height: 767px;
            padding: 0 30px;
            // background-color: rgba(1,1,1,0.5);
            .table-header {
                height: 40px;
                color: #00b4ff;
                font-weight: bold;
                font-size: 20px;
                line-height: 40px;
                div {
                    float: left;
                    span {
                        padding-left: 5px;
                    }
                }
                .time {
                    width: 120px;
                    padding-left: 30px;
                }
                .machine {
                    width: 120px;
                    padding-left: 10px;
                }
                .info {
                    width: 180px;
                    padding-left: 10px;
                }
            }
            .table-body {
                .tr {
                    div {
                        float: left;
                        height: 40px;
                        line-height: 40px;
                        font-weight: bold;
                        font-size: 18px;
                        color: #3facd9;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }
                    .th-time {
                        width: 120px;
                        padding-left: 30px;
                    }
                    .th-machine {
                        width: 120px;
                        padding-left: 10px;
                    }
                    .th-pencil {
                        width: 180px;
                        padding-left: 10px;
                    }
                }
            }
        }
    }
</style>