<template>
  <div class="white">

    <template v-if="isArrow">
      <v-tabs v-model="tab" @change="handleChange">
        <v-tab v-for="item in items" :key="item.label">{{ item.label }}</v-tab>
      </v-tabs>
      <!-- <div class="pa-3">
        <component :is="items[tab].name"></component>
      </div> -->

      <v-tabs-items v-model="tab" class="white">
        <v-tab-item
          v-for="item in items"
          :key="item.title"
        >
          <component :is="item.name"></component>
        </v-tab-item>
      </v-tabs-items>
    </template>
    <template v-else>
      <m-empty></m-empty>
    </template>
  </div>
</template>

<script>
import MEmpty from '@/components/Common/empty'
import { loadDynamicComponents } from '@/utils'
import { checkQuestionnaireRole } from '@/api/report'
const vueComponent = require.context('./components', false, /\.vue$/)
const autoComponent = loadDynamicComponents(vueComponent)
export default {
  name: 'investigation-report-details',
  components: { ...autoComponent, MEmpty },
  data () {
    return {
      isArrow: false,
      tab: null,
      items: [
        {
          label: '样本分布', // tabs 分页名称
          name: 'sampleStatistics' // 组件名称
        },
        {
          label: '集团薪酬职位分位值', // tabs 分页名称
          name: 'groupCompensation' // 组件名称
        },
        {
          label: '酒店薪酬职位分位值', // tabs 分页名称
          name: 'hotelSalary' // 组件名称
        },
        {
          label: '文件导出', // tabs 分页名称
          name: 'fileExport' // 组件名称
        }
      ]
    }
  },
  async created () {
    try {
      const code = localStorage.getItem('verifyUUID')
      await checkQuestionnaireRole({ code })
      this.isArrow = true
      this.$route.meta.title = '2024中国酒店业高管薪酬与福利调研报告'
      const savedTab = new URLSearchParams(window.location.search).get('tab')
      if (!savedTab) {
        this.tab = 0
        return
      }
      this.tab = this.items.findIndex(e => e.name === savedTab)
    } catch (error) {

    }
  },
  methods: {
    handleChange (val) {
      this.$router.push(`${this.$route.path}?tab=${this.items[val].name}`)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
