<template>
  <div class="street-container flx-center">
    <div class="container">
      <div class="street-tp">
        <div class="recruit">
          <div
            v-for="(item, index) in streetList"
            :key="index"
            class="recruit-item"
            @click="change(item.FID)"
          >
            <img :src="baseURL + '/' + item.FSTREETPICTURE" width="318" height="130" />
            <div
              class="recruit-item-detail"
              :class="item.FID == streetActive ? 'recruit-item-detail-active' : ''"
            >
              {{ item.FNAME }}
            </div>
          </div>
        </div>
      </div>

      <div class="street-card">
        <div style="position: relative">
          <img :src="baseURL + '/' + streetDetail?.FSTREETPICTUREBIG" width="850" />
          <div class="trapezoid"></div>
          <div class="trapezoid1"></div>
        </div>
        <div class="street-card-content flx-center">
          <div class="content-top">{{ streetOverview }}</div>
          <p>{{ streetDetail?.FSTREETOVERVIEW }}</p>
          <!-- <div class="content-footer">
            查看更多<el-icon><i-ep-DArrowRight /></el-icon>
          </div> -->
        </div>
      </div>

      <!-- 街道办 -->
      <div class="sub-district-office">
        <div class="n-title">{{ streetDetail?.FNAME }}</div>
        <div class="sub-district-office-list">
          <div
            v-for="(item, index) in streetData"
            :key="index"
            class="sub-district-office-item"
            :style="{ backgroundColor: item.active ? '#177CFA' : '' }"
            @click="streeChange(index)"
          >
            {{ item.name }}
            <div v-show="item.active" class="sub-district-triangle"></div>
          </div>
        </div>
        <div class="sub-district-office-detail">{{ overviewDetail }}</div>
      </div>

      <div class="hot-position">
        <div class="n-title">热招职位</div>
        <div class="hot-position-list">
          <div
            v-for="item in streetPositionList?.Zwdata || []"
            :key="item"
            class="hot-position-item"
            @click="toPositionDetail(item.FID)"
          >
            <div class="flx-justify-between">
              <div class="item-lf nowrap-ellipsis" :title="item.JobName">
                {{ item.JobName }}
              </div>
              <div class="item-rg">{{ item.FMINIMUMWAGE }}-{{ item.FMAXIMUMSALARY }}</div>
            </div>
            <div class="hot-position-item-ft">
              <span class="nowrap-ellipsis">{{
                `${item.FWORKPLACE.split('/')[0]} ${item.FWORKPLACE.split('/')[1]} ${
                  item.FWORKPLACE.split('/')[2]
                }`
              }}</span>
              <span>{{ item.FEXPERIENCE }}</span>
              <span>{{ item.FEDUCATIONALBACKGROUND }}</span>
            </div>
          </div>
        </div>
        <span class="n-more" @click="toPersonal">查看更多</span>
      </div>

      <div class="hot-position">
        <div class="n-title">辖区企业</div>
        <div class="hot-position-list">
          <div
            v-for="item in streetPositionList?.Qydata || []"
            :key="item"
            class="hot-position-item enterprise"
          >
            <div class="enterprise-tp" @click="toPositionDetail(item.JobFID)">
              <div class="flx-justify-between">
                <div class="item-lf nowrap-ellipsis" :title="item.JobName">
                  {{ item.JobName }}
                </div>
                <div class="item-rg">{{ item.FMINIMUMWAGE }}-{{ item.FMAXIMUMSALARY }}</div>
              </div>
              <div class="hot-position-item-ft">
                <span class="nowrap-ellipsis">{{
                  `${item.FWORKPLACE.split('/')[0]} ${item.FWORKPLACE.split('/')[1]} ${
                    item.FWORKPLACE.split('/')[2]
                  }`
                }}</span>
                <span>{{ item.FEXPERIENCE }}</span>
                <span>{{ item.FEDUCATIONALBACKGROUND }}</span>
              </div>
            </div>
            <div class="enterprise-bt flx-justify-between" @click="toCompanyDetail(item.FirmFID)">
              <div class="flx-align-center">
                <img :src="baseURL + '/' + item.FLOGO" width="24" height="24" />
                <span style="margin-left: 8px">{{ item.FirmName }}</span>
              </div>
              <div>
                <span>{{ item.FINDUSTRY }}</span>
                <el-divider direction="vertical" />
                <span>{{ item.FFINANCINGS }}</span>
              </div>
            </div>
          </div>
        </div>
        <span class="n-more" @click="toSeeMoreCompany">查看更多</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { baseURL } from '@/services'
import { getStreet, getStreetPosition } from '@/services/api/streetOfficeSpecialTopic'

const route = useRoute()
const router = useRouter()
const streetList: any = ref([])
const streetPositionList: any = ref([])
const streetData = ref([
  {
    name: '街道概况',
    active: true,
    prop: 'FSTREETOVERVIEW'
  },
  {
    name: '工作时间',
    active: false,
    prop: 'FWORKINGHOURS'
  },
  {
    name: '工商信息',
    active: false,
    prop: 'FBUSINESSINFO'
  },
  {
    name: '联系电话',
    active: false,
    prop: 'FCONTACTNUMBER'
  }
])
const streetActive = ref()
const streetOverview = ref()

const streetDetail: any = ref()
const overviewDetail: any = ref()
const loading = ref(true)

watch(
  () => streetActive.value,
  (newVal: any) => {
    streetDetail.value = streetList.value.find((item: any) => item.FID == newVal)
    overviewDetail.value = streetDetail.value?.FSTREETOVERVIEW
    let result = streetDetail.value?.FNAME.match(/(.+)专题/)
    result && result.length > 1
      ? (streetOverview.value = result[1] + '概况')
      : streetDetail.value?.FNAME
    // console.log(streetDetail.value)
  }
)

const toPositionDetail = (FID: number) => {
  router.push({ path: '/recruitmentManagement/positionDetail', query: { FID } })
}

const toPersonal = () => {
  router.push({ path: '/recruitmentManagement/personal', query: { street: streetActive.value } })
}

const toCompanyDetail = (FID: number) => {
  router.push({ path: '/recruitmentManagement/companyDetail', query: { FID } })
}

const toSeeMoreCompany = () => {
  router.push({ path: '/recruitmentManagement/seeMoreCompany' })
}

const change = (FID: string) => {
  streetActive.value = FID
  initStreetPosition()
}

const streeChange = (index: number) => {
  streetData.value.map((item: any, i: number) => {
    if (index === i) {
      item.active = true
      overviewDetail.value = streetDetail.value[item.prop]
    } else item.active = false
  })
}

const initStreetPosition = async () => {
  const res: any = await getStreetPosition({ FID: streetActive.value })
  if (res.code === 200) {
    streetPositionList.value = res.data || []
  }
}

const init = async () => {
  loading.value = true
  const res: any = await getStreet()
  if (res.code === 200) {
    streetList.value = res.data
      .map((item: any) => ({ ...item, FNAME: item.FNAME + '专题' }))
      .sort((a: any, b: any) => a.FSERIALNUMBER - b.FSERIALNUMBER)
    if (!streetActive.value) {
      const { FID } = route.query
      streetActive.value = FID || streetList.value[0]?.FID || null
    }
    initStreetPosition()
    loading.value = false
  }
}

init()
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
