<template>
    <div class="riskWarning">
      <!--<i class="iTop"></i>-->
      <!-- @click="testBus" -->
      <div class="top-title"  @click="showDetail">
        <span>风险预警</span>
        <span>最新（{{dataList.length}}）</span>
      </div>
      <div class="contentList">
        <vue-seamless-scroll v-if="dataList.length > 0" :data="dataList" :class-option="classOption" @copy-data="dataList = dataList.concat(dataList)"
                             class="warp" id="warp2">
          <ul>
            <li v-for="(item,index) in dataList" :key="index">
              <p>
              <span class="title">
              （{{index+1}}）{{item.riskPointName}}
              </span>
                <span class="newstime">
                {{$commonFun.filtrationTimeCommon(new Date(item.createdTime))}}
              </span>
              </p>
              <p>
                {{item.causeDesc}}
              </p>
            </li>
          </ul>
        </vue-seamless-scroll>
        <p v-else class="noData">暂无内容</p>
      </div>
    </div>
</template>

<script>
  export default {
        name: "riskWarning",
        data() {
            return {
              dataList: []
            }
        },
        created() {
        },
        mounted(){
          this.getRiskPointControlRecord()
        },
        computed: {
          // 无缝滚动插件控制
          classOption: function () {
            return {
              step: 0.6,              // 速度
              limitMoveNum: 4,        // 最小滚动数量
              autoPlay: true
            };
          }
        },
        methods: {
          getRiskPointControlRecord(){
            let that = this
            let obj = {
              gId:this.$route.query.gId,
              cId:this.$route.query.cId,
              path: 'riskPointControlRecord'
            }
            this.$axios.AxiosMethods("get","3rd/bigScreenData/bigScreenMessage",obj,function (res) {
              // console.log(JSON.parse(res.data))
              that.dataList = JSON.parse(res.data).riskPointControlRecord[0];

            });
            this.$websocketFn(obj,function (res) {
              let data = JSON.parse(res.data);
              // console.log('风险预警websocketFn________________',res);
              that.dataList = data.riskPointControlRecord[0];

              that.$store.commit('setChangeMapList', data)
            });
          },
          showDetail(){
            this.$router.push({
                path:"/riskwarning/riskwarning",
                query:{
                    ...this.$port,
                    page: 5
                }
            });
            this.$store.commit('changeIndex', 5)
          },
          // testBus(){
          //   eventBus.$emit('firstTest', 'llll')
          // }
        }
    }
</script>

<style scoped lang="less" type="text/less">
.riskWarning{
  font-size: 0.1rem;
  margin-top: 0.24rem;
  position: relative;
  /*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;
  }
  .top-title{
    font-weight: bold;
    line-height: 0.52rem;
    font-size: 0.16rem;
    color: #fff;
    padding-left: 0.17rem;
    display: flex;
    justify-content: space-between ;
    /*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%;
    
    span:nth-child(2) {
      margin-right: 0.15rem;
      cursor: pointer;
    }
  }
  .contentList{
    height: 3rem;
    overflow: hidden;
    background: url('../../../assets/image/bg2_05.png');
    background-size: 100% 100%;
    ul{
      overflow: hidden;
      padding: 5px 8px;
      li{
        list-style: none;
        border-bottom: 1px dashed #ffffff;
        padding: 5px 0;
        p{
          margin:0;
          color: #ffffff;
          font-size: 0.14rem;
          span{

          }
          span.title{
            text-overflow: ellipsis;
            font-weight: bold;
          }
        }
        p:first-child{
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-orient: horizontal;
          -webkit-box-direction: normal;
          -ms-flex-direction: row;
          flex-direction: row;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          -webkit-box-pack: justify;
          -ms-flex-pack: justify;
          justify-content: space-between;
        }
        p:last-child{
          padding: 5px 10px;
          margin-left: 31px;
          width: 89%;
        }
      }
    }
    .noData{
      color: #fff;
      font-size: 0.18rem;
      line-height: 2rem;
      text-align: center;
    }
  }

}
</style>
