<template>
  <BasicTable
    class="bg-neutral-100 dark:text-gray-300 dark:bg-dark-700 p-4"
    @register="registerTable"
  >
    <template #turnOnAudio="{ record }">
      <Switch
        :checked="record.status === 1"
        :loading="record.pendingStatus"
        checkedChildren="开启"
        unCheckedChildren="关闭"
        @change="(checked:boolean)=>handleTurnVideo(checked,record)"
      />
    </template>
    <template #action="{ record }">
      <TableAction
        :actions="[
          {
            label: '播放',
            auth: 'api:yt:sceneLinkage:get',
            icon: 'ant-design:playCircle-outlined',
            onClick: handlePlay.bind(null, record),
          },
        ]"
    /></template>
  </BasicTable>
</template>

<script lang="ts" setup>
  import { configColumns, searchFormSchema } from './config';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { Switch } from 'ant-design-vue';
  import { DeviceRecord } from '/@/api/device/model/deviceModel';
  import { watch } from 'vue';

  const props = defineProps({
    fromId: {
      type: String,
      default: '',
    },
    deviceDetail: {
      type: Object as PropType<DeviceRecord>,
      required: true,
    },
  });

  watch(
    () => props,
    () => {
      console.log(props, 'props');
    }
  );

  const [registerTable] = useTable({
    // api: deviceCommandRecordGetQuery,
    columns: configColumns,
    showTableSetting: true,
    bordered: true,
    showIndexColumn: false,
    formConfig: {
      labelWidth: 120,
      schemas: searchFormSchema,
    },
    beforeFetch: (params) => {
      console.log(params);
    },
    useSearchForm: true,
  });

  const handleTurnVideo = (checked: Boolean, record: Recordable) => {
    console.log(checked, record, 'record');
  };

  const handlePlay = (record: Recordable) => {
    console.log(record);
  };
</script>