<template>
  <el-card shadow="always" :style="{height:height}">
    <div class='header'>
      <img src="/static/img/sales.png" alt srcset />
      <span class="header1">实时销售行为分析</span>
      <span class="header2">更新时间：{{nowDate}}</span>
    </div>
    <div>
      <ul style="width:20%;">
        <li class="top top1" style="border-top-left-radius: 10px;border-bottom-left-radius: 10px;">新增客户</li>
        <li class="top2">{{newcustomer}}</li>
        <li class="top3">昨日：{{oldcustomer}}</li>
      </ul>
      <ul style="width:20%;">
        <li class="top top1">新增订单量</li>
        <li class="top2">{{neworder}}</li>
        <li class="top3">昨日：{{oldorder}}</li>
      </ul>
      <ul style="width:20%;">
        <li class="top top1">售后订单量</li>
        <li class="top2">{{newaftersale}}</li>
        <li class="top3">昨日：{{oldaftersale}}</li>
      </ul>
      <ul style="width:20%;">
        <li class="top top1">新客户下单量</li>
        <li class="top2">{{newcustomers}}</li>
        <li class="top3">昨日：{{oldcustomers}}</li>
      </ul>
      <ul style="width:20%;">
        <li class="top top1" style="border-top-right-radius: 10px;border-bottom-right-radius: 10px;">老客户下单量</li>
        <li class="top2">{{newcustomerorder}}</li>
        <li class="top3">昨日：{{oldcustomerorder}}</li>
      </ul>
    </div>
  </el-card>
</template>
<script>
import { getSalesData } from '@/api/dashboard/orderDatas'
export default {
    props: {
        height: {
        type: String,
        default: ''
        },
        nowDate: {
        type: String,
        default: ''
        },
    },
  data() {
    return {
        newcustomer:'',
        oldcustomer:'',
        neworder:'',
        oldorder:'',
        newaftersale:'',
        oldaftersale:'',
        newcustomers:'',
        oldcustomers:'',
        newcustomerorder:'',
        oldcustomerorder:'',
    };
  },
  created() {
      this.getDataList()
  },
  methods: {
      getDataList(){
          return new Promise(resolve=>{
              const params={
                  time:this.nowDate
              }
              getSalesData(params).then(response=>{
                if(response.state=='success'){
                    this.newcustomer=response.newcustomer;//新增客户
                    this.oldcustomer=response.oldcustomer;//昨日新增客户
                    this.neworder=response.neworder;//新增客户下单量
                    this.oldorder=response.oldorder;//昨日新增客户下单量
                    this.newaftersale=response.newaftersale;//售后订单量
                    this.oldaftersale=response.oldaftersale;//昨日订单量
                    this.newcustomers=response.newcustomers;//新客户下单量
                    this.oldcustomers=response.oldcustomers;//昨日新客户下单量
                    this.newcustomerorder=response.newcustomerorder;//老客户下单量
                    this.oldcustomerorder=response.oldcustomerorder;//昨日老客户下单量
                }
            })
          })
      }
  },
};
</script>
<style lang="scss" scoped>
ul{
    float: left;
    padding: 0px;
  li{
    padding: 0;
    margin: 0;
    list-style: none;
    padding: 4px 0px;
    text-align: center;
  }
}
.header{
    .header1{
            font-size: 17px;
            color: #666666;
        }
    .header2{
            font-size: 15px;
            color: #939393;
        }
}
.top{
    background-color: #e4effb;
}
.top1{
  font-size: 15px;
  font-weight: 400;
}
.top2{
  font-size: 20px;
  font-weight: 500;
}
.top3{
  font-size: 13px;
  color: #858585;
  font-weight: 300;
}
</style>