<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"
          >{{ t('deviceManagement.device.channelSyncText') }}
        </a-button>
      </Authority>
    </template>
    <template #hasAudio="{ record }: { record: VideoChannelItemType }">
      <Switch
        :checked="record.status === 1"
        :loading="record.pendingStatus"
        :checkedChildren="t('common.onText')"
        :unCheckedChildren="t('common.offText')"
        @change="(checked: boolean) => handleTurnVideo(checked, record)"
      />
    </template>
    <template #action="{ record }">
      <TableAction
        :actions="[
          {
            label: t('business.playText'),
            auth: GBT28181_DEVICE_PERMISSION_ENUM.PLAY_SYNC,
            icon: 'ant-design:play-circle-outlined',
            onClick: handlePlay.bind(null, record),
            ifShow: deviceDetail.isEdge === 0 && record?.status === 'ONLINE', //在线则显示播放按钮，边端同步到云端的视频设备，不能进行点播。
          },
          {
            label: t('business.stopText'),
            auth: GBT28181_DEVICE_PERMISSION_ENUM.STOP,
            icon: 'ant-design:pause-outlined',
            onClick: handleStopPlay.bind(null, record),
            ifShow: deviceDetail.isEdge === 0 && !!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 { useI18n } from '/@/hooks/web/useI18n';
  const { t } = useI18n();
  import { useGlobSetting } from '/@/hooks/setting';

  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,
      layout: 'inline',
      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 { streamMediaContentSecurityProtocol } = useGlobSetting();
          return {
            type: 'flv',
            url: !!streamMediaContentSecurityProtocol ? 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(t('common.stopped'));
    }
    reload();
  };

  //通道同步
  const handleSyncPlay = async () => {
    if (await syncVideoApiGet(props.deviceDetail.tbDeviceId)) {
      createMessage.success(t('common.channelSynchronizedMessageText'));
      reload();
    }
  };
</script>