<template>
    <div class="main-content12 expense-wrap">
        <div class="flex-common">
            <div class="flex-between mb24">
                <div class=" flex gap12">
                    <b>核算订单记录</b>
                </div>
            </div>
            <div class="flex mb24 gap12" style="gap:30px" v-if="Object.keys(info).length>0">
                <div class="flex"><span>检测站点：</span>{{info.short_name}}</div>
                <div class="flex"><span>支付方式：</span><img width="16px" :src="require('@/assets/pay/pay_'+info.pay_type+'.svg')" alt=""></div>
                <div class="flex"><span>核算金额：</span>{{info.money}}</div>
                <div class="flex"><span>账单生成时间：</span>{{info.ctime}}</div>
            </div>
            <el-form>
                <GuipTable :tableData="tableList" ref="multipleTable" autoColumn="true" :loading="tableLoading" style="flex:1">
                    <el-table-column prop="id" label="ID" min-width="120px"></el-table-column>
                    <el-table-column prop="pro_desc" label="检测类型" min-width="180px"></el-table-column>
                    <el-table-column prop="tid" label="订单编号" min-width="180px"></el-table-column>
                    <el-table-column prop="sale_date" label="订单生成时间" min-width="180px"></el-table-column>
                    <el-table-column prop="report_date" label="检测完成时间" min-width="180px"></el-table-column>
                    <el-table-column prop="wordnum" label="字数" min-width="120px"></el-table-column>
                    <el-table-column prop="payment" label="实际收入（元）" min-width="180px"></el-table-column>
                    <el-table-column prop="cost" label="订单成本（元）" min-width="180px"></el-table-column>
                    <el-table-column prop="status" label="状态"></el-table-column>
                </GuipTable>
            </el-form>
        </div>
    </div>
</template>
<script>

import GuipTable from "@/components/GuipTable.vue";

export default {
    components: {
         GuipTable

    },
    data() {
        return {
            id: 0,
            uid: 0,
            pay_type: 0,

            tableLoading:false,
            tableList:[],
            info:[],
        }
    },
    mounted() {
        const {id, uid, pay_type} = this.$route.query
        if(!id || !uid || !pay_type) {
            this.$message.error('非法请求');
            this.$router.push('/agent/payoff')
        }
        this.id = id
        this.uid = uid
        this.pay_type = pay_type
        this.getBillInfo()
    },
    methods: {
        getBillInfo() {
            this.tableLoading = true
            try {
                this.$http('POST', '/agentnew/ajax_get_bill_info', {
                    id: this.id,
                    uid: this.uid,
                    pay_type: this.pay_type,
                }).then(response => {
                    this.$nextTick(() => {
                        this.info = response.data.info
                        this.tableList = response.data.list
                    })
                }).catch(error => {
                    console.error(error, 'error')
                })
            } catch (error) {
                console.error('数据加载失败:', error)
            } finally {
                this.tableLoading = false
            }
        },
    }
}

</script>
<style lang="scss" scoped>
.el-form-item{
    margin-bottom: 0 !important;
}
</style>