<template>
    <div class="app-container invoice-examine">
        <!-- 基本信息 -->
        <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>

        <div v-if="!['已开票', '已驳回'].includes(state.invoiceInfo.orderinvoicestatus)">
            <h2 class="mt-10 font-medium">审核信息</h2>
            <el-card shadow="never" class="mt-2">
                <el-form :model="form" label-width="auto" :rules="formRules">
                    <el-form-item label="审核结果" prop="orderinvoicecode">
                        <el-radio-group v-model="form.shStatus">
                            <el-radio :value="1">通过</el-radio>
                            <el-radio :value="0">驳回</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="发票号" prop="orderinvoicecode" v-if="form.shStatus">
                        <el-input v-model="form.orderinvoicecode" />
                    </el-form-item>
                    <!-- <el-form-item label="开票时间" prop="orderinvoicekpdate" v-if="form.shStatus">
                    <el-date-picker v-model="form.orderinvoicekpdate" type="datetime" placeholder="请选择时间"
                        class="!w-full" />
                </el-form-item> -->
                    <!-- <el-form-item label="开票人" prop="orderinvoicekpuser" v-if="form.shStatus">
                    <el-input v-model="form.orderinvoicekpuser" disabled />
                </el-form-item>
                <el-form-item label="开票备注" prop="orderinvoicekpbz" v-if="form.shStatus">
                    <el-input v-model="form.orderinvoicekpbz" type="textarea" :rows="3" />
                </el-form-item> -->
                    <el-form-item label="审核备注" prop="orderinvoiceshbz">
                        <el-input v-model="form.orderinvoiceshbz" type="textarea" :rows="3" />
                    </el-form-item>
                    <el-form-item>
                        <div class="flex justify-center w-full">
                            <el-button type="primary" @click="onSubmit" :loading="state.submitLoading">提交</el-button>
                        </div>
                    </el-form-item>
                </el-form>
            </el-card>
        </div>

        <!-- 开票信息 -->
        <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"
            v-if="['已驳回'].includes(state.invoiceInfo.orderinvoicestatus)">
            <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'
import dayjs from 'dayjs';
import useUserStore from '@/store/modules/user';

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

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

const form = reactive({
    shStatus: 1,
    orderinvoicecode: '',
    // orderinvoicekpdate: dayjs().format('YYYY-MM-DD HH:mm:ss'),
    // orderinvoicekpuser: userStore.account,
    orderinvoicekpbz: '',
})

const formRules = {
    orderinvoicecode: [
        { required: true, message: '请输入发票号', trigger: 'blur' }
    ],
    // orderinvoicekpdate: [
    //     { required: true, message: '请选择开票时间', trigger: 'blur' }
    // ],
    // orderinvoicekpuser: [
    //     { required: true, message: '请输入开票人', trigger: 'blur' }
    // ],
    // orderinvoicekpbz: [
    //     { required: true, message: '请输入开票备注', trigger: 'blur' }
    // ],
    orderinvoiceshbz: [
        { required: true, message: '请输入审核备注', trigger: 'blur' }
    ]
}

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

watch(()=>form.shStatus, (val) => {
    form.orderinvoicecode = ''
    form.orderinvoiceshbz = ''
})

const onSubmit = async () => {
    state.submitLoading = true
    try {
        const res = await storeMethods.sh({
            orderinvoiceid: route.query.orderinvoiceid, //发票流水号
            shzt: form.shStatus, //审核状态  1通过，0驳回
            orderinvoicecode: form.orderinvoicecode, //发票号
            // orderinvoicekpdate: form.orderinvoicekpdate, //开票时间
            // orderinvoicekpuser: form.orderinvoicekpuser, //开票人
            // orderinvoicekpbz: form.orderinvoicekpbz, //开票备注
            orderinvoiceshbz: form.orderinvoiceshbz, //审核备注
        })
        getDetail({
            'orderinvoiceid.value': route.query.orderinvoiceid
        })
        ElMessage({
            type: 'success',
            message: '审核成功'
        })
    } catch (error) {
    }
    state.submitLoading = false
}

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>