<template>
    <!-- 隐患通报 -->
    <div class="hidangerinfo">
        <!--<i class="iTop"></i>-->
        <div class="title">
            <span>隐患通报</span>
        </div>
        <div class="content"  >
            <vue-seamless-scroll v-if="dataList.length > 0" :data="dataList" :class-option="classOption" @copy-data="dataList = dataList.concat(dataList)"
                class="warp" id="warp2">
                <div class="box" v-for="(item,index) in dataList" :key="index" :class="item.djs == '超过期限' ? 'overdue_' : ''" >
                    <div class="boxTop" >
                        <div class="boxTLeft" >
                            <p><i></i><span>{{item.title}}</span></p>
                        </div>
                        <div class="boxTRight">
                            <p>{{item.groupName}}</p>
                        </div>
                    </div>
                    <div class="boxBottom" >
                        <div class="boxBLeft" >
                            <div class="time" v-if="item.djs != '超过期限' && item.djs">
                                <p>{{item.djs}}</p>
                            </div>
                            <div class="time overdue" v-else  >
                                <p>超过期限</p>
                            </div>
                        </div>
                        <div class="boxBRight">
                            <p><span style="opacity:0">  {{nub}} </span>{{item.personLiable}}</p>

                        </div>
                    </div>

                </div>
            </vue-seamless-scroll>
            <p v-else class="noData">暂无内容</p>
        </div>
    </div>
</template>
<script>
  // leftTime倒计时插件
  import './../../../../static/js/leftTime.min.js'
