<template>
    <div class="ele-body">
        <a-card :bordered="false">
            <a-modal
                v-model:visible="showEdit"
                :title="form.id !== undefined ? '修改' : '添加'"
                :confirm-loading="loading"
                :width="500"
                :body-style="{ paddingBottom: '8px' }"
                @ok="save"
            >
                <a-form
                    ref="form"
                    :model="form"
                    :rules="rules"
                    :label-col="{ md: { span: 6 }, sm: { span: 24 } }"
                    :wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }"
                >
                    <a-form-item label="最小值" name="minLeq">
                        <a-input-number @change="minLeqChange" :step=".1" :precision="1" v-model:value="form.minLeq"  />
                    </a-form-item>
                    <a-form-item label="最大值" name="maxLeq">
                        <a-input-number :step=".1" :precision="1" v-model:value="form.maxLeq"  />
                    </a-form-item>
                    <a-form-item label="时段" name="timeSlot">
                        <a-select v-model:value="form.timeSlot">
                            <a-select-option value="昼">昼</a-select-option>
                            <a-select-option value="夜">夜</a-select-option>
                        </a-select>
                    </a-form-item>
                    <a-form-item label="等级" name="level">
                        <a-input
                            v-model:value="form.level"
                            placeholder="请输入等级"
                            allow-clear
                        />
                    </a-form-item>

                    <a-form-item label="评价" name="evaluate">
                        <a-input
                            v-model:value="form.evaluate"
                            placeholder="请输入评价"
                            allow-clear
                        />
                    </a-form-item>
                    <a-form-item label="排序" name="sortNumber">
                        <a-input-number :step="1" :precision="0" v-model:value="form.sortNumber"  />
                    </a-form-item>
                </a-form>
            </a-modal>
            <!-- 表格 -->
            <ele-pro-table
                v-model:selection="selectionList"
                ref="table"
                row-key="id"
                :datasource="url"
                :columns="columns"
                :where="where"
                :scroll="{ x: 'max-content' }"
            >
                <template #toolbar>
                    <a-space>
                        <a-button @click="openEdit" type="primary">新增</a-button>
                        <a-popconfirm
                            :disabled="selectionList.length == 0"
                            :title="`确认删除${selectionList.length}条数据吗?`"
                            ok-text="Yes"
                            cancel-text="No"
                            @confirm="removeBatch"
                        >
                            <a-button
                                :disabled="selectionList.length == 0"
                                type="primary"
                                ghost
                                danger
                            >删除
                            </a-button>
                        </a-popconfirm>
                    </a-space>
                </template>
                <template #action="{ record }">
                    <a-space>
                        <a-button
                            @click="openEdit(record)"
                            type="primary"
                            shape="round"
                            size="small"
                        >修改</a-button
                        >
                        <a-popconfirm
                            :title="`确认删除这条数据吗?`"
                            ok-text="Yes"
                            cancel-text="No"
                            @confirm="remove(record)"
                        >
                            <a-button type="primary" danger shape="round" size="small"
                            >删除</a-button
                            >
                        </a-popconfirm>
                    </a-space>
                </template>
            </ele-pro-table>
        </a-card>
    </div>
    <!-- 编辑弹窗 -->
</template>

