<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="keyword" placeholder="关键词搜索"/>
          </a-col>
          <a-select v-model:value="pushType" style="width: 120px; margin-left: 10px;">
            <a-select-option value="">全部状态</a-select-option>
            <a-select-option value="1">已推送</a-select-option>
            <a-select-option value="0">待推送</a-select-option>
          </a-select>
          <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-col :span="3">
          <a-button type="primary" @click="openEditorPage" style="margin-left: 50px; 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 { h } from 'vue';
  import dayjs from 'dayjs';
  import axios from 'axios';
  import { defineComponent, ref, onMounted, watch, nextTick } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { Avatar } from 'ant-design-vue';

export default defineComponent({
  setup() {
    const route = useRoute();
    const router = useRouter();
    const oauthCode = ref(route.query.oauthCode || new URLSearchParams(window.location.search).get('oauthCode'));
    const dataSource = ref([]);
    const keyword = ref(''); 
    const pushType = ref(''); 
    const formLayout = 'horizontal'; 
    const currentPage = ref(1); // 当前页码
    const pageSize = ref(10); // 每页显示的记录数
    const total = ref(0); // 总记录数
    const pageTotal = ref(0); // 总页数
    const columns = [
      {
        title: '文章ID',
        dataIndex: 'id', 
        key: 'id',
      },
      {
        title: '标题',
        dataIndex: 'title',
        key: 'title',
      },
      {
        title: '公众号',
        customRender: ({ text, record }) => {
          // 使用 record.user.userName 来访问嵌套属性
          return record.publicAccountInfo?.userName || '';
        }
      },
      {
        title: '计划推送时间',
        dataIndex: 'planPushTime',
        customRender: ({ text }) => {
          return text ? dayjs(text).format('YYYY-MM-DD HH:mm:ss') : '-';
        }
      },
      {
        title: '推送状态',
        dataIndex: 'status',
        customRender: ({ text }) => {
          const statusMap = {
            1: { text: '待推送', color: '#000' },
            2: { text: '已推送', color: '#017D6F' }
          };
          const status = statusMap[text] || {};
          return h('span', { style: { color: status.color } }, status.text);
        }
      }
    ];
    const openEditorPage = () => {
      router.push({ name: 'editArticle' });
    };
    const fetchData = async (page = 1, pageSize = 10, keyword = '') => {
      try {
        const response = await axios.get(`/admin-service/official/article/page`, {
          params: {
            keyword: keyword,
            pageNo: page,
            pageSize: pageSize
          },
          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, keyword.value);
    };

    const resetSearch = () => {
      keyword.value = '';
      pushType.value = '';
      handleSearch();
    };

    const handlePageChange = (page) => {
      fetchData(page, pageSize.value, keyword.value);
    };

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

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

    watch([keyword], ([newkeyword]) => {
    }, { immediate: true });


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