import {NTabPane, NTabs} from 'naive-ui'
import {defineComponent, h, nextTick, onMounted, reactive, ref} from 'vue'
import {useRoute} from 'vue-router'
import {getTabsCache, setTabsCaches} from '@/hooks/use-async'
import {appKey, clientType, messageSenderMode} from '@/utils/constant'
import {sysApplicationPage} from '@views/menu-manage/api'
import MessageTemplateList from "@views/message/message-template/message-template-list";
import {getMapValueByKey} from "@/utils/objectUtil";
import MusicSheetKt from "@views/music-library/project-music-sheet/module/kt/music-sheet-kt";
import SmsConfig from "@views/message/message-config/sms/sms-config";

export default defineComponent({
  name: 'message-config-index',
  setup() {
    const state = reactive({
      tabName: 'SMS',
    })
    const tabsInstRef = ref()
    getTabsCache((val: any) => {
      if (val.form.tabName) {
        state.tabName = val.form.tabName
        nextTick(() => tabsInstRef.value?.syncBarPosition())
      }
    })
    const route = useRoute()
    const setTabs = (val: any) => {
      setTabsCaches(val, 'tabName', route)
    }

    onMounted(async () => {
      nextTick(() => tabsInstRef.value?.syncBarPosition())
    })

    return () => {
      return (
          <div class="system-menu-container">
            <div class={['section-container']} style="padding-top: 0">
              <NTabs
                  ref={tabsInstRef}
                  type="line"
                  size="large"
                  v-model:value={state.tabName}
                  onUpdate:value={(val: any) => setTabs(val)}
              >
                {Object.keys(messageSenderMode).map((app: any, index: number) => (
                    <NTabPane name={app} tab={getMapValueByKey(app, new Map(Object.entries(messageSenderMode)))}>
                      {/*{app == 'SMS' && (<SmsConfig/>)}*/}
                      <SmsConfig/>
                    </NTabPane>
                ))}
              </NTabs>
            </div>
          </div>
      )
    }
  }
})