<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.user" placeholder="" />
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="handleSubmit('formInline')">搜索</Button>
                </FormItem>
            </Form>
        </div>
        <div class="action-btn">
            <Button type="primary" @click="show_modal = true">添加</Button>
            <!-- <Button type="error">删除</Button> -->
        </div>
        <div class="table-container">
            <Table border :columns="columns" stripe :height="tableHeight" :data="data">
                <template #action="{ row, index }">
                    <Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">编辑</Button>
                    <Button type="error" size="small" @click="remove(index)">删除</Button>
                </template>
            </Table>
            <Page :total="total" show-total show-sizer class="page" />
        </div>


        <!-- 添加、编辑 -->
        <Modal v-model="show_modal" title="Common Modal dialog box title" :mask-closable="false" @on-ok="ok"
            @on-cancel="cancel">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                <FormItem label="Name" prop="name">
                    <Input v-model="formValidate.name" placeholder="Enter your name" />
                </FormItem>
                <FormItem label="E-mail" prop="mail">
                    <Input v-model="formValidate.mail" placeholder="Enter your e-mail" />
                </FormItem>
                <FormItem label="City" prop="city">
                    <Select v-model="formValidate.city" placeholder="Select your city">
                        <Option value="beijing">New York</Option>
                        <Option value="shanghai">London</Option>
                        <Option value="shenzhen">Sydney</Option>
                    </Select>
                </FormItem>
                <FormItem label="Date">
                    <Row>
                        <Col span="11">
                        <DatePicker type="date" placeholder="Select date" v-model="formValidate.date"></DatePicker>
                        </Col>
                        <Col span="2" style="text-align: center">-</Col>
                        <Col span="11">
                        <TimePicker type="time" placeholder="Select time" v-model="formValidate.time"></TimePicker>
                        </Col>
                    </Row>
                </FormItem>
                <FormItem label="Gender" prop="gender">
                    <RadioGroup v-model="formValidate.gender">
                        <Radio label="male">Male</Radio>
                        <Radio label="female">Female</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="Hobby" prop="interest">
                    <CheckboxGroup v-model="formValidate.interest">
                        <Checkbox label="Eat"></Checkbox>
                        <Checkbox label="Sleep"></Checkbox>
                        <Checkbox label="Run"></Checkbox>
                        <Checkbox label="Movie"></Checkbox>
                    </CheckboxGroup>
                </FormItem>
                <FormItem label="Desc" prop="desc">
                    <Input v-model="formValidate.desc" type="textarea" :autosize="{ minRows: 2, maxRows: 5 }"
                        placeholder="Enter something..." />
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="handleSubmit2('formValidate')">Submit</Button>
                    <Button @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>

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

export default {
    name: 'charging_station',
    data() {
        return {
            show_modal: false,
            total: 100,
            tableHeight: 500,
            formInline: {
                user: '',
                password: '',
            },
            ruleInline: {},
            columns: [
                {
                    title: '站点名称',
                    key: 'charge_station_name',
                },
                {
                    title: '电费',
                    key: 'ElectricityFee',
                },
                {
                    title: '服务费',
                    key: 'ServiceFee',
                },
                {
                    title: '操作',
                    slot: 'action',
                    width: 150,
                    align: 'center',
                },
            ],
            data: [],
            formValidate: {
                name: '',
                mail: '',
                city: '',
                gender: '',
                interest: [],
                date: '',
                time: '',
                desc: '',
            },
            ruleValidate: {
                name: [
                    { required: true, message: 'The name cannot be empty', trigger: 'blur' },
                ],
                mail: [
                    { required: true, message: 'Mailbox cannot be empty', trigger: 'blur' },
                    { type: 'email', message: 'Incorrect email format', trigger: 'blur' },
                ],
                city: [
                    { required: true, message: 'Please select the city', trigger: 'change' },
                ],
                gender: [
                    { required: true, message: 'Please select gender', trigger: 'change' },
                ],
                interest: [
                    { required: true, type: 'array', min: 1, message: 'Choose at least one hobby', trigger: 'change' },
                    { type: 'array', max: 2, message: 'Choose two hobbies at best', trigger: 'change' },
                ],
                date: [
                    { required: true, type: 'date', message: 'Please select the date', trigger: 'change' },
                ],
                time: [
                    { required: true, type: 'string', message: 'Please select time', trigger: 'change' },
                ],
                desc: [
                    { required: true, message: 'Please enter a personal introduction', trigger: 'blur' },
                    { type: 'string', min: 20, message: 'Introduce no less than 20 words', trigger: 'blur' },
                ],
            },
        }
    },
    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 actionBtnHeight = document.querySelector('.action-btn').offsetHeight
            const pageHeight = 32 // 分页组件大约高度
            const margins = 40 // 上下边距总和
            this.tableHeight = window.innerHeight - actionBtnHeight - searchHeight - pageHeight - margins - 130
        },
        async getList() {
            await GetPerPrice({ page: 1 }).then((res) => {
                this.total = res.total

                this.data = res.yuan
                this.page = res.current_page
            })
        },
        handleSubmit(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.$Message.success('Success!')
                } else {
                    this.$Message.error('Fail!')
                }
            })
        },
        handleReset(name) {
            this.$refs[name].resetFields()
        },
        handleSubmit2(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.$Message.success('Success!')
                } else {
                    this.$Message.error('Fail!')
                }
            })
        },
        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}`,
            })
        },
        remove(index) {
            this.data.splice(index, 1)
        },
        ok() {
            this.$Message.info('Clicked ok')
        },
        cancel() {
            this.$Message.info('Clicked cancel')
        },
    },
}
</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>