<script setup>
import empty from "~/assets/empty.png";
import { useRouter } from 'vue-router';

const router = useRouter();

const onClickLeft = () => {
  router.push('/main/personal');
}

const userInfo = ref();
let userInfoParam = $ref({
  keyword:'',
});
initDataUserInfo()
function initDataUserInfo() {
  request({
    url: "/user/main/user_info",
    data: {
      ...userInfoParam,
    },
  }).then((res) => {
    if (res.code == "1") {
      userInfo.value = res.data;
    }
  });
}

const haveData = ref(false)
const page= ref(1)
const allList = ref([]);
const total_rows = ref();
const total_page = ref(1);
let param = $ref({
  keyword: '',
  page,
});

initData(page.value)

function initData(page) {
  request({
      url: "/txwx/jffl_jfjl/index",
      data: {
        page,
      },
    }).then((res) => {
      if (res.code == "1") {
        if (res.data.page_data.length > 0) {
          haveData.value = true;
        } else {
          haveData.value = false;
        }
        total_rows.value = res.data.total_rows;
        total_page.value = res.data.total_page;
        loading.value = false;
        refreshing.value = false;
        let tempArr = res.data.page_data;
        allList.value =[...allList.value,...tempArr];
      }
    });

}


const handleSet = (item) => {
  let whereUrl = `/main/personal/${item}`;
  router.push(whereUrl);
}


const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);

const onLoad = () => {
  loading.value = true
  if (page.value >= total_page.value) {
    finished.value = true;
    return
  } else {
    page.value++
  }
  initData(page.value);
  if (allList.value.length >= total_rows) {
    finished.value = true;
  }
};

const onRefresh = () => {
  refreshing.value = true;
  finished.value = false;
  page.value = 1;
  allList.value = [];
  initData(page.value);
};

</script>

<template>
  <div>
    <van-nav-bar title="积分" left-text="" left-arrow fixed placeholder @click-left="onClickLeft"/>
    <div class="h-90px box-border p-2 baseInfo" v-if="userInfo">
      <div class="text-14px text-left text-[#999999] baseInfoT">总积分</div>
      <div class="flex flex-row flex-nowrap justify-between items-center otherInfo">
        <div class="text-28px font-bold text-left text-[#333333] otherInfo_left">{{ userInfo.user_score }}</div>
        <div class="text-14px text-left box-border pr-15px text-[#154a9a] otherInfo_right" @click="handleSet('integralrule')">积分规则</div>
      </div>
    </div>
    <div class="box-border p-2 box-border pb-8 detailList">
      <div class="flex flex-row flex-nowrap justify-between items-center mb-2  detailListTopic">
        <div class="text-16px font-bold text-left text-[#333333] detailListTopic_left">积分明细</div>
        <div class="text-12px font-normal text-right text-[#b4b4b4] detailListTopic_right" v-if="false">累计收入{{ userInfo.user_score }}</div>
      </div>
      <div v-if="haveData">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" >
            <van-cell v-for="(item,index) in allList" :key="index" class="box-border !px-0" >
              <template #default>
                <div class="flex flex-row flex-nowrap justify-between items-center border-b border-[#e5e5e5] singleList" >
                  <div class="singleList_left">
                    <p class="text-15px text-left text-[#333333]">{{ item.tjj_keyword }}</p>
                    <p class="text-12px text-right text-[#999999] mt-1 mb-2">{{ item.tjj_datetime }}</p>
                  </div>
                  <div class="text-15px font-bold text-left text-[#333333] singleList_right">{{ item.tjj_jfjlnr }}</div>
                </div>
              </template>
            </van-cell>
          </van-list>
        </van-pull-refresh>

      </div>
      <div class="flex flex-col mt-12 " v-else>
        <div class="flex flex-row justify-center"> <img :src="empty" alt=""></div>
        <div class="text-14px text-center mt-2 text-[#666666] bSText">您暂未获得积分</div>
      </div>


    </div>

  </div>
</template>



<style lang="scss" scoped>
.van-cell{
  margin-top: -1px;
}
.baseInfo{
  background-image: url("~/assets/baseInfoBg.png");
  background-repeat:no-repeat ;
  background-position:right center ;
  background-color: #ffffff;
  box-shadow: 0px 10px 15px 0px rgba(0,0,0,0.08);
  .otherInfo_right{
    background: url("~/assets/intrgral_arrowIcon.png") no-repeat right center;
    background-size: 8px 13px;
  }
}
</style>
