<!-- 江河水查看数据页面-->
<template>
  <div class="ele-body">
    <a-card :bordered="false">
      <!-- 搜索表单 -->
      <a-form :model="where" layout="inline">

        <a-form-item label="开始时间:">
          <a-month-picker v-model:value="where.startTime" :disabled-date="disabledDate" valueFormat="YYYY-MM"
            placeholder="开始时间" />
        </a-form-item>
        <a-form-item label="结束时间:">
          <a-month-picker v-model:value="where.endTime" :disabled-date="disabledDate" valueFormat="YYYY-MM"
            placeholder="结束时间" />
        </a-form-item>
        <a-form-item label="断面名称">
          <a-select allow-clear mode="multiple" placeholder="请选择断面名称" v-model:value="where.name">
            <a-select-option v-for="item in sectionInfo" :key="item.sectionName" :value="item.sectionName">
              {{ item.sectionName }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="河段名称">
          <a-select v-model:value="where.riverLakeLibrary" allowClear showSearch>
            <a-select-option v-for="item in waterSystemList" :key="item">{{ item }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="水系名称">
          <a-select v-model:value="where.importWaterBody" allowClear showSearch>
            <a-select-option v-for="item in waterBodyList" :key="item">{{ item }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="指标名称">
          <a-select allow-clear mode="multiple" placeholder="请选择指标名称" v-model:value="where.targetName">
            <a-select-option v-for="item in targetInfoList" :key="item" :value="item">
              {{ item }}
            </a-select-option>
          </a-select>
        </a-form-item>


        <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>
      <!-- 表格 -->
      <ele-pro-table ref="table" row-key="surfaceWaterSectionId" :datasource="datasource" :columns="columns"
        :where="where" :scroll="{ x: 'max-content' }" @done="(d) => (data = d.data)">
      </ele-pro-table>
    </a-card>
  </div>
  <!-- 编辑弹窗 -->
</template>

<script>
  import {
    getRiverBill,
    pageRiverUrl,
    listAllRiver
  } from "@/api/ecology/river";
  import {
    listTargetInfo,
  } from "@/api/ecology/river-statis";
  import {
    listInfo
  } from "@/api/ecology/water/river-plcae";
  import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
  import {
    tableColumnsBase,
  } from ".././collect/colums";
  // import {
  //   columnsBase,
  // } from "./colums";
  import XLSX from "xlsx";
  export default {
    name: "RiverCollectWater",
    components: {},
    data() {
      const {
        billId
      } = this.$route.params;
      return {
        data: [],
        locale,
        bill: {},
        // 表格数据接口
        listColumns:[],
        url: pageRiverUrl,
        selection: [],
        tableColumnsBase,
        flg:true,
        flg2:true,
        columnsCopy:[],
        // 表格列配置
        columnsBase: [{
            title: "pH值",
            dataIndex: "ph",
            sorter: true,
          },
          {
            title: "T-Hg(mg/L)",
            dataIndex: "tHg",
            sorter: true,
          },
          {
            title: "溶解氧(mg/L)",
            dataIndex: "dissolvedOxygen",
            sorter: true,
          },
          {
            title: "COD Mn(mg/L)",
            dataIndex: "codMn",
            sorter: true,
          },
          {
            title: "COD Cr(mg/L)",
            dataIndex: "codCr",
            sorter: true,
          },
          {
            title: "NH₃-N(mg/L)",
            dataIndex: "nh3N",
            sorter: true,
          },
          {
            title: "T-P(mg/L)",
            dataIndex: "tP",
            sorter: true,
          },
          {
            title: "Cu(mg/L)",
            dataIndex: "cu",
            sorter: true,
          },
          {
            title: "Zn(mg/L)",
            dataIndex: "zn",
            sorter: true,
          },
          {
            title: "Pb(mg/L)",
            dataIndex: "pb",
            sorter: true,
          },
          {
            title: "Cd(mg/L)",
            dataIndex: "cd",
            sorter: true,
          },
          {
            title: "BOD5(mg/L)",
            dataIndex: "bod5",
            sorter: true,
          },
          {
            title: "T-As(mg/L)",
            dataIndex: "tAs",
            sorter: true,
          },
          {
            title: "T-Se(mg/L)",
            dataIndex: "tSe",
            sorter: true,
          },
          {
            title: "Cr6+(mg/L)",
            dataIndex: "cr6",
            sorter: true,
          },
          {
            title: "Chla(mg/L)",
            dataIndex: "chla",
            sorter: true,
          },
          {
            title: "S2-(mg/L)",
            dataIndex: "s2",
            sorter: true,
          },
          {
            title: "石油类(mg/L)",
            dataIndex: "petro",
            sorter: true,
          },
          {
            title: "CN-(mg/L)",
            dataIndex: "cn",
            sorter: true,
          },
          {
            title: "F-(mg/L)",
            dataIndex: "f",
            sorter: true,
          },
          {
            title: "挥发酚(mg/L)",
            dataIndex: "volatilePhenol",
            sorter: true,
          },
        ],
        columns: [
          ...tableColumnsBase,
          {
            title: "NO₃-(mg/L)",
            dataIndex: "no3",
            sorter: true,
          },
          {
            title: "NO₂-(mg/L)",
            dataIndex: "no2",
            sorter: true,
          },
          {
            title: "流量(m³/s)",
            dataIndex: "flow",
            sorter: true,
          },
          {
            title: "水位",
            dataIndex: "waterLevel",
            sorter: true,
          },
          {
            title: "备注",
            dataIndex: "remark",
            sorter: true,
          },
        ],
        // 表格搜索条件
        surfaceWaterSectionBillId: billId,
        where: {},
        sectionInfo: {},
        loading: false,
        rules: {},
        waterBodyList: [],
        waterSystemList: [],
        targetInfo: {},
        targetInfoList: [],
        datasource: {},
      };
    },
    mounted() {
      const {
        billId
      } = this.$route.params;
      console.log(billId, 'billId');
      getRiverBill(billId).then((res) => {
        this.bill = res.data.data;
        this.columns.splice(this.columns.length - 1, 1);
      });
      this.loadOptionData();
    },
    created() {
      listInfo().then((res) => {
          if (res.data.code == 0) {
            console.log(res.data.data)
            this.visibleWater = true;
            this.sectionInfo = res.data.data
            res.data.data.forEach((m) => {
              this.waterSystemList.push(m.waterBody);
              this.waterBodyList.push(m.importWaterBody);
            })
            this.waterSystemList = [...new Set(this.waterSystemList)];
            this.waterBodyList = [...new Set(this.waterBodyList)];
          } else {
            this.$message.error(res.data.msg);
          }
        }),
        listTargetInfo().then((res) => {
          if (res.data.code == 0) {
            console.log(res.data.data)
            this.targetInfo = res.data.data
            res.data.data.forEach((m) => {
              this.targetInfoList.push(m.indicatorName);
            })
            this.targetInfoList = [...new Set(this.targetInfoList)];
          } else {
            this.$message.error(res.data.msg);
          }
        })
    },
    methods: {
      /**获取下来框数据 */
      loadOptionData() {},
      /* 刷新表格 */
      reload() {
        console.log(this.where.targetName);
        if (this.where.targetName) {
          if(this.flg){
            this.columnsCopy = this.columnsBase;
          }
          this.flg = false;
          this.columnsBase = [];
          console.log(this.columnsBase);
          var arr = this.where.targetName
          arr.forEach((a) => {
            if (a == 'ph') {
              this.columnsBase.push({
                title: "pH值",
                dataIndex: "ph",
                sorter: true,
              }, )
            }
            if (a == '汞') {
              this.columnsBase.push({
                title: "T-Hg(mg/L)",
                dataIndex: "tHg",
                sorter: true,
              }, )
            }
            if (a == '溶解氧') {
              this.columnsBase.push({
                title: "溶解氧(mg/L)",
                dataIndex: "dissolvedOxygen",
                sorter: true,
              }, )
            }
            if (a == '高锰酸盐指数') {
              this.columnsBase.push({
                title: "COD Mn(mg/L)",
                dataIndex: "codMn",
                sorter: true,
              }, )
            }
            if (a == '化学需氧量') {
              this.columnsBase.push({
                title: "COD Cr(mg/L)",
                dataIndex: "codCr",
                sorter: true,
              }, )
            }
            if (a == '氨氮') {
              this.columnsBase.push({
                title: "NH₃-N(mg/L)",
                dataIndex: "nh3N",
                sorter: true,
              }, )
            }
            if (a == '总磷') {
              this.columnsBase.push({
                title: "T-P(mg/L)",
                dataIndex: "tP",
                sorter: true,
              }, )
            }
            if (a == '铜') {
              this.columnsBase.push({
                title: "Cu(mg/L)",
                dataIndex: "cu",
                sorter: true,
              }, )
            }
            if (a == '锌') {
              this.columnsBase.push({
                title: "Zn(mg/L)",
                dataIndex: "zn",
                sorter: true,
              }, )
            }
            if (a == '铅') {
              this.columnsBase.push({
                title: "Pb(mg/L)",
                dataIndex: "pb",
                sorter: true,
              }, )
            }
            if (a == '镉') {
              this.columnsBase.push({
                title: "Cd(mg/L)",
                dataIndex: "cd",
                sorter: true,
              }, )
            }
            if (a == '五日生化需氧量') {
              this.columnsBase.push({
                title: "BOD5(mg/L)",
                dataIndex: "bod5",
                sorter: true,
              }, )
            }
            if (a == '砷') {
              this.columnsBase.push({
                title: "T-As(mg/L)",
                dataIndex: "tAs",
                sorter: true,
              }, )
            }
            if (a == '硒') {
              this.columnsBase.push({
                title: "T-Se(mg/L)",
                dataIndex: "tSe",
                sorter: true,
              }, )
            }
            if (a == '铬') {
              this.columnsBase.push({
                title: "Cr6+(mg/L)",
                dataIndex: "cr6",
                sorter: true,
              }, )
            }
            if (a == '阴离子表面活性剂') {
              this.columnsBase.push({
                title: "Chla(mg/L)",
                dataIndex: "chla",
                sorter: true,
              }, )
            }
            if (a == '硫化物') {
              this.columnsBase.push({
                title: "S2-(mg/L)",
                dataIndex: "s2",
                sorter: true,
              }, )
            }
            if (a == '石油类') {
              this.columnsBase.push({
                title: "石油类(mg/L)",
                dataIndex: "petro",
                sorter: true,
              }, )
            }
            if (a == '氰化物') {
              this.columnsBase.push({
                title: "CN-(mg/L)",
                dataIndex: "cn",
                sorter: true,
              })
            }
            if (a == '氟化物') {
              this.columnsBase.push({
                title: "F-(mg/L)",
                dataIndex: "f",
                sorter: true,
              }, )
            }
            if (a == '挥发酚') {
              this.columnsBase.push({
                title: "挥发酚(mg/L)",
                dataIndex: "volatilePhenol",
                sorter: true,
              }, )
            }

            console.log("bbbb" + this.columnsBase);
          });
        }else{
          if(this.flg2){
            this.listColumns= this.columns;
          }
          this.flg2 =false;
        }
        this.columns = [];
        if(this.listColumns.length>0){
          this.listColumns.forEach((i=>{
            this.columns.push(i);
          }))
        }
        if(this.columnsBase.length>0){
          this.columnsBase.forEach((e=>{
            this.columns.push(e);
          }))
        }else{
          this.columnsCopy.forEach((e=>{
            this.columns.push(e);
          }))
        }
       
        listAllRiver(this.where).then((res) => {
          console.log(res.data.data);
          if (res.data.code == 0) {
            this.$message.success(res.data.msg);
            this.datasource = res.data.data
          } else {
            this.$message.error(res.data.msg);
          }
        });
      },
      /* 重置搜索 */
      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>
