<!--取水量统计-->
<template>
  <div class="ele-body">
    <a-card :bordered="false">
      <!-- 搜索表单 -->
        <search
        :searchForm="searchForm"
        :filterKeys="filterKeys"
        :visiable="visiable"
        @search="searchData"
        @exportFile="exportFile"
        @filterColumns="changeFilter"
      />
      <!-- 表格 -->
      <ele-pro-table
        ref="table"
        row-key="drinkingWaterId"
        :datasource="datasource"
        :loading="loading"
        :columns="columns"
        :where="where"
        :scroll="{ x: 'max-content' }"
        @done="(d) => (data = d.data)"
      >
       
      </ele-pro-table>
    </a-card>
  </div>
  <!-- 编辑弹窗 -->
</template>

<script>
// import _ from "lodash";
import XLSX from "xlsx";
import Search from "./../components/countySearch.vue";

import {
  getWaterCount
} from "@/api/ecology/new-drinking-water";


import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
// import { tableColumns } from "./colums";

export default {
  name: "DrinkingWaterBase",
  components: {
      Search
  },
    props:{
        // 表格搜索条件
        searchForm:{
            typeof:Object,
            default: function () {
                return {}
            },
        },
        filterKeys:{
            typeof:Object,
            default: function () {
                return []
            },
        },
        visiable:{
          typeof:Boolean
      }
    },
  data() {
    return {
      datasource:[],
      data: [],
      locale,
      bill: {},
      // 表格数据接口
      selection: [],
      columns: [
       {title: "水源名称",dataIndex: "sourceWaterName",sorter: true,},
       {title: "取水量",dataIndex: "waterWithdrawal",sorter: true,},
      ],

      // 表格列配置

      // palceOptions: [],
      // areaOptions: [],
      // roadOptions: [],
      regionLevelOptions: [],
      // 表格搜索条件
      where: {
        checked: 1,
      },
      // 表格选中数据
      selectionList: [],
      loading: false
    };
  },
  mounted() {
    // this.loadOptionData();
  },
  methods: {

                    // 获取列表数据
    getPageData(){
          this.loading = true;
        getWaterCount(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;
        })
    },
    
    JumpFieldClick(record, column) {
      console.log(column.dataIndex);
    },

        // 传上父级
    changeFilter(data){
        this.$emit('changeFilter',data)
    },
    // 执行搜索
    searchData(data){
        this.where = data;
        this.$emit("search", this.where);
        this.reload();
    },

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