<template>
    <div class="main">
        <div class="cardTitle">账单明细</div>
        <a-divider />
        <div class="content">
            <a-descriptions title="账单信息" :column="3">
                <a-descriptions-item label="订单号">
                    {{infoList.code}}
                </a-descriptions-item>
                <a-descriptions-item label="公司全称">
                    {{infoList.companyName}}
                </a-descriptions-item>
                <a-descriptions-item label="绑定账户">
                    {{infoList.userName}}
                </a-descriptions-item>
                <a-descriptions-item label="绑定小区">
                    {{infoList.communityName}}
                </a-descriptions-item>
                <a-descriptions-item label="小区地址">
                    {{infoList.communityAddress}}
                </a-descriptions-item>
                <a-descriptions-item label="购买功能">
                    <a-tag v-for="(item, index) in infoList.includeFunctionModelList" :key="index">
                        {{item}}
                    </a-tag>
                </a-descriptions-item>
                <a-descriptions-item label="时间备注">
                    {{infoList.remakes}}
                </a-descriptions-item>
                <a-descriptions-item label="支付方式">
                    {{infoList.payType == 1 ? '线上' : (infoList.payType == 2 ? '支付宝' : '微信')}}
                </a-descriptions-item>
                <a-descriptions-item label="支付金额">
                    {{infoList.price}} 元
                </a-descriptions-item>
                <a-descriptions-item label="购买时间">
                    {{infoList.buyingDate}}
                </a-descriptions-item>
                <a-descriptions-item label="有效期至">
                    {{infoList.expirationDate}}
                </a-descriptions-item>
            </a-descriptions>
            <a-divider></a-divider>
            <a-descriptions title="退款记录">
            </a-descriptions>
            <a-table :columns="columns" :data-source="tableData" :row-key="(record,index) => {return index}">
                <span slot="payment" slot-scope="scope">
                    <div v-if="scope == 1">线上</div>
                    <div v-if="scope == 2">支付宝</div>
                    <div v-if="scope == 3">微信</div>
                </span>
            </a-table>
            <div class="footer">
                <a-space style="margin-left: 70%">
                    <a-button type="primary">导出</a-button>
                    <a-button @click="goBack">返回</a-button>
                </a-space>
            </div>
        </div>
    </div>
</template>

<script>
import {getOrderDetail} from "@/api/manage"
export default {
    name: "billDetail",
    data() {
        return {
            form: {
                id: 0,
            },
            infoList: [],
            //退款
            columns: [
                {
					title: "退款时间",
					dataIndex: "refundDate",
					width: "200",
				},
                {
					title: "退款金额",
					dataIndex: "price",
					width: "200",
				},
                {
					title: "退款原因",
					dataIndex: "reason",
					width: "200",
				},
                {
					title: "退款方式",
					dataIndex: "type",
					width: "200",
                    scopedSlots: { customRender: "payment" },
				},
            ],
            tableData: [],
        }
    },
    mounted() {
        this.form.id = this.$route.query.id;
        this.getData();
    },
    methods: {
        getData() {
            let obj = Object.assign({}, this.form)
            getOrderDetail(obj).then(res => {
                let data = res.data;
                this.infoList = data;
                this.tableData = data.financialStatementsDetailRefundVoList
            })
        },
        goBack() {
            this.$router.go(-1);
        }
    }
}
</script>

<style>

</style>