<template>
  <div class="">
    <ele-pro-table
      ref="table"
      row-key="id"
      :datasource="url"
      :columns="columns"
      :where="where"
      :needPage="false"
      @done="(d) => (data = d.data)"
      :scroll="{ x: 'max-content' }"
    >
      <template #toolbar>
        <!-- 搜索表单 -->
        <a-form :model="where" layout="inline" :labelCol="{ offset: 1 }">
          <a-row>
              <a-button @click="exportFile">导出excel</a-button>
<!--            <a-col :lg="6" :md="12" :sm="24" :xs="24">-->
<!--              <a-form-item label="昼夜:">-->
<!--                <a-select-->
<!--                  :options="timeSlotOptions"-->
<!--                  v-model:value="where.timeSlot"-->
<!--                  placeholder="昼夜"-->
<!--                >-->
<!--                </a-select>-->
<!--              </a-form-item>-->
<!--            </a-col>-->
<!--            <a-col :lg="4" :md="12" :sm="24" :xs="24">-->
<!--              <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-col>-->
          </a-row>
        </a-form>
        <!-- <a-space>
            
          </a-space> -->
      </template>
    </ele-pro-table>
  </div>
</template>

<script>
import XLSX from "xlsx";
import { roadNoiseYearEnd } from "@/api/ecology/noise/road-sound";
const columns = [
    {title: "年份",dataIndex: "year",},
    {title: "路段总长度(米)）",dataIndex: "roadLengthTotal",},
    {title: "监测点数",dataIndex: "placeTotal",},
    {title: "平均路长(米)",dataIndex: "roadLengthAvg",},
    {title: "平均路宽(米)",dataIndex: "roadWidthAvg",},
    {title: "车流量(辆/20分钟)",dataIndex: "trafficFlow",},
    {title: "超70分贝路段长度占总路长比例(%)",dataIndex: "badProportion",},
    {title: "Leq(分贝)",dataIndex: "leq",customRender:({text})=>{
            if(typeof text == "number"){
                return text.toFixed(1)
            }
            return text
        }},
    {title: "噪声等级",dataIndex: "level",},


];
export default {
  name: "StatisticSoundRoadYearEnd",
  components: {},
  data() {
    return {
      url: roadNoiseYearEnd,
      data: [],
      where: {
        timeSlot: "昼"
      },
      timeScope: [],
      columns,
      modelOptions: [
        {
          value: "place",
          label: "测点",
        },
        {
          value: "road",
          label: "路段",
        },
        {
          value: "area",
          label: "城区",
        },
        {
          value: "city",
          label: "市",
        },
      ],
      timeSlotOptions: [
        {
          value: "昼",
          label: "昼",
        },
        {
          value: "夜",
          label: "夜",
        },
      ],
    };
  },
  methods: {
    /* 刷新表格 */
    reload() {

    },
    /* 重置搜索 */
    reset() {
      this.where = {
        model: "area",
        timeSlot: "昼",
      };
      this.this.timeScope = [];

      this.reload();
    },
    exportFile() {
        const columns = this.columns.filter(item=>item.dataIndex)
        const arr = [];
        const th = columns.map((item) => item.title);
        arr.push(th);
        this.data.forEach((d) => {
            const td = columns.map((item) => {
                let val = d[item.dataIndex]
                if(typeof  val == "number"){
                    val = val.toFixed(1);
                }
                return val;
            });
            arr.push(td);
        });
        let sheet = XLSX.utils.aoa_to_sheet(arr);
        this.$util.exportSheet(XLSX, sheet, new Date().getTime().toString());
    },
  },
};
</script>

<style scoped>
</style>