<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?.Balance.toFixed(2) }}
        </span>

        <div class="btm">
          <div>
            <span>昨日收入：</span>
            <span>
              {{ data.total?.YesterdayAmount.toFixed(2) }}
            </span>
          </div>
          <div class="r" style="justify-content: end;">
            <span>提现中：</span>
            <span>
              {{ data.total?.CashAmount.toFixed(2) }}
            </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?.MonthBalance }}
            </span>
          </div>
        </div>
      </div>

      <div class="details_box">
        <div class="item" v-for="item in records">
          <div class="line1">
            <span class="type">{{ type[item.RecordSource] }}</span>
            <p>剩余：{{ item.CurValue }}</p>
            <span :class="item.OpeType > 0 ? 'income' : 'expend'">{{ item.OpeType > 0 ?
              '+' : '-' }}{{ item.RecordValue }}</span>
          </div>
          <div>
            订单编号：{{ item.TradeCode }}
          </div>
          <div>
            购买时间：{{ item.CTime }}
          </div>
        </div>
      </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="data.Term" />
  </van-action-sheet>
</template>

<script>
export default {
  name: 'MerchantIncome',
  mounted() {
  },
  data() {
    return {
      data: {
        total: {
          Balance: 12868.50,
          YesterdayAmount: 568.00,
          CashAmount: 2000.00,
          MonthBalance: 8650.00
        },
        Term: '营业收入说明：商家通过平台交易获得的收入，每日自动转入绑定银行账户。'
      },
      records: [
        { RecordSource: 'sale', OpeType: 1, RecordValue: 128.00, CurValue: 12868.50, TradeCode: 'T20260418001', CTime: '2024-04-18 10:30:00' },
        { RecordSource: 'sale', OpeType: 1, RecordValue: 256.00, CurValue: 12868.50, TradeCode: 'T20260418002', CTime: '2024-04-18 11:20:00' },
        { RecordSource: 'cashout', OpeType: 0, RecordValue: 500.00, CurValue: 12868.50, TradeCode: 'T20260417001', CTime: '2024-04-17 18:00:00' },
        { RecordSource: 'sale', OpeType: 1, RecordValue: 89.00, CurValue: 12868.50, TradeCode: 'T20260417002', CTime: '2024-04-17 14:30:00' },
      ],
      date: [`${new Date().getFullYear()}`, `${new Date().getMonth() + 1}`],
      currentDate: [`${new Date().getFullYear()}`, `${new Date().getMonth() + 1}`],
      show: false,
      showDate: false,
      loading: false,
      showTerm: false,
      type: { sale: '收入', cashout: '提现', manual: "其他" }
    }
  },
  methods: {
    onconfirm(value) {
      this.date = this.currentDate;
      this.showDate = false;
    },
    onShowTerm() {
      this.showTerm = true;
    }
  }
}
</script>
