<template>
  <div class="">
    <a-form :model="where" :rules="whereRules" :labelCol="{ offset: 1 }">
      <a-row>
        <!-- <a-col :lg="6" :md="12" :sm="24" :xs="24">
          <a-form-item label="统计模块:">
            <a-select
              :options="groupModelOptions"
              v-model:value="where.groupModel"
              placeholder="统计模块"
            >
            </a-select>
          </a-form-item>
        </a-col> -->
        <!-- <a-col :lg="6" :md="12" :sm="24" :xs="24">
          <a-form-item label="时间细度:">
            <a-select
              :options="groupTimeLengthOptions"
              v-model:value="where.groupTimeLength"
              placeholder=""
            >
            </a-select>
          </a-form-item>
        </a-col> -->
        <a-col :lg="6" :md="12" :sm="24" :xs="24">
          <a-form-item name="timeRange" label="时间范围:">
            <a-range-picker
              @panelChange="timeRangePanelChange"
              v-model:value="timeRange"
              format="YYYY"
              :mode="['year', 'year']"
            />
          </a-form-item>
        </a-col>
        <a-col :lg="6" :md="12" :sm="24" :xs="24">
          <a-form-item label="昼夜:">
            <a-select
              :options="timeSlotOptions"
              v-model:value="where.timeSlot"
              placeholder="昼夜"
            >
            </a-select>
          </a-form-item>
        </a-col>

        <a-col :lg="12" :md="12" :sm="24" :xs="24">
          <a-form-item label="类型:">
            <a-select
              v-model:value="where.valueType"
              :options="valueTypeOptions"
              mode="multiple"
              placeholder="至少选择一项"
            >
            </a-select>
          </a-form-item>
        </a-col>
        <!-- <a-col :lg="6" :md="12" :sm="24" :xs="24">
              <a-form-item label="时间范围:">
                <a-range-picker @change="reportTimeScopeChange" :mode="['year','year']" separator="~" v-model:value="where.reportTimeScope" ><a-range-picker>
                   <template #renderExtraFooter>
                      extra footer
                    </template>
                </a-range-picker>
              </a-form-item>
            </a-col> -->

        <a-col :lg="12" :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
      v-if="hisYears.length > 0"
      ref="table"
      row-key="id"
      :datasource="url"
      :columns="columns"
      :where="where"
      :needPage="false"
      :initLoad="false"
      :scroll="{ x: 'max-content' }"
      :method="'POST'"
      @done="(d) => (data = d.data)"
    >
      <template #toolbar>
        <!-- 搜索表单 -->

        <!-- <a-space>
            
        </a-space> -->
      </template>
    </ele-pro-table>
  </div>
</template>

