<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 == streetAcive ? '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 6" :key="item" class="hot-position-item">
            <div class="flx-justify-between">
              <div class="item-lf nowrap-ellipsis" title="软件测试 (学信网可查，深圳 福田区 新洲)">
                软件测试 (学信网可查，深圳 福田区 新洲)
              </div>
              <div class="item-rg">11-15K</div>
            </div>
            <div class="hot-position-item-ft">
              <span>深圳 福田区 新洲</span>
              <span>经验不限 </span>
              <span>学历不限</span>
            </div>
          </div>
        </div>
        <span class="n-more">查看更多</span>
      </div>

      <div class="hot-position">
        <div class="n-title">辖区企业</div>
        <div class="hot-position-list">
          <div v-for="item in 6" :key="item" class="hot-position-item enterprise">
            <div class="enterprise-tp">
              <div class="flx-justify-between">
                <div
                  class="item-lf nowrap-ellipsis"
                  title="软件测试 (学信网可查，深圳 福田区 新洲)"
                >
                  软件测试 (学信网可查，深圳 福田区 新洲)
                </div>
                <div class="item-rg">11-15K</div>
              </div>
              <div class="hot-position-item-ft">
                <span>深圳 福田区 新洲</span>
                <span>经验不限 </span>
                <span>学历不限</span>
              </div>
            </div>
            <div class="enterprise-bt flx-justify-between">
              <div class="flx-align-center">
                <img src="@/assets/img/icon-gonggao.png" width="24px" height="24px" />
                <span style="margin-left: 8px">好乐租</span>
              </div>
              <div><span>软件开发</span> <span class="line" /> <span>未融资</span></div>
            </div>
          </div>
        </div>
        <span class="n-more">查看更多</span>
      </div>
    </div>
  </div>
</template>

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

const route = useRoute()
const streetList: 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 streetAcive = ref()
const streetOverview = ref()

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

watch(
  () => streetAcive.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 change = (FID: string) => {
  streetAcive.value = FID
}

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 init = async () => {
  const res: any = await getStreet()
  if (res.code === 200) {
    streetList.value = res.data.sort((a: any, b: any) => a.FSERIALNUMBER - b.FSERIALNUMBER)
    const { FID } = route.query
    if (!FID) streetAcive.value = streetList.value[0].FID
    else streetAcive.value = FID
  }
}

init()
</script>

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