<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">重置</a-button>
                            <a-button @click="exportFile">导出Excel</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();
        },
        exportFile() {

            const columns = [
                {
                    title: "监测日期",
                    dataIndex: "monitorTime",
                    sorter: true,
                    customRender: ({text}) => moment(text).format("YYYY-MM-DD HH:mm")
                },
                {
                    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,
                },
            ];
            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>
