<!--
 * @Author: liyingjing ll47991367@qq.com
 * @Date: 2023-06-15 16:24:42
 * @LastEditors: liyingjing ll47991367@qq.com
 * @LastEditTime: 2023-06-26 10:16:42
 * @FilePath: \projectMoment\src\views\configure\waterAnalysis.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="water-analysis-page">
        <div class="top">
            <el-form label-width="auto" inline ref="ruleForm" :model="formData">
                <el-form-item label-width="auto" prop="warningValue" label="水质类别:" >
                    <el-select v-model="typeVal" @change="onTypeChange" >
                        <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-width="auto" prop="warningValue" label="采样点:" clearable>
                    <el-select clearable v-model="sampPointNo" @change="onSiteChange">
                        <el-option v-for="(item, index) in siteList" :key="index" :label="item.samplingPointName"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="Search" @click="onSearch"> 搜索</el-button>
                    <el-button type="primary" plain @click="onAdd" icon="Plus" :disabled="!sampPointNo">
                        新增</el-button>
                </el-form-item>
            </el-form>
        </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="cod" label="COD(化学需氧量)" align="center"></el-table-column>
            <el-table-column prop="nh4N" label="NH4H(氨氮)" align="center"></el-table-column>
            <el-table-column prop="ss" label="SS(悬浮物)" align="center"></el-table-column>
            <el-table-column prop="do" label="溶解氧" align="center"></el-table-column>
            <el-table-column prop="redox" label="氧化还原点位" align="center"></el-table-column>
            <el-table-column prop="samplingDate" label="取样时间" align="center"></el-table-column>
            <!-- <el-table-column fixed="right" label="操作" width="120">
                <template #default="{ row }">
                    <el-button link type="danger" @click="onDelete(row.sampPointNo)">删除</el-button>
                    <el-button link type="primary" @click="onEdit(row)">修改</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="visible" title="新增水质分析" :modal-append-to-body="false" :close-on-click-modal="false"
            @close="onModalClose">
            <el-form label-width="auto" :rules="rules" :model="formData" ref="ruleForm">
                <el-form-item label="取样时间：">
                    <el-date-picker style="width: 100%;" v-model="formData.samplingDate" type="date"
                        value-format="YYYY-MM-DD" format="YYYY-MM-DD" placeholder="选择日期时间"></el-date-picker>
                </el-form-item>
                <!-- <el-form-item label="取样编号：" prop="sampPointNo">
                    <el-input placeholder="取样编号" v-model="sampPointNo" type="number"></el-input>
                </el-form-item> -->
                <el-form-item label="COD(化学需氧量)：" prop="cod">
                    <el-input placeholder="COD(化学需氧量)" v-model="formData.cod" type="number"></el-input>
                </el-form-item>
                <el-form-item label="NH4H(氨氮)：" prop="nh4N">
                    <el-input placeholder="NH4H(氨氮)" v-model="formData.nh4N" type="number"></el-input>
                </el-form-item>
                <el-form-item label="SS(悬浮物)：" prop="ss">
                    <el-input placeholder="SS(悬浮物)" v-model="formData.ss" type="number"></el-input>
                </el-form-item>
                <el-form-item label="DO(溶解氧)：" prop="dd">
                    <el-input placeholder="DO(溶解氧)" v-model="formData.dd" type="number"></el-input>
                </el-form-item>
                <el-form-item label="REDOX(氧化还原点位)" prop="redox">
                    <el-input placeholder="REDOX(氧化还原点位):" v-model="formData.redox" type="number"></el-input>
                </el-form-item>
            </el-form>
            <div style="text-align: right; padding: 10px">
                <el-button type="" @click="onModalClose">关闭</el-button>
                <el-button type="primary" @click="onSubmit" :loading="formLoading">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { prosamplepointconfigSiteList, prosamplepointconfigTableData, prosamplepointconfigSave2 } from "@/services";
