import { defineStore } from 'pinia';
import { ref, computed } from 'vue';
import { addDemo, listDemo } from '@/api/video';
import Hls from 'hls.js';

export const useVideosStore = defineStore('videos', () => {
  // --- State (状态) ---
  // 相当于 Vuex 中的 state，用 ref 或 reactive 定义
  const hisUrl = ref();

  // --- Getters (计算属性) ---
  // 相当于 Vuex 中的 getters，直接用 computed 定义

  // --- Actions (动作) ---
  // 相当于 Vuex 中的 actions/mutations，直接写同步或异步函数
  async function getVideos(deviceId?: string | number) {
    try {
      const response = await listDemo(deviceId);
      console.log('获取视频:', response);
      hisUrl.value = response.data;
    } catch (error) {
      console.error('获取视频失败', error);
    }
  }

  async function stopVideos(query: any) {
    try {
      const response = await addDemo(query);
      console.log('停止视频:', response);
    } catch (error) {
      console.error('停止视频失败', error);
    }
  }

  // ⚠️ 核心点：必须把需要暴露出去的变量和方法 return 出去！
  return {
    hisUrl,
    getVideos,
    stopVideos
  };
});