import { NTabPane, NTabs } from 'naive-ui'
import { defineComponent, reactive } from 'vue'
import { useRoute } from 'vue-router'
import AttendanceRule from './component/attendance-rule'
import FinanceRule from './component/finance-rule'
import LeaveCategory from './component/leave-category'
import MessageSetting from './component/message-setting'
import OtherRule from './component/other-rule'
import PaymentSetting from './component/payment-setting'
import Memberfee from './component/member-fee'
import { getTabsCache, setTabsCaches } from '@/hooks/use-async'
export default defineComponent({
  name: 'param-settings',
  setup() {
    const state = reactive({
      tabName: 'attendance' as 'attendance' | 'finance' | 'other' | 'payment' | 'message' | 'leave'
    })
    const route = useRoute()
    getTabsCache((val: any) => {
      if (val.form.tabName) {
        state.tabName = val.form.tabName
      }
    })
    const setTabs = (val: any) => {
      setTabsCaches(val, 'tabName', route)
    }
    return () => {
      return (
        <div class="system-menu-container">
          <h2>参数设置</h2>

          <div class={['section-container']} style="padding-top: 0">
            <NTabs
              type="line"
              size="large"
              v-model:value={state.tabName}
              onUpdate:value={(val: any) => setTabs(val)}
            >
              <NTabPane
                name="attendance"
                tab="考勤规则"
                //v-auth="sysParamConfig/page1597901894499815425"
              >
                <AttendanceRule />
              </NTabPane>
              <NTabPane
                name="finance"
                tab="财务规则"
                //v-auth="sysParamConfig/page1597902460701495297"
              >
                <FinanceRule />
              </NTabPane>
              <NTabPane name="other" tab="其它参数" //v-auth="sysParamConfig/page1597902586396397570"
              >
                <OtherRule />
              </NTabPane>
              {/* <NTabPane
                name="payment"
                tab="支付参数"
                v-auth="sysPaymentConfig/page1597902712028385281"
              >
                <PaymentSetting />
              </NTabPane> */}
              <NTabPane
                name="message"
                tab="消息通知设置"
                //v-auth="sysMessageConfig/page1597902847743479810"
              >
                <MessageSetting />
              </NTabPane>
              <NTabPane
                name="leave"
                tab="请假类型"
                //v-auth="sysMessageConfig/page1597902847743479810"
              >
                <LeaveCategory />
              </NTabPane>
              <NTabPane
                name="member"
                tab="会员价格配置"
                //v-auth="vipPriceSettings/page1623234661835988994"
              >
                <Memberfee />
              </NTabPane>
            </NTabs>
          </div>
        </div>
      )
    }
  }
})
