import { defineComponent, onMounted, reactive, ref } from 'vue'
import { Image, Sticky, Tab, Tabs } from 'vant'
import styles from './index.module.less'
import { useRect } from '@vant/use'
import Apply from './component/apply'
import Payment from './component/payment'
import Order from './component/order'
import { useRoute } from 'vue-router'
import request from '../request-music'
// import banner from './images/banner.png'

export default defineComponent({
  name: 'pre-apply',
  setup() {
    const route = useRoute()
    const bannerRef = ref()
    const state = reactive({
      tabValue: 'apply',
      heightV: 235,
      registerInfo: {} as any,
      purchase: false // 购买状态
    })

    const onNext = (name: string) => {
      state.tabValue = name
    }

    const getRegisterStatus = async () => {
      try {
        const { data } = await request.get(
          '/api-student/orchestraRegister/registerStatus/' + route.query.id
        )
        state.registerInfo = data || {}

        if (state.registerInfo.register) {
          state.tabValue = 'payment'
        }

        if (state.registerInfo.purchase) {
          state.tabValue = 'order'
          state.purchase = state.registerInfo.purchase
        }
      } catch {
        //
      }
    }

    // 先请求接口
    getRegisterStatus()

    onMounted(() => {
      const { height } = useRect(bannerRef.value)
      state.heightV = height
    })
    return () => (
      <div class={styles.preApply}>
        <div class={styles.banner} ref={bannerRef}>
          <span>
            {state.registerInfo.orchestraName} <br />
            乐团报名
          </span>
        </div>
        <Sticky position="top">
          <Tabs lineWidth={20} lineHeight={4} v-model:active={state.tabValue}>
            <Tab title="报名信息" name="apply" disabled={state.purchase}></Tab>
            <Tab title="缴费信息" name="payment" disabled={state.purchase}></Tab>
            <Tab title="我的订单" name="order"></Tab>
          </Tabs>
        </Sticky>

        {state.tabValue === 'apply' && (
          <Apply onNext={onNext} schoolSystem={state.registerInfo.schoolSystem} />
        )}
        {state.tabValue === 'payment' && <Payment onNext={onNext} />}
        {state.tabValue === 'order' && <Order onNext={onNext} />}
      </div>
    )
  }
})