<template>
    <div class="ecoShoreline-page">
        <div class="top">
            <el-button type="primary" icon="Refresh" @click="onSearch"> 刷新</el-button>
            <el-button type="primary" plain icon="Plus" @click="onAdd">新增</el-button>
        </div>
        <el-table :data="tableData" v-loading="tableLoading" stripe  max-height="700" @selection-change="handleSelectionChange">
            <el-table-column type="index" width="55" :index="getIndex" label="序号" align="center" />
            <el-table-column prop="pointName" label="名称" align="center"></el-table-column>
            <el-table-column prop="address" label="地址" align="center"></el-table-column>
            <el-table-column prop="description" label="描述" align="center"></el-table-column>
            <el-table-column prop="length" label="长度(km)" align="center"></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 label="图片" align="center">
                <template #default="scope">
                    <div class="img-cnt">
                        <img :src="item.pathSmall" alt v-for="(item, index) in scope.row.pics" :key="index"
                            @click="onShowImg(item.pathPrimeval)" />
                    </div>
                </template>
            </el-table-column>

            <el-table-column fixed="right" label="操作" 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="pageNum"
                v-model:page-size="pageSize" background :total="total"></el-pagination>
        </div>
        <el-dialog v-model="visible1" :close-on-click-modal="false" :modal-append-to-body="false" @close="visible1 = false">
            <div class="img-cnt1">
                <img :src="imgSrc" alt />
            </div>
        </el-dialog>
        <el-dialog v-model="visible" :close-on-click-modal="false" :modal-append-to-body="false" @close="onModalClose"
            title="操作">
            <el-form label-width="auto" :model="formData" :rules="rules" ref="ruleForm">
                <el-form-item label="名称：" prop="pointName">
                    <el-input placeholder="名称" v-model="formData.pointName"></el-input>
                </el-form-item>
             
                <el-form-item label="长度：" prop="length">
                    <el-input placeholder="长度" v-model="formData.length" type="number"></el-input>
                </el-form-item>
                <el-form-item label="地址：" prop="address"  @click="clickMap">
                    <el-input placeholder="地址" v-model="formData.address"></el-input>
                </el-form-item>
                <el-form-item label="经度：" prop="pointX">
                    <el-input placeholder="经度" disabled v-model="formData.pointX" type="number"></el-input>
                </el-form-item>
                <el-form-item label="维度：" prop="pointY">
                    <el-input placeholder="维度" disabled v-model="formData.pointY" type="number"></el-input>
                </el-form-item>
                <el-form-item label="描述：">
                    <el-input placeholder="描述" type="textarea"
                        v-model="formData.description"></el-input>
                </el-form-item>
                <!-- <el-form-item label="图片：">
                    <el-upload  class="upload-demo" ref="upload" accept="image/*" action="#" :limit="3"
                        :on-change="handleChange" :on-remove="handleRemove" :file-list="fileList" :auto-upload="false"
                        list-type="picture-card">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item> -->
                <el-form-item label="上传照片">
                    <el-upload :action="FileUpSrc" list-type="picture-card" :auto-upload="false"
                        :on-change="handleExceed"
                        :limit='1'
                        v-model:file-list="investFileUrl"
                        :on-remove="handleExceedMove">
                        <el-icon>
                            <Plus />
                        </el-icon>
                    </el-upload>
                </el-form-item>
                <!-- <el-form-item>
                    <el-button type="primary" @click="onSubmit" :loading="formLoading">提交</el-button>
                </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></aliMap>
       </div>
    </el-dialog>
    </div>
</template>
<script>
import { ElMessage, ElMessageBox } from 'element-plus'
import {
    proecologicalcoastData,
    uploadImages,
    proecologicalcoastSave,
    proecologicalcoastDelete,
    editCalcoast,
    systemUpload
} from "@/services";
import config from '@/config'

