<template>
    <div class="ele-body">
        <a-card :bordered="false">
            <!-- 搜索表单 -->
            <a-form
                :model="where"
                layout="inline"
            >
                <a-row>
                    <a-form-item label="年份:">
                        <a-input-number v-model:value="where.year" :min="2000" :max="2050"/>
                    </a-form-item>

                    <a-space>
                        <a-radio-group @change="cityTypeChange" v-model:value="cityType">
                            <a-radio-button :value="1">全部</a-radio-button>
                            <a-radio-button :value="2">省会</a-radio-button>
                        </a-radio-group>
                        <a-radio-group @change="rankTypeChange" v-model:value="rankType">
                            <a-radio-button :value="1">综合指数</a-radio-button>
                            <a-radio-button :value="2">PM2.5</a-radio-button>
                        </a-radio-group>
                        <a-button type="primary" @click="reload">查询</a-button>
                        <a-button @click="reset">重置</a-button>
                        <a-button @click="exportFile">导出Excel</a-button>
                    </a-space>
                </a-row>
            </a-form>
            <!-- 表格 -->
            <a-table
                :columns="columns"
                :row-key="'id'"
                :data-source="data"
                :loading="loading"
                :pagination="false"
            >

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

<script>
// import _ from "lodash";
import XLSX from "xlsx";
import {
    airYearRankUrl,
    airPm25YearRankUrl,
    airYearProvincialCapitalRankUrl,
    airPm25YearProvincialCapitalRankUrl
} from "@/api/ecology/atmosphere/air";
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
import moment from "moment";
import axios from 'axios';
//   import utils from "./utils";
export default {
    name: "AirYearRanking",
    components: {},
    data() {
        return {
            data: [],
            locale,
            bill: {},
            // 表格数据接口
            url: airYearRankUrl,
            selection: [],
            // 表格列配置
            columns: [
                {title: "排名", dataIndex: "rankNumber",},
                {title: "省份", dataIndex: "province",},
                {title: "城市", dataIndex: "city",},
                {title: "综合指数", dataIndex: "comprehensiveAqi",},
                {title: "最大指数", dataIndex: "maxAqi",},
                {title: "首要污染物", dataIndex: "primaryPollutant",},
            ],
            placeOptions: [],
            rankType: 1,
            cityType: 1,
            rowKey: "ambientAirZhenqiCityYearComprehensiveAqiRankDataId",
            loading: false,
            time: moment(),
            // 表格搜索条件
            where: {year: new Date().getFullYear()},
            // 表格选中数据
            selectionList: [],
        };
    },
    mounted() {
        this.reload()
    },
    methods: {

        /* 刷新表格 */
        reload() {
            if (!this.where.year) {
                return;
            }
            this.loading = true;
            let rowKey = undefined;
            if (this.rankType == 1) {
                rowKey = "ambientAirZhenqiCityYearComprehensiveAqiRankDataId"
            } else {
                rowKey = "ambientAirZhenqiCityYearPm25RankDataId"
                // this.needPage = false
            }
            if(this.cityType == 1){
                axios.get(this.url, {params: {limit: 168, ...this.where}}).then(res => {
                    res.data.data.forEach(item=>{
                        item.id  = item[rowKey]
                    })
                    this.data = res.data.data
                }).finally(() => {
                    this.loading = false;
                })
            }else {
                axios.post(this.url, {limit: 168, ...this.where}).then(res => {
                    res.data.data.forEach(item=>{
                        item.id  = item[rowKey]
                    })
                    this.data = res.data.data
                }).finally(() => {
                    this.loading = false;
                })
            }


        },
        /* 重置搜索 */
        reset() {
            this.where = {
                year: moment().get("year"),
                month: moment().get("month")
            };
            this.reload();
        },
        cityTypeChange(){
            if (this.rankType == 1) {
                if (this.cityType == 1) {
                    this.url = airYearRankUrl;
                } else {
                    this.url = airYearProvincialCapitalRankUrl;
                }
            } else {
                if (this.cityType == 1) {
                    this.url = airPm25YearRankUrl;
                } else {
                    this.url = airPm25YearProvincialCapitalRankUrl
                }
            }
            this.reload();
        },
        rankTypeChange() {
            if (this.rankType == 1) {
                if (this.cityType == 1) {
                    this.url = airYearRankUrl;
                } else {
                    this.url = airYearProvincialCapitalRankUrl;
                }
                this.columns.splice(3, 1, {title: "综合指数", dataIndex: "comprehensiveAqi",})
                this.rowKey = "ambientAirZhenqiCityYearComprehensiveAqiRankDataId"
            } else {
                if (this.cityType == 1) {
                    this.url = airPm25YearRankUrl;
                } else {
                    this.url = airPm25YearProvincialCapitalRankUrl
                }
                this.columns.splice(3, 1, {title: "PM2.5", dataIndex: "pm25",})
                this.rowKey = "ambientAirZhenqiCityYearPm25RankDataId"
                // this.needPage = false
            }
            this.reload();
        },
        exportFile() {

            const columns = this.columns;
            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>