<template>
  <div id="app">
    <Tree :data="data" :default-props="{ children: 'children', label: 'name' }" />
    <Table :data="tableData" :columns="columns" />
    <Select :options="[{id: 1, name: 'name'}]"/>
  </div>
</template>

<script>
import Tree from '../package/tree/src/Tree.vue'
import Table from '../package/table/src/Table.vue'
import Select from '../package/select/src/Select.vue'
export default {
  name: 'App',
  components: {
    Tree,
    Table,
    Select
  },
  data() {
    return {
      data: [
        {
          name: '区域类',
          id: '1',
          children: [
            { name: '水系', id: '11' },
            { name: '工地', id: '12' }
          ]
        },
        { name: '设备类', id: '2', children: [{ name: '视频监控', id: '21' }] },
        {
          name: '设施类',
          id: '3',
          children: [
            { name: '能源设施', id: '21' },
            { name: '水务设施', id: '22' },
            { name: '交通设施', id: '23' },
            { name: '通信设施', id: '24' },
            {
              name: '防灾减灾',
              id: '25',
              children: [{ name: '微消站', id: '251' }]
            }
          ]
        },
        { name: '人员类', id: '4', children: [{ name: '应急队伍', id: '42' }] }
      ],
      columns: [
        { label: '事件来源', prop: 'address' },
        { label: '事件名称', prop: 'name' },
        { label: '事件时间', prop: 'date' },
        { label: '状态', prop: 'id', format: 'stateList' }
      ],
      tableData: [
        {
          id: 1,
          date: '2016-05-02',
          name: '王小虎',
          address: '1518 弄'
        },
        {
          id: 2,
          date: '2016-05-04',
          name: '王小虎',
          address: '1517 弄'
        },
        {
          id: 3,
          date: '2016-05-01',
          name: '王小虎',
          address: '1519 弄'
        },
        {
          id: 4,
          date: '2016-05-03',
          name: '王小虎',
          address: '1516 弄'
        }
      ]
    }
  },
  methods: {

  }
}
</script>
<style lang="scss">
  body {
    height: 99vh;
    overflow: hidden;
  }
</style>
<style lang="scss" scoped>
  #app {
    color: #666;
    line-height: 35px;
    height: 100vh;
    width: 100%;
  }
  .tableBox {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
</style>
<style lang="scss">
  #app {
    background-color: black;
  }
</style>
