import { NTabPane, NTabs } from 'naive-ui'
import { defineComponent, nextTick, onMounted, reactive, ref } from 'vue'
import { useRoute } from 'vue-router'
import { getTabsCache, setTabsCaches } from '@/hooks/use-async'
import SmsConfig from '@views/message/message-config/sms/sms-config'
import PushConfig from '@views/message/message-config/push/push-config'
import WechatConfig from '@views/message/message-config/wechat/wechat-config'
import EmailConfig from '@views/message/message-config/email/email-config'

export default defineComponent({
  name: 'message-config-index',
  setup() {
    const state = reactive({
      tabName: 'SMS' as 'SMS' | 'PUSH' | 'EMAIL' | 'WECHAT'
    })
    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)}
            >
              <NTabPane name="SMS" tab="短信" v-auth="smsConfig/page1790929887618469889">
                <SmsConfig />
              </NTabPane>
              <NTabPane name="PUSH" tab="推送" v-auth="appSendConfig/page1790933531566870529">
                <PushConfig />
              </NTabPane>
              <NTabPane name="WECHAT" tab="公众号" v-auth="wxConfigInfo/page1790934372273164290">
                <WechatConfig />
              </NTabPane>
              <NTabPane name="EMAIL" tab="邮件" v-auth="emailConfig/page1790935157727891457">
                <EmailConfig />
              </NTabPane>
            </NTabs>
          </div>
        </div>
      )
    }
  }
})
