<template>
    <div class="main">
        <div class="cardTitle">财务账单</div>
        <div class="search-box">
            <a-space size="large">
                <a-form-model layout="inline">
                    <a-form-model-item label="订单时间范围">
                        <a-date-picker v-model="form.createDateStart" placeholder="请选择开始时间" /> ——
                        <a-date-picker v-model="form.createDateEnd" placeholder="请选择结束时间" />
                    </a-form-model-item>
                    <a-form-model-item label="购买时间范围">
                        <a-date-picker v-model="form.buyingDateStart" placeholder="请选择开始时间" /> ——
                        <a-date-picker v-model="form.buyingDateEnd" placeholder="请选择结束时间" />
                    </a-form-model-item>
                </a-form-model>
            </a-space>
        </div>
        <div class="search-box">
            <a-space size="large">
                <a-form-model layout="inline">
                        <a-form-model-item label="订单号">
                            <a-input v-model="form.code" placeholder="请输入订单号" />
                        </a-form-model-item>
                        <a-form-model-item label="公司名称">
                            <a-input v-model="form.name" placeholder="请输入公司名称" />
                        </a-form-model-item>
                </a-form-model>
                <a-button @click="onSearch" type="primary">查 询</a-button>
                <a-button @click="onReset">重 置</a-button>
            </a-space>
        </div>
        <div id="commonTable">
            <a-table
                :scroll="{ x: 1300 }"
                :columns="columns"
                :data-source="tableData"
                :pagination="pagination"
                @change="handleTableChange"
                :row-key="
                (record, index) => {
                    return index;
                }
                "
            >
                <span slot="tags" slot-scope="text, record">
                    <a-tag v-for="(item, index) in record.includeFunctionModelList" :key="index" :color="colors[index] ? colors[index] : 'black'">
                        {{item}}
                    </a-tag>
                </span>
                <span slot="action" slot-scope="text,record">
                    <a @click="payback(record)">退款</a>
                    <span style="margin: 5px">|</span>
                    <a @click="billDetail(record)">账单明细</a>
                </span>
            </a-table>
        </div>
    </div>
</template>

<script>
import {getAllList} from "@/api/manage"
export default {
    name: "chagingStandard",
    data() {
        return {
            form: {
                pageNum: 1,
                size: 10,
                code: '',
                name: '',
                createDateStart: '',
                createDateEnd: '',
                buyingDateStart: '',
                buyingDateEnd: ''
            },
            tableData: [],
            colors: ['volcano','orange','yellow','green','blue','purple','grey'],
            columns: [
                {
					title: "订单号",
					dataIndex: "code",
					width: 150,
				},
                {
					title: "公司名称",
					dataIndex: "name",
					width: 150,
				},
                {
					title: "付款金额",
					dataIndex: "payPrice",
					width: 150,
				},
				{
					title: "包含功能模块",
					dataIndex: "includeFunctionModelList",
					scopedSlots: { customRender: "tags" },
					width: 350,
				},
                {
					title: "订单生成时间",
					dataIndex: "createDate",
					width: 160,
				},
				{
					title: "操作",
					dataIndex: "action",
					key: "action",
					width: 180,
					fixed: "right",
					scopedSlots: { customRender: "action" },
				},
            ],
            pagination: {
                current: 1,
				total: 0,
				pageSize: 10,
				showTotal: (total) => `共 ${total} 条`,
				showSizeChanger: true,
				showQuickJumper: true,
            }
        }
    },
    mounted() {
        this.getData()
    },
    methods: {
        getData() {
            getAllList(this.form).then(res => {
                this.pagination.total = res.data.total;
                let data = res.data.rows;
                this.tableData = data;
            })
        },
        //分页
		handleTableChange(pagination) {
			this.form.size = pagination.pageSize;
			this.form.pageNum = pagination.current;
			this.getData();
		},
        //查询和重置
        onSearch() {
            this.getData()
        },
        onReset() {
            this.form.name = '';
            this.getData();
        },
        //退款和详情
        payback(record) {
            this.$router.push(
				{
					name:'_payback',
					query: {
						id: record.id
					}
				}
			)
        },
        billDetail(record) {
            this.$router.push(
				{
					name:'_billDetail',
					query: {
						id: record.id
					}
				}
			)
        }
    }
}
</script>

<style lang="less" scoped>

</style>