<template>
  <div v-if="show">
    <transition mode="out-in">
      <tab-router v-if="showRouter"></tab-router>
    </transition>

    <router-view v-slot="{ Component }">
      <transition mode="out-in">
        <component :is="Component"></component>
      </transition>
    </router-view>
  </div>
</template>

<script>
import { addRoutes, route } from 'vue-helper'
import { axios } from 'axios'
import { ref, watch } from 'vue'
export default {
  components: {
    TabRouter: VueConfig.vueLoader('@/components/tab-router.vue')
  },
  props: {
    path: {
      type: String,
      default: '/recipe-unpay',
    }
  },
  setup(props) {
    const show = ref(false)
    const showRouter = ref(true)

    function isShowRouter(v) {
      if (['recipe-qr-pay'].indexOf(v) !== -1) {
        showRouter.value = false
      } else {
        showRouter.value = true
      }
    }

    const isMedical = WxConfig.recipe.isMedical

    watch(() => route.name, (v) => isShowRouter(v))

    axios.verify().then(resp => {
      if (resp.openid === 'oqhp3533pQJ7zN-obB6d04zB1KCILhn_PY_p6auI-_E') {
        return window.location.href = 'pay-info-md-dev.html'
      }

      const routes = [
        {
          meta: '未缴费',
          name: 'recipe-unpay',
          path: '/recipe-unpay',
          component: '@/views/recipe/recipe-unpay.vue'
        },
        {
          meta: "已缴费",
          path: '/recipe-payed',
          name: 'recipe-payed',
          component: '@/views/recipe/recipe-payed.vue'
        }
      ]



      // if (isMedical) { // 医保退费
      //   routes.push({
      //     meta: "医保订单",
      //     path: '/recipe-refund',
      //     name: 'recipe-refund',
      //     component: '@/views/wx-medical/recipe-refund.vue'
      //   })
      // }

      routes.push({
        name: 'recipe-qr-pay',
        path: '/recipe-qr-pay',
        component: '@/views/recipe/recipe-qr-pay.vue'
      })

      addRoutes(props.path, routes)

      isShowRouter(route.name)
      show.value = true
    })

    return {
      show,
      showRouter
    }
  }
}

</script>
