<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>
import Moment from '../utils/moment.zh_cn';
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: "range",
      },
      {
        title: '检测值',
        dataIndex: "lur-count"
      },
      {
        title: '超标等级',
        dataIndex: "lur-level"
      },
      {
        title: '是否处理',
        dataIndex: "isok"
      },
      {
        title: '处理人',
        dataIndex: "people"
      },
       {
        title: '处理时间',
        dataIndex: "time"
      },
       {
        title: '处理概述',
        dataIndex: "msg"
      },
    ];

    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,
      },
    ];

    let data = []
    for(let i=0; i< 10; i++) {
      let start = Moment().subtract(i + 10 * Math.ceil(Math.random() * 10), 'day')
      let end = start.add(1, 'days')
      data.push({
        'range': start.format('ll') + '-' + end.format('ll'),
        'lur-count':  Math.ceil(10 *Math.random()) + Math.random(),
        'lur-level':  Math.ceil(10 *Math.random()),
        'isok': Math.random() > 0.5 ? '是':'否',
        'people': 'sf',
        'time': start.add(Math.ceil(24 *Math.random()), 'hour').format('lll'),

      })
      this.data = data
    }
  },
};
</script>

<style>
</style>