<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>
              太湖国际博览中心B馆，总面积3万平米，馆内面积达两万平米， 配置顶级灯光、舞美、音响和全套转播设备，可同时容纳5000名观众， 是国内首屈一指的多功能文体综合馆，也是无锡本地新锐网红地标。
              <br/>
              位置:无锡市经开区清舒道88号<br/>
              商圈:10公里范围内，华润万象城、海岸城等数10个大型商业综合体<br/>
              <img src="@/assets/zhinan/1.png"/>
              <img  src="@/assets/zhinan/2.png"/>
            </div>
            <h4 class="leftboderTT">馆内流线<span>(人员流线)</span></h4>
            <img src="@/assets/zhinan/4.png"/>
            <div>运动队从一楼正大门通过安检进入馆内，乘坐扶梯上二楼，到达 竞赛区域。技术官员乘坐组委会安排通行车辆从场馆北坡道直接到达 二楼平台B5馆出入口进入馆内。</div>
            <div>整个二层按不同的功能分为五个区域，所有人员根据所持证件规 定权限到达不同的区域，红色为VIP区，蓝色为办公工作区，黄色为 观赛区，紫色为竞赛区，粉色为公共区域。</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">
              <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:'参赛场馆介绍'},
  {name:' 注册报到中心   '},
  {name:'证件管理 '},
  {name:'地图指引 '},
  {name:'技术官员与运动队服务 '},
  {name:'医疗服务 '},
  {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;font-size: 16px;
  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>