<script>
export default {
  name: "AppRealtimePanel",
  label: "实况面板",
  data() {
    return {
      info: {},
    }
  },
  computed: {
    search: v => v.$storeBoard.search,
    list: v => [
      {label: "总销售", prop: "saleAmt", decimal: 1},
      {label: "常规销售", prop: "commonSaleAmt", decimal: 1},
      {label: "节令销售", prop: "seasonSaleAmt", decimal: 1},
      {label: "有效订单数", prop: "validOrderNum", decimal: 0},
      {label: "常规客单价", prop: "customerUnitPrice"},
      {label: "会员有效订单占比", prop: "memOrderPercent", unit: "%"},
      {label: "报损率", prop: "lossAmtPercent", unit: "%"},
      {label: "报损金额", prop: "lossAmt", decimal: 1},
      {label: "外卖销售占比", prop: "deliveryAmtPercent", unit: "%"},
    ]
  },
  watch: {
    search: {
      immediate: true, deep: true, handler() {
        this.getData()
      }
    }
  },
  methods: {
    getData() {
      const {$http, $waitFor} = window
      const {type, compareDate} = this.search
      $waitFor($http&& (type != 3 || compareDate)).then(() => $http.post('/data-boot/la/screen/singleStoreBoard/overview', {...this.search}).then(res => {
        if (res?.data) {
          this.info = res.data
        }
      }))
    },
    getValue(item) {
      let result = this.info[item.prop]
      const decimal = item.decimal > -1 ? item.decimal : 2
      if (item.unit == "%") result = (result * 100 || 0).toFixed(decimal) + "%"
      if (item.calc) result = item.calc()
      if (/^-?\d+(\.\d+)?$/.test(result)) result = Number(result).toFixed(decimal)
      return result
    }
  }
}
</script>

<template>
  <section class="AppRealtimePanel">
    <div v-for="item in list" :key="item.prop" class="item">
      <div v-text="item.label"/>
      <div class="value" v-text="getValue(item)"/>
    </div>
  </section>
</template>

<style scoped>
.AppRealtimePanel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px 16px;
}

.AppRealtimePanel .item {
  background: url("http://10.0.97.209/img/kengee/kengee14.png") no-repeat;
  background-size: 100% 100%;
  color: #fff;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  line-height: 20px;
  white-space: nowrap;
}

.AppRealtimePanel .item .value {
  font-family: Helvetica;
  font-size: 20px;
  color: #66FFFF;
  line-height: 38px;
}
</style>
