<template>
  <!-- 提现账号审批 -->
  <div class="taskMessagePage flex-col">
    <s-header :name="'提现账号审批'" :noback="false"></s-header>
    <div class="taskMessageBox flex-col">
      <van-list
        v-model:loading="loading"
        v-model:error="error"
        error-text="请求失败，点击重新加载"
        :finished="finished"
        finished-text="没有更多了"
        offset="300"
        :immediate-check="false"
        @load="onLoad"
      >
        <div class="searchRow flex-row justify-between">
          <div class="flex-col">
            <div class="flex-row justify-between bd3">
              <div class="flex-col outer4 joinPayMchCheckIcon"></div>
              <span class="flex-col txt2"
                >共<span class="discountNumber">{{ alarmHistoryTotal }}</span
                >条记录</span
              >
            </div>
          </div>
          <div class="flex-col">
            <div class="main5 flex-row justify-between" @click="searchClick">
              <img class="label2" src="../../../assets/device/searchIcon.png" />
              <div class="TextGroup2 flex-col">
                <span class="txt3">搜索</span>
              </div>
            </div>
          </div>
        </div>
        <div class="listBox">
        <div
          v-for="(item, index) in alarmHistoryList"
          :key="index"
          class="listItem"
          @click="pushInfo(item)"
        >
          <div class="itemBox">
            <div class="itemRow"><span class="itemTitle">商户名称:&nbsp;</span>{{item.altMchName}}</div>
            <div class="itemRow"><span class="itemTitle">联系人姓名:&nbsp;</span>{{item.busiContactName}}</div>
            <div class="itemRow"><span class="itemTitle">联系人手机号:&nbsp;</span>{{item.busiContactMobileNo}}</div>
            <div class="itemRow"><span class="itemTitle">申请时间:&nbsp;</span>{{showDateTime(item.createDate)}}</div>
            <div class="itemRow"><span class="itemTitle">审批时间:&nbsp;</span>{{showDateTime(item.modifyDate)}}</div>
          </div>
        </div>
      </div>
      </van-list>
    </div>
    <nav-bar></nav-bar>
  </div>
</template>

<script>
import { Toast } from "vant";
import { useRouter } from "vue-router";
import dateUtil from "@/utils/dateUtil";
import navBar from '@/components/NavBar';
import { onMounted, reactive, ref } from 'vue';
import sHeader from "@/components/SimpleHeader";
import { getLoginUser } from "@/common/js/utils";
import { getTaskJoinpayMchCheckList } from "@/service/taskMessage";

export default {
  components: { sHeader, navBar },
  setup() {
    const router = useRouter();
    const user = getLoginUser();
    const loading = ref(false); // 加载状态
    const error = ref(false); // 错误状态
    const finished = ref(false); // 结束翻页状态
    const alarmHistoryList = ref([]); // 列表集合
    const alarmHistoryTotal = ref(0); // 列表总数
    let searchParams = reactive({
      adminId: '', // 当前登录账户的id
      type: '0', // 类型 汇聚: 0, 杉德: 1
      current: 1, // 当前页
      size: 20, // 页大小
    });
    // 滚动加载
    const onLoad = () => { if (!finished.value) { searchParams.current = searchParams.current + 1; getList(); } };
    // 查询列表
    const searchGetList = () => {
      alarmHistoryList.value = [];
      searchParams.current = 1;
      getList();
    };
    // 获取设备初始化审批列表数据
    const getList = async () => {
      const { data } = await getTaskJoinpayMchCheckList(Object.assign({}, searchParams));
      if (data.code === "00000") {
        // 列表值叠加
        alarmHistoryList.value = alarmHistoryList.value.concat(data.data.records);
        alarmHistoryTotal.value = data.data.total;
        if (alarmHistoryList.value.length === data.data.total) {finished.value = true;}
        loading.value = false;
      } else {Toast.fail(data.message);}
    };
    // 初始化页面获取列表
    onMounted(async () => {
      if (user) {
        searchParams.adminId = user.id;
        searchGetList();
      }
    });
    const showDateTime = (date) => { return date ? dateUtil.formateDate(new Date(date), "yyyy-MM-dd hh:mm:ss") : ""; };
    const pushInfo = (item) => { router.push({ path: 'taskJoinPayMchCheckInfo', query:{infoId: item.id, infoType: item.type} }); }
    return {
      loading,
      error,
      finished,
      onLoad,
      alarmHistoryList,
      alarmHistoryTotal,
      showDateTime,
      pushInfo,
    };
  }
};
</script>

<style lang="less" scoped>
@import "../../../common/style/common.less";
@import "../index.less";
</style>
