<template>
  <BasicTable
    class="bg-neutral-100 dark:text-gray-300 dark:bg-dark-700 p-4"
    @register="registerTable"
  >
    <template #toolbar>
      <Authority :value="GBT28181_DEVICE_PERMISSION_ENUM.PLAY_SYNC">
        <a-button type="primary" @click="handleSyncPlay">通道同步</a-button>
      </Authority>
    </template>
    <template #hasAudio="{ record }: { record: VideoChannelItemType }">
      <Switch
        :checked="record.status === 1"
        :loading="record.pendingStatus"
        checkedChildren="开启"
        unCheckedChildren="关闭"
        @change="(checked: boolean) => handleTurnVideo(checked, record)"
      />
    </template>
    <template #action="{ record }">
      <TableAction
        :actions="[
          {
            label: '播放',
            auth: GBT28181_DEVICE_PERMISSION_ENUM.PLAY_SYNC,
            icon: 'ant-design:play-circle-outlined',
            onClick: handlePlay.bind(null, record),
            ifShow: record?.status === 'ONLINE', //在线则显示播放按钮
          },
          {
            label: '停止',
            auth: GBT28181_DEVICE_PERMISSION_ENUM.STOP,
            icon: 'ant-design:pause-outlined',
            onClick: handleStopPlay.bind(null, record),
            ifShow: !!record?.streamId, //通道号存在则显示停止点播按钮
          },
        ]"
      />
    </template>
  </BasicTable>
  <VideoModal @register="registerModal" @reloadTable="reload()" />
</template>

<script lang="ts" setup>
  import {
    configColumns,
    searchFormSchema,
    GBT28181_DEVICE_PERMISSION_ENUM,
    VideoCancelModalParamsType,
  } from './config';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { Switch } from 'ant-design-vue';
  import { DeviceRecord } from '/@/api/device/model/deviceModel';
  import VideoModal from './videoModal.vue';
  import { useModal } from '/@/components/Modal';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { getVideoChannelList, getVideoControlStart } from '/@/api/device/videoChannel';
  import { stopOnDemandVideoApiGet, syncVideoApiGet } from '/@/api/camera/cameraManager';
  import { Authority } from '/@/components/Authority';
  import { VideoChannelItemType } from '/@/api/device/model/videoChannelModel';
  import { useGlobSetting } from '/@/hooks/setting';
  import { BooleanStringEnum } from '/@/enums/toolEnum';
  import { isBoolean } from '/@/utils/is';

  const props = defineProps<{ deviceDetail: DeviceRecord }>();

  const { createMessage } = useMessage();

  const [registerModal, { openModal }] = useModal();

  const [registerTable, { setProps, setSelectedRowKeys, reload }] = useTable({
    api: getVideoChannelList,
    columns: configColumns,
    showTableSetting: true,
    bordered: true,
    showIndexColumn: false,
    beforeFetch: (params: Recordable) => {
      return { ...params, tbDeviceId: props.deviceDetail.tbDeviceId };
    },
    formConfig: {
      labelWidth: 120,
      schemas: searchFormSchema,
    },
    useSearchForm: true,
  });

  const handleTurnVideo = async (checked: Boolean, _record: Recordable) => {
    setProps({
      loading: true,
    });
    setSelectedRowKeys([]);
    const newStatus = checked ? 1 : 0;
    try {
      if (newStatus) createMessage.success('开启成功');
      else createMessage.success('关闭成功');
    } finally {
      setProps({
        loading: false,
      });
      reload();
    }
  };

  const handlePlay = (record: VideoChannelItemType) => {
    const { channelId } = record;
    openModal(true, {
      record: {
        canControl: true,
        isGBT: true,
        channelId,
        tbDeviceId: props.deviceDetail.tbDeviceId,
        getPlayUrl: async () => {
          const { deviceId, channelId } = record;
          const result = await getVideoControlStart({ deviceId, channelId });
          const { securityPolicy } = useGlobSetting();
          return {
            type: 'flv',
            url: (
              isBoolean(securityPolicy) ? securityPolicy : securityPolicy === BooleanStringEnum.TRUE
            )
              ? result.data.https_flv
              : result.data.flv,
          };
        },
      } as VideoCancelModalParamsType,
    });
  };

  //停止点播
  const handleStopPlay = async (record: Recordable) => {
    if (!record) return;
    const { deviceId, channelId } = record;
    if (await stopOnDemandVideoApiGet(deviceId, channelId)) {
      createMessage.success('已停止');
    }
    reload();
  };

  //通道同步
  const handleSyncPlay = async () => {
    if (await syncVideoApiGet(props.deviceDetail.tbDeviceId)) {
      createMessage.success('通道已同步,请稍后刷新查看结果');
      reload();
    }
  };
</script>