<template>
    <!-- 隐患通报 -->
    <div class="hidangerinfo">
        <!--<i class="iTop"></i>-->
        <div class="title">
            <span>隐患通报</span>
        </div>
        <div class="content" id="box" >
          <div v-if="dataList.length > 0">
            <div id="list1">
              <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-if="item.djs == '超过期限'">
                      <p>超过期限</p>
                    </div>
                  </div>
                  <div class="boxBRight">
                    <p><span style="opacity:0">  {{nub}} </span>{{item.personLiable}}</p>
                  </div>
                </div>

              </div>
            </div>
            <!--多复制一份 防止倒计时显示数据出现一段时间的不变化-->
            <div id="list2">
              <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.personLiable}}</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-if="item.djs == '超过期限'">
                      <p>超过期限</p>
                    </div>
                  </div>
                  <div class="boxBRight">
                    <p><span style="opacity:0">  {{nub}} </span>{{item.title}}</p>
                  </div>
                </div>

              </div>
            </div>
          </div>
          <p v-else class="noData">暂无内容</p>
        </div>
    </div>
</template>
<script>
export default {
    name: "hidangerinfo",
    data() {
        return {
            nub:0,
            dataList:[],
        }
    },
    computed: {
        // 无缝滚动插件控制
        classOption: function () {
            return {
                step: 1,              // 速度
                limitMoveNum: 1,        // 最小滚动数量
                autoPlay: true,
                // singleHeight: 26,
                myTimer: null
            };
        }
    },
    mounted(){
        this.getDataFn();
        $(window).resize(function(){
            $('#warp2').children("div").css('width','100%')
        });
    },
    methods:{
        goUpMove(){
          var box=document.getElementById("box");
          var l1=document.getElementById("list1");
          var l2=document.getElementById("list2");

          var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
          // var mybox= $("#box").scrollTop()

          // l2.innerHTML=l1.innerHTML;//克隆list1的数据，使得list2和list1的数据一样
          function scrollup(){
            if(box.scrollTop>=l1.offsetHeight){ //滚动条距离顶部的值恰好等于list1的高度时，达到滚动临界点，此时将让scrollTop=0,让list1回到初始位置，实现无缝滚动
              box.scrollTop=0;
            }else{
              box.scrollTop++;
            }

            /*if(scrollTop+box.getBoundingClientRect().top >= l1.offsetHeight){ //滚动条距离顶部的值恰好等于list1的高度时，达到滚动临界点，此时将让scrollTop=0,让list1回到初始位置，实现无缝滚动
              box.scrollTop=0;
            }else{
              box.scrollTop++;
            }*/
          }

          var scrollMove=setInterval(scrollup,40);//数值越大，滚动速度越慢

          //鼠标经过时，滚动停止
          box.onmouseover=function(){
            clearInterval(scrollMove)
          }

          //鼠标离开时，滚动继续
          box.onmouseout=function(){
            scrollMove=setInterval(scrollup,40);
          }
        },
        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])
                console.log(_this.$commonFun.timeFn(1574837280000))
                console.log(_this.initTimeDown(1574837280000))*/

                _this.dataList = data.hiddenDangerBulletin[0];
                if(_this.dataList.length > 0){
                  dataListFn();
                  _this.$nextTick(function () {
                    _this.goUpMove()
                  })
                }
            });

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

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

                }
            });

            function dataListFn() {
              // 清空上一次定时器
              if(_this.myTimer){
                window.clearInterval(_this.myTimer);
              }

              _this.nub = 0;
              _this.myTimer = setInterval(() => {
                  let arr = _this.dataList;
                  for (let i = 0; i < arr.length; i++) {
                    let deadline = arr[i]["time"];
                    if(deadline){
                      var mytime = _this.initTimeDown(deadline);
                      _this.$set(_this.dataList[i], 'djs', mytime)
                      /*if(i == 0){
                        console.log(_this.dataList[i].djs)
                      }*/
                    }else{
                      _this.$set(_this.dataList[i], 'djs', '暂无时间')
                    }
                  }
                  _this.nub ++;
              }, 1000);

              console.log(_this.myTimer)
            }
        },
        initTimeDown(e) {
          if (e) {
            // e = e.replace(/\-/g, "/");
            var newDate = new Date();
            var endDate = e;
            var s = parseInt((endDate - Date.parse(newDate)) / 1000);
            if (s <= 0) {
              return "超过期限";
            }
            var day = Math.floor(s / 86400);
            s = s % 86400;
            var hours = Math.floor(s / 3600);
            s = s % 3600;
            var minutes = Math.floor(s / 60);
            s = s % 60;
            var s4 = s;
            if (day >= 1) {
              var str = day + "天" + hours + "小时" + minutes + "分" + s4 + "秒";
            } else if (day < 1) {
              var str = hours + "小时" + minutes + "分" + s4 + "秒";
            } else if (hours >= 1) {
              var str = minutes + "分" + s4 + "秒";
            } else {
              var str = s4 + "秒";
            }
            return str;
          }
        },
        sethiDangerInfo(res){
            res.forEach((ele, index) => {
                ele.djs = this.initTimeDown(ele.time);
            });
        }
    }
}
</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{
            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: 3rem;
            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;
            /*.overdue_{
                background-color: #3D172A !important;
            }*/
            .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: 0.14rem;
                          margin-left: 0.1rem;
                          width: 2.6rem;
                          height: 0.34rem;
                          text-align: left;
                          overflow: hidden;
                        }
                      }
                    }
                    .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>

