<template>
  <div class="cash-out-record">
    <div id="top-month">
      <span style="width: 90px; margin-right: 5px">{{ selected }}</span>
      <van-icon name="arrow-down" @click="show = true" />
    </div>
    <div class="record-list">
      <base-refresh-scroll @downLoad="onDownLoad" @upRefresh="onUpRefresh">
        <div slot="content">
          <div v-for="(item, index) in recordList" :key="'record' + index">
            <record-item :record-item="item" />
          </div>
        </div>
      </base-refresh-scroll>
    </div>

    <van-popup v-model="show" get-container="#top-month">
      <van-datetime-picker
        v-model="currentDate"
        type="year-month"
        @cancel="onPickerCancle"
        @confirm="onPickerConfirm"
      >
      </van-datetime-picker>
    </van-popup>
  </div>
</template>

<script>
import { getWithdrawalRecord } from "@/api/wallet";
import RecordItem from "./components/recordItem.vue";
import BaseRefreshScroll from "../../components/BaseRefreshScroll.vue";
export default {
  components: {
    BaseRefreshScroll,
    RecordItem
  },
  name: "CashOutRecord",
  data() {
    return {
      show: false,
      options: [{ text: "2021年3月", value: 0 }],
      selected: "",
      currentDate: new Date(),
      recordList: []
    };
  },
  mounted() {
    this.selected = `${this.currentDate.getFullYear()}年${this.currentDate.getMonth() +
      1}月`;
    const time = this.currentDate.toLocaleDateString().replaceAll("/", "-");
    this.getRecordList(time);
  },
  methods: {
    onUpRefresh() {
      console.log("上拉刷新");
    },
    onDownLoad() {
      console.log("下拉加载");
      const time = this.currentDate.toLocaleDateString().replaceAll("/", "-");
      this.getRecordList(time);
    },
    onPickerCancle() {
      this.show = false;
    },
    onPickerConfirm(val) {
      this.selected = `${val.getFullYear()}年${val.getMonth() + 1}月`;
      this.show = false;
      const time = val.toLocaleDateString().replaceAll("/", "-");
      this.getRecordList(time);
    },
    getRecordList(yearMonth) {
      const params = {
        userId: "13100911369",
        yearMonth: yearMonth
      };
      getWithdrawalRecord(params).then(res => {
        if (res.code === 0) {
          this.recordList = res.data;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
#top-month {
  position: relative;
  display: flex;
  align-items: center;
  height: 44px;
  margin-bottom: 10px;
  padding-left: 15px;
  font-size: 16px;
  font-weight: bold;
  background-color: #ffffff;
  .van-popup {
    position: absolute;
    top: 145px;
    left: 100px;
    width: 200px;
    max-height: 200px;
    .van-picker {
      height: 200px;
      overflow: hidden;
    }
  }
  ::v-deep .van-picker__frame {
    border: 1px solid;
  }
}
.record-list {
  position: relative;
  height: calc(100vh - 100px);
}
</style>