<script>
export default {
  name: "AppSalesPerformance",
  label: "市场看板-销售情况",
  data() {
    return {
      info: {},
      list: [
        {label: "过机销售额(万元)", prop: "saleAmt"},
        {label: "有效订单数(单)", prop: "validOrderNum"},
        {label: "客单价(元)", prop: "customerUnitPrice"},
        {label: "店均销售额(元)", prop: "avgSaleAmt"},
        {label: "店均有效订单数(单)", prop: "avgValidOrderNum"},
        {label: "有效订单(单)", prop: "validOrderNum"},
      ]
    }
  },
  computed: {
    search: v => v.$marketBoard.search
  },
  methods: {
    getData() {
      const {$http, $waitFor} = window
      $waitFor($http).then(() => $http.post("/data-boot/la/screen/marketBoard/saleCondition", {
        ...this.search
      })).then(res => {
        if (res?.data) {
          this.info = res.data
        }
      })
    },
    getValue(item) {
      let result = this.info[item.prop]
      if (item.unit == "%") result = (result * 100 || 0) + "%"
      if (item.calc) result = item.calc()
      return result
    },
    getIncrement(item) {
      let result = this.info[item.prop + "Diff"] || ""
      if (result > 0) result = "↑" + result
      else if (result < 0) result = "↓" + result
      return result
    }
  },
  watch: {
    search: {
      immediate: true, deep: true, handler() {
        this.getData()
      }
    }
  }
}
</script>

<template>
  <section class="AppSalesPerformance">
    <div v-for="(item,i) in list" :key="i" class="item">
      <div v-text="item.label"/>
      <div class="flex">
        <div class="value" v-text="getValue(item)"/>
        <div class="increment" v-text="getIncrement(item)"/>
      </div>
    </div>
  </section>
</template>

<style>
.AppSalesPerformance {
  display: grid;
  grid-template-columns:auto auto;
  gap: 12px 24px;
}

.AppSalesPerformance .flex {
  align-items: baseline;
  gap: 4px;
}

.AppSalesPerformance .item {
  background: linear-gradient(90deg, rgba(17, 112, 221, 0.5) 0%, rgba(17, 112, 221, 0.01) 100%);
  background-size: 100% 100%;
  color: #fff;
  line-height: 20px;
  white-space: nowrap;
  border-left: 4px solid rgba(17, 112, 221, 1);
  padding: 10px 16px;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.AppSalesPerformance .item:nth-of-type(4n-1), .AppSalesPerformance .item:nth-of-type(4n) {
  border-left-color: rgba(1, 196, 236, 1);
  background: linear-gradient(90deg, rgba(1, 196, 236, 0.5) 0%, rgba(1, 196, 236, 0.01) 100%);
}

.AppSalesPerformance .item .value {
  font-family: Helvetica;
  font-size: 20px;
  line-height: 38px;
  font-weight: bold;
}

.AppSalesPerformance .item .increment {
  color: #FFD15C;
  line-height: 20px;
}
</style>
