<!-- 江河水查看数据页面-->
<template>
  <div class="ele-body">
      <!-- 搜索表单 -->
      <a-form :model="where" :label-col="{ md: { span: 8 }, sm: { span: 24 } }"
        :wrapper-col="{ md: { span: 16 }, sm: { span: 24 } }">
        <a-row>
          <a-col :lg="6" :md="12" :sm="24" :xs="24">
          <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.stationName" :value="item.stationName">
                {{ item.stationName }}
              </a-select-option>
            </a-select>
          </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24" :xs="24">
          <a-form-item label="时间:">
            <a-month-picker valueFormat="YYYY-MM" v-model:value="where.time" :disabled-date="disabledDate" />
          </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24" :xs="24">
          <a-form-item label="类型:">
            <a-select v-model:value="where.type" allowClear showSearch>
              <a-select-option value="0">上半月</a-select-option>
              <a-select-option value="1">下半月</a-select-option>
              <a-select-option value="2">整月</a-select-option>
            </a-select>
          </a-form-item>
          </a-col>
          <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>
      <!-- 表格 -->
      <a-spin :spinning="loading">
        <ele-pro-table ref="table" :datasource="datasource" bordered :columns="columns" :where="where"
          :scroll="{ x: 'max-content' }" @done="(d) => (data = d.data)">
        </ele-pro-table>
      </a-spin>
  </div>
  <!-- 编辑弹窗 -->
</template>

