<!--原始数据-->
<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"
                :loading="loading"
                :where="where"
                row-key="lakeLibraryInnerCityId"
                :scroll="{ x: 'max-content' }"
                @done="(d) => (data = d.data)"
            >
            </ele-pro-table>
        </a-card>
    </div>
    <!-- 编辑弹窗 -->
</template>

<script>
import XLSX from "xlsx";
import {getLakeDropdown, cityOriginalData} from "@/api/ecology/new-lake";
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
import Search from './search.vue';
import {innerTableColumns} from "./raw-colums"
export default {
    name: 'inner-raw',
    components: {
        Search
    },
    props:{
        // 表格搜索条件
        searchForm:{
            typeof:Object,
            default: function () {
                return {}
            },
        },
        filterKeys:{
            typeof:Object,
            default: function () {
                return []
            },
        },
        visiable:{
            typeof:Boolean
        }
    },
    data() {
        return {
            data: [],
            locale,
            bill: {},
            // 表格数据接口
            // url: cityOriginalUrl,
            datasource:[],
            selection: [],
            // 表格列配置
            columns: innerTableColumns,
            palceOptions: [],
            areaOptions: [],
            regionLevelOptions: [],
            where:{},
            // 表格选中数据
            selectionList: [],
            loading:false
        };
    },
    watch: {
        filterKeys(newKeys) {
            this.filterColumns(newKeys)
        },
    },
    methods: {

        // 获取列表数据
        getPageData(){
            this.loading = true
            cityOriginalData(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;
            })
        },

        // 传上父级
        changeFilter(data){
            this.$emit('changeFilter',data)
        },
        //动态修改表头
        filterColumns(keys){

            if(!Array.isArray(keys)){return}

            let newCloumns = [...innerTableColumns]

            let filterIndex = [];
            newCloumns.forEach((item,index)=>{
                if(keys.indexOf(item.dataIndex)>-1){
                    filterIndex.push(index)
                }
            })

            const newList = newCloumns.filter((item, index) => {
                return filterIndex.indexOf(index) == -1
            })
            this.columns = newList

        },

        // 执行搜索
        searchData(data){
            this.where = data;
            this.$emit("search", this.where);
            this.reload();
        },

        /**获取下来框数据 */
        loadOptionData() {
            getLakeDropdown().then((res) => {
                this.palceOptions = res.data.data.map((item) => {
                    return {
                        label: item.sectionName,
                        value: item.sectionName,
                    };
                });
            });

        },
        /* 刷新表格 */
        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>