<!--综合营养指标-->
<template>
    <div class="ele-body">
        <a-card :bordered="false">
            <!-- 搜索表单 -->
           <search :searchForm="searchForm" :filterKeys="filterKeys" @search="searchData" @exportFile="exportFile" @filterColumns="changeFilter" :visiable="visiable"/>
            <!-- 表格 -->
            <ele-pro-table
                ref="table"
                :datasource="datasource"
                :columns="columns"
                :where="where"
                :loading="loading"
                :scroll="{ x: 'max-content' }"
                @done="(d) => (data = d.data)"
            >
            </ele-pro-table>
        </a-card>
    </div>
    <!-- 编辑弹窗 -->
</template>

<script>
import XLSX from "xlsx";
// import {pageLakeUrl, getColumnOptions} from "@/api/ecology/lake";
import {cityComprehensiveNutritionData} from "@/api/ecology/new-lake";
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
import Search from './search.vue';
export default {
    name: 'lakeLibraryInnerCity',
    components: {
        Search
    },
    props:{
        // 表格搜索条件
        searchForm:{
            typeof:Object,
            default: function () {
                return {}
            },
        },
        filterKeys:{
            typeof:Object,
            default: function () {
                return []
            },
        },
         visiable:{
            typeof:Boolean
        }
    },
    data() {
        return {
            data: [],
            locale,
            bill: {},
            // 表格数据接口
            // url: pageLakeUrl,
            datasource:[],
            selection: [],
            // 表格列配置
            columns: [
                // {
                //     key: 'index',
                //     dataIndex: 'index',
                //     width: 48,
                //     align: 'center',
                //     customRender: ({index}) => index + 1
                // },
                {title: "监测时间", dataIndex: "monitorTime", sorter: true,},
                {title: "类别", dataIndex: "type", sorter: true,},
                {title: "点位名称", dataIndex: "pointName", sorter: true,},
                {title: "水质类别", dataIndex: "waterType", sorter: true,},
                {title: "级别", dataIndex: "level", sorter: true,},
                {title: "综合营养状态指数", dataIndex: "comprehensiveNutrition", sorter: true,},
                {title: "超标项目（超标倍数）", dataIndex: "overflow", sorter: true,},
            ],
            palceOptions: [],
            areaOptions: [],
            regionLevelOptions: [],
            where:{},
            // 表格选中数据
            selectionList: [],
            loading:false
        };
    },
    mounted() {
        // this.loadOptionData();
    },
    methods: {
        // 传上父级
        changeFilter(data){
            this.$emit('changeFilter',data)
        },
        // 执行搜索
        searchData(data){
            this.where = data;
            this.$emit("search", this.where);
            this.reload();
        },

                // 获取列表数据
        getPageData(){
            console.log('请求')
            this.loading = true;
            cityComprehensiveNutritionData(this.where).then(res=>{
                this.loading = false;
                if(res.data.code){
                    this.$message.error(res.data.msg);
                    this.datasource = []
                }else{
                    this.datasource = res.data.data
                }
            }).catch(()=>{
                 this.loading = false;
            })
        },

        /* 刷新表格 */
        reload() {
            this.getPageData();
            // this.$refs.table.reload({
            //     where: this.where,
            // });
        },
        /* 重置搜索 */
        reset() {
            this.where = {
                checked: 1,
            };
            this.reload();
        },
        exportFile() {
            const columns = this.columns;
            const arr = [];
            const th = columns.map((item) => item.title);
            arr.push(th);
            this.datasource.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>