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

  const tableData = ref([]);

  const [registerTable] = useTable({
    columns: viewDeviceColumn,
    showIndexColumn: false,
    clickToRowSelect: false,
    showTableSetting: false,
    bordered: true,
  });

  const [register] = useModalInner((data) => {
    const getTableData = async () => {
      const res = (await reportEditDetailPage(data.record?.id)) as any;
      const resMap = res?.data?.executeAttributes?.map((item) => ({
        device: item.name,
        attribute: item.attributes.join(','),
      }));
      tableData.value = resMap;
    };
    nextTick(() => {
      getTableData();
    });
  });
</script>
<style lang="less" scoped>
  :deep(.ant-table-body) {
    height: 470px !important;
  }
</style>