<!-- 江河水查看数据页面-->
<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 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" placeholder="请选择河段名称" 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" placeholder="请选择水系名称" 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-form-item label="开始时间:">
            <a-month-picker valueFormat="YYYY-MM" v-model:value="where.startTime" :disabled-date="disabledDate" />
          </a-form-item>
          <a-form-item label="结束时间:">
            <a-month-picker valueFormat="YYYY-MM" v-model:value="where.endTime" :disabled-date="disabledDate" />
          </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>
      <!-- 表格 -->
      <a-spin :spinning="loading">
      <ele-pro-table ref="table" :datasource="momData" :columns="columns" :where="where" :scroll="{ x: 'max-content' }"
        @done="(d) => (data = d.data)">
      </ele-pro-table>
    </a-spin>
    </a-card>
  </div>
  <!-- 编辑弹窗 -->
</template>

<script>
  import moment from "moment";
  import {
    listAvgCompositeIndex,
    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 XLSX from "xlsx";
  export default {
    name: "RiverCollectWater",
    components: {},
    data() {
      return {
        data: [],
        momData: [],
        datasource: {},
        columns: [{
            title: '断面名称',
            dataIndex: 'sectionName',
            key: 'sectionName',
          },
          {
            title: '水质综合指数排名',
            dataIndex: 'orderBy',
            key: 'orderBy',
          },
          {
            title: "水质综合指数",
            children: [{
                title: "本月综合指数",
                dataIndex: "baseIndex"
              },
              {
                title: "上月综合指数",
                dataIndex: "momIndex"
              },
              {
                title: "上年同期指数",
                dataIndex: "yoyIndex"
              },
            ]
          },
          {
            title: "水质综合指数变化率",
            children: [{
                title: "上月",
                dataIndex: "momRateChange"
              },
              {
                title: "上年同期",
                dataIndex: "yoyRateChange"
              },
            ]
          },
        ],
        locale,
        bill: {},
        selection: [],
        where: {},
        sectionInfo: {},
        loading: false,
        rules: {},
        waterBodyList: [],
        waterSystemList: [],
        targetInfo:{},
        targetInfoList:[],
      };
    },
    created() {
      listInfo().then((res) => {
        if (res.data.code == 0) {
          console.log(res.data.data)
          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: {
      /* 刷新表格 */
      reload() {
        this.loading=true;
        listAvgCompositeIndex(this.where).then((res) => {
          this.momData = [];
          console.log(res.data.data);
          if (res.data.code == 0) {
            this.$message.success(res.data.msg);
            res.data.data.forEach((m) => {
              this.momData.push(m);
            })
          } 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.momData.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">
</style>
