import { defineComponent, onMounted, reactive, ref, nextTick } from 'vue'
import { Image, showDialog, 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, useRouter } from 'vue-router'

import { setLogout } from '@/state'
import request from '@/helpers/request'

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

    const onNext = async (name: string) => {
      if (name === 'payment') {
        await getRegisterStatus()
      }

      nextTick(() => {
        state.tabValue = name
      })
    }

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

        // 判断是否报名注册过
        state.register = data.register
        if (data.register) {
          nextTick(() => {
            state.tabValue = 'payment'
          })
        }

        // 	购买状态, 判断是否已经购买完了
        if (data.purchase) {
          state.purchase = data.purchase
          nextTick(() => {
            state.tabValue = 'order'
          })
        }

        // INITIATION_SURVEY: '启蒙调查',
        // PRE_REGISTER: '预报名',
        // REGISTER: '乐团报名',
        // DOING: '乐团交付',
        // DONE: '已交付'
        // CLOSE: '已交付'
        // 判断乐团报名，只有 乐团报名 乐团交付 已交付才可以报名
        const oStatus = data.status // 乐团状态
        if (oStatus !== 'REGISTER' && oStatus !== 'DOING' && oStatus !== 'DONE') {
          showDialog({
            title: '提示',
            message: '乐团建设中，请稍等'
          }).then(() => {
            setLogout()

            const query = {
              returnUrl: route.path,
              ...route.query
            } as any
            router.replace({
              path: '/loginMusic',
              query: query
            })
          })
          return
        }

        if (data.registerOrchestra >= 1) {
          showDialog({
            title: '提示',
            message: '您已在其它乐团'
          }).then(() => {
            setLogout()
            const query = {
              returnUrl: route.path,
              ...route.query
            } as any
            router.replace({
              path: '/loginMusic',
              query: query
            })
          })
          return
        }
      } catch {
        //
      }
    }

    const getRegisterInfo = async (val: string) => {
      // 重新查询状态
      if (val === 'apply') {
        try {
          const { data } = await request.get(
            '/api-student/orchestraRegister/registerStatus/' + route.query.id
          )
          state.registerInfo = data || {}
        } 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}
            onChange={(val: any) => getRegisterInfo(val)}
          >
            <Tab title="报名信息" name="apply" disabled={state.purchase}></Tab>
            <Tab title="缴费信息" name="payment" disabled={state.purchase || !state.register}></Tab>
            <Tab title="我的订单" name="order" disabled={!state.register}></Tab>
          </Tabs>
        </Sticky>

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