<template>
  <div class="div-container">
    <div class="div-left">
      <a-input />
      <tree />
    </div>
    <div class="div-right">
      <div class="top">
        <span style="margin: 0 12px 0 0">关键字</span>
        <a-input
          v-model:value="value"
          placeholder="请输入设备类型名称,统计单位"
          style="margin: 0 12px 0 0"
        />
        <a-button type="primary" style="margin: 0 12px 0 0"><SearchOutlined />查询</a-button>
        <a-button type="primary" style="margin: 0 12px 0 0" @click="addInfo"
          ><PlusOutlined />添加</a-button
        >
        <a-button type="primary" danger><DeleteOutlined />删除</a-button>
      </div>
      <div class="table-body">
        <wtable :tableData="tableData" />
      </div>
      <dialogForm ref="dialog" />
    </div>
  </div>
</template>
<script setup lang="ts">
  import { SearchOutlined, PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
  import { ref, reactive, onMounted } from 'vue';
  import wtable from '../../compt/wtable.vue';
  import dialogForm from './dialogForm.vue';
  import tree from './tree.vue';

  const dialog = ref();
  const value = ref('');
  onMounted(() => {
    console.log(dialog.value); // Proxy {…}
  });
  let tableData = reactive({
    columns: [
      {
        title: '序号',
        width: '100px',
        dataIndex: 'index',
        key: 'index',
        customRender: (text) => {
          return text.index + 1;
        },
      },
      {
        title: '指标名称',
        dataIndex: 'name',
      },
      {
        title: '阈值',
        dataIndex: 'age',
      },
      {
        title: '阈值上限',
        dataIndex: 'address',
      },
      {
        title: '阈值下限',
        dataIndex: 'address',
      },
      {
        title: '报警等级',
        dataIndex: 'address',
      },
      {
        title: '操作',
        dataIndex: 'address',
      },
    ],
  });

  function addInfo() {
    dialog.value.show();
  }
</script>

<style lang="less" scoped>
  .div-container {
    display: flex;
    width: 100%;
    height: 100%;
    background: #fff;
    padding: 10px;
    margin-right: 0;

    .div-left {
      width: 200px;
      height: 100%;
      margin-right: 20px;
      background: #f8f8f8;
    }

    .div-right {
      flex: 1;

      .top {
        width: 100%;
        height: 40px;
        background: #fff;
        line-height: 40px;
      }

      .ant-input {
        width: 240px;
        height: 30px;
      }

      .table-body {
        height: 100%;
      }
    }
  }
</style>
