<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';
import { reportEditDetailPage } from '/@/api/report/reportManager';

const heightNum = ref(800);
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>
</style>