<script>
// import _ from "lodash";
import { ref } from "vue";
import XLSX from "xlsx";
import {
  pageRoadNoiseCompare,
  getHistoryyears,
} from "@/api/ecology/noise/road-sound";
export default {
  name: "StatisticSoundRoadCompare",
  components: {},
  data() {
    const groupModelOptions = [
      { label: "测点", value: "place" },
      { label: "城区", value: "area" },
      { label: "市", value: "city" },
    ];
    const groupTimeLengthOptions = [
      {
        label: "年",
        value: "monitor_year",
      },
      {
        label: "季度",
        value: "quarter",
      },
    ];

    // const valueTypeOptions = ['Leq','SD','L10','L50','L90','Lmin','Lmax'];
    const valueTypeOptions = [
      {
        label: "Leq",
        value: "index_Leq",
      },
      {
        label: "SD",
        value: "index_SD",
      },
      {
        label: "L10",
        value: "index_L10",
      },
      {
        label: "L50",
        value: "index_L50",
      },
      {
        label: "L90",
        value: "index_L90",
      },
      {
        label: "Lmin",
        value: "index_Lmin",
      },
      {
        label: "Lmax",
        value: "index_Lmax",
      },
    ];

    const whereRules = {};
    return {
      url: pageRoadNoiseCompare,
      data: [],
      where: {
        groupModel: "area",
        groupTimeLength: "monitor_year",
        reportTimeScope: [],
        valueType: ["index_Leq"],
        timeRange: [],
        regionLevel: "市级"
      },
      timeRange: [],
      whereRules,
      hisYears: [],
      timeScope: [],
      columns: [{ title: "年", dataIndex: "year" }],
      groupModelOptions,
      groupTimeLengthOptions,
      valueTypeOptions: ref(valueTypeOptions),
      timeSlotOptions: [
        {
          value: "昼",
          label: "昼",
        },
        {
          value: "夜",
          label: "夜",
        },
      ],
    };
  },
  mounted() {
    getHistoryyears().then((res) => {
      this.hisYears = res.data.data;
      this.$nextTick(() => {
        this.reload();
      });
    });
  },
  methods: {
    /* 刷新表格 */
    reload() {
      if (this.where.valueType.length == 0) {
        this.$message.error("请至少选择一个类型");
        return;
      }

      // 结束时间必须大于开始时间
      if (this.where.timeRange && this.where.timeRange.length == 2) {
        if (this.where.timeRange[0] > this.where.timeRange[1]) {
          this.$message.error("结束时间必须大于起始时间");
          return;
        }
        this.where.startYear = this.where.timeRange[0];
        this.where.endYear = this.where.timeRange[1];
      }
      this.stableDone();
      this.$refs.table.reload({
        where: this.where,
      });
    },
    /* 重置搜索 */
    reset() {
      this.where = {
        groupModel: "area",
        groupTimeLength: "monitor_year",
        reportTimeScope: [],
        valueType: ["index_Leq"],
        timeRange: [],
        regionLevel: "市级"
      };
      this.this.timeScope = [];
      this.reload();
    },
    reportTimeScopeChange(d, dstr) {
      console.log(d, dstr);
    },
    timeRangePanelChange(val) {
      val[0] && (this.where.timeRange[0] = val[0].year());
      val[1] && (this.where.timeRange[1] = val[1].year());
      this.timeRange = val;
    },
    // 数据加载完成
    stableDone() {
      const columns = [];
      if (this.where.groupModel == "area") {
        columns.push({
          title: "城区",
          dataIndex: "area",
          sorter: true,
        });
      } else if (this.where.groupModel == "place") {
        columns.push({
          title: "测点",
          dataIndex: "area",
          sorter: true,
        });
      } else if (this.where.groupModel == "city") {
        columns.push({
          title: "城市",
          dataIndex: "area",
          sorter: true,
        });
      }

      this.hisYears.forEach((item) => {
        if (
          (!this.where.timeRange[0] || this.where.timeRange[0] <= item) &&
          (!this.where.timeRange[1] || this.where.timeRange[1] >= item)
        ) {
          if (this.where.groupTimeLength == "quarter") {
            columns.push({
              title: item + "年第一季度Leq",
              dataIndex: item + "1" + "Leq",
              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
            });
            columns.push({
              title: item + "年第二季度Leq",
              dataIndex: item + "2" + "Leq",
              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
            });
            columns.push({
              title: item + "年第三季度Leq",
              dataIndex: item + "3" + "Leq",
              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
            });
            columns.push({
              title: item + "年第四季度Leq",
              dataIndex: item + "4" + "Leq",
              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
            });
            columns.push({
              title: item + "年第一季度SD",
              dataIndex: item + "1" + "Sd",
              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
            });
            columns.push({
              title: item + "年第二季度SD",
              dataIndex: item + "2" + "Sd",
              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
            });
            columns.push({
              title: item + "年第三季度SD",
              dataIndex: item + "3" + "Sd",
              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
            });
            columns.push({
              title: item + "年第四季度SD",
              dataIndex: item + "4" + "Sd",
              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
            });
            columns.push({
              title: item + "年第一季度L10",
              dataIndex: item + "1" + "L10",
              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
            });
            columns.push({
              title: item + "年第二季度L10",
              dataIndex: item + "2" + "L10",
              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
            });
            columns.push({
              title: item + "年第三季度L10",
              dataIndex: item + "3" + "L10",
              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
            });
            columns.push({
              title: item + "年第四季度L10",
              dataIndex: item + "4" + "L10",
              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
            });
            columns.push({
              title: item + "年第一季度L50",
              dataIndex: item + "1" + "L50",
              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
            });
            columns.push({
              title: item + "年第二季度L50",
              dataIndex: item + "2" + "L50",
              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
            });
            columns.push({
              title: item + "年第三季度L50",
              dataIndex: item + "3" + "L50",
              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
            });
            columns.push({
              title: item + "年第四季度L50",
              dataIndex: item + "4" + "L50",
              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
            });
            columns.push({
              title: item + "年第一季度L90",
              dataIndex: item + "1" + "L90",
              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
            });
            columns.push({
              title: item + "年第二季度L90",
              dataIndex: item + "2" + "L90",
              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
            });
            columns.push({
              title: item + "年第三季度L90",
              dataIndex: item + "3" + "L90",
              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
            });
            columns.push({
              title: item + "年第四季度L90",
              dataIndex: item + "4" + "L90",
              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
            });
            columns.push({
              title: item + "年第一季度Lmin",
              dataIndex: item + "1" + "Lmin",
              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
            });
            columns.push({
              title: item + "年第二季度Lmin",
              dataIndex: item + "2" + "Lmin",
              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
            });
            columns.push({
              title: item + "年第三季度Lmin",
              dataIndex: item + "3" + "Lmin",
              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
            });
            columns.push({
              title: item + "年第四季度Lmin",
              dataIndex: item + "4" + "Lmin",
              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
            });
            columns.push({
              title: item + "年第一季度Lmax",
              dataIndex: item + "1" + "Lmax",
              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
            });
            columns.push({
              title: item + "年第二季度Lmax",
              dataIndex: item + "2" + "Lmax",
              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
            });
            columns.push({
              title: item + "年第三季度Lmax",
              dataIndex: item + "3" + "Lmax",
              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
            });
            columns.push({
              title: item + "年第四季度Lmax",
              dataIndex: item + "4" + "Lmax",
              customRender: ({ text }) =>text? Number(text).toFixed(1):"",
            });
          } else {
            if (this.where.valueType.includes("index_Leq")) {
              columns.push({
                title: item + "年Leq",
                dataIndex: item + "Leq",
                customRender: ({ text }) => {
                  const val = text ? Number(text).toFixed(1) : "";
                  return val;
                },
              });
            }
            if (this.where.valueType.includes("index_SD")) {
              columns.push({
                title: item + "年SD",
                dataIndex: item + "Sd",
                customRender: ({ text }) => {
                  const val = text ? Number(text).toFixed(1) : "";
                  return val;
                },
              });
            }
            if (this.where.valueType.includes("index_L10")) {
              columns.push({
                title: item + "年L10",
                dataIndex: item + "L10",
                customRender: ({ text }) => {
                  const val = text ? Number(text).toFixed(1) : "";
                  return val;
                },
              });
            }

            if (this.where.valueType.includes("index_L50")) {
              columns.push({
                title: item + "年L50",
                dataIndex: item + "L50",
                customRender: ({ text }) => {
                  const val = text ? Number(text).toFixed(1) : "";
                  return val;
                },
              });
            }
            if (this.where.valueType.includes("index_L90")) {
              columns.push({
                title: item + "年L90",
                dataIndex: item + "L90",
                customRender: ({ text }) => {
                  const val = text ? Number(text).toFixed(1) : "";
                  return val;
                },
              });
            }
            if (this.where.valueType.includes("index_Lmin")) {
              columns.push({
                title: item + "年Lmin",
                dataIndex: item + "Lmin",
                customRender: ({ text }) => {
                  const val = text ? Number(text).toFixed(1) : "";
                  return val;
                },
              });
            }
            if (this.where.valueType.includes("index_Lmax")) {
              columns.push({
                title: item + "年Lmax",
                dataIndex: item + "Lmax",
                customRender: ({ text }) => {
                  const val = text ? Number(text).toFixed(1) : "";
                  return val;
                },
              });
            }
          }
        }
      });
      //
      this.columns = columns;
    },
    exportFile() {
      const arr = [];
      const th = this.columns.map((item) => item.title);
      arr.push(th);
      this.data.forEach((d) => {
        const td = this.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>
</style>