import moment from "moment";
export default {
    data() {
        return {
            tableHeight: 0,
            typeVal: 1,
            siteList: [], // 站点列表
            sampPointNo: "", // 选中的站点
            tableData: [], // 表格数据
            tableLoading: false, // 表格加载状态
            pageNum: 1,
            pageSize: 10,
            total: 0,
            visible: false,
            formLoading: false,
            formData: {
                samplingDate: "", // 取样时间
                cod: "",
                nh4N: "",
                ss: "",
            },
            rules: {
                samplingDate: [
                    { required: true, message: "请选择时间" }
                ],
                cod: [
                    { required: true, message: "请填写" }
                ],
                nh4N: [
                    { required: true, message: "请填写" }
                ],
                ss: [
                    { required: true, message: "请填写" }
                ],
                dd: [
                    { required: true, message: "请填写" }
                ],
                redox: [
                    { required: true, message: "请填写" }
                ],
            }
        }
    },
    methods: {
        moment,
        getIndex(index) {
            return (this.pageNum - 1) * this.pageSize + index + 1
        },
        onSearch() {
            this.getTableData();
        },
        // 点击修改站点
        onEdit(val) {
            this.visible = true;
            this.dialogTitle1 = "修改站点";
            console.log(val, 5555);
            this.siteNoDisable = true;
            this.formData = val
        },
        // 点击s删除
        onDelete() {
            ElMessageBox.confirm(
                '您确定删除吗？',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
                .then(() => {
                    ElMessage({
                        type: 'success',
                        message: '删除成功',
                    })
                })
                .catch(() => {
                    ElMessage({
                        type: 'info',
                        message: 'Delete canceled',
                    })
                })
        },
        // 获取站点列表
        async getSiteList() {
            // let _data = {
            //     data: {
            //         type: this.typeVal
            //     }
            // }
            let res = await prosamplepointconfigSiteList(this.typeVal);
            if (res.code === 200) {
                this.siteList = res.data;
                if (res.data.length) {
                    this.sampPointNo = res.data[0].id;
                    this.getTableData();
                } else {
                    this.siteList = []
                    this.siteNo = undefined
                    this.tableData = []
                }
            }
        },
        // 切换分类
        onTypeChange() {
            this.getSiteList();
        },

        searchClick() {
            console.log(this.typeVal);
            console.log(this.sampPointNo);
            this.getTableData();
        },
        // 切换站点
        onSiteChange() {
            // this.getTableData();
        },
        // 获取表格数据
        async getTableData() {
            let _data = {
                pageNum: this.pageNum,
                sidx: "sampling_date",
                order: "desc",
                sampPointNo: this.sampPointNo,
                pageSize: this.pageSize,
                typeVal: this.typeVal
            }
            this.tableLoading = true;
            let res = await prosamplepointconfigTableData(_data);
            this.tableLoading = false;
            if (res.code === 200) {
                const { total, data } = res;
                this.total = total;
                this.tableData = data;
            }
        },
        // 点击新增按钮
        onAdd() {
            this.visible = true;
        },
        // 点击提交按钮
        onSubmit() {
            this.$refs["ruleForm"].validate((valid) => {
                if (valid) {
                    this.onSave();
                } else {
                    return false;
                }
            })
        },


        // 关闭弹框
        onModalClose() {
            this.visible = false;
            this.$refs["ruleForm"].clearValidate();
            this.$refs["ruleForm"].resetFields();
            this.formData = {
                samplingDate: "", // 取样时间
                cod: "",
                nh4N: "",
                ss: "",
                tn: "",
                tp: "",
            }
        },
        // 提交新增
        async onSave() {
            this.formData.sampPointNo=this.sampPointNo
            console.log(this.formData, 444);
            let arrar=[]
            Object.keys(this.formData).forEach(i=> {
                 if(i!='samplingDate' || i!='sampPointNo  ' ){ 
                    arrar.push({ fieldValue:this.formData[i],propertyNo:i})
                 }
            })
            this.formData.propertyList=arrar
            console.log( this.formData,888);
            this.formLoading = true;
            let res = await prosamplepointconfigSave2(this.formData);
            this.formLoading = false;
            if (res.code === 200) {
                this.$message({
                    type: "success",
                    message: "新增成功"
                })
                this.onModalClose();
                this.getTableData();
            } else if (res.code && res.code !== 200) {
                this.$message({
                    type: "error",
                    message: res.msg
                })
            }
        },
        // 切换分页
        handleCurrentChange(pageNum) {
            this.pageNum = pageNum;
            this.getTableData();

        },
        sizeChange(pageSize) {
            this.pageSize = pageSize;
            this.getTableData();
        },
        // 重置高度
        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.getSiteList();
        // this.fetTableHeight();
    }
}
</script>
<style lang="less" scoped>
.water-analysis-page {
    padding: 20px;
    border: 1px solid #ddd;
    height: 90vh;

    .top {
        margin-bottom: 15px;
    }

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