<template>
  <BasePage>
    <div class="cv">
      <div class="card">
        <div class="t">
          <img style="height: 10.4vw;" src="/img/logo.png" alt="">
          <div class="u_info">
            <b>会员卡<van-icon style="margin-left: 1.2vw;" name="question-o" @click.stop="showTerm = true"></van-icon></b>
            <span>{{ huiyuankaid }}</span>
          </div>

          <div class="record r" @click="$navigate('CertificateRecord')">
            赠卡记录
            <van-icon name="arrow"></van-icon>
          </div>
        </div>

        <div class="db">
          <div class="left">
            <span>金额（元）</span>
            <b>{{ data.totalsum?.toFixed(2) }}</b>
          </div>

          <button @click="$navigate('Transfer')">
            赠卡
          </button>
        </div>
      </div>

      <div class="list_box">
        <div class="date_box">
          <div class="date" @click="showDate = true">
            {{ date[0] }}-
            <p>{{ (parseInt(date[1]) < 10) ? `0${parseInt(date[1])}` : parseInt(date[1]) }}</p>
                <img src="/img/down-one.png" alt="">
          </div>

          <div class="count">
            <div>
              <span>收入</span>
              <p> {{ data?.positivesumcurrent?.toFixed(2) }}</p>
            </div>

            <div>
              <span>支出</span>
              <p> {{ Math.abs((data?.negativesumcurrent))?.toFixed(2) }}</p>
            </div>
          </div>
        </div>

        <BaseList ref="baselist" url="/v1/client/DUserxiaofeiquansClient" class="list" :params="searchParams">
          <template #default="{ item }">
            <div class="item">
              <div class="t">
                <span class="tit">当前金额：{{ item.balance?.toFixed(2) }}</span>
                <span :class="item.nums > 0 ? 'in' : 'out'" class="r">
                  <span v-if="item.nums > 0">增加：+</span>
                  <span v-else>减少：</span>
                  {{ item.nums?.toFixed(2) }}
                </span>
              </div>
              <span>
                备注：{{ item.remark }}
              </span>
              <span>
                订单：{{ item.ordernum }}
              </span>
              <span>
                时间：{{ $formatGMT(item.addtime, 'yyyy-dd-MM HH:mm:ss') }}
              </span>
            </div>
          </template>
        </BaseList>

      </div>
    </div>

    <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="`${this.$route.meta.title}说明`" closeable
      style="min-height: 50%; padding: 0px 10px 10px 10px">
      <div class="w100 html" v-html="$datadic.getContent('code_hykedsm')" />
    </van-action-sheet>
  </BasePage>
</template>

<script>
export default {
  mounted() {
    this.init();
  },
  data() {
    return {
      showDate: false,
      showTerm: false,
      data: {},
      huiyuankaid: '',
      date: [`${new Date().getFullYear()}`, `${new Date().getMonth() + 1}`],
      currentDate: [`${new Date().getFullYear()}`, `${new Date().getMonth() + 1}`],
      searchParams: {
        // type: 'Balance',
        year: new Date().getFullYear(),
        month: new Date().getMonth() + 1,
      },
    }
  },
  methods: {
    onconfirm(value) {
      this.date = this.currentDate;
      this.showDate = false;
      this.searchParams.year = Number.parseInt(this.currentDate[0]);
      this.searchParams.month = Number.parseInt(this.currentDate[1]);
      this.init();
      this.$refs.baselist.refresh()
    },
    init() {
      this.$get('/v1/client/DUserxiaofeiquansClient/statistics', this.searchParams).then(res => {
        this.data = res.data;
        this.huiyuankaid = this.$ls.get('huiyuankaid');
      })
    }
  }
}
</script>