const { createApp } = Vue;

// 自定义主题
const customTheme = {
    "--hsl-primary": "212, 100%, 38%",
    "--color-primary": "hsla(var(--hsl-primary), 1)",
    "--hsl-on-primary": "0, 0%, 100%",
    "--color-on-primary": "hsla(var(--hsl-on-primary), 1)",
    "--hsl-primary-container": "225, 100%, 92%",
    "--color-primary-container": "hsla(var(--hsl-primary-container), 1)",
    "--hsl-on-primary-container": "216, 100%, 13%",
    "--color-on-primary-container": "hsla(var(--hsl-on-primary-container), 1)",
    "--hsl-info": "224, 13%, 39%",
    "--color-info": "hsla(var(--hsl-info), 1)",
    "--hsl-on-info": "0, 0%, 100%",
    "--color-on-info": "hsla(var(--hsl-on-info), 1)",
    "--hsl-info-container": "226, 71%, 92%",
    "--color-info-container": "hsla(var(--hsl-info-container), 1)",
    "--hsl-on-info-container": "223, 38%, 13%",
    "--color-on-info-container": "hsla(var(--hsl-on-info-container), 1)",
    "--hsl-warning": "296, 15%, 39%",
    "--color-warning": "hsla(var(--hsl-warning), 1)",
    "--hsl-on-warning": "0, 0%, 100%",
    "--color-on-warning": "hsla(var(--hsl-on-warning), 1)",
    "--hsl-warning-container": "298, 86%, 92%",
    "--color-warning-container": "hsla(var(--hsl-warning-container), 1)",
    "--hsl-on-warning-container": "291, 41%, 13%",
    "--color-on-warning-container": "hsla(var(--hsl-on-warning-container), 1)",
    "--hsl-danger": "0, 75%, 42%",
    "--color-danger": "hsla(var(--hsl-danger), 1)",
    "--hsl-on-danger": "0, 0%, 100%",
    "--color-on-danger": "hsla(var(--hsl-on-danger), 1)",
    "--hsl-danger-container": "6, 100%, 92%",
    "--color-danger-container": "hsla(var(--hsl-danger-container), 1)",
    "--hsl-on-danger-container": "358, 100%, 13%",
    "--color-on-danger-container": "hsla(var(--hsl-on-danger-container), 1)",
    "--hsl-body": "285, 100%, 99%",
    "--color-body": "hsla(var(--hsl-body), 1)",
    "--hsl-text": "240, 7%, 11%",
    "--color-text": "hsla(var(--hsl-text), 1)",
    "--hsl-on-surface-variant": "224, 7%, 29%",
    "--color-on-surface-variant": "hsla(var(--hsl-on-surface-variant), 1)",
    "--hsl-outline": "228, 4%, 48%",
    "--color-outline": "hsla(var(--hsl-outline), 1)",
    "--hsl-inverse-surface": "240, 3%, 19%",
    "--color-inverse-surface": "hsla(var(--hsl-inverse-surface), 1)"


};


// 创建 Vue 应用
const app = createApp({
  data() {
    return {
      currentTheme: Varlet.Themes.md3Light, // 默认浅色主题
      customTheme: customTheme,                  // 深色主题
      floating: false,
      title: "FuxBms",
      UserInfo: null,
      loading: true,
      loading_d: "加载中",
      page: "www",
      userlogo: null,
      cart: null,
      cart_fid: null,
      cart_sid: null,
      purchases: null,
      wm: null,
    };
  },
  mounted() {
    Varlet.StyleProvider(Varlet.Themes.md3Light); // 设置初始主题
    this.getinfo();
  },  
  watch: {
    // 监听 cart_fid 的变化，自动选择第一个子分类
    cart_fid(newVal) {
      if (newVal && this.cart[newVal] && Object.keys(this.cart[newVal]).length > 0) {
        this.cart_sid = Object.keys(this.cart[newVal])[0]; // 设置为第一个子分类
      }
    }
    },
  methods: {
  checkin () {
          this.loading = true;
        this.loading_d = "签到中";
      axios.get('/Main/CheckIn/')
        .then(response => {
        this.loading = false;
          if (response.data.code === 200) {
          this.getinfo();
          Varlet.Snackbar.success(response.data.msg);
          
          } else {
          
          Varlet.Snackbar.warning(response.data.msg);
          
          }
        })
  
  },
  getpurchases() {
        this.loading = true;
        this.loading_d = "拉取数据中";
  axios.get('/Main/GetProducts/')
        .then(response => {
        this.loading = false;
        if (response.data.code === 200) {
            this.purchases = response.data.msg;
        } else {
            Varlet.Snackbar.warning(response.data.msg);
        }
        })
  
  },
  buygoods(product_id) {
  
        this.loading = true;
        this.loading_d = "提交订单中";
     axios.post('/Main/BuyGoods/', { product_id })
       .then(response => {
        this.loading = false;
         const { code, msg } = response.data;
         if (code === 200) {
           Varlet.Snackbar.success(msg);
           this.getpurchases();
           this.page = "purchases";
         } else {
           Varlet.Snackbar.warning(msg);
         }
       })
       .catch(error => {
         Varlet.Snackbar.error('请求失败');
       });
   },
  login() {
  window.location.href = '/Main/Login';
  },
    viewcart() {
        this.loading = true;
        this.loading_d = "获取产品中";
      axios.get('/Main/GetGoods/')
        .then(response => {
        this.loading = false;
        this.cart = response.data;
        this.cart_fid = Object.keys(this.cart)[0];
        })
    },
    getinfo() {
        this.loading = true;
        this.loading_d = "获取用户信息";
      axios.get('/Main/GetInfo/')
        .then(response => {
        this.loading = false;
          if (response.data.code === 200) {
            this.UserInfo = response.data.msg;
          this.page = "home";
            if (response.data.msg.qq != null) {
                this.userlogo = "https://q1.qlogo.cn/g?b=qq&nk="+response.data.msg.qq+"&s=640";
            }
          } else {
          Varlet.Snackbar.warning("请登录");
          this.page = "www";
          }
        })
    },

    switchToM3LightTheme() {
      this.currentTheme = Varlet.Themes.md3Light;
      Varlet.StyleProvider(this.currentTheme);
    },
    switchToM3DarkTheme() {
      this.currentTheme = Varlet.Themes.md3Dark;
      Varlet.StyleProvider(this.currentTheme);
    },
    switchToM2LightTheme() {
      this.currentTheme = null;
      Varlet.StyleProvider(this.currentTheme);
    },
    switchToM2DarkTheme() {
      this.currentTheme = Varlet.Themes.dark;
      Varlet.StyleProvider(this.currentTheme);
    },
    switchToCustomTheme() {
      this.currentTheme = this.customTheme;
      Varlet.StyleProvider(this.currentTheme);
    },
    toggleTheme() {
      this.currentTheme = this.currentTheme === Varlet.Themes.md3Light ? this.darkTheme : Varlet.Themes.md3Light;
      Varlet.StyleProvider(this.currentTheme);
    },
    op() {
      alert("6");
    }
  }
});

app.use(Varlet);
app.mount('#app');