<!--
 * @Author: daidai
 * @Date: 2022-03-01 15:27:58
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-05-07 11:24:14
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\right-center.vue
-->
<template>
  <div v-if="pageflag" class="right_center_wrap beautify-scroll-def">
     <ul class="right_center ">
       <li class="right_center_item" v-for="(item, i) in list" :key="i">
		 <div class="dibu" v-if="i<2"></div>
         <span class="orderNum">{{item.name}}</span>
         <div class="inner_right">
           <div class="flex">
             <div class="info">
			   <span class="nums zhuyao"> {{ item.saleNums }}</span>
               <span class="labels">销售数量</span>
             </div>
             <div class="info">
               <span class="nums warning"> {{ item.salesAmount | montionFilter }}</span>
			   <span class="labels">销售金额</span>
             </div>
           </div>
         </div>
       </li>
     </ul>
  </div>
  <Reacquire v-else @onclick="getData" style="line-height:200px" />

</template>

<script>
import { currentGET } from 'api/modules'
export default {
  components: {},
  data() {
    return {
      list: [],
      pageflag: true,
    };
  },
  computed: {
  },
  created() {
    this.getData()
  },
  mounted() { },
  methods: {
    getData() {
      this.pageflag = true
      // this.pageflag =false
      currentGET('big5', { limitNum: 50 }).then(res => {
        console.log('实时预警', res);
        if (res.success) {
          this.list = res.data.list
        } else {
          this.pageflag = false
          this.$Message.warning(res.msg)
        }
      })
    },

  },
};
</script>
<style lang='scss' scoped>
.right_center {
  width: 100%;
  height: 100%;

  .right_center_item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    padding: 42px 15px;
    font-size: 14px;
    color: #fff;
	position: relative;
	
	.dibu {
	  position: absolute;
	  height: 2px;
	  width: 104%;
	  background-image: url("../../assets/img/zuo_xuxian.png");
	  bottom: 0;
	  left: -2%;
	  background-size: cover;
	}
	
    .orderNum {
      margin: 0 20px;
	  font-size: 35px;
	  border:3px solid rgba(0, 170, 255, 0.5);
	  border-radius: 200px;
	  padding: 15px;
	  color: rgba(0, 170, 255, 0.5);
    }

    .inner_right {
      height: 100%;
      width: 400px;
      flex-shrink: 0;
      line-height: 1.5;
    }

    .info {
	  width: 45%;
      margin-right: 10px;
      display: flex;
      align-items: center;
	  flex-direction: column;
	  justify-content: center;
      .labels {
        flex-shrink: 0;
        font-size: 16px;
        color: rgba(255, 255, 255, 0.6);
      }
	  .nums{
		  font-size: 40px;
	  }
      .zhuyao {
        color: #00aaff;
      }
      .ciyao {
        color: rgba(255, 255, 255, 0.8);
      }
      .warning {
        color: #E6A23C;
      }
    }

  }
}

.right_center_wrap {
  overflow: hidden;
  width: 100%;
  height: 500px;
}

.overflow-y-auto {
  overflow-y: auto;
}
</style>