<template>
  <div class="order-box">
    <ul>
      <li v-for="(item, index) in dataList" :key="index">
        <span class="name">{{item.enterName}}</span>
        报入 {{item.lineName}} · {{item.lineTeamName}}
        <span class="num">{{item.guestNum}}</span> 人
        <br>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props:['data'],
  data() {
    return {
      dataList: [],
    };
  },watch:{
    data:{
      handler: function (val, oldVal) {
        if (val) {
          this.getData(val);
        }
      }
    }
  },
  mounted() {
    // setInterval(() => {
    //   this.getData();
    // }, 15000);
    this.dataList = this.data;
  },
  methods: {
    getData(val) {
      let obj = val[0]
      var num = Math.floor(Math.random() * (1 - 26) + 26);
      var money = Math.floor(Math.random() * (9000 - 20000) + 15000);
      // let obj = {
      //   name: "华国豪",
      //   line: "出境日本线",
      //   team: "椿山庄假期",
      //   count: num
      // };
      let videoObj={
          txt:'',
          endVideo:''
      }
      if (obj.guestNum < 10) {
        videoObj.txt = `恭喜${obj.enterName}，成功收客${obj.guestNum}人，继续加油吧！`;
      } else if (obj.guestNum < 20) {
        videoObj.txt = `这个厉害！${obj.enterName}收了一个${obj.guestNum}人的大单啊`;
        //videoObj.endVideo='http://img.oytour.com/audio/godlike.mp3'
      } else {
        videoObj.txt = `我的天啊！${obj.enterName}居然收了一个${obj.guestNum}人的大单`;
        //videoObj.endVideo='http://img.oytour.com/audio/legendary.mp3'
      }
      let addTradeInfo = {
        money: money,
        name: obj.enterName
      }
      this.bus.$emit("addVideo",videoObj);
      this.bus.$emit("addTrade", addTradeInfo);
      this.bus.$emit("addpoint",{
        city:'成都市',
        address:obj.Address
      });
      this.dataList.splice(0, 0, obj);
    }
  }
};
</script>
<style>
.order-box {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.order-box ul {
  width: 100%;
}
.order-box ul li {
  padding: 12px 0;
  margin: 0 12px;
  border-top: 1px dashed #242031;
  font-size: 12px;
  color: #5f5d6a;

  overflow: hidden;
}
.order-box ul li.san {
  animation: show 2s linear;
}
@keyframes show {
  0% {
    background: #11172f;
  }
  25% {
    background: transparent;
  }
  50% {
    background: #11172f;
  }
  75% {
    background: transparent;
  }
  100% {
    background: transparent;
  }
}
.order-box ul li:first-child {
  border-top: none;
}
.order-box ul li .name {
  font-size: 14px;
  color: #ddd;
  margin-right: 12px;
}
.order-box ul li .num {
  color: #ddd;
  font-family: "DIN";
  font-weight: bold;
  margin: 0 2px;
  font-size: 14px;
}
</style>
