<template>
  <!-- 商户管理 -->
  <div class="merchantPage flex-col">
    <s-header :name="'商户管理'" :noback="false"></s-header>
    <div class="merchantBox 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">
              <span class="info2">共</span>
              <span class="info3">{{adminTotal}}</span>
              <span class="info4">条记录</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="main4 flex-col">
          <div
            class="bd1 flex-col"
            v-for="(item, index) in adminList"
            :key="index"
            @click="merchantSet(item)"
          >
            <div class="outer2 flex-col">
              <div class="box2 flex-row justify-between">
                <span class="word3" v-html="item.username + '&nbsp;' + item.name"></span>
                <div class="group6 flex-col"></div>
              </div>
              <span class="word4" v-html="'电话:' + item.phone"></span>
              <span class="word5" v-html="'邮箱:' + item.email"></span>
              <span class="word6" v-html="'登录时间:' + item.loginDate"></span>
              <span class="info6" v-html="'登录ip地址:' + item.loginIp"></span>
              <span class="txt2" v-html="'管理系统id:' + item.managerId"></span>
              <div class="box3 flex-col">
                <span class="txt3" v-html="'创建时间:' + item.createDate"></span>
              </div>
            </div>
          </div>
        </div>
      </van-list>
    </div>
    <nav-bar></nav-bar>
    <merchantSearch ref="searchRef" @search="search($event)"></merchantSearch>
  </div>
</template>
<script>
import { onMounted, reactive, ref } from "vue";
import navBar from '@/components/NavBar';
import sHeader from "@/components/SimpleHeader";
import { getAdminList } from '@/service/merchantManage';
import { getLoginUser } from "@/common/js/utils";
import { Toast } from 'vant';
import merchantSearch from './merchantSearch.vue';
import { useRouter } from "vue-router";

export default {
  components: { sHeader, navBar, merchantSearch },
  setup() {
    const user = getLoginUser();
    const router = useRouter(); 
    const searchRef = ref(null);
    const adminList = ref([]);
    const adminTotal = ref(0); // 列表总数
    const loading = ref(false); // 加载状态
    const error = ref(false); // 错误状态
    const finished = ref(false); // 结束翻页状态
    let searchParams = reactive({
      id: (user.id === 1 || user.parentId === 1) ? '' : user.id,
      ifForeign: user.ifForeign,
      current: 1, // 页数
      size: 20, // 页大小
    });
    onMounted(async () => { searchGetList(); });
    // 查询列表
    const searchGetList = () => {
      adminList.value = [];
      searchParams.current = 1;
      getList();
    }
    // 滚动加载
    const onLoad = () => { if (!finished.value) { searchParams.current = searchParams.current + 1; getList(); } };
    // 获取设备列表数据
    const getList = async () => {
      const { data } = await getAdminList( Object.assign({}, searchParams) );
      if (data.code === "00000") {
        // 列表值叠加
        adminList.value = adminList.value.concat(data.data.records);
        adminTotal.value = data.data.total;
        if (adminList.value.length === data.data.total) { finished.value = true; }
        loading.value = false;
      } else { Toast.fail(data.message); }
    };
    // 搜索点击
    const searchClick = () => { searchRef.value.showSearch(); };
    // 搜索弹窗触发搜索
    const search = (data) => {
      searchParams = Object.assign(searchParams, data);
      searchGetList();
    };
    // 跳转设备编辑
    const merchantSet = (e) => { router.push({ path: 'merchantSet', query: { merchantId: e.id }}) }
    return {
      adminList,
      adminTotal,
      loading,
      error,
      finished,
      onLoad,
      searchClick,
      searchRef,
      search,
      merchantSet
    };
  },
};
</script>
<style lang="less" scoped>
@import "../../common/style/common.less";
@import "./index.less";
</style>
