<template>
    <div class="water-quality-page">
        <div class="top">
            <div class="top">
                <el-form label-width="auto" inline ref="ruleForm" :model="forMist">
                    <el-form-item label-width="auto" prop="warningValue" label="取样点类型:">
                        <el-select v-model="forMist.type" @change="onTypeChange" clearable>
                            <el-option label="地下水" :value="1"></el-option>
                            <el-option label="排口" :value="2"></el-option>
                            <el-option label="饮用水" :value="3"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="取样点名称:" prop="projectId">
                        <el-input clearable placeholder="取样点名称" v-model="forMist.samplingPointName" type="text"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="Search" @click="onSearch"> 搜索</el-button>
                        <el-button type="primary" icon="Plus" plain @click="onAdd"> 新增</el-button>
                    </el-form-item>
                </el-form>
            </div>

        </div>
        <el-table :data="tableData" v-loading="tableLoading" stripe max-height="700">
            <el-table-column type="index" width="55" :index="getIndex" label="序号" align="center" />

            <el-table-column prop="samplingPointName" label="名称" align="center"></el-table-column>
            <el-table-column prop="type" label="类型" align="center">
                <template #default="{ row }">
                    <span>{{ row.type == 1 ? "地下水" : row.type == 2 ? '排口' : "饮用水" }}</span>
                </template>
            </el-table-column>

            <el-table-column prop="pointX" label="经度" align="center"></el-table-column>
            <el-table-column prop="pointY" label="维度" align="center"></el-table-column>
            <el-table-column fixed="right" label="操作" align="center" width="120">
                <template #default="{ row }">
                    <el-button link type="primary" @click="onEdit(row)">修改</el-button>
                    <el-button link type="danger" @click="onDelete(row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="float: right;">
            <el-pagination :page-sizes="[10, 20, 30, 50]" layout="total,sizes, prev, pager, next,jumper"
                style="margin-top: 15px;" @size-change="sizeChange" @current-change="handleCurrentChange"
                v-model::pageNum-page="forMist.pageNum" v-model:page-size="forMist.pageSize" background
                :total="forMist.total"></el-pagination>
        </div>
        <el-dialog title="新增" v-model="visible" @close="onModalClose" :modal-append-to-body="false"
            :close-on-click-modal="false">
            <el-form label-width="auto" :rules="rules" ref="ruleForm" :model="formData">
                <el-form-item label="采集点类型：" prop="type">
                    <el-select v-model="formData.type" placeholder="采集点类型" style="width: 100%;">
                        <el-option :label="item.label" :value="item.value" v-for="(item, index) in typeList"
                            :key="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="采集点名称：" prop="samplingPointName">
                    <el-input placeholder="采集点名称" v-model="formData.samplingPointName"></el-input>
                </el-form-item>
                <el-form-item label="采集点地址：" @click="clickMap" prop="pointX">
                    <el-input placeholder="采集点地址" v-model="formData.siteAddress"></el-input>
                </el-form-item>
                <el-form-item label="采集点经度：" prop="pointX">
                    <el-input placeholder="采集点经度" disabled type="number" v-model="formData.pointX"></el-input>
                </el-form-item>
                <el-form-item label="采集点维度：" prop="pointY">
                    <el-input placeholder="采集点维度" disabled type="number" v-model="formData.pointY"></el-input>
                </el-form-item>
                <el-form-item label="采集点备注：">
                    <el-input placeholder="采集点备注" type="textarea" v-model="formData.remark"></el-input>
                </el-form-item>
            </el-form>
            <div style="text-align: right;padding: 10px;">
                <el-button @click="closed" :loading="formLoading">关闭</el-button>
                <el-button type="primary" @click="onSubmit" :loading="formLoading">确定</el-button>
            </div>
        </el-dialog>

        <el-dialog v-model="isMap" title="地址" :modal-append-to-body="false" :close-on-click-modal="false" width="800px">
            <div class="nf-o-d-content-right map-is-collapse" :class="{ 'map-is-collapse': isCollapse }">
                <aliMap  ref="map" @updateLocation="updateLocation" />
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { prosamplepointconfigData, prosamplepointconfigSave, deleteConfigData, editConfigData } from "@/services";
// import deepClone from "@/utils/deepClone";
// import { ElMessage, ElMessageBox } from 'element-plus'
import aliMap from '@/components/aliMap/index.vue';
import bus from '@/bus'
export default {
    components: {
        aliMap
    },
    data() {
        return {
            isMap: false,
            isAdd: true,
            tableHeight: '822px',

            forMist:
            {
                type: "", // 采集点类型
                pageNum: 1,
                pageSize: 10,
            }
            ,
            total: 0,
            tableLoading: false,
            tableData: [],
            visible: false,
            typeList: [
                { label: "地下水", value: 1 },
                { label: "排口", value: 2 },
                { label: "饮用水", value: 3 },
            ],
            formLoading: false,
            formData: {
                type: "", // 采集点类型
                samplingPointName: "", // 采集点名称
                pointX: "", // 经度
                pointY: "", // 维度
                remark: "", // 备注
            },
            rules: {
                type: [
                    { required: true, message: "请选择采集点" }
                ],
                samplingPointName: [
                    { required: true, message: "请输入采集点名称" }
                ],
                pointX: [
                    { required: true, message: "请输入采集点经度" }
                ],
                pointY: [
                    { required: true, message: "请输入采集点维度" }
                ],
            }
        }
    },

    methods: {
        updateLocation(Addr) {
            console.log('位置信息：',Addr)
        },
        getIndex(index) {
            return (this.forMist.pageNum - 1) * this.forMist.pageSize + index + 1
        },
        // 切换分页
        handleCurrentChange(c) {
            console.log(c, 8);
            this.forMist.pageNum = c;
            console.log(this.forMist, 7777);
            this.getTableData(this.forMist);

        },
        sizeChange(pageSize) {
            this.forMist.pageSize = pageSize;
            this.getTableData(this.forMist);
        },
        clickMap() {
            this.isMap = true
        },

        onSearch() {
            this.getTableData(this.forMist);
        },
        closed() {
            this.visible = false;
            this.getTableData(this.forMist);
        },
        // 点击修改站点
        onEdit(val) {
            this.dialogTitle1 = "操作";
            this.visible = true;
            this.formData = val
            this.isAdd = false
            // this.editConfig(this.formData)
        },
        //编辑
        async editConfig(v) {
            let { code } = await editConfigData(v)
            if (code == 200) {
                this.visible = false;
                this.getTableData(this.forMist);
            }
        },
        //删除
        async deleteConfig(v) {
            let { code } = await deleteConfigData(v)
            if (code == 200) {
                this.getTableData(this.forMist);
            }
        },
        // 点击s删除
        onDelete(v) {
            console.log(v, 333);
            ElMessageBox.confirm(
                '您确定删除吗？',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
                .then(() => {
                    this.deleteConfig(v)
                    ElMessage({
                        type: 'success',
                        message: '删除成功',
                    })
                })
        },
        // 获取表格数据
        async getTableData(p) {

            this.tableLoading = true;
            let res = await prosamplepointconfigData(p);
            this.tableLoading = false;
            if (res.code === 200) {
                const { total, data } = res;
                this.forMist.total = total;
                this.tableData = data;
            }
        },
        // 切换分页
        // handleCurrentChange(current) {
        //     this.current = current;
        //     this.getTableData(this.forMist);
        // },
        // 关闭弹框
        onModalClose() {
            this.visible = false;
            this.$refs["ruleForm"].clearValidate();
            this.$refs["ruleForm"].resetFields();
            this.formData = {
                type: "", // 采集点类型
                samplingPointName: "", // 采集点名称
                pointX: "", // 经度
                pointY: "", // 维度
                remark: "", // 备注
            }
        },
        // 点击新增
        onAdd() {
            this.isAdd = true
            this.visible = true;
        },
        // 点击提交
        onSubmit() {
            this.$refs["ruleForm"].validate((valid) => {
                if (valid) {
                    let list =this.typeList;
                    // let list = deepClone(this.typeList);
                    let val = list.filter(item => item.value === this.formData.type)[0].label;
                    this.formData.typezn = val;
                    this.onSave();
                } else {
                    console.log('error submit!!');
                    return false;
                }
            })
        },
        // 提交新增
        async onSave() {
            if (this.isAdd) {
                this.formLoading = true;
                let res = await prosamplepointconfigSave(this.formData);
                this.formLoading = false;
                if (res.code === 200) {
                    this.$message({
                        type: "success",
                        message: "新增成功"
                    })
                    this.onModalClose();
                    this.getTableData(this.forMist);
                } else if (res.code && res.code !== 200) {
                    this.$message({
                        type: "error",
                        message: res.msg
                    })
                }
            } else {
                this.editConfig(this.formData)
            }
        },
        // 重置高度
        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() {
        bus.on("mapPointClick", ({ lat, lng, address }) => {
            console.log(2232323);
            this.formData.siteAddress = address
            this.formData.pointY = lat + ''
            this.formData.pointX = lng + ''
            // this.visible = true
            this.isMap = false
        })
        
        this.getTableData(this.forMist);
        // this.fetTableHeight();
    }
}
</script>
<style lang="less" scoped >
.water-quality-page {
    // background-image: url("../../assets/images/bj_img.png");
    // height: 91vh;
    padding: 20px;
    border: 1px solid #ddd;
    height: 90vh;

    .top {
        margin-bottom: 15px;
    }
}
</style>