<template>
    <div class="container">
        <div class="search-area">
            <Form ref="formInline" inline :label-width="120" :model="formInline" :rules="ruleInline">
                <FormItem prop="user" label="用户手机号">
                    <Input type="text" v-model="formInline.phone" placeholder="" />
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="handleSubmit('formInline')">搜索</Button>
                </FormItem>
            </Form>
        </div>
        <div class="table-container">
            <Table border :columns="columns" stripe :height="tableHeight" :data="data">
				<template #order="{ row, index }">
					订单编号: {{ row.order_number }}<br>
					开始时间: {{ row.start_time }}<br>
					结束时间: {{ row.end_time }}
				</template>
				<template #pile="{ row, index }">
					充电站名称: {{ row.charge_station_name }}<br>
					充电桩编号: {{ row.ConnectorID}}
				</template>
				<template #user="{ row, index }">
					openId: {{ row.openid }}<br>
					手机号: {{ row.phone}}<br>
					VIN: {{ row.vin }}
				</template>
				<template #power="{ row, index }">
					电量: {{ row.TotalPower }}<br>
					电费: {{ row.ElecMoney}}<br>
					服务费: {{ row.SeviceMoney }}<br>
					总计: {{ row.TotalMoney }}<br>
				</template>
				<template #type="{ row, index }">
					订单类型: {{ row.type_text }}<br>
					<div v-if="row.type == 1">
						充值金额: {{ row.WithholdingMoney }}<br>
						退还金额: {{ row.FeedbackMoney }}<br>
						{{row.is_wind == 0 ? '未结算' : '已结算'}}
					</div>
				</template>
                <template #action="{ row, index }">
                    <!-- <Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">详情</Button> -->
                </template>
            </Table>
            <Page :total="total" show-total show-sizer class="page" @on-change="onChangePage"
				@on-page-size-change="onChangePageSize"/>
        </div>

    </div>
</template>

<script>
import { getChargeOrder } from '@/api'

export default {
    name: 'charging_station',
    data() {
        return {
            show_modal: false,
            page: 1,
			pageSize: 10,
            total: 100,
            tableHeight: 500,
            formInline: {
                user: '',
                password: '',
            },
            ruleInline: {},
            columns: [
                {
                    title: 'id',
                    key: 'order_id',
					width: '80',
                },
                {
                    title: '订单信息',
					slot: 'order',
					width: '280',
                },
                {
                    title: '充电站信息',
                    slot: 'pile',
					width: '240',
                },
				{
                    title: '用户信息',
                    slot: 'user',
					width: '310',
                },
                {
                    title: '充电信息',
                    slot: 'power',
					width: 200,
                },
				{
                    title: '充电类型',
                    slot: 'type',
					width: 180,
                },
                {
                    title: '操作',
                    slot: 'action',
                    width: 150,
                    align: 'center',
                },
            ],
            data: [],
        }
    },
    mounted() {
        this.getList()
        this.calculateTableHeight()
        window.addEventListener('resize', this.calculateTableHeight)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.calculateTableHeight)
    },
    methods: {
        calculateTableHeight() {
            // 计算表格高度 = 窗口高度 - 搜索区域高度 - 分页高度 - 其他间距
            const searchHeight = document.querySelector('.search-area').offsetHeight
            const pageHeight = 32 // 分页组件大约高度
            const margins = 40 // 上下边距总和
            this.tableHeight = window.innerHeight - searchHeight - pageHeight - margins - 130
        },
        async getList() {
            await getChargeOrder({ page: this.page, pageSize: this.pageSize, ...this.formInline }).then((res) => {
                this.total = res.total
                this.data = res.data
                this.page = res.current_page
            })
        },
        handleSubmit() {
           this.getList()
        },
        handleReset(name) {
            this.$refs[name].resetFields()
        },
        show(index) {
            this.$Modal.info({
                title: 'User Info',
                content: `Name：${this.data[index].name}<br>Age：${this.data[index].age}<br>Address：${this.data[index].address}`,
            })
        },
		onChangePage(e) {
			if (this.page != e) {
				this.page = e
				this.getList()
			}
		},
		onChangePageSize(e) {
			if (this.pageSize != e) {
				this.page = 1
				this.pageSize = e
				this.getList()
			}
		},
    },
}
</script>
<style scoped>
.container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 20px;
    box-sizing: border-box;
}

.action-btn {
    margin: 20px 0;
    background-color: white;
    padding: 20px;
    border: 1px solid #F3F7FD;
    border-radius: 15px;
    display: flex;
    align-items: center;
    button {
        margin-right: 20px;
    }
}

.table-container {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.page {
    margin-top: 10px;
    text-align: right;
}
.search-area{
    background-color: white;
    padding-top: 20px;
    border: 1px solid #F3F7FD;
    border-radius: 15px;
}
</style>