<template>
  <div>
    <BasicModal
      style="min-height: auto"
      v-bind="$attrs"
      width="55rem"
      @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';
  import { reportEditDetailPage } from '/@/api/report/reportManager';

  const tableData: any = ref([]);
  const [registerTable] = useTable({
    columns: viewDeviceColumn,
    showIndexColumn: false,
    clickToRowSelect: false,
    showTableSetting: false,
    bordered: true,
  });
  const [register] = useModalInner((data) => {
    const getTableData = async () => {
      const res: any = await reportEditDetailPage(data.record.id);
      const resMap = res.data.executeAttributes.map((d) => {
        return {
          device: d.name,
          attribute: d.attributes.join(','),
        };
      });
      tableData.value = resMap;
    };
    nextTick(() => {
      getTableData();
    });
  });
  const handleCancel = () => {};
</script>
<style lang="less" scoped>
  :deep(.ant-table-body) {
    height: 470px !important;
  }
</style>