<template>
  <div class="ele-body">
    <a-card :bordered="false">
      <!-- 搜索表单 -->
      <a-form
        :model="where"
        :label-col="{ md: { span: 6 }, sm: { span: 24 } }"
        :wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }"
      >
        <a-row>
          <a-col :lg="6" :md="12" :sm="24" :xs="24">
            <a-form-item label="区域等级:">
              <a-select v-model:value="where.regionLevel" allowClear showSearch>
                <a-select-option
                  v-for="(item) in regionLevelOptions"
                  :key="item.value"
                  >{{ item.label }}</a-select-option
                >
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24" :xs="24">
            <a-form-item label="测点名称:">
              <a-select v-model:value="where.place" allowClear showSearch>
                <a-select-option
                  v-for="(item) in palceOptions"
                  :key="item.value"
                  >{{ item.label }}</a-select-option
                >
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24" :xs="24">
            <a-form-item label="路段:">
              <a-select v-model:value="where.road" allowClear showSearch>
                <a-select-option
                  v-for="(item) in roadOptions"
                  :key="item.value"
                  >{{ item.label }}</a-select-option
                >
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24" :xs="24">
            <a-form-item label="城区">
              <a-select v-model:value="where.area" allowClear showSearch>
                <a-select-option
                  v-for="(item) in areaOptions"
                  :key="item.value"
                  >{{ item.label }}</a-select-option
                >
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :lg="6" :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>
      <!-- 表格 -->
      <ele-pro-table
        v-model:selection="selectionList"
        ref="table"
        row-key="roadNoiseId"
        :datasource="url"
        :columns="columns"
        :where="where"
        :scroll="{ x: 'max-content' }"
        @done="(d) => (data = d.data)"
      >
        <template #Leq="{ text,record  }">
          <a-tag v-if="(record.timeSlot == '昼' && text <= 68) || (record.timeSlot == '夜' && text <= 58)" color="green">{{text}}</a-tag>
          <a-tag v-else-if="(record.timeSlot == '昼' && text > 68 && text <=70) || (record.timeSlot == '夜' && text > 58 && text <=60)" color="blue">{{text}}</a-tag>
          <a-tag v-else-if="(record.timeSlot == '昼' && text > 70 && text <=72) || (record.timeSlot == '夜' && text > 60 && text <=62)" color="red">{{text}}</a-tag>
          <a-tag v-else-if="(record.timeSlot == '昼' && text > 62 && text <=74) || (record.timeSlot == '夜' && text > 62 && text <=64)" color="red">{{text}}</a-tag>
          <a-tag v-else-if="(record.timeSlot == '昼' && text > 74 ) || (record.timeSlot == '夜' && text > 64)" color="red">{{text}}</a-tag>
          <template v-else color="#FFF">{{text}}</template>
        </template>
      </ele-pro-table>
    </a-card>
  </div>
  <!-- 编辑弹窗 -->
</template>

