<template>
  <div class="enterprise-container">
    <div class="container">
      <div class="enterprise-header">
        <div class="enterprise-header-lf">
          <div style="position: relative">
            <img src="@/assets/img/Banner.png" width="869" height="376" />
            <span class="img-ct">深圳南山区就业服务平台</span>
          </div>
          <div class="manage-list">
            <div
              v-for="(item, index) in manageList"
              :key="index"
              class="manage-item"
              :class="manageActive === item.name ? 'active' : ''"
              @click="manageChange(item)"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
        <div class="enterprise-header-rg">
          <div class="company-tp">
            <img
              :src="baseURL + '/' + userInfoStore.companyInfo?.FLOGO"
              width="90"
              height="90"
              style="border-radius: 12px"
            />
            <div class="flx-direction-column">
              <span class="company-title">{{ userInfoStore.companyInfo?.FNAME }}</span>
              <div>
                <span class="info-label">{{ userInfoStore.companyInfo?.FINDUSTRY }}</span>
                <span class="info-label">{{ userInfoStore.companyInfo?.FFINANCING }}</span>
                <span class="info-label">{{ userInfoStore.companyInfo?.FSCALE }}</span>
              </div>
              <div class="company-addr">
                <el-icon style="margin-right: 3px"><i-ep-Location /></el-icon>
                {{ userInfoStore.companyInfo?.ADDRESSS }}
              </div>
            </div>
          </div>
          <div style="width: 391px">
            <p class="company-detail">{{ userInfoStore.companyInfo?.FCOMPANYPROFILE }}</p>
          </div>
          <div class="flx-align-center">
            <span class="btn" @click="toEditCompany">编辑公司信息</span>
            <span class="btn" @click="toAddAdministrator">添加管理员</span>
            <span class="btn" @click="toAddAdministrator">退出登录</span>
          </div>
        </div>
      </div>
      <talent v-if="manageActive === '人才管理'" ref="talentRef" />
      <position v-else-if="manageActive === '职位管理'" ref="positionRef" />
      <resume v-else-if="manageActive === '简历搜索'" />
      <resume v-else :filterShow="false" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { baseURL } from '@/services'
import { useUserInfoStore } from '@/stores/modules/userInfo'
import { useGlobalStore } from '@/stores/modules/global'
import talent from './components/talent.vue'
import position from './components/position.vue'
import resume from './components/resume.vue'

const router = useRouter()
const userInfoStore = useUserInfoStore()
const globalStore = useGlobalStore()
const manageActive = ref('职位管理')
const talentRef = ref()
const positionRef = ref()

const manageList = [
  { name: '人才管理', type: 'A' },
  { name: '职位管理', type: 'B' },
  { name: '简历搜索', type: 'C' },
  { name: '简历推荐', type: 'D' }
]

watch(
  () => userInfoStore,
  () => {
    if (JSON.stringify(userInfoStore.companyInfo) === '{}') {
      router.push('/recruitmentManagement')
    }
  },
  { immediate: true, deep: true }
)

const toEditCompany = () => {
  router.push('/recruitmentManagement/editCompany')
}
const toAddAdministrator = () => {
  userInfoStore.$reset()
  globalStore.$reset()
  router.push('/home')
}

const manageChange = (row: any) => {
  manageActive.value = row.name
}

watch(
  () => manageActive.value,
  (newVal: string) => {
    setTimeout(() => {
      switch (newVal) {
        case '人才管理':
          break
        case '职位管理':
          positionRef.value?.initCompanyPositionList()
          break
        case '简历搜索':
          break

        default:
          break
      }
    }, 100)
  },
  { immediate: true }
)
</script>

<style lang="scss" scoped>
@import url(./style/enterprise.scss);
</style>
