<template>
  <div style="height: calc(100vh - 110px)">
    <a-layout :theme="'light'" style="height: calc(100vh - 110px)">
      <a-layout-sider :theme="'light'" :width="300" style="padding: 20px">
        <div style="text-align: center; font-size: 16px">选择站点</div>
        <a-divider />
        <a-tree
          v-model="checkedKeys"
          checkable
          :selected-keys="selectedKeys"
          :auto-expand-parent="true"
          :tree-data="treeData"
          @select="onSelect"
          showLine
        >
          <a-icon slot="switcherIcon" type="down" />
        </a-tree>
      </a-layout-sider>
      <a-layout style="padding: 20px">
        <a-layout-header style="background: #fff; padding: 15px 0 5px 15px">
         
          <span>
            <a-range-picker
              separator="至"
              :placeholder="['开始日期', '结束日期']"
              :defaultValue="datetimeRange"
              @change="dateRangeChange"
            ></a-range-picker>
            <a-button style="margin-left: 15px" type="primary" icon="search"
              >查询</a-button
            >
            <a-button style="margin-left: 15px" type="primary" icon="download"
              >导出Excel</a-button
            >
          </span>
        </a-layout-header>
        <a-layout-content style="padding: 20px 0 20px 0">
          <a-table
            :columns="columns"
            :data-source="data"
            bordered
            size="middle"
          />
        </a-layout-content>
      </a-layout>
    </a-layout>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checkedKeys: ['all'],
      autoExpandParent: true,
      selectedKeys: [],
      treeData: [],
      datetimeRange: [],
      columns: [],
      data: [],
    };
  },
  computed: {
    sensorList() {
      return this.$store.getters.sensorList;
    },
    deviceList() {
      return this.$store.getters.deviceList;
    },
  },
  methods: {
    async fetch() {},
    onSelect() {},
    dateRangeChange() {},
  },
  mounted() {
    const columns = [
      {
        title: "站点名",
        dataIndex: "name",
      },
      {
        title: "日期",
        dataIndex: "time",
      },
    ];
    this.sensorList.forEach((sensor) => {
      columns.push({
        title: sensor.param_name,
        children: [
          {
            title: sensor.uint || "-",
            dataIndex: sensor.param_key,
          },
        ],
      });
    });
    columns.push({
        title:'水质质量等级',
        dataIndex:'level',
        
    })
    this.columns = columns;

    const deviceTree = [];
    this.deviceList.forEach((device) => {
      deviceTree.push({
        title: device.device_name,
        key: device._id,
      });
    });
    this.treeData = [
      {
        title: "设备",
        key: "all",
        children: deviceTree,
      },
    ];
  },
};
</script>

<style>
</style>