<template>
  <BasePage>
    <div class="statistics">
      <div class="top box box-align-center">
        <span>
          截止{{ total.endTimes }}
        </span>
        <p class="refresh r" @click="initTotal"><img src="/img/refresh.png">刷新</p>
      </div>

      <div class="count-box" v-if="total">
        <div class="item">
          <div>
            <span>今日营业额（元）</span>
            <b>{{ total.TodayAmount?.toFixed(2) }}</b>
          </div>
          <p>{{ total.YesterdayAmount && total.YesterdayAmount != 0
            ? ((total.TodayAmount - total.YesterdayAmount) / total.YesterdayAmount * 100).toFixed(2)
            : (total.TodayAmount > 0 ? '100.00' : '0.00') }}%<span>较昨日</span></p>
        </div>
        <div class="item">
          <div>
            <span>今日抵扣消费券</span>
            <b>{{ total.TodayDeduct?.toFixed(2) }}</b>
          </div>
          <p>{{ total.YesterdayDeduct && total.YesterdayDeduct != 0
            ? ((total.TodayDeduct - total.YesterdayDeduct) / total.YesterdayDeduct * 100).toFixed(2)
            : (total.TodayDeduct > 0 ? '100.00' : '0.00') }}%<span>较昨日</span></p>
        </div>
        <div class="item">
          <div>
            <span>今日订单数</span>
            <b>{{ total.TodayQty }}</b>
          </div>
          <p>{{ total.YesterdayQty && total.YesterdayQty != 0
            ? ((total.TodayQty - total.YesterdayQty) / total.YesterdayQty * 100).toFixed(2)
            : (total.TodayQty > 0 ? '100.00' : '0.00') }}%<span>较昨日</span></p>
        </div>
        <div class="item">
          <div>
            <span>本月收入（元）</span>
            <b>{{ total.MonthIncome?.toFixed(2) }}</b>
          </div>
          <p>
            {{ total.PrevMonthIncome && total.PrevMonthIncome != 0
              ? ((total.MonthIncome - total.PrevMonthIncome) / total.PrevMonthIncome * 100).toFixed(2)
              : (total.MonthIncome > 0 ? '100.00' : '0.00') }}%<span>较上月</span></p>
        </div>
      </div>

      <div class="report">
        <div class="t">
          <b>经营统计报表</b>
          <div class="box box-align-center r" v-if="active == 0" @click="showDate = true">
            <img class="calendar" src="/img/calendar.png">
            <span>
              {{ currentDate[0] }}-{{ currentDate[1] }}-{{ currentDate[2] }}
            </span>
            <img class="down" src="/img/down.png">
          </div>

          <div class="box box-align-center r" v-if="active == 1" @click="showMonth = true">
            <img class="calendar" src="/img/calendar.png">
            <span>
              {{ currentMonth[0] }}-{{ currentMonth[1] }}
            </span>
            <img class="down" src="/img/down.png">
          </div>
        </div>

        <van-tabs type="card" v-model:active="active" line-height="1.333vw" line-width="8vw" color="#e4bb4e"
          title-active-color="#fff" title-inactive-color="#222222" @change="init">
          <van-tab title="日报"></van-tab>
          <van-tab title="月报"></van-tab>
        </van-tabs>

        <div class="datecount">
          <div class="dc-item">
            <span>{{ active == 0 ? '今日' : '本月' }}营业额（元）</span>
            <b>{{ data.total?.Amount.toFixed(2) }}</b>
          </div>
          <div class="dc-item">
            <span>{{ active == 0 ? '今日' : '本月' }}抵扣积分</span>
            <b>{{ data.total?.Deduct.toFixed(2) }}</b>
          </div>
          <div class="dc-item">
            <span>{{ active == 0 ? '今日' : '本月' }}订单数</span>
            <b>{{ data.total?.Qty }}</b>
          </div>
          <div class="dc-item">
            <span>{{ active == 0 ? '今日' : '本月' }}收入（元）</span>
            <b>{{ data.total?.Income.toFixed(2) }}</b>
          </div>
        </div>

        <b v-if="active == 0">日交易趋势图</b>
        <b v-if="active == 1">月交易趋势图</b>
        <div class="Chart" id="chartContainer" style="width: 82vw;height: 50vw;"></div>

      </div>

      <van-popup v-model:show="showMonth" position="bottom">
        <van-date-picker v-model="currentMonth" title="选择年月" :columns-type="['year', 'month']" @confirm="init"
          @cancel="showDate = false" />
      </van-popup>

      <van-popup v-model:show="showDate" position="bottom">
        <van-date-picker v-model="currentDate" title="选择日期" :min-date="minDate" :max-date="maxDate" @confirm="init" />
      </van-popup>


    </div>
  </BasePage>
</template>

<script>

export default {
  name: 'Statistics',
  data() {
    return {
      data: {
        total: {
          Amount: 5680.00,
          Deduct: 1280.00,
          Qty: 45,
          Income: 4560.00
        },
        list: [
          { date: '2024-04-01', Amount: 3200 },
          { date: '2024-04-02', Amount: 2800 },
          { date: '2024-04-03', Amount: 3500 },
          { date: '2024-04-04', Amount: 4200 },
          { date: '2024-04-05', Amount: 3800 },
          { date: '2024-04-06', Amount: 2900 },
          { date: '2024-04-07', Amount: 5100 },
        ]
      },
      total: {
        TodayAmount: 5680.00,
        YesterdayAmount: 4200.00,
        TodayDeduct: 1280.00,
        YesterdayDeduct: 980.00,
        TodayQty: 45,
        YesterdayQty: 38,
        MonthIncome: 45600.00,
        PrevMonthIncome: 38500.00,
        endTimes: '2024-04-18 10:30'
      },
      showDate: false,
      active: 0,
      showMonth: false,
      currentMonth: [`${new Date().getFullYear()}`, `${new Date().getMonth() + 1}`],
      currentDate: [`${new Date().getFullYear()}`, `${new Date().getMonth() + 1}`, `${new Date().getDate()}`],
    }
  },
  mounted() {
  },
  methods: {
    initTotal() {
      this.total.endTimes = new Date().toLocaleString().split('/').map((t) => t.padStart(2, '0')).join('-');
    },
    init() {
      this.showMonth = false;
      this.showDate = false;
    },
    initChart() {
      // chart logic simplified for static
    }
  },
  computed: {
  },

}
</script>
