<template>
  <div class="street-container flx-center">
    <div class="container">
      <div class="street-card">
        <div style="position: relative">
          <img src="@/assets/img/Frame377.png" width="850" />
          <div class="street-card-triangle"></div>
        </div>
        <div class="street-card-content flx-center">
          <div class="content-top">粤海街道概况</div>
          <p>
            南山区位于广东省深圳市中西部，地域由陆地与内伶仃岛、大铲岛、孖洲岛、大矾石岛、小矾石岛组成，地理坐标北纬22°24′～22°39′、东经113°47′～114°01′。行政区域东起车公庙与福田区毗邻，西至南头安乐村、赤尾村与宝安区相连，北靠羊台山与宝安区、龙华区接壤，南临蛇口港、大铲岛和内伶仃岛，东南隔深圳湾与香港元朗比邻，西南隔珠江口与澳门、珠海相望。地形为南北长、东西窄。辖区土地面积185.30平方千米，海岸线长43.7千米。东南距香港元朗5.5千米(直线距离，下同)，东北距惠州61.6千米，西北距东莞61.3千米，西距广州102.4千米，西南距澳门59.1千米。
          </p>
          <div class="content-footer">
            查看更多<el-icon><i-ep-DArrowRight /></el-icon>
          </div>
        </div>
      </div>

      <!-- 街道办 -->
      <div class="sub-district-office">
        <div class="n-title">粤海街道办</div>
        <div class="sub-district-office-list">
          <div
            v-for="(item, index) in streetList"
            :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">
          {{ streetDetail }}
        </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">
const streetList = [
  {
    name: '街道概况',
    active: true,
    detail:
      '南山区位于广东省深圳市中西部，地域由陆地与内伶仃岛、大铲岛、孖洲岛、大矾石岛、小矾石岛组成，地理坐标北纬22°24′～22°39′、东经113°47′～114°01′。行政区域东起车公庙与福田区毗邻，西至南头安乐村、赤尾村与宝安区相连，北靠羊台山与宝安区、龙华区接壤，南临蛇口港、大铲岛和内伶仃岛，东南隔深圳湾与香港元朗比邻，西南隔珠江口与澳门、珠海相望。地形为南北长、东西窄。辖区土地面积185.30平方千米，海岸线长43.7千米。东南距香港元朗5.5千米(直线距离，下同)，'
  },
  {
    name: '工作时间',
    active: false,
    detail: '996'
  },
  {
    name: '工商信息',
    active: false,
    detail: '东南距香港元朗5.5千米(直线距离，下同)'
  },
  {
    name: '联系电话',
    active: false,
    detail: '1008600010101'
  }
]

const streetDetail = ref(streetList[0].detail)

const streeChange = (index: number) => {
  streetList.map((item: any, i: number) => {
    if (index === i) item.active = true
    else item.active = false
  })
  streetDetail.value = streetList[index].detail
}
</script>

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