<template>
  <div class="div-container">
    <div class="top">
      <div style="display: flex; justify-content: space-between">
        <div class="gdiv"
          ><span style="margin: 0 10px 0 10px; width: 90px; display: inline-block; text-align: end"
            >关键字</span
          >
          <a-input v-model:value="value" style="margin: 0 12px 0 0"
        /></div>
        <div class="gdiv">
          <span style="margin: 0 10px 0 10px">事件类型</span>
          <a-input v-model:value="value" style="margin: 0 12px 0 0"
        /></div>
        <div class="gdiv">
          <span style="margin: 0 10px 0 10px">事件级别</span>
          <a-input v-model:value="value" style="margin: 0 12px 0 0" />
        </div>
        <div class="gdiv">
          <span style="margin: 0 10px 0 10px">事件来源</span>
          <a-input v-model:value="value" style="margin: 0 12px 0 0" />
        </div>
        <div class="gdiv">
          <span style="margin: 0 10px 0 10px">派发日期</span>
          <a-input v-model:value="value" style="margin: 0 12px 0 0" />
        </div>
      </div>
      <div style="display: flex; justify-content: space-between">
        <div class="gdiv">
          <span style="margin: 0 10px 0 10px; width: 90px; display: inline-block; text-align: end"
            >事件处置状态</span
          >
          <a-input v-model:value="value" style="margin: 0 12px 0 0" />
        </div>
        <div class="gdiv">
          <span style="margin: 0 10px 0 10px">所属领域</span>
          <a-input v-model:value="value" style="margin: 0 12px 0 0" />
        </div>
        <div class="gdiv">
          <span style="margin: 0 10px 0 10px">所属行业</span>
          <a-input v-model:value="value" style="margin: 0 12px 0 0" />
        </div>
        <div class="gdiv">
          <span style="margin: 0 10px 0 10px">监测站点</span>
          <a-input v-model:value="value" style="margin: 0 12px 0 0" />
        </div>
        <div class="gdiv">
          <a-button type="primary" style="margin: 0 12px 0 0"><SearchOutlined />查询</a-button>
        </div>
      </div>
    </div>
    <div class="table-body">
      <BasicTable @register="registerTable">
        <template #action="{ record }">
          <TableAction
            :actions="[
              {
                label: '解除归档',
                onClick: handleEdit.bind(null, record),
              },
            ]"
          />
        </template>
      </BasicTable>
    </div>
    <dialogFormHandle ref="handleDialog" />
  </div>
</template>
<script setup lang="ts">
  import { SearchOutlined } from '@ant-design/icons-vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { tableColums } from './tableColumns';
  import { ref, onMounted } from 'vue';
  import dialogFormHandle from './dialogFormHandle.vue';
  interface DataItem {
    key: string;
    name: string;
    age: number;
    address: string;
    ellipsis: boolean;
  }
  const data: DataItem[] = [];
  for (let i = 0; i < 46; i++) {
    data.push({
      key: i.toString(),
      name: `Edward King ${i}`,
      age: 32,
      address: `London, Park ${i}`,
      ellipsis: true,
    });
  }
  // let scrollY = ref();
  // onMounted(() => {
  //   scrollY.value = document.querySelector('.div-container')?.clientHeight ;
  //   console.log(scrollY, 123);
  // });
  const [registerTable] = useTable({
    title: '',
    columns: tableColums,
    useSearchForm: false,
    showTableSetting: false,
    bordered: false,
    showIndexColumn: true,
    canResize: false,
    striped: true,
    pagination: true,
    dataSource: data,
    scroll: { y: 700 },
    actionColumn: {
      width: 100,
      dataIndex: 'action',
      title: '操作',
      slots: { customRender: 'action' },
      fixed: 'right',
    },
    rowSelection: {
      type: 'checkbox',
    },
  });

  /**
   * 点击编辑
   */
  function handleEdit() {
    handleDialog.value.show();
  }

  const dialog = ref();
  const handleDialog = ref();
  const value = ref('');
  onMounted(() => {
    console.log(dialog.value); // Proxy {…}
    console.log(handleDialog.value); // Proxy {…}
  });
</script>

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

    .top {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 100%;
      height: 90px;
      background: #fff;
      line-height: 40px;
    }

    .gdiv {
      width: 350px;
    }

    .ant-input {
      width: 200px;
      height: 32px;
    }

    .table-body {
      background: #fff;
      padding: 6px;
    }
  }
</style>
