<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 00:00:00" v-model:value="where.timeEnd"></a-date-picker>
                </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
                ref="table"
                row-key="ambientAirId"
                :need-page="false"
                :datasource="url"
                :columns="columns"
                :where="where"
                :scroll="{ x: 'max-content' }"
                :init-load="false"
                @done="(d) => (data = d.data)"
                method="POST"
            >

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

<script>
import _ from "lodash";
import XLSX from "xlsx";
import {avgUrl, getColumnOptions} from "@/api/ecology/special-lake";
// import { Modal } from "ant-design-vue";
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
import moment from "moment";

//   import utils from "./utils";
export default {
    name: "StatisticAirAreaBase",
    components: {},
    data() {
        const year = new Date().getFullYear();
        return {
            data: [],
            locale,
            bill: {},
            // 表格数据接口
            url: avgUrl,
            selection: [],
            modelOptions: [
                {label: "市", value: "city"},
                {label: "县", value: "county"},
                {label: "站点", value: "place"},

            ],
            // 表格列配置
            columns: [
                {title: "测站名称", dataIndex: "stationName", sorter: true,},
                {title: "测站代码", dataIndex: "stationCode", sorter: true,},
                {title: "湖库名称", dataIndex: "lakeLibraryName", sorter: true,},
                {title: "湖库代码", dataIndex: "lakeLibraryCode", sorter: true,},
                {title: "断面名称", dataIndex: "sectionName", sorter: true,},
                {title: "断面代码", dataIndex: "sectionCode", sorter: true,},
                {title: "控制属性", dataIndex: "controlAttributes", sorter: true,},
                {title: "所属流域", dataIndex: "watershed", sorter: true,},
                {title: "水期代码", dataIndex: "waterPeriodCode", sorter: true,},

                {title: "浊度(NTU)", dataIndex: "turbidity", sorter: true,},
                {title: "水温(℃)", dataIndex: "wTemp", sorter: true,},
                {title: "水位(m)", dataIndex: "wd", sorter: true,},
                {title: "pH值", dataIndex: "ph", sorter: true,},
                {title: "电导率(ms/m)", dataIndex: "wCond", sorter: true,},
                {title: "透明度（cm）", dataIndex: "transp", sorter: true,},
                {title: "溶解氧 (mg/L)", dataIndex: "dissolvedOxygen", sorter: true,},
                {title: "高锰酸盐指数 (mg/L)", dataIndex: "codmn", sorter: true,},
                {title: "氨氮 (mg/L)", dataIndex: "nh4N", sorter: true,},
                {title: "石油类 (mg/L)", dataIndex: "oils", sorter: true,},
                {title: "总氮 (mg/L)", dataIndex: "nTotal", sorter: true,},
                {title: "总磷 (mg/L)", dataIndex: "pTotal", sorter: true,},
                {title: "叶绿素 (mg/L)", dataIndex: "chlA", sorter: true,},
                {title: "挥发酚 (mg/L)", dataIndex: "vPhen", sorter: true,},
                {title: "汞 (mg/L)", dataIndex: "wHg", sorter: true,},
                {title: "铅 (mg/L)", dataIndex: "wPb", sorter: true,},
                {title: "化学需氧量 (mg/L)", dataIndex: "codcr", sorter: true,},
                {title: "铜 (mg/L)", dataIndex: "wCu", sorter: true,},
                {title: "锌 (mg/L)", dataIndex: "wZn", sorter: true,},
                {title: "氟化物 (mg/L)", dataIndex: "f", sorter: true,},
                {title: "硒 (mg/L)", dataIndex: "se", sorter: true,},
                {title: "砷 (mg/L)", dataIndex: "as", sorter: true,},
                {title: "镉 (mg/L)", dataIndex: "cd", sorter: true,},
                {title: "六价铬 (mg/L)", dataIndex: "cr6", sorter: true,},
                {title: "氰化物 (mg/L)", dataIndex: "cnTotal", sorter: true,},
                {title: "阴离子表面活性剂 (mg/L)", dataIndex: "anSaa", sorter: true,},
                {title: "硫化物 (mg/L)", dataIndex: "s", sorter: true,},
                {title: "粪大肠菌群 (mg/L)", dataIndex: "coloOrg", sorter: true,},
                {title: "硫酸盐 (mg/L)", dataIndex: "so4", sorter: true,},
                {title: "氯化物 (mg/L)", dataIndex: "cl", sorter: true,},
                {title: "硝酸盐 (mg/L)", dataIndex: "no3N", sorter: true,},
                {title: "铁 (mg/L)", dataIndex: "wFe", sorter: true,},
                {title: "锰 (mg/L)", dataIndex: "wMn", sorter: true,},
                {title: "水质类别", dataIndex: "waterQualityCategory", sorter: true,},
            ],
            regionLevelOptions: [],
            time: [],
            // 表格搜索条件
            where: {
                regionLevel: "place",
                timeStart: moment(`${year}-01-01 00:00:00`).format("YYYY-MM-DD 00:00:00"),
                timeEnd: moment().format("YYYY-MM-DD 00:00:00")
            },
            // 表格选中数据
            selectionList: [],
        };
    },
    mounted() {

        this.loadOptionData();
        this.reload();
    },
    methods: {
        /**获取下来框数据 */
        loadOptionData() {
            getColumnOptions("region_level").then((res) => {
                this.regionLevelOptions = res.data.data.map((item) => {
                    return {
                        label: item,
                        value: item,
                    };
                });
            });
        },
        /* 刷新表格 */
        reload() {
            const where = _.cloneDeep(this.where);
            this.$refs.table.reload({
                where
            });
        },
        /* 重置搜索 */
        reset() {
            this.where = {
                regionLevel: "place",
            };
            this.time = undefined;
            this.reload();
        },
        exportFile() {
            const arr = [];
            const th1 = [];
            const th2 = [];
            const merges = []; // 合并
            const columnsTemp = []; // 树形结构整理成list
            this.columns.forEach((item, index) => {
                if (item.children) {
                    item.children.forEach((citem) => {
                        th1.push(item.title)
                        th2.push(citem.title)
                        columnsTemp.push(citem)
                    })
                    merges.push({s: {r: 0, c: th1.length - item.children.length}, e: {r: 0, c: th1.length - 1}})
                } else {
                    th1.push(item.title)
                    th2.push("")
                    columnsTemp.push(item)
                    merges.push({s: {r: 0, c: index}, e: {r: 1, c: index}})
                }
            })
            arr.push(th1, th2);
            this.data.forEach((d) => {
                const td = columnsTemp.map((item) => {
                    if(item.customRender){
                        return item.customRender({text:d[item.dataIndex]});
                    }
                    return d[item.dataIndex];
                });
                arr.push(td);
            });
            let sheet = XLSX.utils.aoa_to_sheet(arr);
            sheet['!merges'] = merges;

            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>