<template>
  <div class="ele-body">
    <a-card :bordered="false">
      <!-- 搜索表单 -->
      <a-form
        :model="where"
        layout="inline"
      >
        <a-form-item label="起始日期:">
          <a-date-picker valueFormat="YYYY-MM-DD 00:00:00" v-model:value="where.timeStart"></a-date-picker>
        </a-form-item>
        <a-form-item label="结束日期:">
          <a-date-picker valueFormat="YYYY-MM-DD 23:59:59" v-model:value="where.timeEnd"></a-date-picker>
        </a-form-item>
        <a-form-item label="区域等级:">
          <a-select v-model:value="where.regionLevel" placeholder="选择区域等级" allowClear showSearch>
            <a-select-option
              v-for="(item) in regionLevelOptions"
              :key="item.value"
            >{{ item.label }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="监测点:">
          <a-select v-model:value="where.place" placeholder="选择监测点" allowClear showSearch>
            <a-select-option
              v-for="(item) in placeOptions"
              :key="item.value"
            >{{ item.label }}
            </a-select-option
            >
          </a-select>
        </a-form-item>

        <a-space>
          <a-button type="primary" @click="reload">查询</a-button>
          <a-button @click="reset" style="background: #FFA200FF; border-color: #FFA200FF;color: #FFFFFF">重置</a-button>
          <a-button @click="exportCityFile" style="background: #2FA524FF; border-color: #2FA524FF;color: #FFFFFF">
            市级模板导出
          </a-button>
          <a-button @click="exportCountyFile" style="background: #2FA524FF; border-color: #2FA524FF;color: #FFFFFF">
            县级模板导出
          </a-button>
        </a-space>
      </a-form>
      <!-- 表格 -->
      <ele-pro-table
        v-model:selection="selectionList"
        ref="table"
        row-key="ambientAirId"
        :datasource="url"
        :columns="columns"
        :where="where"
        :scroll="{ x: 'max-content' }"
        @done="(d) => (data = d.data)"
        :init-load="false"
      >

      </ele-pro-table>
    </a-card>
  </div>
  <!-- 编辑弹窗 -->
</template>

<script>
// import _ from "lodash";
import XLSX from "xlsx";
import {pageAirUrl, getColumnOptions, listAllAir} from "@/api/ecology/atmosphere/air";
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
import moment from "moment";
//   import utils from "./utils";
export default {
  name: "StatisticAirBase",
  components: {},
  data() {
    const year = new Date().getFullYear();
    return {
      data: [],
      locale,
      bill: {},
      // 表格数据接口
      url: pageAirUrl,
      selection: [],
      // 表格列配置
      columns: [
        {
          title: "监测日期",
          dataIndex: "monitorTime",
          sorter: true,
          customRender: ({text}) => moment(text).format("YYYY-MM-DD")
        },
        {
          title: "城市",
          dataIndex: "city",
          sorter: true,
        },
        {
          title: "测点名称",
          dataIndex: "place",
          sorter: true,
        },
        {
          title: "SO2/(μg/m3)",
          dataIndex: "so2",
          sorter: true,
        },
        {
          title: "NO2/(μg/m3)",
          dataIndex: "no2",
          sorter: true,
        },
        {
          title: "PM10/(μg/m3)",
          dataIndex: "pm10",
          sorter: true,
        },
        {
          title: "CO/(mg/m3)",
          dataIndex: "co",
          sorter: true,
        },
        {
          title: "臭氧（O3）最大8小时滑动平均浓度/(μg/m3)",
          dataIndex: "o3",
          sorter: true,
        },
        {
          title: "PM2.5",
          dataIndex: "pm25",
          sorter: true,
        },
        {
          title: "空气质量指数AQI",
          dataIndex: "aqi",
          sorter: true,
        },
        {
          title: "首要污染物",
          dataIndex: "primaryPollutant",
          sorter: true,
        },
        {
          title: "空气质量指数级别",
          dataIndex: "aqiLevel",
          sorter: true,
        },
        {
          title: "空气质量状况",
          dataIndex: "airQualityStatus",
          sorter: true,
        },
        {
          title: "备注",
          dataIndex: "remark",
          sorter: true,
        },
        {
          title: "创建人",
          dataIndex: "username",
          sorter: true,
        }
      ],
      regionLevelOptions: [
        {label: "市区", value: "city"},
        {label: "城区", value: "area"},
        {label: "县区", value: "county"},
        {label: "站点", value: "place"},
      ],
      placeOptions: [],
      time: [],
      // 表格搜索条件
      where: {
        checked: 1,
        timeStart: moment(`${year}-01-01 00:00:00`).format("YYYY-MM-DD 00:00:00"),
        timeEnd: moment().format("YYYY-MM-DD 23:59:59")
      },
      // 表格选中数据
      selectionList: [],
    };
  },
  mounted() {
    this.loadOptionData();
    this.reload();
  },
  methods: {
    /**获取下来框数据 */
    loadOptionData() {
      getColumnOptions("place").then((res) => {
        this.placeOptions = res.data.data.map((item) => {
          return {
            label: item,
            value: item,
          };
        });
      });
    },
    /* 刷新表格 */
    reload() {
      this.$refs.table.reload({
        where: this.where,
      });
    },
    /* 重置搜索 */
    reset() {
      this.where = {
        checked: 1,
      };
      this.reload();
    },
    exportCityFile() {

      const columns = [

        {
          title: "城市",
          dataIndex: "city",
          sorter: true,
        },
        {
          title: "时间",
          dataIndex: "monitorTime",
          sorter: true,
          customRender: ({text}) => moment(text).format("YYYY-MM-DD HH:mm")
        },
        {
          title: "二氧化硫浓度/(μg/m3)",
          dataIndex: "so2",
          sorter: true,
        },
        {
          title: "二氧化氮浓度/(μg/m3)",
          dataIndex: "no2",
          sorter: true,
        },
        {
          title: "可吸入颗粒物浓度/(μg/m3)",
          dataIndex: "pm10",
          sorter: true,
        },
        {
          title: "一氧化碳浓度/(mg/m3)",
          dataIndex: "co",
          sorter: true,
        },
        {
          title: "臭氧（O3）最大8小时滑动平均浓度/(μg/m3)",
          dataIndex: "o3",
          sorter: true,
        },
        {
          title: "细颗粒物浓度/(μg/m3)",
          dataIndex: "pm25",
          sorter: true,
        },

        {
          title: "空气质量指数AQI",
          dataIndex: "aqi",
          sorter: true,
        },
        {
          title: "首要污染物",
          dataIndex: "primaryPollutant",
          sorter: true,
        },
        {
          title: "空气质量指数级别",
          dataIndex: "aqiLevel",
          sorter: true,
        },
        {
          title: "类别",
          dataIndex: "airQualityStatus",
          sorter: true,
        },
        {
          title: "备注",
          dataIndex: "remark",
          sorter: true,
        },
      ];
      const arr = [];
      const th = columns.map((item) => item.title);
      arr.push(th);
      listAllAir(this.where).then(res => {
        if (res.data.code == 0) {
          res.data.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, moment(this.where.timeStart).format("YYYY年MM月DD日") + "至" + moment(this.where.timeEnd).format("YYYY年MM月DD日") + "基础数据");

        }
      })

    },

    exportCountyFile() {

      const columns = [
        {
          title: "测点名称",
          dataIndex: "place",
          sorter: true,
        },
        {
          title: "日期",
          dataIndex: "monitorTime",
          sorter: true,
          customRender: ({text}) => moment(text).format("YYYY-MM-DD")
        },
        {
          title: "空气质量状况",
          dataIndex: "airQualityStatus",
          sorter: true,
        },
        {
          title: "空气质量指数级别",
          dataIndex: "aqiLevel",
          sorter: true,
        },
        {
          title: "AQI",
          dataIndex: "aqi",
          sorter: true,
        },
        {
          title: "首要污染物",
          dataIndex: "primaryPollutant",
          sorter: true,
        },
        {
          title: "SO2)",
          dataIndex: "so2",
          sorter: true,
        },
        {
          title: "NO2",
          dataIndex: "no2",
          sorter: true,
        },
        {
          title: "PM10",
          dataIndex: "pm10",
          sorter: true,
        },
        {
          title: "CO",
          dataIndex: "co",
          sorter: true,
        },
        {
          title: "O3-8h",
          dataIndex: "o3",
          sorter: true,
        },
        {
          title: "PM2.5",
          dataIndex: "pm25",
          sorter: true,
        },
        {
          title: "备注",
          dataIndex: "remark",
          sorter: true,
        },
      ];
      const arr = [];
      const th = columns.map((item) => item.title);
      arr.push(th);
      listAllAir(this.where).then(res => {
        if (res.data.code == 0) {
          res.data.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, moment(this.where.timeStart).format("YYYY年MM月DD日") + "至" + moment(this.where.timeEnd).format("YYYY年MM月DD日") + "基础数据");

        }
      })

    },
  },
};
</script>

<style scoped lang="less">
</style>