<script>
// import _ from "lodash";
import XLSX from "xlsx";
import { pageRoadNoiseUrl, getColumnOptions } from "@/api/ecology/noise/road-sound";
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
// import moment from "moment";
//   import utils from "./utils";
export default {
  name: "StatisticSoundRoadBase",
  components: {},
  data() {
    return {
      data: [],
      locale,
      bill: {},
      // 表格数据接口
      url: pageRoadNoiseUrl,
      selection: [],
      // 表格列配置
      columns: [
        {
          title: "监测日期",
          dataIndex: "monitorTime",
          sorter: true,
        },
        {
          title: "测点名称",
          dataIndex: "place",
          sorter: true,
        },
        {
          title: "点号",
          dataIndex: "placeCode",
          sorter: true,
        },
        {
          title: "所属路段",
          dataIndex: "road",
          sorter: true,
        },
        {
          title: "所属城区",
          dataIndex: "area",
          sorter: true,
        },
        {
          title: "路长",
          dataIndex: "roadLength",
          sorter: true,
        },
        {
          title: "路宽",
          dataIndex: "roadWidth",
          sorter: true,
        },
        {
          title: "中小型车流量（辆/20分钟）",
          dataIndex: "smallTrafficFlow",
          sorter: true,
        },
        {
          title: "大型车流量（辆/20分钟）",
          dataIndex: "largeTrafficFlow",
          sorter: true,
        },
        {
          title: "时段",
          dataIndex: "timeSlot",
          sorter: true,
        },
        //   {
        //     title: '月',
        //     dataIndex: 'monitorMonth',
        //     sorter: true
        //   },
        //   {
        //     title: '日',
        //     dataIndex: 'monitorDay',
        //     sorter: true
        //   },
        //   {
        //     title: '时',
        //     dataIndex: 'monitorHour',
        //     sorter: true
        //   },
        //   {
        //     title: '分',
        //     dataIndex: 'monitorMinute',
        //     sorter: true
        //   },
        {
          title: "LeqdB(A)",
          dataIndex: "indexLeq",
          slots: {customRender: "Leq"},
          sorter: true,
          
        },
        {
          title: "SDdB(A)",
          dataIndex: "indexSd",
          sorter: true,
        },
        {
          title: "L10dB(A)",
          dataIndex: "indexL10",
          sorter: true,
        },
        {
          title: "L50dB(A)",
          dataIndex: "indexL50",
          sorter: true,
        },
        {
          title: "L90dB(A)",
          dataIndex: "indexL90",
          sorter: true,
        },
        {
          title: "LmindB(A)",
          dataIndex: "indexLmin",
          sorter: true,
        },
        {
          title: "LmaxdB(A)",
          dataIndex: "indexLmax",
          sorter: true,
        },
        {
          title: "测点经度",
          dataIndex: "placeLng",
          sorter: true,
        },
        {
          title: "测点纬度",
          dataIndex: "placeLat",
          sorter: true,
        },
        {
          title: "机动车车道数",
          dataIndex: "motorway",
          sorter: true,
        },
        {
          title: "车道类别",
          dataIndex: "motorwayType",
          sorter: true,
        },
        {
          title: "道路等级",
          dataIndex: "motorwayLevel",
          sorter: true,
        },
        {
          title: "测点参照物",
          dataIndex: "refObj",
          sorter: true,
        },
        {
          title: "道路覆盖人口（万人）",
          dataIndex: "people",
          sorter: true,
        },
        {
          title: "监测站名",
          dataIndex: "station",
          sorter: true,
        },
        {
          title: "监测仪器型号",
          dataIndex: "monitorInstrumentModel",
          sorter: true,
        },
        {
          title: "监测仪器编号",
          dataIndex: "monitorInstrumentCode",
          sorter: true,
        },
        {
          title: "监测前校准值",
          dataIndex: "beforeMonitorValue",
          sorter: true,
        },
        {
          title: "声校准器测量声压值",
          dataIndex: "soundPressureValue",
          sorter: true,
        },
        {
          title: "声校准仪器型号",
          dataIndex: "soundInstrumentModel",
          sorter: true,
        },
        {
          title: "声校准仪器编号",
          dataIndex: "soundInstrumentCode",
          sorter: true,
        },
         {
          title: "区域等级",
          dataIndex: "regionLevel",
          sorter: true,
        },
        {
          title: "备注",
          dataIndex: "remark",
          sorter: true,
        },
        {
          title: "创建人",
          dataIndex: "username",
          sorter: true,
        },
      ],
      palceOptions: [],
      areaOptions: [],
      roadOptions: [],
      regionLevelOptions: [],
      // 表格搜索条件
      where: {
        checked: 1,
      },
      // 表格选中数据
      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("road").then((res) => {
        this.roadOptions = 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",
          sorter: true,
        },
        {
          title: "监测年度",
          dataIndex: "monitorYear",
          sorter: true,
        },
        {
          title: "点位编码",
          dataIndex: "placeCode",
          sorter: true,
        },
        {
          title: "测点名称",
          dataIndex: "place",
          sorter: true,
        },
        {
          title: "测点经度",
          dataIndex: "placeLng",
          sorter: true,
        },
        {
          title: "测点纬度",
          dataIndex: "placeLat",
          sorter: true,
        },
        {
          title: "路段名称",
          dataIndex: "road",
          sorter: true,
        },
         {
          title: "路段长度（m）",
          dataIndex: "roadLength",
          sorter: true,
        },
        {
          title: "道路总宽度（m）",
          dataIndex: "roadWidth",
          sorter: true,
        },
         {
          title: "机动车车道数",
          dataIndex: "motorway",
          sorter: true,
        },
        {
          title: "车道类别",
          dataIndex: "motorwayType",
          sorter: true,
        },
        {
          title: "道路等级",
          dataIndex: "motorwayLevel",
          sorter: true,
        },
        {
          title: "测点参照物",
          dataIndex: "refObj",
          sorter: true,
        },
         {
          title: "路段覆盖人口（万人）",
          dataIndex: "people",
          sorter: true,
        },
        {
          title: "月",
          dataIndex: "monitorMonth",
          sorter: true,
        },
        {
          title: "日",
          dataIndex: "monitorDay",
          sorter: true,
        },
        {
          title: "时",
          dataIndex: "monitorHour",
          sorter: true,
        },
        {
          title: "分",
          dataIndex: "monitorMinute",
          sorter: true,
        },
       
       
        {
          title: "中小型车20min车流量",
          dataIndex: "smallTrafficFlow",
          sorter: true,
        },
        {
          title: "大型车20min车流量",
          dataIndex: "largeTrafficFlow",
          sorter: true,
        },
        {
          title: "Leq",
          dataIndex: "indexLeq",
          sorter: true,
        },
        
        {
          title: "L10",
          dataIndex: "indexL10",
          sorter: true,
        },
        {
          title: "L50",
          dataIndex: "indexL50",
          sorter: true,
        },
        {
          title: "L90",
          dataIndex: "indexL90",
          sorter: true,
        },
        {
          title: "最大值",
          dataIndex: "indexLmax",
          sorter: true,
        },
         {
          title: "最小值",
          dataIndex: "indexLmin",
          sorter: true,
        },
       {
          title: "标准差(SD)",
          dataIndex: "indexSd",
          sorter: true,
        },
        {
          title: "监测站名",
          dataIndex: "station",
          sorter: true,
        },
        {
          title: "监测仪器型号",
          dataIndex: "monitorInstrumentModel",
          sorter: true,
        },
        {
          title: "监测仪器编号",
          dataIndex: "monitorInstrumentCode",
          sorter: true,
        },
        {
          title: "监测前校准值",
          dataIndex: "beforeMonitorValue",
          sorter: true,
        },
        {
          title: "声校准器测量声压值",
          dataIndex: "soundPressureValue",
          sorter: true,
        },
        {
          title: "声校准仪器型号",
          dataIndex: "soundInstrumentModel",
          sorter: true,
        },
        {
          title: "声校准仪器编号",
          dataIndex: "soundInstrumentCode",
          sorter: true,
        },
        {
          title: "区域等级",
          dataIndex: "regionLevel",
          sorter: true,
        },
         {
          title: "备注",
          dataIndex: "remark",
          sorter: true,
        },
      ];
      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>