<script>
  import moment from "moment";
  import {
    // autonomyWaterFunctionTotalUrl,
    listWaterSiteMonthTotal
  } from "@/api/ecology/river-statis";
  import {
    listInfo
  } from "@/api/ecology/water/river-water";
  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: {},
    props:{
    // 表格搜索条件
    searchForm:{
      typeof:Object,
      default: function () {
          return {}
      },
    },
    visiable:{
        typeof:Boolean
      }
    },
    data() {
      return {
        data: [],
        locale,
        datasource: {},
        // 表格数据接口
        // url: autonomyWaterFunctionTotalUrl,
        selection: [],
        // tableColumns,
        // 表格列配置
        columns: [{
            title: '  ',
            dataIndex: 'riverName',
            key: 'riverName',
            align:'center',
            children: [{
              title: '所在河流名称',
              dataIndex: 'riverName',
              key: 'riverName',
              children: [{
                title: '一',
                dataIndex: 'riverName',
                align: 'center',
              }],
            }]
          },
          {
            title: '  ',
            dataIndex: '',
            key: '',
            children: [{
              title: '自动站名称',
              dataIndex: 'stationName',
              align:'center',
              key: 'stationName',
              // children: [{
              //   title: '《地表水环境质量标准》一类水质标准',
              //   children: [{
              //     title: '《地表水环境质量标准》二类水质标准',
              //     children: [{
              //       title: '《地表水环境质量标准》三类水质标准',
              //       children: [{
              //         title: '《地表水环境质量标准》四类水质标准',
              //       }],
              //     }],
              //   }],
              // }],
            }]
          },
          {
            title: '  ',
            dataIndex: '',
            key: '',
            children: [{
              title: '水质考核目标',
              dataIndex: 'waterTarget',
              key: 'waterTarget',
            }]
          },
          {
            title: '  ',
            dataIndex: '',
            key: '',
            children: [{
              title: '水质类别',
              dataIndex: 'waterQualityType',
              key: 'waterQualityType',
            }],
          }
          , {

            title: '主要水质指标月均值',
            dataIndex: 'index',
            key: 'index',
            align:'center',
            children: [{
                title: '水温（℃）',
                dataIndex: 'waterTemperature',
                key: 'waterTemperature',
                align:'center',
                children: [{
                  title: '一',
                  dataIndex: 'waterTemperature',
                  align: 'center',
                }]
              },
              {
                title: 'pH (无量纲)',
                dataIndex: 'ph',
                key: 'ph',
                align:'center',
                children: [{
              title: '6~9',
              dataIndex: 'ph',
              align: 'center',
            }]
              },
              {
                title: '溶解氧(mg/L)',
                dataIndex: 'dissolvedOxygen',
                key: 'dissolvedOxygen',
                align:'center',
                children: [{
                title: '≥7.5',
                dataIndex: 'dissolvedOxygen',
                align:'center',
                children: [{
                  title: '≥6',
                  dataIndex: 'dissolvedOxygen',
                  align:'center',
                  children: [{
                    title: '≥5',
                    dataIndex: 'dissolvedOxygen',
                    align:'center',
                    children: [{
                      title: '≥3',
                      dataIndex: 'dissolvedOxygen',
                      align:'center',
                    }],
                  }],
                }],
              }],
              },
              {
                title: '高锰酸盐指数 (mg/L)',
                dataIndex: 'permanganateIndex',
                key: 'permanganateIndex',
                children: [{
                title: '≤2',
                dataIndex: 'permanganateIndex',
                align:'center',
                children: [{
                  title: '≤4',
                  dataIndex: 'permanganateIndex',
                  align:'center',
                  children: [{
                    title: '≤6',
                    dataIndex: 'permanganateIndex',
                    align:'center',
                    children: [{
                      title: '≤10',
                      dataIndex: 'permanganateIndex',
                      align:'center',
                    }],
                  }],
                }],
              }],
              },
              {
                title: '氨氮 (mg/L)',
                dataIndex: 'ammonia',
                key: 'ammonia',
                children: [{
                title: '≤0.15',
                dataIndex: 'ammonia',
                align:'center',
                children: [{
                  title: '≤0.5',
                  dataIndex: 'ammonia',
                  align:'center',
                  children: [{
                    title: '≤1.0',
                    dataIndex: 'ammonia',
                    align:'center',
                    children: [{
                      title: '≤1.5',
                      dataIndex: 'ammonia',
                      align:'center',
                    }],
                  }],
                }],
              }],
              },
              {
                title: '总磷(mg/L)',
                dataIndex: 'totalPhosphorus',
                key: 'totalPhosphorus',
                children: [{
                title: '≤0.02',
                dataIndex: 'totalPhosphorus',
                align:'center',
                children: [{
                  title: '≤0.1',
                  dataIndex: 'totalPhosphorus',
                  align:'center',
                  children: [{
                    title: '≤0.2',
                    dataIndex: 'totalPhosphorus',
                    align:'center',
                    children: [{
                      title: '≤0.3',
                      dataIndex: 'totalPhosphorus',
                      align:'center',
                    }],
                  }],
                }],
              }],
              },
              {
                title: '总氮(mg/L)',
                dataIndex: 'totalNitrogen',
                key: 'totalNitrogen',
                children: [{
                title: '≤0.2',
                dataIndex: 'totalNitrogen',
                children: [{
                  title: '≤0.5',
                  dataIndex: 'totalNitrogen',
                  children: [{
                    title: '≤1.0',
                    dataIndex: 'totalNitrogen',
                    children: [{
                      title: '≤1.5',
                      dataIndex: 'totalNitrogen',
                    }],
                  }],
                }],
              }],
              }
            ]
          }
        ],
        // 表格搜索条件
        where: {},
        sectionInfo: {},
        loading: false,
        rules: {},
      };
    },
    watch: {
      searchForm(newV) {
        this.where = newV;
      },
      // 监听组件显示
      visiable(val){
        if(val && this.where.time){
          this.reload()
        }
      }
    },
    created() {
      // 回显并搜素
      this.where = this.searchForm;
      if(this.where.time){
        this.reload()
      }
      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() {
        // 上传搜索条件给父级
        this.$emit("search", this.where);

        this.loading = true;
        listWaterSiteMonthTotal(this.where).then((res) => {
          this.datasource = {};
          if (res.data.code == 0) {
            this.$message.success(res.data.msg);
            this.datasource = res.data.data;
          } else {
            this.$message.error(res.data.msg);
          }
          this.loading = false;
        });
      },
      /* 重置搜索 */
      reset() {
        this.where = {};
        this.reload();
      },
      /* 导出 */
      exportFile() {
        const arr = [];
        const th1 = [];
        const th2 = [];
        const merges = []; // 合并
        const columnsTemp = []; // 树形结构整理成list
        this.columns.forEach((item, index) => {
          if (item.children) {
            item.children.forEach((citem) => {
              th1.push(item.title)
              th2.push(citem.title)
              columnsTemp.push(citem)
            })
            merges.push({
              s: {
                r: 0,
                c: th1.length - item.children.length
              },
              e: {
                r: 0,
                c: th1.length - 1
              }
            })
          } else {
            th1.push(item.title)
            th2.push("")
            columnsTemp.push(item)
            merges.push({
              s: {
                r: 0,
                c: index
              },
              e: {
                r: 1,
                c: index
              }
            })
          }
        })
        arr.push(th1, th2);
        this.datasource.forEach((d) => {
          const td = columnsTemp.map((item) => d[item.dataIndex]);
          arr.push(td);
        });
        let sheet = XLSX.utils.aoa_to_sheet(arr);
        sheet['!merges'] = merges;
        this.$util.exportSheet(XLSX, sheet, moment(this.where.timeStart).format("YYYY年MM月DD日") + "至" + moment(this.where
          .timeEnd).format("YYYY年MM月DD日") + "统计数据");

      }

    },
  };

</script>

<style scoped lang="less">
.ant-calendar-picker{
  width: 100%;
}
</style>
