<template>
    <a-row :gutter="[18, 18]">
    
        <a-col :span="24">
            <a-card title="开票记录">
                <a-table :dataSource="listData" :columns="columns" bordered :pagination="paginationState"
                    @change="onTableChange" />
            </a-card>
        </a-col>
    </a-row>
    <a-modal v-model:open="visibleOpen" title="发票信息" @ok="handleOk" style="width: 800px;">
        <a-card>
            <a-form ref="formRef" :model="formData" labelAlign="left" :rules="rules">
                <a-row :gutter="24">
                    <a-col :span="12">
                        <a-form-item label="发票抬头" name="title">
                            <a-input v-model:value="formData.title" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="发票类型" name="type">
                            <a-radio-group v-model:value="formData.type" button-style="solid">
                                <a-radio-button value="a">增值税发票</a-radio-button>
                                <a-radio-button value="b">增值税专用发票</a-radio-button>
                            </a-radio-group>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="纳税人识别号" name="number">
                            <a-input v-model:value="formData.number" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="开户银行名称" name="bankName">
                            <a-input v-model:value="formData.bankName" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="基本开户账号" name="bankNumber">
                            <a-input v-model:value="formData.bankNumber" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="注册场所地址" name="address">
                            <a-input v-model:value="formData.address" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="注册固定电话" name="phone">
                            <a-input v-model:value="formData.phone" />
                        </a-form-item>
                    </a-col>
                          <a-col :span="12">
                        <a-form-item label="收件人姓名" name="recipientName">
                            <a-input v-model:value="formData.recipientName" />
                        </a-form-item>
                    </a-col>
                     <a-col :span="12">
                        <a-form-item label="收件人手机号" name="recipientPhone">
                            <a-input v-model:value="formData.recipientPhone" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="收件人地址" name="recipientAddress">
                            <a-input v-model:value="formData.recipientAddress" />
                        </a-form-item>
                    </a-col>
                      <a-col :span="12">
                        <a-form-item label="邮箱地址" name="emailAddress">
                            <a-input v-model:value="formData.emailAddress" />
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </a-card>
    </a-modal>

</template>
<script lang="ts" setup>
import { ref, onBeforeMount, computed } from 'vue'
import { usePagination } from '@/hooks'
import { 
   invoiceList,
   invoiceDetail
} from '@/apis/admin'

// const listData=ref([ {title:1}])
// const paginationState=ref({
//             total: 0,
//         current: 1,
//         pageSize: 10,
//         showTotal: (total) => `总 ${total} 条数据`,
//         pageSizeOptions: ['10', '20', '30', '40'],
// })
const { listData, loading, showLoading, hideLoading, paginationState, resetPagination, searchFormData } = usePagination()
const visibleOpen = ref(false)
const formData = ref({ type: 'a' })
const formRef=ref(null)
const rules = computed(() => ({
    title: [{ required: true, message: '请输入发票标题', trigger: 'blur' }],
    type: [{ required: true, message: '请选择发票类型', trigger: 'change' }],
    recipientName: [{ required: true, message: '请选择收件人姓名', trigger: 'change' }],
    recipientPhone: [{ required: true, message: '请选择收件人手机号', trigger: 'change' }],
    recipientAddress: [{ required: true, message: '请选择收件人地址', trigger: 'change' }],
    number: [
        {
            required: formData.value.type === 'b', // 只有“增值税专用发票”(value='b')才必填
            message: '请输入纳税人识别号',
            trigger: 'blur'
        }
    ],
    bankName: [
        {
            required: formData.value.type === 'b',
            message: '请输入开户银行名称',
            trigger: 'blur'
        }
    ],
    bankNumber: [
        {
            required: formData.value.type === 'b',
            message: '请输入基本开户账号',
            trigger: 'blur'
        }
    ],
    address: [
        {
            required: formData.value.type === 'b',
            message: '请输入注册场所地址',
            trigger: 'blur'
        }
    ],
    phone: [
        {
            required: formData.value.type === 'b',
            message: '请输入注册固定电话',
            trigger: 'blur'
        }
    ]
}))
const columns = ref([
    { title: '申请时间', dataIndex: 'invoiceDate', key: 'invoiceDate' },
    { title: '开票内容', dataIndex: 'invoiceContent', key: 'invoiceContent' },
    { title: '发票抬头', dataIndex: 'invoiceTitle', key: 'invoiceTitle' },
    { title: '发票总额', dataIndex: 'invoiceAmount', key: 'invoiceAmount' },
    { title: '开票方式', dataIndex: 'invoiceMethod', key: 'invoiceMethod' },
    { title: '发票类型', dataIndex: 'invoiceType', key: 'invoiceType' },
    { title: '发票状态', dataIndex: 'invoiceStatus', key: 'invoiceStatus' },
    { title: '驳回原因', dataIndex: 'rejectReason', key: 'rejectReason' },
    { title: '操作', dataIndex: 'flowNum', key: 'flowNum' },
])
onBeforeMount(() => {
    getPageList()

})

const getPageList = async () => {
  try {
    const params = {
      page_num: 1,
      page_size: 10, // 获取足够多的数据来统计
    };

    const response: any = await invoiceList(params);
    
    if (response.data && Array.isArray(response.data)) {
        listData.value = response.data
      console.log('发票列表:', response.data);
    }
    
    
  } catch (error) {
    console.error('获取全部消息失败:', error);
    listData.value = [];
  }
};
/**
 * 分页
 */
function onTableChange({ current, pageSize }) {
    paginationState.current = current
    paginationState.pageSize = pageSize
    getPageList()
}
/**
 * 搜索
 */
function handleSearch() {
    resetPagination()
    getPageList()
}
/**
 * 重置
 */
function handleResetSearch() {
    searchFormData.value = {}
    resetPagination()
    getPageList()
}
function handleOk() {
    visibleOpen.value = false

    formRef.value.validateFields().then(async(values)=>{
        try {
            
        } catch (error) {
            
        }
    })
}
</script>
<style scoped lang="scss">
.bold {
    font-weight: bold;
}
</style>