<template>
    <div class="sewagePoint-page">
        <div class="top">
            <el-button  type="primary" @click="onAdd">新增</el-button>
        </div>
        <el-table :data="tableData" stripe v-loading="tableLoading"  max-height="700">
            <el-table-column label="点位名称" prop="pointName" align="center"></el-table-column>
            <el-table-column label="点位地址" prop="address" align="center"></el-table-column>
            <el-table-column label="点位类型" prop="typeName" align="center"></el-table-column>
            <el-table-column label="经度" prop="pointX" align="center"></el-table-column>
            <el-table-column label="维度" prop="pointY" align="center"></el-table-column>
        </el-table>
        <el-pagination
            style="margin-top: 15px;"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            :current-page="current"
            :page-size="pageSize"
            :page-sizes="[10, 20, 30, 50]"
            layout="total, sizes, prev, pager, next"
            :total="total"
        ></el-pagination>
        <el-dialog
            v-model="visible"
            title="新增点位信息"
            :modal-append-to-body="false"
            :close-on-click-modal="false"
            @close="onModalClose"
            width="600px"
        >
            <el-form ref="ruleForm" :rules="rules" :model="formData" label-width="auto">
                <el-form-item label="污水点名称：" prop="pointName">
                    <el-input
                        placeholder="请输入名称"
                        
                        v-model="formData.pointName"
                        style="width: 300px;"
                    ></el-input>
                </el-form-item>
                <el-form-item label="污水点地址：" prop="address">
                    <el-input
                        placeholder="请输入地址"
                        
                        v-model="formData.address"
                        style="width: 300px;"
                    ></el-input>
                </el-form-item>
                <el-form-item label="污水点经度：" prop="pointX">
                    <el-input
                        placeholder="请输入经度"
                        type="number"
                        
                        v-model="formData.pointX"
                        style="width: 300px;"
                    ></el-input>
                </el-form-item>
                <el-form-item label="污水点维度：" prop="pointY">
                    <el-input
                        placeholder="请输入维度"
                        type="number"
                        
                        style="width: 300px;"
                        v-model="formData.pointY"
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button
                        type="primary"
                        
                        @click="onSubmit"
                        :loading="formLoading"
                    >提交</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
import { prosewagepointData, prosewagepointSave } from "@/services";

export default {
    data() {
        return {
            tableHeight: 0,
            current: 1, // 当前页
            pageSize: 10, // 分页长度
            total: 0, // 数据总条数
            tableLoading: false, // 表格加载状态
            tableData: [], // 列表数据
            formData: {
                pointName: "",
                address: "",
                pointX: "",
                pointY: ""
            },
            rules: {
                pointName: [
                    { required: true, message: "请输入点位名称" }
                ],
                address: [
                    { required: true, message: "请输入点位地址" }
                ],
                pointX: [
                    { required: true, message: "请输入经度" }
                ],
                pointY: [
                    { required: true, message: "请输入维度" }
                ],
            },
            formLoading: false, // 提交加载状态
            visible: false, // 新增弹框
        }
    },
    methods: {
        // 切换分页长度
        handleSizeChange(size) {
            this.pageSize = size;
            this.getTableData();
        },
        // 切换分页
        handleCurrentChange(current) {
            this.current = current;
            this.getTableData();
        },
        // 获取表格数据
        async getTableData() {
            let _data = {
                current: this.current,
                size: this.pageSize
            }
            this.tableLoading = true;
            let res = await prosewagepointData(_data);
            this.tableLoading = false;
            if (res.code === 200) {
                const { records, total } = res.data;
                this.tableData = records;
                this.total = total
            }
        },
        // 关闭弹框
        onModalClose() {
            this.visible = false;
            this.formData = {
                pointName: "",
                address: "",
                pointX: "",
                pointY: ""
            }
        },
        // 点击新增按钮
        onAdd() {
            this.visible = true;
        },
        // 点击提交按钮
        onSubmit() {
            this.$refs["ruleForm"].validate((valid) => {
                if (valid) {
                    this.savePoint();
                } else {
                    return false;
                }
            })
        },
        // 提交新增
        async savePoint() {
            let _data = {
                data: this.formData
            }
            this.formLoading = true;
            let res = await prosewagepointSave(_data);
            this.formLoading = false;
            if (res.code === 200) {
                this.$message({
                    type: "success",
                    message: "新增成功"
                })
                this.getTableData();
                this.onModalClose();
            } else if (res.code && res.code !== 200) {
                this.$message({
                    type: "error",
                    message: res.msg
                })
            }
        },
        // 重置高度
        resetHeight() {
            return new Promise((resolve, reject) => {
                this.tableH = 0
                resolve()
            })
        },
        // 设置table高度
        // fetTableHeight() {
        //     this.resetHeight().then(res => {
        //         let bodyH = document.documentElement.clientHeight; // 屏幕高度
        //         let h = document.getElementsByClassName('top-menu')[0].clientHeight + 100; // 二级菜单栏高度
        //         let topH = document.getElementsByClassName('top')[0].clientHeight; // 二级菜单栏高度
        //         this.tableHeight = bodyH - h - topH - 100 + "px";
        //     })
        // }
    },
    mounted() {
        this.getTableData();
        // this.fetTableHeight();
    }
}
</script>
<style lang="less" scoped>
.sewagePoint-page {
    padding: 20px;
    border: 1px solid #ddd;
    height: 90vh;
    .top {
        margin-bottom: 15px;
    }
    .el-input__inner {
        // color: #fff;
    }
}
</style>