<template>
  <div>
    <div class="box">
      <div class=" mt30"></div>
      <div class="flexBody">
        <el-tabs v-model="activeName" tab-position="left" @tab-change="changeTab" @tab-click="clickTab">
          <el-tab-pane v-for="(tab,index) in list" :label="tab.name" :name="index">
            <template #label>
                <span class="custom-tabs-label">
                  <span class="tabFont">{{ tab.name }}</span>
                </span>
            </template>
          </el-tab-pane>
        </el-tabs>
        <div class="infoPart">
          <h3 class="leftboderTT">{{ nowTab.name }}</h3>
          <div class="content" v-if="activeName==0">
            <div>
              The Taihu International Expo Center Block B covers a total area of 30,000m²and an interior area of 20,000m². It is equipped with top lighting, stage, sound and a full set of broadcasting equipment, and can accommodate 5,000 spectators. It is the premier multi-purpose cultural and sports venue in China, also a landmark for Wuxi.
              <br/>
              Location: No. 88, Qingshu Road, Economic and Development District, Wuxi<br/>
              Business District: Within 10 kilometers, there are nearly 10 large commercial complexes, including the Mixc and Coastal City etc.<br/>
              <img src="@/assets/zhinan/1.png"/>
              <img  src="@/assets/zhinan/2.png"/>
            </div>
            <h4 class="leftboderTT">Flow Chart In The Venue<span>(Funtional Area and Flow Chart)</span></h4>
            <img src="@/assets/zhinan/3.png"/>
            <div>Sports teams enter the venue through security check at the main gate on the first floor, take escalators to the second floor, and arrive the competition area. Technical officers take vehicles arranged by the organizing committee directly from the northern ramp of the venue to the entrance of Venue B5 on the second floor platform and enter the venue.</div>
            <div>The second floor is divided into five areas according to different functions. All personnel may arrive at different areas according to their access permissions. Red is the VIP area, blue is the office area, yellow is the spectator area, purple is the competition area and pink is the public area.</div>
          </div>

          <div class="content" v-if="activeName==1">
            <div>注册报到中心位于酒店大堂，服务时间为7月19-22日10:00-22:00， 同时也作为咨询台。</div>
            <div>相关紧急通知、餐食安排和交通服务等信息将公布在公告栏，如有疑 问或需服务，可前往注册报到中心进行咨询。</div>
          </div>
          <div class="content" v-if="activeName==2">
            <h4>一、证件使用与保管</h4>
            <p>证件要妥善保管，不得故意损毁，证件仅限本人使用，严禁转让， 严禁超范围使用，严禁私自增减，涂改证件内容。
            </p>
            <p>出入有关活动和比赛场馆时，应将证件佩戴于胸前明显位置。</p>
            <p>持证人员应自觉接受现场安保人员的检查和管理。</p>
            <h4>二、证件丢失申领临时证件</h4>
            <p>遗落、丢失证件的人员急需进入场馆的，可以向竞赛部申请，前 往场馆运营中心领取临时证件。</p>
            <h4>三、代表队人员证件类别及通行权限</h4>
            <p>本次赛事将使用以下颜色和数字表示相关注册分区:</p>
            <img  src="@/assets/zhinan/6.jpg"/>
          </div>
          <div class="content" v-if="activeName==3">
            <el-empty description="暂未上线"></el-empty>
          </div>
          <div class="content" v-if="activeName==4">
            <h4>一、抵离安排</h4>
            <p>所有技术官员、运动队接送站由组委会统一安排车辆接送，抵达站 应选择无锡苏南硕放机场、上海浦东国际机场和上海虹桥国际机场。
            </p>
            <p>(1)技术官员和运动队报到</p>
            <p>报到时间:7月19-22日，10:00-22:00</p>
            <p>报到(酒店)地点:无锡太湖华邑酒店</p>
            <p>(2)报到材料</p>
            <p>技术代表、技术官员及相关人员等报到时提交往返差旅交通票据，
              以便于相关费用报销。所有技术官员报到时，须向组委会提供:</p>
            <p>1. 纸质版登机牌(往返机票)</p>
            <p>2. 往返机票的行程单(有金额)或付款凭证(有金额)</p>
            <p>3. 办理签证的票据(有金额)</p>
            <h4>二、 餐食服务</h4>
            <p>用餐时间与形式:</p>
            <img src="@/assets/zhinan/14.png"/>
            <h5>提示:具体时间可能有所调整，调整过的时间表将于注册报到中心公告栏另行通知。</h5>
            <img src="@/assets/zhinan/13.png"/>

            <h4>三、通行车辆安排</h4>
            <p>酒店、赛场间通行车辆按《发车时刻表》发车，用于酒店、赛场 之间往返，接送技术官员和运动队参赛及训练，《发车时刻表》详见 注册报到中心公告栏。</p>
            <p>接送站用车:主要用于参赛人员报到及离会。</p>
            <h4 style="text-indent: 2em">友情提示:</h4>
            <p>1. 认真阅读《发车时刻表》，提前规划出行时间。</p>
            <p>2. 时刻关注车辆行驶途中自身安全，坐好抓稳。</p>
            <p>3. 各领队、教练有义务在每次乘车时清点人数，确保同进同出。</p>
            <p>4. 下车时务必带齐自身携带物品，谨防遗失。</p>
            <p>5. 如错失赛会车辆或中途临时需要出行，请及时与咨询台联系。</p>
          </div>
          <div class="content" v-if="activeName==5">
            <h4>一、服务时间安排</h4>
            <p>2023年7月20日-2023年7月23日</p>
            <h4>二、医疗点位设置</h4>
            <p>馆内设置医疗室一个，竞赛区医疗点一个，救护车两辆。</p>
            <h4>三、现场医疗力量安排</h4>
            <p>4馆设立医务室一间，配备一名外科医生，一名护士，一名英语 志愿者。</p>
            <p>
              B6馆竞赛区设立医疗点一个，配备一名骨科医生，一名急救医生， 一名护士，两名急救人员，一名英语志愿者，一名工作人员。两个医疗 点均配备齐全的现场医疗急救所需药品。
            </p>
            <p>120急救车一辆及急救转运车一辆停在G14通道口等候，车上均配 备除颤仪、氧气钢瓶等急救器材。</p>
          </div>
          <div class="content" v-if="activeName==6"><el-empty description="暂未上线"></el-empty></div>
          <div class="content" v-if="activeName==7"><el-empty description="暂未上线"></el-empty></div>
          <div class="content" v-if="activeName==8">
            <label>点击下载：</label>
            <a target="_blank" class="text-primary" href="@/assets/zhinan/参赛指南.pdf">
              <el-icon style="position: relative;top: 2px"><download/></el-icon>
              WDSF亚洲体育舞蹈节参赛指南0714
            </a>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { getNewsListById, getRuleKind } from '@/apiPc/webSite'
