<template>
  <div v-loading="loading" class="detail-container flx-center">
    <div class="container">
      <div class="detail-filter">
        <div class="detail-header">
          <div class="position-info">
            <div>
              <div class="position-name">{{ detailData?.JobName }}</div>
              <div class="flx-align-center">
                <div class="position-label">
                  <img src="@/assets/img/icon-map.png" />
                  <span>{{
                    detailData?.FWORKPLACE?.replace(/^.*?\/(.*?)\/(.*?)\/.*$/, '$1-$2')
                  }}</span>
                </div>
                <div class="position-label">
                  <img src="@/assets/img/icon-experience-white.png" />
                  <span>{{ detailData?.FEXPERIENCE }}</span>
                </div>
                <div class="position-label">
                  <img src="@/assets/img/icon-education-white.png" />
                  <span>{{ detailData?.FEDUCATIONALBACKGROUND }}</span>
                </div>
              </div>
              <div class="flx-align-center" style="margin-top: 24px">
                <span
                  v-for="(item, index) in detailData?.FCORPORATEWELFARE.filter(
                    (e: any, i: number) => i < 5
                  )"
                  :key="index"
                  class="label"
                  >{{ item }}</span
                >

                <el-popover
                  v-if="detailData?.FCORPORATEWELFARE?.length >= 5"
                  placement="bottom-start"
                  title=""
                  :show-arrow="false"
                  :width="500"
                  :popper-style="{ background: '#022756', border: '1px solid #ffffff' }"
                >
                  <template #default>
                    <div class="flx-align-center" style="flex-wrap: wrap">
                      <span
                        v-for="(item, index) in detailData?.FCORPORATEWELFARE"
                        :key="index"
                        class="label"
                        style="color: #ffffff; margin-bottom: 8px"
                        >{{ item }}</span
                      >
                    </div>
                  </template>
                  <template #reference>
                    <span class="label popover-label" style="cursor: pointer">
                      <el-icon><i-ep-MoreFilled /></el-icon>
                    </span>
                  </template>
                </el-popover>
              </div>
            </div>
            <div class="flx-column-start-between">
              <span class="salary"
                >{{ detailData?.FMINIMUMWAGE }}-{{ detailData?.FMAXIMUMSALARY }}</span
              >
              <span class="deliver" @click="submitResume">投递简历</span>
            </div>
          </div>
          <div class="position-describe">
            <span class="desc-title">职位描述</span>
            <div class="keyWords">
              <span v-for="(item, index) in detailData?.FJOBKEYWORDS || []" :key="index">{{
                item
              }}</span>
            </div>
            <pre>{{ detailData?.FJOBDESCRIPTION_Tag }}</pre>
            <el-divider style="margin: 24px 0" />
            <div class="hr-info">
              <img :src="baseURL + '/' + detailData?.FLOGO" />
              <div class="flx-column-start-between">
                <span>{{ detailData?.FPUBLISHERS }}</span>
                <div class="flx-align-center" style="font-size: 14px">
                  {{ detailData?.FirmName }}
                  <span class="round" />
                  {{ detailData?.FJOBTITLES }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="company-info">
          <div class="desc-title">公司介绍</div>
          <div class="text-container">
            <pre>{{ detailData?.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?.gsData[item.prop] && detailData?.gsData[item.prop] !== ' '
                      ? detailData?.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?.FWORKPLACE.split('/')[detailData?.FWORKPLACE.split('/').length - 1] }}
            </div>
            <qqMap ref="mapRef" />
          </div>
        </div>
      </div>
      <info />
    </div>
  </div>
</template>

<script setup lang="ts">
import { getUserPostionDetail, sendResume } from '@/services/api/recruitmentManagement'
import { baseURL } from '@/services'
import { copyList } from './config'
import info from './components/info.vue'
import qqMap from '@/components/qqMap.vue'

const route = useRoute()

const list: any = ref([])

const loading = ref(true)
const mapRef: any = ref()
const detailData: any = ref()
const expandShow = ref(true)
const businessShow = ref(true)

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

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 submitResume = async () => {
  const res: any = await sendResume({ JobID: route.query.FID })
  if (res.code === 200) {
    console.log(res)
    ElNotification.success({
      title: '投递简历',
      message: '投递成功'
    })
  }
}

const init = async () => {
  const res: any = await getUserPostionDetail({ FID: route.query.FID })
  if (res.code === 200) {
    detailData.value = res.data
    // console.log(detailData.value?.FWORKPLACE)
    mapRef.value.initMap(detailData.value?.FWORKPLACE)

    loading.value = false
  }
}

init()
</script>

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