<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 {
  waterQualityData
} from "@/api/ecology/new-drinking-water";

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

import Search from "./../components/citySearch.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:"city",},
        {title:"水源地名称",dataIndex:"sourceWaterName",},
        {title:"期数",dataIndex:"sourceWaterName",},
        {title:"水源地性质",dataIndex:"waterSourceProperty",},
        {title:"断面水质",align: 'center',children: [
              {title: "本月", dataIndex: "waterQualityCategory"},
              {title: "上月", dataIndex: "waterQualityCategoryMom"},
              {title: "去年同期", dataIndex: "waterQualityCategoryYoy"},
            ]
        },
        {title:"主要污染指标",dataIndex:"",},
      ],
        
      
      // 表格列配置
      
    
      // 表格搜索条件 
      where: {
        checked: 1,
      },
      // 表格选中数据
      selectionList: [],
      loading:false
    };
  },
  mounted() {
  },
  methods: {
    
    // 获取列表数据
    getPageData(){
            this.loading = true;
        waterQualityData(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)
      },

          // 执行搜索
    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 = [];
      let th1 = []
      let th2 = []
      const sColumns = []
      columns.forEach(item=>{
        th1.push(item.title)
        if(Array.isArray(item.children) && item.children.length>0){
          item.children.forEach(single=>{
            th1.push('')
            th2.push(single.title)
            sColumns.push({dataIndex:single.dataIndex})
          })
        }else{
            th2.push('')
             sColumns.push({dataIndex:item.dataIndex})
        }
      })
      arr.push(th1)
      arr.push(th2)
      this.datasource.forEach((d) => {
        const td = sColumns.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>
