<template>
    <div>
      <a-breadcrumb>
        <a-breadcrumb-item>WebChat</a-breadcrumb-item>
        <a-breadcrumb-item>控制台</a-breadcrumb-item>
        <a-breadcrumb-item>账号管理</a-breadcrumb-item>
        <a-breadcrumb-item>管理员账号</a-breadcrumb-item>
      </a-breadcrumb>
  
      <a-form :layout="formLayout" style="margin: 20px 0px 10px 0px">
        <a-row :gutter="20"> 
          <a-col :span="3">
            <a-input v-model:value="userId" placeholder="用户ID"/>
          </a-col>
          <a-col :span="3">
            <a-input v-model:value="mobile" placeholder="账号" />
          </a-col>
          <a-col :span="3">
            <a-input v-model:value="userName" placeholder="用户名"/>
          </a-col>
          <a-col :span="5">
            <a-button @click="resetSearch">重置</a-button>
            <a-button type="primary" @click="handleSearch" style="margin-left: 20px; background-color: black;">搜索</a-button>
          </a-col>
        </a-row>
      </a-form>
  
      <a-table :dataSource="dataSource" :columns="columns" :pagination="false" />
    <a-pagination
      :current="currentPage"
      :pageSize="pageSize"
      :total="total"
      :showTotal="showTotal"
      @change="handlePageChange"
      style="float: right; margin-top: 20px"
    />
    </div>
  </template>
  
  <script>
  import axios from 'axios';
import { defineComponent, ref, onMounted, watch, nextTick } from 'vue';
import { useRoute } from 'vue-router';
import { Avatar } from 'ant-design-vue';

export default defineComponent({
  setup() {
    const route = useRoute();
    const oauthCode = ref(route.query.oauthCode || new URLSearchParams(window.location.search).get('oauthCode'));
    const dataSource = ref([]);
    const userId = ref(''); 
    const userName = ref(''); 
    const mobile = ref(''); 
    const columns = [
      {
        title: '账号ID',
        dataIndex: 'userId', 
        key: 'userId',
      },
      {
        title: '账号',
        dataIndex: 'mobile',
        key: 'mobile',
      },
      {
        title: '用户名',
        dataIndex: 'userName',
        key: 'userName',
      },
      {
        title: '签名',
        dataIndex: 'signature',
        key: 'signature',
      }
    ];
    const formLayout = 'horizontal'; 
    const currentPage = ref(1); // 当前页码
    const pageSize = ref(10); // 每页显示的记录数
    const total = ref(0); // 总记录数
    const pageTotal = ref(0); // 总页数

    const fetchData = async (page = 1, pageSize = 10, userId = '', userName = '', mobile = '') => {
      try {
        console.log("Fetching data with params:", userId, userName, mobile); 
        const response = await axios.get(`/admin-service/account/page`, {
          params: {
            roleCode: 2,
            pageNo: page,
            pageSize: pageSize,
            userId: userId, 
            userName: userName, 
            mobile: mobile 
          },
          headers: {
            'oauth-code': oauthCode.value,
            'origin-url': window.location.href
          }
        });
        if (response.data.code === 40001) {
          // 未登录
          window.location.href = response.data.redirect_url;
        }
        dataSource.value = response.data.data;
        // 更新分页信息
        total.value = response.data.total;
        pageTotal.value = response.data.pageTotal;
        currentPage.value = response.data.pageNo;
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    const handleSearch = async () => {
      await nextTick();
      await fetchData(1, pageSize.value, userId.value, userName.value, mobile.value);
    };

    const resetSearch = () => {
      userId.value = '';
      userName.value = '';
      mobile.value = '';
      handleSearch();
    };

    const handlePageChange = (page) => {
      fetchData(page, pageSize.value, userId.value, userName.value, mobile.value);
    };

    const showTotal = (total) => {
      return `共 ${total} 条`;
    };

    onMounted(() => {
      fetchData();
    });

    watch([userId, userName, mobile], ([newUserId, newUserName, newMobile]) => {
      console.log("Input values changed:", newUserId, newUserName, newMobile);
    }, { immediate: true });


    return {
      dataSource,
      columns,
      fetchData,
      handleSearch,
      resetSearch, 
      userId,
      userName,
      mobile,
      formLayout,
      currentPage,
      pageSize,
      total,
      pageTotal,
      handlePageChange,
      showTotal
    };
  },
});
  </script>
  
  <style scoped>
  
  </style>