<template>
  <BasicTable @register="registerTable">
    <template #deviceState="{ record }">
      <Tag
        :color="
          record.deviceState == DeviceState.INACTIVE
            ? 'warning'
            : record.deviceState == DeviceState.ONLINE
            ? 'success'
            : 'error'
        "
        class="ml-2"
      >
        {{
          record.deviceState == DeviceState.INACTIVE
            ? '待激活'
            : record.deviceState == DeviceState.ONLINE
            ? '在线'
            : '离线'
        }}
      </Tag>
    </template>
  </BasicTable>
</template>
<script lang="ts">
  import { defineComponent, onMounted } from 'vue';
  import { Tag } from 'ant-design-vue';
  import { DeviceState } from '/@/api/device/model/deviceModel';
  import { BasicTable, useTable } from '/@/components/Table';
  import { childDeviceColumns, childDeviceSchemas } from '../../config/detail.config';
  import { getChildDevicePage } from '/@/api/device/deviceManager.ts';
  export default defineComponent({
    name: 'DeviceManagement',
    components: {
      BasicTable,
      Tag,
    },
    props: {
      fromId: {
        type: String,
        required: true,
      },
    },
    setup(props) {
      console.log(123);
      onMounted(() => {
        console.log(props.fromId);
      });
      const [registerTable] = useTable({
        api: getChildDevicePage,
        columns: childDeviceColumns,
        formConfig: {
          labelWidth: 120,
          schemas: childDeviceSchemas,
        },
        beforeFetch: (data) => {
          console.log(props.fromId);
          Reflect.set(data, 'fromId', props.fromId);
        },
        useSearchForm: true,
        showTableSetting: true,
        bordered: true,
        showIndexColumn: false,
      });

      return {
        registerTable,
        DeviceState,
      };
    },
  });
</script>