<template>
  <div class="bg-neutral-100 dark:text-gray-300 dark:bg-dark-700">
    <BasicTable @register="registerTable">
      <template #tbDeviceName="{ record }">
        <div style="color: #619eff" class="cursor-pointer" @click="handleGetTbDeviceId(record)">
          {{ record.alias || record.tbDeviceName }}
        </div>
      </template>
      <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>
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { Tag } from 'ant-design-vue';
  import { DeviceState } from '/@/api/device/model/deviceModel';
  import { getTbDeviceId } from '/@/api/device/deviceConfigApi';
  import { BasicTable, useTable } from '/@/components/Table';
  import { childDeviceColumns, childDeviceSchemas } from '../../config/detail.config';
  import { getChildDevicePage } from '/@/api/device/deviceManager';
  export default defineComponent({
    name: 'DeviceManagement',
    components: {
      BasicTable,
      Tag,
    },
    props: {
      fromId: {
        type: String,
        required: true,
      },
    },
    emits: ['openTbDeviceDetail'],
    setup(props, { emit }) {
      const [registerTable] = useTable({
        api: getChildDevicePage,
        columns: childDeviceColumns,
        formConfig: {
          labelWidth: 100,
          schemas: childDeviceSchemas,
        },
        beforeFetch: (data) => {
          Reflect.set(data, 'fromId', props.fromId);
        },
        useSearchForm: true,
        showTableSetting: true,
        bordered: true,
        showIndexColumn: false,
      });

      const handleGetTbDeviceId = async (record) => {
        try {
          const res = await getTbDeviceId(record.tbDeviceId);
          if (res && res.id) {
            emit('openTbDeviceDetail', { id: res.id, tbDeviceId: res.tbDeviceId });
          }
        } catch (error) {}
      };
      return {
        registerTable,
        DeviceState,
        handleGetTbDeviceId,
      };
    },
  });
</script>