<template>
    <div class="testdiv">
        <!-- 看板标题 -->
        <div class="top_title">
            备件库存异常看板
            <img :src="imgLogo" alt class="logo" v-on:click="back"/>
            <div class="times_bg">{{nowTime}}</div>
            <!-- <Icon class="backBtn" type="md-arrow-round-back" size="40" v-on:click="back" /> -->
            <!-- <div class="IconSetting"><img src="../../../static/images/setting.svg" alt @click="setting()"/></div> -->
            <Icon class="backBtn" type="md-arrow-round-back" size="40" v-on:click="back"/>
        </div>
        <!-- 底部 -->
        <div class="middle_bottom">
            <div class="formBox">
                <div class="formMain">
                    <ul class="table_title_bg andonHead">
                        <li>序号</li>
                        <li>备件名</li>
                        <li>备件类型</li>
                        <li>库位</li>
                        <li>当前数量</li>
                        <li>最大库存</li>
                        <li>最小库存</li>
                    </ul>
                    <vue-seamless-scroll :data="orderList"
                                         :class-option="optionSetting"
                                         class="seamless-warp tbaleSlide"
                                         style="width:100%">
                        <ul class="tableDetail">
                            <!-- <tbody> -->
                            <li v-if="orderList.length == 0"></li>
                            <li
                                class="andonBody"
                                v-for="(item,index) in orderList"
                                :key="index"
                                v-else
                            >
                                <div>{{index+1}}</div>
                                <div>{{item.title}}</div>
                                <div>{{item.typename}}</div>
                                <div>{{item.warehouse}}</div>
                                <div v-if="item.sku > item.max_sku" :style="{color:'gold'}">{{item.sku}}</div>
                                <div v-else-if="item.sku < item.max_sku" :style="{color:'#FF80A1'}">{{item.sku}}</div>
                                <div v-else>{{item.sku}}</div>
                                <div>{{item.max_sku}}</div>
                                <div>{{item.mini_sku}}</div>
                            </li>
                            <!-- </tbody> -->
                        </ul>
                    </vue-seamless-scroll>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import echarts from 'echarts'
import vueSeamlessScroll from 'vue-seamless-scroll'
import moment from 'moment'
import { setTimeout, clearTimeout, setInterval, clearInterval } from 'timers'
export default {
    inject: ['reload'], // 接受App那边提供的方法
    components: { // 组件
        vueSeamlessScroll
    },
    data () {
        return {
            imgLogo: require('../../../static/images/siger.png'), // logo
            nowTime: moment(new Date().getTime()).format('YYYY-MM-DD'), // 当前时间
            orderList: [],
            timer: 0, // 定时器
            timeArr: 0
        }
    },
    computed: {
        optionSetting: function () {
            return {
                step: 1, // 数值越大速度滚动越快
                // limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
                hoverStop: true, // 是否开启鼠标悬停stop
                // direction: 0, // 0向下 1向上 2向左 3向右
                // openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 74 // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                // singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                // waitTime: 3000 // 单步运动停止的时间(默认值1000ms)
            }
        }
    },
    watch: {},
    methods: {
        back () {
            this.$router.go(-1)
        },
        initdata () {
            this.axios.request({
                url: '/tpm/Sparepart/GetAlarmSpareparts',
                method: 'get'
            })
                .then(res => {
                    this.orderList = res.data.data
                    // this.orderList=res.data.data.concat(res.data.data,res.data.data)
                })
        }
    },
    created () {

    },
    mounted () {
        if (this.$store.state.user.logo !== '' && this.$store.state.user.logo !== null && this.$store.state.user.logo !== undefined) {
            this.imgLogo = this.$store.state.user.logo
        }
        // 刷新安灯异常信息,定时1分钟执行一次
        if (this.timer) {
            clearInterval(this.timer)
        } else {
            this.initdata()
            this.timer = setInterval(() => {
                this.initdata()
            }, 1000 * 60 * 10)
        }

        if (this.timeArr) {
            clearInterval(this.timeArr)
        } else {
            this.timeArr = setInterval(() => {
                location.reload()
            }, 1000 * 60 * 60 * 2)
        }
    },
    beforeDestroy () {
        clearInterval(this.timer)
        clearInterval(this.timeArr)
    // clearInterval(this.timerx)
    }
}
</script>
<style lang="less" scoped>
    @import url("./index");

    .stackingBar {
        width: 100%;
        height: 270px;
        margin: 50px auto;
    }

</style>
