<template>
    <a-row :gutter="[18, 18]">
        <a-col :span="24">
            <a-row :gutter="18">
                <a-col :span="12" style="display: flex;">
                    <a-card style="flex: 1; display: flex; flex-direction: column;">
                        <template #title>
                            <span>可开票:&nbsp;&nbsp;</span>
                            <span>¥&nbsp;</span><span class="bold">0.00</span>
                        </template>
                        <template #extra>
                            <a-button type="primary" ghost>去开票</a-button>
                        </template>
                        <div style="display: flex;justify-content: space-around;align-items: center;line-height: 30px;">
                            <div>
                                <div>可开票金额</div>
                                <div><span>¥&nbsp;</span><span class="bold">0.00</span></div>
                            </div>
                            <div>
                                <div>&nbsp;</div>
                                <div>=</div>
                            </div>
                            <div>
                                <div>累计充值</div>
                                <div><span>¥&nbsp;</span><span class="bold">0.00</span></div>
                            </div>
                            <div>
                                <div>&nbsp;</div>
                                <div>-</div>
                            </div>
                            <div>
                                <div>充值已开票</div>
                                <div><span>¥&nbsp;</span><span class="bold">0.00</span></div>
                            </div>
                            <div>
                                <div>&nbsp;</div>
                                <div>-</div>
                            </div>
                            <div>
                                <div>账单已开票</div>
                                <div><span>¥&nbsp;</span><span class="bold">0.00</span></div>
                            </div>
                        </div>
                    </a-card>
                </a-col>
                <a-col :span="12" style="display: flex;">
                    <a-card style="flex: 1; display: flex; flex-direction: column;">
                        <template #title>
                            <span>发票信息:&nbsp;&nbsp;</span>
                        </template>
                        <div>
                            暂无发票信息<a href="javascript:;" @click="visibleOpen = true">去添加</a>
                        </div>
                    </a-card>
                </a-col>
            </a-row>
        </a-col>
        <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 setup>
import { ref, onBeforeMount, computed } from 'vue'
import { usePagination } from '@/hooks'
// 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: 'flowNum', key: 'flowNum' },
    { title: '开票内容', dataIndex: 'transactionTime', key: 'transactionTime' },
    { title: '发票抬头', dataIndex: 'flowNum', key: 'flowNum' },
    { title: '发票总额', dataIndex: 'flowNum', key: 'flowNum' },
    { title: '开票方式', dataIndex: 'flowNum', key: 'flowNum' },
    { title: '发票性质', dataIndex: 'flowNum', key: 'flowNum' },
    { title: '发票状态', dataIndex: 'flowNum', key: 'flowNum' },
    { title: '驳回原因', dataIndex: 'flowNum', key: 'flowNum' },
    { title: '操作', dataIndex: 'flowNum', key: 'flowNum' },
])
onBeforeMount(() => {
    getPageList()

})
const getPageList = () => {
    listData.value = [
        { flowNum: 1 }
    ]
}
/**
 * 分页
 */
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>