export default {
    name: "hidangerinfo",
    data() {
        return {
            nub:0,
            dataList:[],
            intervalArr: [] //定义一个定时器数组
        }
    },
    computed: {
        // 无缝滚动插件控制
        classOption: function () {
            return {
                step: 0.6,              // 速度
                limitMoveNum: 3,        // 最小滚动数量
                autoPlay: true,
                openWatch: true
            };
        }
    },
    mounted(){

        $(window).resize(function(){
            $('#warp2').children("div").css('width','100%')
        });

      this.$nextTick(() => {
        this.getDataFn();
      })
    },
    methods:{
        getDataFn(){
          let _this = this;
            let obj = {
                gId:this.$port.gId,
                cId:this.$port.cId,
                path:this.$api.hiddenDangerBulletin,
            }

            this.$axios.AxiosMethods("get","3rd/bigScreenData/bigScreenMessage",obj,function (res) {
                _this.nub = 0;
                let data = JSON.parse(res.data);
                /*console.log('隐患通报res___________________________________',JSON.parse(res.data))
                console.log('隐患通报res___________________________________',data.hiddenDangerBulletin[0])*/

                _this.dataList = data.hiddenDangerBulletin[0];
                // _this.$store.commit('setHdangerTongbaoTotalNum', _this.dataList.length)

                if(_this.dataList.length > 0){
                  dataListFn();
                }

            });

            this.$websocketFn(obj,function (res) {
                let data = JSON.parse(res.data);
                // console.log('隐患通报websocketFn___________________________',data)
                // _this.dataList = [];
                _this.dataList = data.hiddenDangerBulletin[0]; // ??????????????????????
                // _this.$store.commit('setHdangerTongbaoTotalNum', _this.dataList.length)

                if(_this.dataList.length > 0){
                  dataListFn();
                }
            });

            function dataListFn() {
              //清除倒计时定时器
              if(_this.intervalArr.length > 0){
                for (let i = 0; i < _this.intervalArr.length; i++){
                  console.log(_this.intervalArr[i])
                  if(_this.intervalArr[i]){
                    window.clearInterval(_this.intervalArr[i]);
                  }
                }
              }

              _this.intervalArr =[] // 置空定时器数组

              for (let i = 0; i < _this.dataList.length; i++) {
                var nInterval = 0
                _this.intervalArr.push(nInterval);
                let deadline = _this.dataList[i]["time"];
                shijiancha(deadline, i, _this);
              }
            }

            function shijiancha(e, n, _this) {
              _this.intervalArr[n] = $.leftTime(e,function(d){
                // console.log(d, d.status)
                var timeText = ''
                if(d.status){
                  //d.status 状态 值true||false,倒计时是否结束
                  //d.d 天
                  //d.h 时
                  //d.m 分
                  //d.s 秒
                  timeText = d.d+'天'+d.h+'小时'+d.m+'分'+d.s+'秒';

                }else{
                  timeText = '超过期限';
                }
                // console.log(timeText)
                _this.$set(_this.dataList[n], 'djs', timeText)

                /*if(n ==0){
                  console.log(_this.dataList[0]["djs"]);
                }*/
              });
            }
        },
       /* shijiancha(e, n){
            $.leftTime(e,function(d){
            // console.log(d, d.status)
            var timeText = ''
            if(d.status){
              //d.status 状态 值true||false,倒计时是否结束
              //d.d 天
              //d.h 时
              //d.m 分
              //d.s 秒
              timeText = d.d+'天'+d.h+'小时'+d.m+'分'+d.s+'秒';

            }else{
              timeText = '超过期限';
            }
            // console.log(timeText)
            _this.$set(_this.dataList[n], 'djs', timeText)
            // clearInterval(e);
            if(n ==0){
              console.log(_this.dataList[0]["djs"]);
            }
          });

        },*/
    }
}
</script>
<style lang="less" scoped>
    .hidangerinfo{
        font-size: 0.1rem;
        position: relative;
        margin-top: 0.24rem;
        /*border:0.01rem solid rgba(0,122,234,0.6);*/
        .iTop{
            width: 0.1rem;
            height: 0.1rem;
            display: block;
            position: absolute;
            background: url('../../../assets/image/img_jiao.png');
            left: 0;
        }
        .title{
            font-weight: bold;
            line-height: 0.52rem;
            font-size: 0.16rem;
            color: #fff;
            padding-left: 0.17rem;
            text-align-last: left;
            /*border-bottom:0.01rem solid rgba(0,122,234,0.6);
            background:linear-gradient(90deg,rgba(0,54,128,1) 0%, rgba(0,30,63,1)  100%);*/
            background: url('../../../assets/image/bg2_03.png');
            background-size: 100% 100%;
        }
        .content{
            width: 100%;
            height: 3.2rem;
            overflow: hidden;
            padding: 0.1rem 0.08rem 0.1rem 0.08rem;
            background: url('../../../assets/image/bg2_05.png');
            background-size: 100% 100%;
            box-sizing: border-box;

            .box{
                height: 0.7rem;
                color: #fff;
                padding: 0.1rem 0;
                margin-bottom: 0.1rem;
                /*background-color: #00162F;*/
                background: rgba(0, 17, 36, 0.4);
                p{
                    font-size: 0.14rem;
                }
                .boxTop{
                    display: flex;
                    /*line-height: 0.35rem;*/
                    justify-content: space-between ;
                    .boxTLeft{
                        p{
                            /*position: relative;*/
                            i{
                              width: 10px;
                              height: 10px;
                              border-radius: 50%;
                              display: inline-block;
                              /* position: absolute; */
                              /* left: 0.1rem; */
                              /* top: 0.1rem; */
                              background-color: #FE8204;
                              margin-left: 0.1rem;
                            }
                            span{
                                display: inline-flex;
                                font-size: 14px;
                                margin-left: 0.1rem;
                                width: 2.6rem;
                                height: 0.34rem;
                                text-align: left;
                                overflow: hidden;
                                font-weight: bold;
                            }
                        }
                    }
                    .boxTRight{
                        p{
                            width: 1.2rem;
                            height: 0.34rem;
                            overflow: hidden;
                            text-align: right;
                            padding-right: 10px;
                            font-size: 0.12rem;
                        }
                    }

                }
                .boxBottom{
                    display: flex;
                    // margin-top: 0.05rem;
                    justify-content: space-between ;
                    .boxBRight{
                        p{
                            font-size: 0.12rem;
                            padding-right: 10px;
                            line-height: 0.35rem;
                        }
                    }
                    .time{
                        p{
                            font-size: 0.12rem;
                            margin-left: 0.3rem;
                            height: 0.3rem;
                            line-height: 0.3rem;
                            padding: 0 14px;
                            display: inline-block;
                            border-radius: 0.25rem;
                            background-color: #0F4154;
                            border:0.01rem solid rgba(66,197,191,1);
                        }
                    }
                    .overdue{
                        p{
                            color: #FF2025;
                            padding: 0 14px;
                            line-height: 0.3rem;
                            background-color: #6A1827;
                            border:0.01rem solid #FF2025;
                        }
                    }
                }

            }
            .overdue_{
              /*background-color: #3D172A !important;*/
              background: rgba(113, 1, 57, 0.4);
            }
            .noData{
                color: #fff;
                font-size: 0.18rem;
                line-height: 1.85rem;
                text-align: center;
                height: 3rem;
            }
        }
    }
</style>

