<template>
  <div class="detail-container flx-center">
    <div class="container">
      <div class="detail-filter">
        <div class="detail-header">
          <div class="company-info">
            <div style="display: flex">
              <img
                :src="baseURL + '/' + detailData?.QyData?.FLogoUrl"
                width="96"
                height="96"
                style="border-radius: 8px; margin-right: 26px"
              />
              <div class="flx-column-start-between" style="justify-content: space-evenly">
                <div class="position-name">{{ detailData?.QyData?.FName }}</div>
                <div class="flx-align-center">
                  <span>{{ detailData?.QyData?.FFinancingSName }}</span>
                  <el-divider direction="vertical" style="border-left: 1px solid #274e80" />
                  <span>{{ detailData?.QyData?.FScaleSName }}</span>
                  <el-divider direction="vertical" style="border-left: 1px solid #274e80" />
                  <span>{{ detailData?.QyData?.FIndustryName }}</span>
                </div>
              </div>
            </div>
            <div style="margin-top: 17px">
              <span style="font-size: 60px; margin: 4px 6px 0 0">{{ detailData?.Coutn }}</span>
              <span>在招职位</span>
            </div>
          </div>
          <div class="company-switch">
            <span
              :style="{ color: activeName ? '#177cfa' : '' }"
              style="margin-right: 64px"
              @click="tabsChange(true)"
              >公司简介</span
            >
            <span :style="{ color: activeName ? '' : '#177cfa' }" @click="tabsChange(false)"
              >招聘职位({{ detailData?.Coutn }})</span
            >
          </div>
        </div>
        <div v-if="activeName">
          <div class="hot-position">
            <div class="flx-justify-between" style="margin-bottom: 24px">
              <span class="desc-title" style="margin-bottom: 0">热招职位</span>
              <div class="flx-align-center" style="cursor: pointer" @click="tabsChange(false)">
                <span style="font-size: 18px; color: #177cfa"
                  >查看全部{{ detailData?.Coutn }}个职位</span
                >
                <el-icon color="#177CFA"><i-ep-CaretRight /></el-icon>
              </div>
            </div>
            <div class="position-list">
              <div
                v-for="item in detailData?.ZwData || []"
                :key="item.JobFID"
                class="position-item"
                @click="toPositionDetail(item.JobFID)"
              >
                <div class="flx-justify-between" style="margin-bottom: 15px">
                  <span class="nowrap-ellipsis" style="display: inline-block; width: 135px">{{
                    item.JobName
                  }}</span>
                  <span style="font-size: 18px; color: #ff3333"
                    >{{ item.FMINIMUMWAGE }}-{{ item.FMAXIMUMSALARY }}</span
                  >
                </div>
                <div class="flx-align-center">
                  <span
                    class="position-label nowrap-ellipsis"
                    style="width: 150px"
                    :title="`${item.FWORKPLACE.split('/')[1]} ${item.FWORKPLACE.split('/')[2]} ${
                      item.FWORKPLACE.split('/')[3]
                    }`"
                    >{{
                      `${item.FWORKPLACE.split('/')[1]} ${item.FWORKPLACE.split('/')[2]} ${
                        item.FWORKPLACE.split('/')[3]
                      }`
                    }}</span
                  >
                  <span class="position-label">{{ item.FEXPERIENCE }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="company-info">
            <span class="desc-title">公司福利</span>
            <div style="display: flex; flex-wrap: wrap; margin-bottom: 28px">
              <span
                v-for="(item, index) in detailData?.QyData?.FCorporateWelfare?.split(',')"
                :key="index"
                class="position-label"
                style="margin-bottom: 8px"
                >{{ item }}</span
              >
            </div>
            <div class="desc-title">公司介绍</div>

            <div class="text-container">
              <pre>{{ detailData?.QyData.FCompanyProfile }}</pre>
              <div class="expand-btn" @click="expandMore">
                <span class="expand-title">查看更多</span
                ><el-icon>
                  <i-ep-CaretBottom v-if="expandShow" />
                  <i-ep-CaretTop v-else />
                </el-icon>
              </div>
            </div>
            <div class="desc-title">工商信息</div>
            <div class="business-info">
              <el-descriptions title="" direction="vertical" :column="4">
                <el-descriptions-item
                  v-for="(item, index) in list"
                  :key="index"
                  :label="item.label"
                  :span="item.span"
                  :width="item.width"
                  ><span v-show="item.label">
                    {{
                      detailData?.QyData.gsData[item.prop] &&
                      detailData?.QyData.gsData[item.prop] !== ' '
                        ? detailData?.QyData.gsData[item.prop]
                        : '-'
                    }}
                  </span></el-descriptions-item
                >
              </el-descriptions>
              <div class="business-expand" @click="businessShow = !businessShow">
                <span class="business-more">{{ businessShow ? '查看更多' : '收起' }}</span
                ><el-icon>
                  <i-ep-CaretBottom v-if="businessShow" />
                  <i-ep-CaretTop v-else />
                </el-icon>
              </div>
            </div>
            <div class="desc-title">工作地址</div>
            <div class="map-info">
              <div class="map-addr">
                <el-icon color="#177CFA" style="margin-right: 4px"><i-ep-LocationFilled /></el-icon>
                {{
                  detailData?.QyData?.FAddresss?.split('/')[
                    detailData?.QyData?.FAddresss?.split('/').length - 1
                  ]
                }}
              </div>
              <qqMap ref="mapRef" />
            </div>
          </div>
        </div>
        <div v-else>
          <div class="position-type">
            <div style="display: flex; margin-bottom: 16px">
              <span class="desc-title" style="margin-bottom: 0; width: 72px">职位类型</span>
              <div class="type-list">
                <span
                  class="type-item"
                  :style="{ color: queryList.Filter.FJOBTYPE === '' ? '#177cfa' : '' }"
                  @click="JobTypeChange('')"
                  >全部{{
                    `(${detailData?.CountData?.reduce((a: any, b: any) => a + b.COUNT, 0)})`
                  }}</span
                >
                <span
                  v-for="item in detailData?.CountData || []"
                  :key="item.FJOBTYPE"
                  class="type-item"
                  :style="{ color: queryList.Filter.FJOBTYPE === item.FJOBTYPE ? '#177cfa' : '' }"
                  @click="JobTypeChange(item.FJOBTYPE)"
                  >{{ `${item.FDATAVALUE}(${item.COUNT})` }}</span
                >
              </div>
            </div>
            <div class="select-list">
              <customSelect
                v-for="(item, index) in filterList"
                :key="index"
                v-model="queryList.Filter[item.prop]"
                :name="item.name"
                :list="item.list"
                @change="selectChange($event, index)"
              />
            </div>
          </div>
          <morePosition
            v-if="positionList.length"
            ref="morePositionRef"
            v-loading="loading"
            :positionList="positionList"
            :queryList="queryList"
            @current-change="currentChange"
          />
          <el-empty v-else description="暂无数据" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getInformation } from '@/services/api/common'
import { getCompanyDetail, getCompanyPosition } from '@/services/api/recruitmentManagement'
import { baseURL } from '@/services'
import { copyList } from './config'
import customSelect from '@/components/customSelect.vue'
import morePosition from './components/morePosition.vue'
import qqMap from '@/components/qqMap.vue'

const route = useRoute()
const router = useRouter()
const morePositionRef = ref()
const mapRef = ref()
const loading = ref(true)
const expandShow = ref(false)
const businessShow = ref(true)
const activeName = ref(true)
const filterList = ref([
  {
    name: '工作经验',
    prop: 'FEXPERIENCE',
    list: []
  },
  {
    name: '薪资待遇',
    list: [],
    prop: 'SalaryRange'
  },
  {
    name: '学历要求',
    list: [],
    prop: 'FEDUCATIONALBACKGROUND'
  }
])
const queryList = ref({
  pageIndex: 1,
  pageSize: 6,
  FID: Number(route.query.FID) || 0, //企业id
  Filter: {
    //传id
    FJOBTYPE: '', //岗位类型
    FEXPERIENCE: '', //经验
    SalaryRange: '', //薪资范围
    FEDUCATIONALBACKGROUND: '' //学历
  } as any,
  total: 0
})

const positionList = ref([] as any)
const list = ref([] as any)

const detailData: any = ref()
const informationData = ref()

watch(
  () => businessShow.value,
  (newVal: any) => {
    if (newVal) {
      list.value = copyList.filter((item: any, i: number) => i < 6)
    } else list.value = copyList
  },
  { immediate: true }
)

const selectChange = (e: any, index: number) => {
  initCompanyPosition()
}

const JobTypeChange = (Type: string) => {
  queryList.value.Filter.FJOBTYPE = Type
  initCompanyPosition()
}

const tabsChange = (type: boolean) => {
  if (type) {
    activeName.value = true
    setTimeout(() => {
      mapRef.value.initMap(detailData.value?.QyData.FAddresss)
    }, 300)
  } else {
    initCompanyPosition()
    activeName.value = false
  }
}
const toPositionDetail = (FID: number) => {
  router.push({ path: '/recruitmentManagement/positionDetail', query: { FID } })
}

const expandMore = () => {
  const textContainer: any = document.querySelector('.text-container')
  const content: any = document.querySelector('.expand-title')
  const expandBtn: any = document.querySelector('.expand-btn')
  textContainer.classList.toggle('expanded')
  if (textContainer.classList.contains('expanded')) {
    content.textContent = '收起'
    textContainer.style.maxHeight = textContainer.scrollHeight + 'px' // 动态计算文本高度并设置max-height
    expandBtn.style.bottom = '-40px'
    expandShow.value = false
  } else {
    content.textContent = '查看更多'
    textContainer.style.maxHeight = 'calc(1 * 1.3em)' // 恢复初始值
    expandBtn.style.bottom = '-4px'
    expandShow.value = true
  }
}

const currentChange = (pageIndex: number) => {
  queryList.value.pageIndex = pageIndex
  initCompanyPosition()
}

const initCompanyDetail = async () => {
  const res: any = await getCompanyDetail({
    FID: Number(route.query?.FID)
  })
  if (res.code === 200) {
    detailData.value = res.data
    mapRef.value?.initMap(res.data?.QyData.FAddresss)
  }
}

const initCompanyPosition = async () => {
  loading.value = true
  const res: any = await getCompanyPosition(queryList.value)
  if (res.code === 200) {
    positionList.value = res.data || []
    queryList.value.total = res.total
    loading.value = false
    // morePositionRef.value?.init()
  }
}

const init = async () => {
  const res: any = await getInformation({
    AuxiliaryS: ['Experience', 'SalaryRange', 'Degree2']
  })
  if (res.code === 200) {
    informationData.value = res.data || {}
    const item = { FDATAVALUE: '不限', FDESCRIPTION: '不限', FENTRYID: '' }
    res.data.Experience.push(item)
    res.data.SalaryRange.push(item)
    res.data.Degree2.push(item)
    filterList.value[0].list = res.data.Experience
    filterList.value[1].list = res.data.SalaryRange
    filterList.value[2].list = res.data.Degree2
    initCompanyDetail()
    // morePositionRef.value?.init()
  }
}

onMounted(() => {
  init()
})
</script>

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