<template>
  <BasePage>

    <div class="merchantincome">
      <div class="count_box">
        <div class="title" @click.stop="onShowTerm">
          <span>
            营业收入
          </span>
          <van-icon @click="onShowTerm" name="question-o"></van-icon>
        </div>
        <span class="perform">
          ¥{{ data.total.income?.toFixed(2) }}
        </span>

        <div class="btm">
          <div>
            <span>昨日收入：</span>
            <span>
              ¥{{ data.total.incomeyestoday?.toFixed(2) }}
            </span>
          </div>
          <div class="r" style="justify-content: end;" @click="$navigate('MerchantCashout')">
            <span>提现中：</span>
            <span>
              ¥{{ data.total?.withdrawing?.toFixed(2) }}
              <van-icon name="arrow"></van-icon>
            </span>
          </div>
        </div>
      </div>

      <div class="tips">
        <van-icon name="warning-o" style="margin: .4vw 0 0;"></van-icon>
        <span>收款金额会每日自动转入绑定银行账户，无需提现</span>
      </div>

      <div class="time">

        <div class="date_box">
          <div class="date" @click="showDate = true">
            <div>
              <span>
                {{ date[0] }}-
              </span>
              <span>
                {{ (parseInt(date[1]) < 10) ? `0${parseInt(date[1])}` : parseInt(date[1]) }} </span>
            </div>
            <img src="/img/down.png">
          </div>
          <div class="income">
            <span>当月收款：</span>
            <span>
              ¥{{ data.total?.incomemonth?.toFixed(2) }}
            </span>
          </div>
        </div>
      </div>

      <div class="details_box">
        <van-empty v-if="records.length === 0" description="暂无记录" />
        <template v-else>
          <div class="item" v-for="item in records">
            <div class="line1">
              <span class="type">{{ item.typename }}</span>
              <p>剩余：{{ item.balance?.toFixed(2) }}</p>
              <span :class="item.nums > 0 ? 'income' : 'expend'">{{ item.nums > 0 ? '+' : '' }}
                {{ item.nums?.toFixed(2) }}</span>
            </div>
            <div>
              操作时间：{{ $formatGMT(item.addtime, 'yyyy-MM-dd HH:mm:ss') }}
            </div>
            <div>
              订单编号：{{ item.ordernum }}
            </div>
          </div>
        </template>
      </div>

    </div>
  </BasePage>

  <van-popup v-model:show="showDate" position="bottom">
    <van-date-picker v-model="currentDate" title="选择年月" :columns-type="['year', 'month']" @confirm="onconfirm"
      @cancel="showDate = false" />
  </van-popup>
  <van-action-sheet v-model:show="showTerm" safe-area-inset-bottom title="营业收入说明" closeable
    style="min-height: 50%; padding: 0px 10px 10px 10px">
    <div class="w100 html" v-html="$datadic.getContent('code_yysrsm')" />
  </van-action-sheet>
</template>

<script>
export default {
  name: 'MerchantIncome',
  mounted() {
    this.init();
  },
  data() {
    return {
      data: {
        total: {
          balance: 0,
          incometoday: 0,
          incomeyestoday: 0,
          incomemonth: 0,
          withdrawing: 0
        }
      },
      records: [],
      date: [`${new Date().getFullYear()}`, `${new Date().getMonth() + 1}`],
      currentDate: [`${new Date().getFullYear()}`, `${new Date().getMonth() + 1}`],
      show: false,
      showDate: false,
      loading: false,
      showTerm: false,
      param: {
        year: new Date().getFullYear(),
        month: new Date().getMonth() + 1,
      }
    }
  },
  methods: {
    init() {
      Promise.all([
        this.$get('/v1/client/DShopsClient/moneystatistics', this.param),
        this.$get('/v1/client/DShopsClient/money', this.param)
      ]).then(([total, recordsRes]) => {
        this.data.total = total.data;
        this.records = recordsRes.data;
      }).catch(err => {
        this.$showFailToast(err.message || '加载失败');
      })
    },
    onconfirm(value) {
      this.date = this.currentDate;
      this.param = {
        year: parseInt(this.currentDate[0]),
        month: parseInt(this.currentDate[1]),
      }
      this.showDate = false;
      this.init();
    },
    onShowTerm() {
      this.showTerm = true;
    }
  },

}
</script>
