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

<script>
import XLSX from "xlsx";

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

import locale from "ant-design-vue/es/date-picker/locale/zh_CN";

import Search from "./../components/countySearch.vue";

export default {
  name: "waterQuality",
  components: {
    Search
  },
  props:{
      // 表格搜索条件
      searchForm:{
          typeof:Object,
          default: function () {
              return {}
          },
      },
      filterKeys:{
          typeof:Object,
          default: function () {
              return []
          },
      },
    visiable:{
        typeof:Boolean
    }
  },
  
  data() {
    return {
      data: [],
      locale,
      bill: {},
      // 表格数据接口
      datasource:[],
      selection: [],
      columns:[
        {title:"断面名称",dataIndex:"sectionName",},
        {title:"时间",dataIndex:"time",},
        {title:"水质目标",dataIndex:"waterTarget",},
        {title:"水质类别",dataIndex:"waterQualityCategory",},
        {title: "达标情况", dataIndex: "standard"},
        {title: "达标率", dataIndex: "standardRate"},
        // {title:"达标情况",align: 'center',children: [
        //       {title: "达标情况", dataIndex: ""},
        //       {title: "达标率", dataIndex: ""},
        //       {title: "去年同期", dataIndex: ""},
        //     ]
        // },
      ],
        
      
      // 表格列配置
      
    
      // 表格搜索条件
      where: {
        checked: 1,
      },
      // 表格选中数据
      selectionList: [],
      loading:false
    };
  },
  mounted() {
  },
  methods: {
    
    // 获取列表数据
    getPageData(){
            this.loading = true;
        countyWaterQualityUpData(this.where).then(res=>{
                this.loading = false;
            if(res.data.code){
                this.$message.error(res.data.msg);
                this.datasource = []
            }else{
              // let newData = []
              const resData = res.data.data || []
              // for(let i in resData){
              //   newData.push(...resData[i])
              // }
              this.datasource = resData
            }
        }).catch(()=>{
                this.loading = false;
        })
    },

    JumpFieldClick(record, column) {
        console.log(column.dataIndex)
      },

          // 执行搜索
    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>
