<template>
  <!-- 监测指标管理 -->
  <div class="div-container">
    <div class="top">
      <div class="top-left">
        <a-button type="primary" style="margin: 0 12px 0 0" @click="addType"
          ><PlusOutlined />添加类型</a-button
        >
        <a-button type="primary" danger><DeleteOutlined />删除类型</a-button>
      </div>
      <div class="top-right">
        <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>
    <div class="table-body">
      <a-row>
        <a-col :span="10"
          ><div class="left-table" style="padding: 15px"><wtable :tableData="tableData" /></div
        ></a-col>
        <a-col :span="14">
          <div class="right-table" style="padding: 15px"><wtable :tableData="tableData2" /></div
        ></a-col>
      </a-row>
    </div>
    <dialogForm ref="dialog" />
    <dialogFormPa ref="dialogpa" />
  </div>
</template>
<script setup lang="ts">
  import { 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 dialogFormPa from './dialogFormPa.vue';

  const dialog = ref();
  const dialogpa = ref();

  onMounted(() => {
    console.log(dialog.value); // Proxy {…}
    console.log(dialogpa.value); // Proxy {…}
  });
  let tableData = reactive({
    columns: [
      {
        title: '序号',
        width: '100px',
        dataIndex: 'index',
        key: 'index',
        customRender: (text) => {
          return text.index + 1;
        },
      },
      {
        title: '类型名称',
        dataIndex: 'age',
      },
      {
        title: '类型代码',
        dataIndex: 'address',
      },
      {
        title: '显示顺序',
        dataIndex: 'address',
      },
    ],
  });
  let tableData2 = reactive({
    columns: [
      {
        title: '序号',
        width: '100px',
        dataIndex: 'index',
        key: 'index',
        customRender: (text) => {
          return text.index + 1;
        },
      },
      {
        title: '参数代码',
        dataIndex: 'age',
      },
      {
        title: '参数名称',
        dataIndex: 'age',
      },
      {
        title: '参数简称',
        dataIndex: 'age',
      },
      {
        title: '参数单位',
        dataIndex: 'age',
      },
      {
        title: '量程',
        dataIndex: 'age',
      },
      {
        title: '是否显示',
        dataIndex: 'age',
      },
      {
        title: '显示顺序',
        dataIndex: 'age',
      },
      {
        title: '备注',
        dataIndex: 'age',
      },
    ],
  });
  function addType() {
    dialog.value.show();
  }
  function addInfo() {
    dialogpa.value.show();
  }
</script>

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

    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 62px;
      background: #fff;
      line-height: 40px;
      margin-bottom: 32px;
    }

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

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