import aliMap from '@/components/aliMap/index.vue';
import bus from '@/bus'
export default {
    components:{
        aliMap
    },
    data() {
        return {
            isMap:false,
            FileUpSrc:  config.baseUrl + '/system/upload',
            isAdd: true,
            tableHeight: 0,
            pageNum: 1,
            pageSize: 10,
            total: 0,
            tableData: [],
            tableLoading: false,
            selectList: [], // 选中的表格行
            visible1: false,
            imgSrc: "",
            visible: false,
            formLoading: false,
            formData: {
                address: "", // 地址
                description: "", // 描述
                length: "", // 长度
                pics: [], // 图片列表
                pointName: "", // 名称
                pointX: "", // 经度
                pointY: "" // 维度
            },
            rules: {
                pointName: [{ required: true, message: "请输入名称" }],
                address: [{ required: true, message: "请输入地址" }],
                length: [{ required: true, message: "请输入长度" }],
                pointX: [{ required: true, message: "请输入经度" }],
                pointY: [{ required: true, message: "请输入维度" }]
            },
            fileList: []
        };
    },
    methods: {
        getIndex(index) {
            return (this.pageNum - 1) * this.pageSize + index + 1
        },
        clickMap(){ 
            this.isMap=true
        },
        onSearch(){
            this.getTableData();
        },
        closed() {
            this.visible = false;
            
        },
 handleExceed(uploadFile,uploadFiles) {
    // this.systemUploadM(uploadFile)
   
},
async systemUploadM(p){ 
    let formData = new FormData()
    formData.append("file",p.raw)
    let {data:{originalName, url}}=await systemUpload(formData)
   this.formData.pics=[url]

},
        // 点击修改站点
        onEdit(val) {
            this.visible = true;
            this.dialogTitle1 = "修改";
            this.siteNoDisable = true;
            this.formData = val
            this.isAdd = false
            this.investFileUrl=[{url:val.pic}]
        },
        //编辑
        async editConfig(v) {
            let { code } = await editCalcoast(v)
            if (code == 200) {
                this.visible = false;
                this.getTableData();
            }
        },
        //删除
        async deleteConfig(v) {
            let { code } = await proecologicalcoastDelete(v)
            if (code == 200) {
                this.getTableData();
            }
        },
        // 点击s删除
        onDelete(v) {
            console.log(v, 333);
            ElMessageBox.confirm(
                '您确定删除吗？',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
                .then(() => {
                    this.deleteConfig(v)
                    ElMessage({
                        type: 'success',
                        message: '删除成功',
                    })
                })
        },
         // 切换分页
         handleCurrentChange(pageNum) {
            this.pageNum = pageNum;
            this.getTableData();
        },
        sizeChange(pageSize){ 
            this.pageSize = pageSize;
            this.getTableData();
        },
        // 获取表格数据
        async getTableData() {
            let _data = {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                data: {}
            };
            this.tableLoading = true;
            let res = await proecologicalcoastData(_data);
            this.tableLoading = false;
            if (res.code === 200) {
                const { total, data } = res;
                this.total = total;
                this.tableData = data;
                this.selectList = [];
            }
        },
        // 点击图片
        onShowImg(src) {
            this.visible1 = true;
            this.imgSrc = src;
        },
        // 关闭弹框
        onModalClose() {
            this.visible = false;
            this.fileList = [];
            this.formData = {
                address: "", // 地址
                description: "", // 描述
                length: "", // 长度
                pics: [], // 图片列表
                pointName: "", // 名称
                pointX: "", // 经度
                pointY: "" // 维度
            };
            this.$refs["ruleForm"].clearValidate();
            this.$refs["ruleForm"].resetFields();
        },
        // 点击新增
        onAdd() {
            this.isAdd = true
            this.visible = true;
        },
        handleRemove(file, fileList) {
            // console.log(file, fileList);
            // this.fileList = fileList;
        },
        handleChange(file, fileList) {
            // this.fileList = fileList;
        },
        // 点击提交按钮
        onSubmit() {
            if( this.investFileUrl.length>0){ 
            let formDataM = new FormData();
            formDataM.append("file", this.investFileUrl[0]?.raw);
            systemUpload(formDataM).then(({ data: { originalName, url } }) => {
                // this.formData.fileName = originalName
                // this.formData.fileUpicrl = url
                this.formData.pic = url
                this.$refs["ruleForm"].validate(valid => {
                if (valid) {
                    this.uploadImg();
                } else {
                    return false;
                }
            });
            })
           }else{ 
            this.$message({
                        type: "warning",
                        message: "请上传文件"
                    })
                    return
           }

           
        },
        // 上传图片
        async uploadImg() {
            const formData = new FormData();
            if (this.fileList.length) {
                this.fileList.map(item => {
                    formData.append("file", item.raw, item.name);
                });
                this.formLoading = true;
                let res = await uploadImages(formData);
                this.formLoading = false;
                if (res.code === 200) {
                    this.formData.pics = res.data;
                    this.onSave();
                } else if (res.code && res.code !== 200) {
                    this.$message({
                        type: "error",
                        message: res.msg
                    });
                }
            } else {
                this.onSave();
            }
        },
        // 提交保存
        async onSave() {
            // let _data = {
            //     data: this.formData
            // };
            if (this.isAdd) {
                this.formLoading = true;
                let res = await proecologicalcoastSave(this.formData);
                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
                    });
                }
            } else {
                this.editConfig(this.formData)
            }
        },
        // 切换表格选中行
        handleSelectionChange(list) {
            this.selectList = list;
        },

        // 提交删除
        async deleteData() {
            let list = [];
            this.selectList.map(item => {
                list.push(item.id);
            });
            let res = await proecologicalcoastDelete(list);
            if (res.code === 200) {
                this.$message({
                    type: "success",
                    message: "删除成功"
                });
                this.getTableData();
            } 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() {
        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.fetTableHeight();
    }
};
</script>
<style lang="less" scoped>
.ecoShoreline-page {
    padding: 20px;
    border: 1px solid #ddd;
    height: 90vh;

    .top {
        margin-bottom: 15px;
    }

    .img-cnt {
        img {
            max-width: 100px;
            height: 50px;
            margin: 0 5px;
            transition: all 0.2s ease-in-out;
        }

        img:hover {
            transform: scale(1.2);
        }
    }

    .img-cnt1 {
        min-height: 600px;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
            max-width: 100%;
        }
    }

    .el-input__inner {
        // color: #fff;
    }
}
</style>