import { useRouter } from 'vue-router'
const router = useRouter()
const activeName = ref(0)
const showVipFee = ref(false)
const list = ref([
  {name:'Introduction of the Competition Venue'},
  {name:' Registration Center   '},
  {name:'License Management '},
  {name:'地图指引 '},
  {name:'Service for Technical Officers and Sports Teams '},
  {name:'Medical Services '},
  {name:'周边交通图 '},
  {name:'VISA 签证 '},
  {name:'指南手册下载'}
])
const newsList = ref([])
const nowTab = ref({
  tag: ''
})
const total = ref(0)
const query = ref({
  pageSize: 10,
  pageNum: 1
})
onMounted(() => {
  getKindList()
})
const getKindList = () => {
  changeTab(0)
}
const changeTab = (n) => {
  nowTab.value = list.value[n]
  if (nowTab.value.tag == 'fee') {
    showVipFee.value = true
  } else {
    showVipFee.value = false
    query.value.sortId = list.value[n].sortId
    query.value.code = list.value[n].code
    getList()
  }
}
const clickTab = () => {

}
const getList = () => {
  getNewsListById(query.value).then(res => {
    newsList.value = res.rows
    total.value = res.total
  })
}
const goDetail = (n) => {
  if (n.isOut == '1') {
    window.open(n.jumpUrl)
  } else {
    router.push({
      path: `/news/detail/${n.noteId}`
    })
  }
}
</script>
<style lang="scss" scoped>
.content{margin: 20px 0 0;text-indent: 2em;
line-height: 1.8;
  font-weight: 400;
  font-size: 16px;
  color: #29343C;
  img{max-width: 100%;margin: 20px auto;display: block;}
  h4{text-indent: 0}
}
h4.leftboderTT{text-indent: 0;
  font-size: 20px;color: var(--el-color-primary);
  span{color: #929AA0;font-size: 16px;margin-left: 5px;}
}
.custom-tabs-label {
  display: flex;
  align-items: center;
}

:deep(.el-tabs--left .el-tabs__item.is-left) {
  margin: 0 0 20px;
}

:deep(.el-tabs--left .el-tabs__active-bar.is-left) {
  left: 0 !important;
  right: auto !important;
}

:deep(.el-tabs--left .el-tabs__nav-wrap.is-left::after) {
  display: none;
}

:deep(.el-tabs__item.is-active) {
  font-size: 15px;background: #fff;
}

:deep(.el-tabs--left .el-tabs__header.is-left) {
  padding: 30px 0 30px 30px;
  background: #F4F9FE;
  min-width: 280px;
}

.tabFont {
  margin-left: 20px;
}

.flexBody {
  display: flex;background: #fff;margin-bottom: 20px;
}

.infoPart {
  padding: 20px;
  flex: 1;

  & > h3 {
    font-size: 24px;
    color: var(--el-color-primary);
  }
}
.forWei {
  display: none;
}
@media (max-width: 500px) {
  .box{width: 100%}
  .forWei {
    display: block;
  }
  .forPc{display: none}
  :deep(.el-tabs__nav-scroll){overflow: auto;}
  .flexBody{display: block;background: transparent;}
  .infoPart{background: #fff;padding: 10px;margin:0 15px}
  .newsLine{
    .item{height: 50px;
      .date{height: 34px;width: 44px;margin: 0;
        .day{font-size: 16px;}
        p{font-size: 12px;}
      }
      h3{font-size: 14px;}
    }
    .go{display: none;}
    .item-body{width: 80%;}
  }
}
.wTabtop{
  :deep(.el-tabs__header){background: #fff;padding:10px 15px 0;}
  :deep(.el-tabs__content){padding:0 10px;}

}

</style>