<template>
  <div class="record">
    <div class="top-box">
      <div>
        <p class="time-word">时间</p>
        <select class="select-box" v-model="form.month" @change="onChangeMonth">
          <option
            v-for="item in selectList"
            :key="item.value"
            :value="item.value"
          >
            {{ item.month }}
          </option>
        </select>
      </div>
      <p class="data-word">
        共登记 <span>{{ form.total }}</span> 条，发放
        <span>{{ form.price }}</span> 元
      </p>
    </div>
    <div>
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model:loading="tableLoading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          :immediate-check="false"
          :offset="20"
          ref="listRef"
        >
          <img
            src="@/assets/img/nodata.png"
            v-if="tableList.length === 0"
            class="nodata"
            alt=""
          />
          <van-cell v-for="item in tableList" :key="item.id">
            <div class="table_box">
              <div class="table_item flex_box">
                <div class="table_left">领取时间：</div>
                <div class="table_right">{{ item.receiveTime }}</div>
              </div>
              <div class="table_item flex_box">
                <div class="table_left">领取站点：</div>
                <div class="table_right">{{ item.salesNo }}</div>
              </div>
              <div class="table_item flex_box">
                <div class="table_left">领取人姓名：</div>
                <div class="table_right">{{ item.receiveName }}</div>
              </div>
              <div class="table_item flex_box">
                <div class="table_left">领取人手机号：</div>
                <div class="table_right">{{ item.receiveMobile }}</div>
              </div>
              <div class="table_item flex_box">
                <div class="table_left">结婚证字号：</div>
                <div class="table_right">{{ item.marriageNo }}</div>
              </div>
            </div>
          </van-cell>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref, onMounted } from "vue";
import { codeList } from "@/api/index";
import { Local } from "@/utils/storage.js";
import { showToast } from "vant";
import moment from "moment";
const listRef = ref(null);

const form = reactive({
  total: 0,
  price: 0,
  month: "",
  page: 1,
  size: 10,
});
const tableLoading = ref(true);
const tableList = ref([]);
const finished = ref(false);
const refreshing = ref(false);
const selectList = ref([
  { month: "1月", value: "01" },
  { month: "2月", value: "02" },
  { month: "3月", value: "03" },
  { month: "4月", value: "04" },
  { month: "5月", value: "05" },
  { month: "6月", value: "06" },
  { month: "7月", value: "07" },
  { month: "8月", value: "08" },
  { month: "9月", value: "09" },
  { month: "10月", value: "10" },
  { month: "11月", value: "11" },
  { month: "12月", value: "12" },
  { month: "全部", value: "" },
]);
const onLoad = () => {
  if (!tableLoading.value) return;
  tableLoading.value = true;
  // finished.value = false;
  if (refreshing.value) {
    tableList.value = [];
  }
  const params = {
    dataTime: moment(new Date()).format("YYYY") + `-${form.month}`,
    page: form.page,
    size: form.size,
    salesNo: Local.get("userInfo").salesNo,
  };
  codeList(params)
    .then((res) => {
      if (res.code == 200) {
        tableLoading.value = false; // 数据全部加载完成
        form.total = res.data.receiveCount;
        form.price = Number(res.data.receiveAmount) / 100;
        tableList.value = tableList.value.concat(res.data.codeList);
        if (res.data.codeList.length < form.size) {
          finished.value = true;
          tableLoading.value = true;
        } else {
          form.page++;
          finished.value = false;
        }
        refreshing.value = false;
      } else {
        showToast(res.msg);
      }
    })
    .catch((res) => {
      finished.value = true;
      tableLoading.value = false; // 数据全部加载完成
    });
};
function onChangeMonth() {
  // form.month = moment(new Date()).format("YYYY-MM");
  // 重置数据
  finished.value = false;
  form.page = 1;
  tableList.value = [];
  tableLoading.value = true;
  // 重新加载数据
  onLoad();
}
function onRefresh() {
  refreshing.value = true;
  // 重置数据
  finished.value = false;
  form.page = 1;
  tableList.value = [];
  tableLoading.value = true;
  // 重新加载数据
  onLoad();
}
onMounted(() => {
  const now = new Date();
  form.month = moment(now).format("MM");
  onLoad();
});
</script>
<style scoped lang="scss">
.record {
  width: 100%;
  min-height: 100vh;
  background: #fff;
  overflow: hidden;
  position: relative;
  .top-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 6.9rem;
    height: 1.3rem;
    margin: 0 auto;
    > div {
      display: flex;
      align-items: center;
      .time-word {
        font-size: 0.3rem;
        color: #666666;
      }
      .select-box {
        width: 1.61rem;
        height: 0.66rem;
        background: #ffffff;
        border-radius: 0.1rem;
        border: 0.01rem solid #e5e5e5;
        font-size: 0.32rem;
        color: #333333;
        margin-left: 0.2rem;
      }
    }
    .data-word {
      font-size: 0.3rem;
      color: #333333;
      > span {
        font-size: 0.34rem;
        color: #ec1818;
        font-weight: bold;
      }
    }
  }
}
.van-list {
  height: calc(100vh - 1.3rem);
  overflow-y: scroll;
  .nodata {
    width: 2.9rem;
    height: 2.61rem;
    margin-top: 5rem;
    margin-left: 2.1rem;
  }
}
::v-deep(.van-cell) {
  background: transparent;
}
::v-deep(.van-cell__value) {
  overflow: visible;
}
::v-deep(.van-pull-refresh__track) {
  // height: 100%;
  // overflow-y:auto ;
}
.table_box {
  background: #ffffff;
  padding: 0 0.25rem;
  border-radius: 0.2rem;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
  .table_item {
    padding: 0.3rem 0;
    font-size: 0.3rem;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    .table_left {
      color: rgba(0, 0, 0, 0.5);
    }
    .table_right {
      color: rgba(0, 0, 0, 0.65);
    }
  }
}
</style>
