<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" allowClear showSearch placeholder="选择区域等级">
            <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" allowClear showSearch placeholder="选择监测点">
            <a-select-option
              v-for="(item) in palceOptions"
              :key="item.value"
            >{{ item.label }}
            </a-select-option
            >
          </a-select>
        </a-form-item>

        <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-form>
      <!-- 表格 -->
      <ele-pro-table
        v-model:selection="selectionList"
        ref="table"
        row-key="acidRainId"
        :datasource="url"
        :columns="columns"
        :where="where"
        :scroll="{ x: 'max-content' }"
        @done="(d) => (data = d.data)"
      >
        <template #Address="{ record  }">
          {{ record.area ? record.area : record.county ? record.county : record.city }}
        </template>
      </ele-pro-table>
    </a-card>
  </div>
  <!-- 编辑弹窗 -->
</template>

<script>
// import _ from "lodash";
import XLSX from "xlsx";
import {pageAcidRainUrl, getColumnOptions} from "@/api/ecology/atmosphere/acid";
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
import moment from "moment";
//   import utils from "./utils";
export default {
  name: "StatisticSoundZoneBase",
  components: {},
  data() {
    const year = new Date().getFullYear();
    return {
      data: [],
      locale,
      bill: {},
      // 表格数据接口
      url: pageAcidRainUrl,
      selection: [],
      // 表格列配置
      columns: [
        {
          title: "采样开始时间",
          dataIndex: "monitorStartTime",
          sorter: true,
          customRender: ({text}) => moment(text, "YYYY/MM/DD HH:mm:ss").format("YYYY-MM-DD HH:mm")
        },
        {
          title: "采样结束时间",
          dataIndex: "monitorEndTime",
          sorter: true,
          customRender: ({text}) => moment(text, "YYYY/MM/DD HH:mm:ss").format("YYYY-MM-DD HH:mm")
        },
        {
          title: "行政代码",
          dataIndex: "regionCode",
          sorter: true,
          customRender: () => "450100"
        },
        {
          title: "市(县，区)",
          slots: {customRender: "Address"},
        },
        {
          title: "采样点",
          dataIndex: "place",
          sorter: true,
        },
        {
          title: "点位类型",
          dataIndex: "placeType",
          sorter: true,
        },
        {
          title: "降水类型",
          dataIndex: "precipitationType",
          sorter: true,
        },
        {
          title: "降水量",
          dataIndex: "precipitation",
          sorter: true,
        },
        {
          title: "pH",
          dataIndex: "ph",
          sorter: true,
        },
        {
          title: "电导率",
          dataIndex: "conductivity",
          sorter: true,
        },
        {
          title: "SO42",
          dataIndex: "so42",
          sorter: true,
        },
        {
          title: "NO3",
          dataIndex: "no3",
          sorter: true,
        },
        {
          title: "F",
          dataIndex: "f",
          sorter: true,
        },
        {
          title: "CL",
          dataIndex: "cl",
          sorter: true,
        },
        {
          title: "NH4",
          dataIndex: "nh4",
          sorter: true,
        },
        {
          title: "Ca2",
          dataIndex: "ca",
          sorter: true,
        },
        {
          title: "Mg2",
          dataIndex: "mg",
          sorter: true,
        },
        {
          title: "Na",
          dataIndex: "na",
          sorter: true,
        },
        {
          title: "K",
          dataIndex: "k",
          sorter: true,
        },
        {
          title: "系统编码",
          dataIndex: "systemCode",
          sorter: true,
        },

        {
          title: "备注",
          dataIndex: "remark",
          sorter: true,
        },
        {
          title: "创建人",
          dataIndex: "username",
          sorter: true,
        }
      ],
      palceOptions: [],
      areaOptions: [],
      regionLevelOptions: [],
      // 表格搜索条件
      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();
  },
  methods: {
    /**获取下来框数据 */
    loadOptionData() {
      getColumnOptions("place").then((res) => {
        this.palceOptions = res.data.data.map((item) => {
          return {
            label: item,
            value: item,
          };
        });
      });
      getColumnOptions("area").then((res) => {
        this.areaOptions = res.data.data.map((item) => {
          return {
            label: item,
            value: item,
          };
        });
      });
      getColumnOptions("region_level").then((res) => {
        this.regionLevelOptions = 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: "regionCode",customRender:()=>"450100",},
        {title: "",dataIndex: "address"},
        {title: "",dataIndex: "place", },
        {title: "",dataIndex: "placeType",},
        {title: "年",dataIndex: "monitorStartTime", customRender: ({text}) => moment(text, "YYYY/MM/DD HH:mm:ss").year()},
        {title: "月",dataIndex: "monitorStartTime", customRender: ({text}) => moment(text, "YYYY/MM/DD HH:mm:ss").month()},
        {title: "日",dataIndex: "monitorStartTime", customRender: ({text}) => moment(text, "YYYY/MM/DD HH:mm:ss").days()},
        {title: "时",dataIndex: "monitorStartTime", customRender: ({text}) => moment(text, "YYYY/MM/DD HH:mm:ss").hour()},
        {title: "分",dataIndex: "monitorStartTime", customRender: ({text}) => moment(text, "YYYY/MM/DD HH:mm:ss").minute()},
        {title: "年",dataIndex: "monitorEndTime", customRender: ({text}) => moment(text, "YYYY/MM/DD HH:mm:ss").year()},
        {title: "月",dataIndex: "monitorEndTime", customRender: ({text}) => moment(text, "YYYY/MM/DD HH:mm:ss").month()},
        {title: "日",dataIndex: "monitorEndTime", customRender: ({text}) => moment(text, "YYYY/MM/DD HH:mm:ss").days()},
        {title: "时",dataIndex: "monitorEndTime", customRender: ({text}) => moment(text, "YYYY/MM/DD HH:mm:ss").hour()},
        {title: "分",dataIndex: "monitorEndTime", customRender: ({text}) => moment(text, "YYYY/MM/DD HH:mm:ss").minute()},
        {title: "",dataIndex: "precipitationType", },
        { title: "(mm)",dataIndex: "precipitation",sorter: true, },
        {title: "",dataIndex: "ph", },
        {title: "(mS/m)",dataIndex: "conductivity", },
        {title: "SO42-", dataIndex: "so42",},
        {title: "NO3-",dataIndex: "no3",},
        { title: "F-", dataIndex: "f",},
        {title: "CL-", dataIndex: "cl",},
        {title: "NH4",dataIndex: "nh4", },
        { title: "Ca2", dataIndex: "ca",},
        {title: "Mg2",dataIndex: "mg", },
        {title: "Na",dataIndex: "na",},
        {title: "K", dataIndex: "k"},
        {title: "",dataIndex: "systemCode",},
      ];
      const arr = [["酸雨监测结果报告表"]];
      const th1 = ["行政代码","市(县，区)","采样点","点位类型","采样开始时间","","","","","采样结束时间","","","","","降水类型","降水量","pH","电导率","离子组分（mg/l)","","","","","","","","","系统编码"];
      const th2 = columns.map((item) => item.title);
      arr.push(th1);
      arr.push(th2);
      const merges = []; // 合并
      merges.push({s: {r: 0, c: 0}, e: {r: 0, c: 27}});
      merges.push({s: {r: 1, c: 0}, e: {r: 2, c: 0}});
      merges.push({s: {r: 1, c: 1}, e: {r: 2, c: 1}});
      merges.push({s: {r: 1, c: 2}, e: {r: 2, c: 2}});
      merges.push({s: {r: 1, c: 3}, e: {r: 2, c: 3}});
      merges.push({s: {r: 1, c: 4}, e: {r: 1, c: 8}});
      merges.push({s: {r: 1, c: 9}, e: {r: 1, c: 13}});
      merges.push({s: {r: 1, c: 14}, e: {r: 2, c: 14}});
      // merges.push({s: {r: 1, c: 16}, e: {r: 2, c: 16}});
      merges.push({s: {r: 1, c: 16}, e: {r: 2, c: 16}});
      merges.push({s: {r: 1, c: 18}, e: {r: 1, c: 26}});
      merges.push({s: {r: 1, c: 27}, e: {r: 2, c: 27}});
      this.data.forEach((d) => {
        const td = columns.map((item) => {
          if (item.dataIndex == "address") {
            return d.area ? d.area : d.county ? d.county : d.city
          }else 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, new Date().getTime().toString());
    },
  },
};
</script>

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