<template>
<div class="main">
  <CellGroup inset>
    <Cell>
      <Checkbox @click="toggle" v-model="receiveCourseNotification" shape="square">接收排课开课通知</Checkbox>
    </Cell>
  </CellGroup>
</div>
</template>

<script setup lang="ts">
import {Cell, CellGroup, Checkbox} from 'vant';
import useUser from "~/store/user";
import {HtyUserSetting, SwitchOptions, UserSettingKeys} from "~/types";
import {computed, ref} from 'vue'


const { store, update } = useUser();

const setting = computed(() => store.current.settings?.vals.find(x => x.app_id === store.current.app_id && x.role_key === store.currentRole && x.k === UserSettingKeys.ReceiveCourseNotification))


const receiveCourseNotification = ref(setting.value?.v?.toUpperCase() === SwitchOptions.ON)


const toggle = async () => {
    let value = receiveCourseNotification.value ? SwitchOptions.ON : SwitchOptions.OFF;
    let user = store.userMeta, userApp = store.userAppMeta;
    let userSettings = user.settings || {vals: []}
    let rcnSetting: HtyUserSetting = userSettings.vals.find(x => x.k === UserSettingKeys.ReceiveCourseNotification && x.role_key === store.currentRole && x.app_id === userApp.app_id);
    if (!rcnSetting) {
      rcnSetting = {
        k: UserSettingKeys.ReceiveCourseNotification, app_id: userApp.app_id, role_key: store.currentRole
      }
      userSettings.vals.push(rcnSetting);
    }
    rcnSetting.v = value;

    await update({...user, settings: userSettings}, userApp)
}




</script>

<style scoped lang="less">
.main {
  background: rgba(85, 85, 85, 0.1);
  padding: 20px 0;
}
</style>
