<!--国家级水功能区点位信息-->
<template>
    <div class="ele-body">
        <a-card :bordered="false">
            <a-form
                :model="where"
                :wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }"
            >
                <a-row>
                    <a-col :lg="6" :md="12" :sm="24" :xs="24">
                        <a-form-item label="年份:">
                            <a-select v-model:value="where.year" allow-clear show-search>
                                <a-select-option
                                    v-for="(item) in yearOptions"
                                    :key="item.value"
                                >{{ item.label }}
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :lg="6" :md="12" :sm="24" :xs="24">
                        <a-space>
                            <a-button type="primary" @click="reload">查询</a-button>
                            <a-button @click="reset">重置</a-button>
                        </a-space>
                    </a-col>
                </a-row>
                <a-row>

                </a-row>
            </a-form>
            <a-modal
                v-model:visible="showNYear"
                :title="'批量复制'"
                :confirm-loading="loading"
                :body-style="{ paddingBottom: '8px' }"
                @ok="copyBatch"
            >
                <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="nYear">
                        <a-input-number id="inputNumber" v-model:value="nYear" :min="1970" :max="2050" />
                    </a-form-item>
                </a-form>
            </a-modal>
            <a-modal
                v-model:visible="showEdit"
                :title="form.nationalLevelWaterFunctionAreaPointId !== 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="year">
                        <a-input-number  v-model:value="form.year" :min="1970" :max="2050" />
                    </a-form-item>
                    <a-form-item label="水系" name="riverSystem">
                        <a-input v-model:value="form.riverSystem" placeholder="请输入水系" allow-clear />
                    </a-form-item>
                    <a-form-item label="河流、湖库名称" name="riverLakeLibrary">
                        <a-input v-model:value="form.riverLakeLibrary" placeholder="请输入河流、湖库名称" allow-clear />
                    </a-form-item>
                    <a-form-item label="所在地级行政区" name="cityRegionName">
                        <a-input v-model:value="form.cityRegionName" placeholder="请输入所在地级行政区" allow-clear />
                    </a-form-item>
                    <a-form-item label="国家重要水功能区索引码" name="waterFunctionalIndexCode">
                        <a-input v-model:value="form.waterFunctionalIndexCode" placeholder="请输入国家重要水功能区索引码" allow-clear />
                    </a-form-item>
                    <a-form-item label="水功能区类型" name="waterFunctionalAreaType">
                        <a-input v-model:value="form.waterFunctionalAreaType" placeholder="请输入水功能区类型" allow-clear />
                    </a-form-item>

                    <a-form-item label="水体类型" name="waterBodyType">
                        <a-input v-model:value="form.waterBodyType" placeholder="请输入水体类型" allow-clear />
                    </a-form-item>
                    <a-form-item label="省级行政区名称" name="provinceRegionName">
                        <a-input v-model:value="form.provinceRegionName" placeholder="请输入省级行政区名称" allow-clear />
                    </a-form-item>
                    <!--  -->
                     <a-form-item label="水资源一级区名称" name="waterResourcesFirstLevelZoneName">
                        <a-input v-model:value="form.waterResourcesFirstLevelZoneName" placeholder="请输入水资源一级区名称" allow-clear />
                    </a-form-item>

                    <a-form-item label="一级水功能区名称" name="firstLevelWaterFunctionZoneName">
                    <a-input v-model:value="form.firstLevelWaterFunctionZoneName" placeholder="请输入一级水功能区名称" allow-clear />
                    </a-form-item>
                    <a-form-item label="二级水功能区名称" name="secondLevelWaterFunctionZoneName">
                    <a-input v-model:value="form.secondLevelWaterFunctionZoneName" placeholder="请输入二级水功能区名称" allow-clear />
                    </a-form-item>
                    <a-form-item label="水质目标" name="waterQualityGoal">
                    <a-input v-model:value="form.waterQualityGoal" placeholder="请输入水质目标" allow-clear />
                    </a-form-item>
                    <a-form-item label="数据来源" name="dataSources">
                    <a-input v-model:value="form.dataSources" placeholder="请输入数据来源" allow-clear />
                    </a-form-item>
                    <a-form-item label="断面名称" name="sectionName">
                    <a-input v-model:value="form.sectionName" placeholder="请输入断面名称" allow-clear />
                    </a-form-item>
                    <a-form-item label="经度" name="longitude">
                        <a-input v-model:value="form.longitude" placeholder="请输入经度" allow-clear />
                    </a-form-item>
                    <a-form-item label="纬度" name="latitude">
                        <a-input v-model:value="form.latitude" placeholder="请输入纬度" allow-clear />
                    </a-form-item>
                    <a-form-item label="备注" name="remark">
                    <a-input v-model:value="form.remark" placeholder="请输入备注" allow-clear />
                    </a-form-item>
                </a-form>
            </a-modal>
            <!-- 表格 -->
            <ele-pro-table
                v-model:selection="selectionList"
                ref="table"
                row-key="nationalLevelWaterFunctionAreaPointId"
                :datasource="url"
                :columns="columns"
                :where="where"
                :scroll="{ x: 'max-content' }"
                @done="(d) => (data = d.data)"
            >
                <template #toolbar>
                    <a-space>
                        <a-button @click="openEdit" type="primary">新增</a-button>
                        <a-dropdown>
                            <template #overlay>
                                <a-menu @click="setCYear">
                                    <a-menu-item v-for="item in yearOptions" :key="item.value">
                                        {{ item.label }}
                                    </a-menu-item>
                                </a-menu>
                            </template>
                            <a-button>
                                批量复制
                                <DownOutlined/>
                            </a-button>
                        </a-dropdown>
                        <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-button @click="exportData" type="primary">导出</a-button>
                    </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,
    saveAqiRelate,
    updateAqiRelate,
    removeAqiRelate,
    removeBatchAqiRelate,
    copyBatchAqiRelate,
    getColumnOptions
} from "@/api/ecology/water/river-api-relate";
import {DownOutlined} from '@ant-design/icons-vue';
import XLSX from "xlsx";
// import moment from "moment";
export default {
    name: "AirAqiRelate",
    components: {DownOutlined},
    data() {
        return {
            data: [],
            // 表格数据接口
            url: listAllUrl,
            selection: [],
            // 表格列配置
            columns: [
                {
                    title: "年份",
                    dataIndex: "year",
                },
                {
                    title: "水系",
                    dataIndex: "riverSystem",
                },
                {
                    title: "河流、湖库名称",
                    dataIndex: "riverLakeLibrary",
                },
                {
                    title: "所在地级行政区",
                    dataIndex: "cityRegionName",
                },
                {
                    title: "国家重要水功能区索引码",
                    dataIndex: "waterFunctionalIndexCode",

                },
                {
                    title: "水功能区类型",
                    dataIndex: "waterFunctionalAreaType",
                },
                {
                    title: "水体类型",
                    dataIndex: "waterBodyType",
                },
                {
                    title: "省级行政区名称",
                    dataIndex: "provinceRegionName",
                },
                {
                    title: "水资源一级区名称",
                    dataIndex: "waterResourcesFirstLevelZoneName",
                },
                {
                    title: "一级水功能区名称",
                    dataIndex: "firstLevelWaterFunctionZoneName",
                },
                {
                    title: "二级水功能区名称",
                    dataIndex: "secondLevelWaterFunctionZoneName",

                },
                {
                    title: "水质目标",
                    dataIndex: "waterQualityGoal",
                },
                {
                    title: "水体类型",
                    dataIndex: "waterBodyType",
                },
                {
                    title: "数据来源",
                    dataIndex: "dataSources",
                },
                {
                    title: "断面名称",
                    dataIndex: "sectionName",
                },
                {
                    title: "水体类型",
                    dataIndex: "waterBodyType",
                },
                {
                    title: "数据来源",
                    dataIndex: "dataSources",
                },
                {
                    title: "经度",
                    dataIndex: "longitude",
                },
                {
                    title: "纬度",
                    dataIndex: "latitude",
                },
                {
                    title: "备注",
                    dataIndex: "remark",
                },
                                {
                    title: "操作",
                    key: "action",
                    width: 150,
                    align: "center",
                    fixed: "right",
                    slots: {
                        customRender: "action",
                    },
                },
            ],

            // 表格搜索条件
            where: {},
            // 表格选中数据
            selectionList: [],
            // 是否显示编辑弹窗
            showEdit: false,
            // 表单数据
            form: {},
            loading: false,
            rules: {
                year: [{required: true, message: '请输入年份'}],
                waterQualityGoal:[{
                    required:true,message: "请输入考核目标",
                }]
            },
            yearOptions: [],
            showNYear:false,
            cYear: undefined,
            nYear:undefined,
        };
    },
    mounted() {
        this.getOptions();
    },
    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;
            console.log(form,'form');
            if (form.nationalLevelWaterFunctionAreaPointId) {
                updateAqiRelate(form)
                    .then((res) => {
                        if (res.data.code == 0) {
                            this.showEdit = false;
                            this.$message.success(res.data.msg);
                            this.reload();
                            this.getOptions();
                        } else {
                            this.$message.error(res.data.msg);
                        }
                    })
                    .catch((error) => {
                        this.$message.error(error.message);
                    })
                    .finally(() => {
                        hide();
                    });
            } else {
                
                saveAqiRelate(form).then((res) => {
                        if (res.data.code == 0) {
                            this.showEdit = false;
                            this.$message.success(res.data.msg);
                            this.reload();
                            this.getOptions();
                        } else {
                            this.$message.error(res.data.msg);
                        }
                    })
                    .catch((error) => {
                        this.$message.error(error.message);
                    })
                    .finally(() => {
                        hide();
                    });
            }
        },
        /* 删除单个 */
        remove(row) {
            const hide = this.$message.loading('请求中..', 0);
            removeAqiRelate(row.nationalLevelWaterFunctionAreaPointId).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.nationalLevelWaterFunctionAreaPointId);
            removeBatchAqiRelate(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();
            })
        },
        getOptions(){
            getColumnOptions("year").then(res => {
                console.log(res)
                if (res.data.code == 0) {
                    this.yearOptions = res.data.data.map(item => {
                        return {
                            label: item,
                            value: item
                        }
                    })
                }
            })
        },
        setCYear(e){
            this.cYear = e.key;
            this.showNYear = true;
        },
        copyBatch(){
            const hide = this.$message.loading('请求中..', 0);
            copyBatchAqiRelate({cyear:Number(this.cYear),nyear:this.nYear}).then(res=>{
                if (res.data.code === 0) {
                    this.$message.success(res.data.msg);
                    this.reload();
                    this.getOptions();
                } else {
                    this.$message.error(res.data.msg);
                }
                this.showNYear = false;
            }).catch(e => {
                this.$message.error(e.message);
            }).finally(() => {
                hide();
            })
        },
        exportData(){
            const columns = this.columns.filter(item=>item.dataIndex);
            const arr = [];
            const th = columns.map((item) => item.title);
            arr.push(th);
            this.data.forEach((d) => {
                const td = columns.map((item) => d[item.dataIndex]);
                arr.push(td);
            });

            let sheet = XLSX.utils.aoa_to_sheet(arr);
            this.$util.exportSheet(XLSX, sheet, new Date().getTime().toString());
        }


    },
};
</script>

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