<template>
  <div class="app-orderMessageBox" ref="app_orderMessageBox">
    <div class="theme-card">
      <div class="title"><span>订单消息</span></div>
      <div class="content">
        <!--<table class="orderMessageTb">-->
          <!--<tr>-->
            <!--<td>-->
              <!--<table class="tbHead">-->
                <!--<tr><td><div class="orderImgCom orderNum"></div></td><td>订单编号</td></tr>-->
              <!--</table>-->
            <!--</td>-->
            <!--<td>-->
              <!--<table class="tbHead">-->
                <!--<tr><td><div class="orderImgCom orderPark"></div></td><td>停车场</td></tr>-->
              <!--</table>-->
            <!--</td>-->
            <!--<td>-->
              <!--<table class="tbHead">-->
                <!--<tr><td><div class="orderImgCom orderMoney"></div></td><td>收费金额</td></tr>-->
              <!--</table>-->
            <!--</td>-->
          <!--</tr>-->
          <!--<tr>-->
            <!--<td colspan="3">-->
              <!--<div class="orderListBox" id="orderListBox">-->
                <!--<marquee class="marqueeStyle"  direction="up" behavior="scroll" scrollamount="2" onMouseOut="this.start()" onMouseOver="this.stop()" scrolldelay="0" loop="-1"   >-->
                  <!--<div class="orderListBox" v-html="orderList"></div>-->
                <!--</marquee>-->
              <!--</div>-->
            <!--</td>-->
          <!--</tr>-->
        <!--</table>-->
        <ul class="news-wrap">
          <li class="orderNum">订单编号</li>
          <li class="orderPark">停车场</li>
          <li class="orderMoney">收费金额</li>
        </ul>
        <div class="nwwest-roll  news-wrap" id="nwwest-roll">
          <ul id="roll-ul">
            <li v-for="item in list" ref="rollul" :class="{anim:animate==true}">
              <div :title="item.orderId">{{item.orderId}}</div>
              <div :title="item.plName">{{item.plName}}</div>
              <div :title="item.orderActFee">{{item.orderActFee|formatMoney}}</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import common from '../../api/common'
  export default {
    name: "orderMessage",
    data() {
      return {
        orderList:"",//公告列表
        //marqueeHeight: '100%',
        name: '订单公告',
        animate: true,
        list: []
      }
    },
    created() {
      this.axios.post('urban/intelligence/orderPark/queryLastOrderPark',{
        orgIds: [10003,10005]
      }).then((response)=>{
        let  data = response.data.data
        this.list = data;
        setInterval(this.scroll, 2000)
      }).catch((response)=>{
        console.log(response);
      })

    },
    methods: {
      scroll() {
        this.animate = !this.animate;
        var that = this; // 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向
        setTimeout(function () {
          that.list.push(that.list[0]);
          that.list.shift();
          that.animate = !that.animate;  // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
        }, 0)
      }
    },
    filters:{
      formatMoney: function (value) {
        return (value/100).toFixed(2)+' 元'
      }
    }
  }
</script>

<style scoped  lang="scss">
  .app-orderMessageBox {
    width: 100%;
    .content{
      padding: 0;
    }
    .theme-card{
      height: 100%;
    }
    .news-wrap{
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      li{
        height: 40px;
        float: left;
        padding-left: 0;
        padding-left: 30px;
        background-size: 14px 14px;
        background-position: 10px center;
        background-repeat: no-repeat;
        list-style: none;
        overflow: hidden;
      }
      .orderNum{
        width: 80px;
        background-image: url(../../images/com/orderNum.svg) ;
      }
      .orderMoney{
        width: 80px;
        background-image: url(../../images/com/orderMoney.svg) ;
      }
      .orderPark{
        width: calc(100% - 250px);
        background-image: url(../../images/com/orderPark.svg) ;
      }

    }

    .nwwest-roll {
      width: 100%;
      height: calc(100% - 60px);
      overflow: hidden;
      transition: all 0.5s;
      li{
        width: 100%;
        height: 26px;
        line-height: 26px;
        font-size: 12px;
        padding-left: 10px;
        color: #fff;
        background:rgba(255,255,255,.1);
        margin-bottom: 10px;
          div{
            float: left;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            &:nth-of-type(1){
              width: 110px;
            }
            &:nth-of-type(2){
              width: calc(100% - 220px);
            }
            &:nth-of-type(3){
              width: 80px;
            }

          }
      }
    }
  }
  .anim {
     transition: all 0.5s;

  }
</style>
