<template>
  <!-- <ContentWrap v-if="id">
    <CardTitle fontSize="16" :title="jobFairInfo.title?.replace(/<\/?p[^>]*>/gi, '')" />
  </ContentWrap> -->

  <ContentWrap v-if="!id || (jobFairInfo && Object.keys(jobFairInfo).length > 0)">
    <el-tabs v-model="activeName" @tab-change="handleTabChange">
      <el-tab-pane label="招聘会信息" name="infoSettings">
        <InfoSettings :info="jobFairInfo" :formType="id ? 'update' : 'create'" @close="handleClose" />
      </el-tab-pane>
      <el-tab-pane v-if="id" label="类别设置" name="categorySettings">
        <Category :info="jobFairInfo" @close="handleClose" />
      </el-tab-pane>
      <el-tab-pane v-if="id" label="白名单" name="whiteList">
        <WhiteList ref="whiteListRef" :info="jobFairInfo" />
      </el-tab-pane>
      <el-tab-pane v-if="id" label="门票设置" name="ticketSettings">
        <TicketSettings :info="jobFairInfo" @close="handleClose" @refresh="getJobFairDetail" />
      </el-tab-pane>
    </el-tabs>
  </ContentWrap>
</template>

<script setup lang="ts">
/** 招聘会 详情 */
defineOptions({ name: 'JobFairDetails' })
import { JobFairManageApi } from '@/api/menduner/system/jobFair/manage'
import TicketSettings from './components/TicketSettings.vue'
import WhiteList from './components/WhiteList.vue'
import InfoSettings from './components/InfoSettings.vue'
import Category from './components/Category.vue'
import { useTagsViewStore } from '@/store/modules/tagsView'

const activeName = ref('infoSettings') // 当前激活的tab

/* 查询招聘会详情 */
const jobFairInfo = ref({})
const getJobFairDetail = async (id) => {
  try {
    const data = await JobFairManageApi.getJobFair(id)
    jobFairInfo.value = data
  } catch {}
}

const whiteListRef = ref(null)
const handleTabChange = () => {
  if (activeName.value === 'whiteList') {
    whiteListRef.value?.getList()
  } else getJobFairDetail(route.params.id)
}

const { push, currentRoute } = useRouter() // 路由
const { delView } = useTagsViewStore() // 视图操作

/** 关闭按钮 */
const handleClose = () => {
  delView(unref(currentRoute))
  push({ path: '/job-fair/manage' })
}

/** 初始化 */
const route = useRoute()
const { id } = route.params
onMounted(() => {
  if (id) getJobFairDetail(id)
})
</script>