import React, { useState, useEffect } from "react";
import { View, Text } from "@tarojs/components";

import "./index.scss";
import httpService from "@/services/httpService";
import Taro from "@tarojs/taro";

interface BillRecord {
  id: number;
  file_name: string;
  download_url: string;
  file_size: number;
  create_time: string;
  expire_time: string;
  bill_date_range_start: string;
  bill_date_range_end: string;
  bill_transaction_type: string;
  bill_transaction_sub_type: string;
  date_range_desc: string;
  transaction_type_desc: string;
  transaction_sub_type_desc: string;
}

const DownloadBillRecords: React.FC = () => {
  const [records, setRecords] = useState<BillRecord[]>([]);
  const [params, setParams] = useState({
    page: 1,
    limit: 20,
  });

  useEffect(() => {
    fetchRecords();
  }, []);
  
  const fetchRecords = async () => {
    try {
      const response = await httpService.post<{ rows: BillRecord[] }>('/wallet/download_history', params);
      setRecords(response.data.rows);
    } catch (error) {
      console.log(error);
      Taro.showToast({
        title: '获取账单记录失败',
        icon: 'none',
        duration: 2000,
      });
    }
  };
  return (
    <View className="download-bill-records-page">
      <View className="records-container">
        {
          records.map((record) => (
            <View className="record-item" key={record.id}>
              <View className="title-text">{record.file_name}</View>
              <View className="info-item">
                <Text>申请时间</Text>
                <Text>{record.create_time}</Text>
              </View>
              <View className="info-item">
                <Text>账单范围</Text>
                <Text>{record.date_range_desc}</Text>
              </View>
              <View className="info-item">
                <Text></Text>
                <Text className="btn">查看材料</Text>
              </View>
            </View>
          ))
        }
      </View>
      <View className="tips">出于信息安全考虑，仅保留并展示7天内的账单下载记录</View>
    </View>
  );
};

export default DownloadBillRecords;