<template>
  <div>
    <BasicModal
      v-bind="$attrs"
      width="55rem"
      :height="heightNum"
      @register="register"
      title="执行设备及属性"
      @cancel="handleCancel"
      :showOkBtn="false"
    >
      <div>
        <BasicTable @register="registerTable" :dataSource="tableData" />
      </div>
    </BasicModal>
  </div>
</template>
<script setup lang="ts">
  import { ref, nextTick } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicTable, useTable } from '/@/components/Table';
  import { viewDeviceColumn } from './config.data';

  const heightNum = ref(800);
  const tableData: any = ref([]);
  const [registerTable] = useTable({
    title: '执行设备及属性',
    columns: viewDeviceColumn,
    showIndexColumn: false,
    clickToRowSelect: false,
    showTableSetting: false,
    bordered: true,
  });
  const [register] = useModalInner((data) => {
    console.log(data);
    const getTableData = () => {
      for (let i = 0; i < 100; i++) {
        tableData.value.push({
          tdDevice: `设备${i}`,
          attr: `CO${i}、Temp${i}`,
        });
      }
    };
    nextTick(() => {
      getTableData();
    });
  });
  const handleCancel = () => {};
</script>
<style></style>