<!-- 江河水查看数据页面-->
<template>
  <div class="ele-body">
    <a-card :bordered="false">
      <!-- 搜索表单 -->
      <a-form :model="where" :label-col="{ md: { span: 8 }, sm: { span: 24 } }"
        :wrapper-col="{ md: { span: 16 }, sm: { span: 24 } }">
        <a-row>
          <a-form-item label="断面名称">
            <a-select v-model:value="where.sectionName" allowClear showSearch>
              <a-select-option v-for="item in sectionInfo" :key="item.sectionName">{{ item.sectionName }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="起始日期:">
            <a-date-picker valueFormat="YYYY-MM-DD 00:00:00" v-model:value="where.timeStart"></a-date-picker>
          </a-form-item>
          <a-form-item label="结束日期:">
            <a-date-picker valueFormat="YYYY-MM-DD 23:59:59" v-model:value="where.timeEnd"></a-date-picker>
          </a-form-item>

          <a-col :lg="6" :md="12" :sm="24" :xs="24">
            <a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
              <a-space>
                <a-button type="primary" @click="reload">查询</a-button>
                <a-button @click="reset">重置</a-button>
                <a-button @click="exportFile">导出Excel</a-button>
              </a-space>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <!-- 表格 -->
      <ele-pro-table ref="table" :datasource="datasource" :columns="columns" :where="where"
        :scroll="{ x: 'max-content' }" @done="(d) => (data = d.data)">
      </ele-pro-table>
    </a-card>
  </div>
  <!-- 编辑弹窗 -->
</template>

<script>
  import {
    // nationalWaterFunctionTotalUrl,
    nationalWaterFunctionTotal
  } from "@/api/ecology/river-statis";
  import {
    listInfo
  } from "@/api/ecology/water/river-api-relate";
  import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
  import {
    tableColumns
  } from "./colums";
  import XLSX from "xlsx";
  export default {
    name: "RiverCollectWater",
    components: {},
    data() {
      return {
        data: [],
        datasource: {
          wTemp: '-1',
          ph: '-1',
          dissolvedOxygen: '-1',
          cod: '-1',
          fiveDayBod: '-1',
          ammonia: '-1',
          cu: '-1',
          zn: '-1',
          f: '-1',
          se: '-1',
          as: '-1',
          hg: '-1',
          cd: '-1',
          cr6: '-1',
          pb: '-1',
          cyanide: '-1',
          vPhen: '-1',
          oils: '-1',
          anSaa: '-1',
          s: '-1',
          coloOrg: '-1',
          so4: '-1',
          cl: '-1',
          nitrateNitrogen: '-1',
          fe: '-1',
          mn: '-1',
          nTotal: '-1',
          transp: '-1',
          chla: '-1'
        },
        locale,
        bill: {},
        // 表格数据接口
        // url: nationalWaterFunctionTotalUrl,
        selection: [],
        tableColumns,
        // 表格列配置
        columns: [
          ...tableColumns,
        ],
        // 表格搜索条件
        where: {},
        sectionInfo: {},
        loading: false,
        rules: {},
      };
    },
    mounted() {
      nationalWaterFunctionTotal().then((res) => {
        res.data.data.forEach((e) => {
          e.wTemp = "-1";
          e.ph = "-1";
          e.dissolvedOxygen = "-1";
          e.cod = "-1";
          e.fiveDayBod = "-1";
          e.ammonia = "-1";
          e.cu = "-1";
          e.zn = "-1";
          e.f = "-1";
          e.se = "-1";
          e.as = "-1";
          e.hg = "-1";
          e.cd = "-1";
          e.cr6 = "-1";
          e.pb = "-1";
          e.cyanide = "-1";
          e.vPhen = "-1";
          e.oils = "-1";
          e.anSaa = "-1";
          e.s = "-1";
          e.coloOrg = "-1";
          e.so4 = "-1";
          e.cl = "-1";
          e.nitrateNitrogen = "-1";
          e.fe = "-1";
          e.mn = "-1";
          e.nTotal = "-1";
          e.transp = "-1";
          e.chla = "-1";
          e.ffeMajorOverStandardItemsMultiples =  "-1";
          e.lprlMajorOverStandardItemsMultiples =  "-1";
        })
        this.datasource = res.data.data;
      });
    },
    created() {
      listInfo().then((res) => {
        if (res.data.code == 0) {
          console.log(res.data.data)
          this.visibleWater = true;
          this.sectionInfo = res.data.data
        } else {
          this.$message.error(res.data.msg);
        }
      })
    },
    methods: {
      /* 刷新表格 */
      reload() {
        nationalWaterFunctionTotal(this.where).then((res) => {
          res.data.data.forEach((e) => {
            e.wTemp = "-1";
            e.ph = "-1";
            e.dissolvedOxygen = "-1";
            e.cod = "-1";
            e.fiveDayBod = "-1";
            e.ammonia = "-1";
            e.cu = "-1";
            e.zn = "-1";
            e.f = "-1";
            e.se = "-1";
            e.as = "-1";
            e.hg = "-1";
            e.cd = "-1";
            e.cr6 = "-1";
            e.pb = "-1";
            e.cyanide = "-1";
            e.vPhen = "-1";
            e.oils = "-1";
            e.anSaa = "-1";
            e.s = "-1";
            e.coloOrg = "-1";
            e.so4 = "-1";
            e.cl = "-1";
            e.nitrateNitrogen = "-1";
            e.fe = "-1";
            e.mn = "-1";
            e.nTotal = "-1";
            e.transp = "-1";
            e.chla = "-1";
            e.ffeMajorOverStandardItemsMultiples =  "-1";
            e.lprlMajorOverStandardItemsMultiples =  "-1";
          })
          this.datasource = res.data.data;
        });
      },
      /* 重置搜索 */
      reset() {
        this.where = {};
        this.reload();
      },
      /* 导出 */
      exportFile() {
        const columns = this.columns.filter(item => item.dataIndex);
        const arr = [];
        const th = columns.map((item) => item.title);
        arr.push(th);
        this.data.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>
