<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?.FJOBKEYWORDS"
                  :key="index"
                  class="label"
                  >{{ item }}</span
                >
              </div>
            </div>
            <div class="flx-column-start-between">
              <span class="salary"
                >{{ detailData?.FMINIMUMWAGE }}-{{ detailData?.FMAXIMUMSALARY }}</span
              >
              <span class="deliver">投递简历</span>
            </div>
          </div>
          <div class="position-describe">
            <span class="desc-title">职位描述</span>
            <div class="keyWords">
              <span v-for="(item, index) in detailData?.FCORPORATEWELFARE || []" :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
                    style="
                      display: inline-block;
                      width: 4px;
                      height: 4px;
                      background: #cccccc;
                      border-radius: 50%;
                      margin: 0 4px;
                    "
                  />
                  {{ 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"
                >{{
                  detailData?.gsData[item.prop] ? detailData?.gsData[item.prop] : '-'
                }}</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 } from '@/services/api/recruitmentManagement'
import { useGlobalStore } from '@/stores/modules/global'
import { baseURL } from '@/services'
import info from './components/info.vue'
import qqMap from '@/components/qqMap.vue'

const globalStore = useGlobalStore()
const route = useRoute()

const list: any = ref([])

const copyList = [
  { width: '50%', prop: 'FCompanyName', label: '公司名称', span: 2 },
  { width: '25%', prop: 'FLegalRepresentative', label: '法定代表人', span: 1 },
  { width: '25%', prop: 'FDateEstablishment', label: '成立日期', span: 1 },
  { width: '50%', prop: 'FRegisteredAddress', label: '注册地址', span: 2 },
  { width: '25%', prop: 'FOperatingState', label: '经营状态', span: 1 },
  { width: '25%', prop: 'FRegisteredCapital', label: '注册资本', span: 1 },
  { width: '50%', prop: 'FTypeEnterprise', label: '企业类型', span: 2 },
  { width: '25%', prop: 'FOperatingTerm', label: '营业期限', span: 1 },
  { width: '25%', prop: 'FAffiliatingArea', label: '所属地区', span: 1 },
  {
    width: '50%',
    prop: 'FCreditCode',
    label: '统一社会信用代码',
    span: 2
  },
  { width: '25%', prop: 'FDateApproval', label: '核准日期', span: 1 },
  { width: '25%', prop: '', label: '', span: 1 },
  { width: '100%', prop: 'FPreviouslyName', label: '曾用名', span: 4 },
  { width: '100%', prop: 'FRegistrationAuthority', label: '登记机关', span: 4 },
  { width: '100%', prop: 'FFIndustryGS', label: '所属行业', span: 4 },
  { width: '100%', prop: 'FBusinessScope', label: '经营范围', span: 4 }
]

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 = '-30%'
    expandShow.value = false
  } else {
    content.textContent = '查看更多'
    textContainer.style.maxHeight = 'calc(3 * 1.3em)' // 恢复初始值
    expandBtn.style.bottom = '-2px'
    expandShow.value = true
  }
}

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

init()
</script>

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