<!-- 江河水查看数据页面-->
<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.monitorType" placeholder="请选择监测类型" allowClear showSearch>
              <a-select-option :value="'1'">全因子</a-select-option>
              <a-select-option :value="'2'">纳污红线</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="查询日期:">
            <a-month-picker valueFormat="YYYY" v-model:value="where.startTime" />
          </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="datasource" :columns="columns" :where="where"
          :scroll="{ x: 'max-content' }" @done="(d) => (data = d.data)">
        </ele-pro-table>
      </a-spin>
    </a-card>
  </div>
  <!-- 编辑弹窗 -->
</template>

<script>
  import {
    listAutoStandard,
  } from "@/api/ecology/river-statis";
  import {
    listInfo
  } from "@/api/ecology/water/river-autonomous";
  import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
  import XLSX from "xlsx";
  export default {
    name: "AutoCollectWater",
    components: {},
    data() {
      return {
        data: [],
        locale,
        datasource: [],
        // 表格数据接口
        // url: autonomyWaterFunctionTotalUrl,
        selection: [],
        // tableColumns,
        // 表格列配置
        columns: [{
            title: "监测断面名称",
            dataIndex: "sectionName",
            sorter: true,
          },
          {
            title: "水质目标",
            dataIndex: "waterQualityGoal",
            sorter: true,
          },
          {
            title: "1月",
            dataIndex: "january",
            sorter: true,
          },
          {
            title: "2月",
            dataIndex: "february",
            sorter: true,
          },
          {
            title: "3月",
            dataIndex: "march",
            sorter: true,
          },
          {
            title: "4月",
            dataIndex: "april",
            sorter: true,
          },
          {
            title: "5月",
            dataIndex: "may",
            sorter: true,
          },
          {
            title: "6月",
            dataIndex: "june",
            sorter: true,
          },
          {
            title: "7月",
            dataIndex: "july",
            sorter: true,
          },
          {
            title: "8月",
            dataIndex: "august",
            sorter: true,
          },
          {
            title: "9月",
            dataIndex: "september",
            sorter: true,
          },
          {
            title: "10月",
            dataIndex: "october",
            sorter: true,
          },
          {
            title: "11月",
            dataIndex: "november",
            sorter: true,
          },
          {
            title: "12月",
            dataIndex: "december",
            sorter: true,
          },
          {
            title: "达标率",
            dataIndex: "standardRate",
            sorter: true,
          },
          {
            title: "达标情况",
            dataIndex: "standard",
            sorter: true,
          },

        ],
        // 表格搜索条件
        where: {},
        sectionInfo: {},
        loading: false,
        rules: {},
        waterSystemList: [],
      };
    },

    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.riverLakeLibrary);
          })
          this.waterSystemList = [...new Set(this.waterSystemList)];
        } else {
          this.$message.error(res.data.msg);
        }
      })
    },
    methods: {
      /* 刷新表格 */
      reload() {
        this.loading = true;
        listAutoStandard(this.where).then((res) => {
          console.log(res.data.data);
          this.datasource = [];
          if (res.data.code == 0) {
            this.$message.success(res.data.msg);
            for (var key in res.data.data) {
              var arr = res.data.data[key];
              console.log(arr);
              var target = {
                sectionName:'',
                january:'',
                february:'',
                march:'',
                april:'',
                may:'',
                june:'',
                july:'',
                august:'',
                september:'',
                october:'',
                november:'',
                december:'',
                standardRate:'',
                standard:'',
              };
              arr.forEach(e => {
                target.sectionName = e.sectionName;
                var month = e.samplingTime.split("-")[1];
                if (month == '01') {
                  target.january = e.waterQualityCategory;
                }
                if (month == '02') {
                  target.february = e.waterQualityCategory;
                }
                if (month == '03') {
                  target.march = e.waterQualityCategory;
                }
                if (month == '04') {
                  target.april = e.waterQualityCategory;
                }
                if (month == '05') {
                  target.may = e.waterQualityCategory;
                }
                if (month == '06') {
                  target.june = e.waterQualityCategory;
                }
                if (month == '07') {
                  target.july = e.waterQualityCategory;
                }
                if (month == '08') {
                  target.august = e.waterQualityCategory;
                }
                if (month == '09') {
                  target.september = e.waterQualityCategory;
                }
                if (month == '10') {
                  target.october = e.waterQualityCategory;
                }
                if (month == '11') {
                  target.november = e.waterQualityCategory;
                }
                if (month == '12') {
                  target.december = e.waterQualityCategory;
                }
                console.log(arr.length);
                if(arr.length == '12'){
                  target.standardRate = e.standardRate;
                  target.standard = e.standard;
                }
               
              })
              
              this.datasource.push(target);
            }
          } else {
            this.$message.error(res.data.msg);
          }
          this.loading = false;
        });
        this.loading = false;
      },
      /* 重置搜索 */
      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>