<script>
// import _ from "lodash";
import {
    listAllUrl,
    saveLeqLevel,
    updateLeqLevel,
    removeLeqLevel,
    removeBatchLeqLevel
} from "@/api/ecology/noise/zone-noise-leq-level";
import { message } from 'ant-design-vue';
// import moment from "moment";
export default {
    name: "ZoneNoiseLeqLevel",
    components: {},
    data() {
        return {
            data: [],
            // 表格数据接口
            url: listAllUrl,
            selection: [],
            // 表格列配置
            columns: [
                {
                    title: "时段",
                    dataIndex: "timeSlot",
                },
                {
                    title: "等级",
                    dataIndex: "level",
                },
                {
                    title: "最小值",
                    dataIndex: "minLeq",
                    customRender: ({text})=>{
                        return text!=undefined? text.toFixed(1):undefined
                    }
                },
                {
                    title: "最大值",
                    dataIndex: "maxLeq",
                    customRender: ({text})=>{
                        return text!=undefined? text.toFixed(1):undefined
                    }
                },
                {
                    title: "评价",
                    dataIndex: "evaluate",
                },
                {
                    title: "排序",
                    dataIndex: "sortNumber",
                },
                {
                    title: "操作",
                    key: "action",
                    width: 150,
                    align: "center",
                    fixed: "right",
                    slots: {
                        customRender: "action",
                    },
                },
            ],

            // 表格搜索条件
            where: {},
            // 表格选中数据
            selectionList: [],
            // 是否显示编辑弹窗
            showEdit: false,
            // 表单数据
            form: {},
            loading: false,
            rules: {
                timeSlot:[{required: true,message: '请选择时段'}],
                // minLeq: [{required: true,message: '请输入最小值',},],
                // maxLeq: [{required: true,message: '请输入最大值',},],
                level: [{required: true,message: '请输入等级',},],
                // evaluate: [{required: true,message: '请输入评价',},],
                sortNumber: [{required: true,message: '请输入排序',},],
            },
        };
    },
    mounted() {
    },
    methods: {
        minLeqChange(e){
            console.log(e)
        },
        /* 刷新表格 */
        reload() {

            this.$refs.table.reload({
                where: this.where,
            });
        },
        /* 重置搜索 */
        reset() {
            this.where = {};
            this.reload();
        },
        /* 打开编辑弹窗 */
        openEdit(row) {
            // cloneRecord.mi
            this.form = Object.assign({}, row);
            this.showEdit = true;
            this.$nextTick(() => {
                this.$refs.form.clearValidate(); // 清除表单验证信息
            });
        },
        async save() {
            await this.$refs.form.validate();
            const {minLeq,maxLeq }  = this.form;
            if(minLeq == undefined && maxLeq == undefined ){
                message.error("最小值和最大值请至少填写一项！")
                return;
            }
            const hide = this.$message.loading('请求中..', 0);
            const form = this.form;
            if (form.id) {
                updateLeqLevel(form)
                    .then((res) => {
                        if (res.data.code == 0) {
                            this.showEdit = false;
                            this.$message.success(res.data.msg);
                            this.reload();
                        } else {
                            this.$message.error(res.data.msg);
                        }
                    })
                    .catch((error) => {
                        this.$message.error(error.message);
                    })
                    .finally(() => {
                        hide();
                    });
            } else {
                saveLeqLevel(form)
                    .then((res) => {
                        if (res.data.code == 0) {
                            this.showEdit = false;
                            this.$message.success(res.data.msg);
                            this.reload();
                        } else {
                            this.$message.error(res.data.msg);
                        }
                    })
                    .catch((error) => {
                        this.$message.error(error.message);
                    })
                    .finally(() => {
                        hide();
                    });
            }
        },
        /* 删除单个 */
        remove(row) {
            const hide = this.$message.loading('请求中..', 0);
            removeLeqLevel(row.id).then((res) => {
                hide();
                if (res.data.code === 0) {
                    this.$message.success(res.data.msg);
                    this.reload();
                } else {
                    this.$message.error(res.data.msg);
                }
            }).catch(e => {
                hide();
                this.$message.error(e.message);
            })
        },
        /* 批量删除 */
        removeBatch() {
            const hide = this.$message.loading('请求中..', 0);
            const ids = this.selectionList.map((item) => item.id);
            removeBatchLeqLevel(ids).then((res) => {
                if (res.data.code === 0) {
                    this.$message.success(res.data.msg);
                    this.reload();
                } else {
                    this.$message.error(res.data.msg);
                }
            }).catch(e => {
                this.$message.error(e.message);
            }).finally(() => {
                hide();
            })
        }

    },
};
</script>

<style scoped lang="less">
</style>