<template>
    <div class="app-container invoice-info">
        <!-- 基本信息 -->
        <el-descriptions border title="基本信息" :column="3">
            <el-descriptions-item label="订单编号">{{ state.invoiceInfo.orderinvoiceorderid }}</el-descriptions-item>
            <el-descriptions-item label="用户编号">{{ state.invoiceInfo.orderinvoiceyhid }}</el-descriptions-item>
            <el-descriptions-item label="客户编号">{{ state.invoiceInfo.orderinvoicecustomerid }}</el-descriptions-item>
        </el-descriptions>

        <!-- 发票详细 -->
        <el-descriptions border title="发票详细" :column="3" class="mt-10">
            <el-descriptions-item label="发票状态">
                <el-tag size="small" type="warning" v-if="state.invoiceInfo.orderinvoicestatus === '待审核'">待审核</el-tag>
                <el-tag size="small" type="success" v-if="state.invoiceInfo.orderinvoicestatus === '已开票'">已开票</el-tag>
                <el-tag size="small" type="error" v-if="state.invoiceInfo.orderinvoicestatus === '已驳回'">已驳回</el-tag>
            </el-descriptions-item>

            <el-descriptions-item label="发票流水号">{{ state.invoiceInfo.orderinvoiceid }}</el-descriptions-item>
            <el-descriptions-item label="发票类型">{{ state.invoiceInfo.orderinvoicetype }}</el-descriptions-item>
            <el-descriptions-item label="发票金额">{{ state.invoiceInfo.orderinvoiceprice }}</el-descriptions-item>
            <el-descriptions-item label="公司名称">{{ state.invoiceInfo.orderinvoicegs }}</el-descriptions-item>
            <el-descriptions-item label="纳税人识别号">{{ state.invoiceInfo.orderinvoicesh }}</el-descriptions-item>
            <el-descriptions-item :span="3" label="地址">{{ state.invoiceInfo.orderinvoiceaddress
                }}</el-descriptions-item>
            <el-descriptions-item label="电话">{{ state.invoiceInfo.orderinvoicetel }}</el-descriptions-item>
            <el-descriptions-item label="开户行">{{ state.invoiceInfo.orderinvoiceyhmc }}</el-descriptions-item>
            <el-descriptions-item label="银行卡号">{{ state.invoiceInfo.orderinvoiceyhcode }}</el-descriptions-item>
            <el-descriptions-item label="电子邮箱">{{ state.invoiceInfo.orderinvoicemail }}</el-descriptions-item>
        </el-descriptions>

        <!-- 开票信息 -->
        <el-descriptions border title="开票信息" :column="3" class="mt-10"
            v-if="['已开票'].includes(state.invoiceInfo.orderinvoicestatus)">
            <el-descriptions-item label="发票号">{{ state.invoiceInfo.orderinvoicecode }}</el-descriptions-item>
            <!-- <el-descriptions-item label="开票号码">{{ state.invoiceInfo.orderinvoicekpcode }}</el-descriptions-item> -->
            <el-descriptions-item label="开票时间">{{ state.invoiceInfo.orderinvoicekpdate }}</el-descriptions-item>
            <el-descriptions-item label="开票人">{{ state.invoiceInfo.orderinvoicekpuser }}</el-descriptions-item>
            <el-descriptions-item label="开票备注">{{ state.invoiceInfo.orderinvoicekpbz }}</el-descriptions-item>
        </el-descriptions>

        <!-- 审核信息 -->
        <el-descriptions border title="审核信息" :column="3" class="mt-10">
            <el-descriptions-item label="审核人">{{ state.invoiceInfo.orderinvoiceshuser }}</el-descriptions-item>
            <el-descriptions-item label="审核时间">{{ state.invoiceInfo.orderinvoiceshdate }}</el-descriptions-item>
            <el-descriptions-item label="审核备注">{{ state.invoiceInfo.orderinvoiceshbz }}</el-descriptions-item>
        </el-descriptions>
    </div>
</template>

<script setup>
import invoiceStoreApi from '@store/modules/orderinvoiceManage'

// 接口封装文件
const storeMethods = invoiceStoreApi()
const route = useRoute()

const state = reactive({
    invoiceInfo: {},
    labelStyle: {
        'width': '30%',
    }
})

/** 查询菜单列表 */
const getDetail = async (query) => {
    state.invoiceInfo = await storeMethods.view(query)
}

onMounted(() => {
    getDetail({
        'orderinvoiceid.value': route.query.orderinvoiceid
    })
})
</script>

<style lang="scss" scoped>
:deep(.el-descriptions__label) {
    width: 10%;
}

:deep(.el-descriptions__content) {
    width: 20%;
}
</style>